'use client';

import React from 'react';
import styles from '../commonstyle/dattabale.module.css';
import { FaSearchLocation } from 'react-icons/fa';
import { FcPrint } from 'react-icons/fc';
import { FiRefreshCw } from 'react-icons/fi';
import type { Standard } from '@/lib/api/types/checklist.types';

export type TemplateTypeFilter = 'all' | 'generic' | 'specific';
export type StandardFilter = number | 'all';

interface Props {
  searchTerm: string;
  setSearchTerm: (v: string) => void;

  typeFilter: TemplateTypeFilter;
  setTypeFilter: (v: TemplateTypeFilter) => void;

  standardFilter: StandardFilter;
  setStandardFilter: (v: StandardFilter) => void;

  standards: Standard[];

  clearFilters: () => void;
  onRefresh?: () => void;
}

const TYPE_OPTIONS: { value: TemplateTypeFilter; label: string }[] = [
  { value: 'all', label: 'All Templates' },
  { value: 'generic', label: '🌐 Generic — every audit' },
  { value: 'specific', label: '🎯 Standard-specific' },
];

// ─────────────────────────────────────────────────────────────────
// Mirrors MyAuditsFilters exactly:
//  · top row  — searchBox + toolbarActions (Print / Refresh icons)
//  · bottom row — "🔍 FILTERS:" pill selects with colored active
//    states (purple = type, teal = standard) + red "✕ Clear (n)"
// ─────────────────────────────────────────────────────────────────
export const ChecklistTemplatesFilters = ({
  searchTerm,
  setSearchTerm,
  typeFilter,
  setTypeFilter,
  standardFilter,
  setStandardFilter,
  standards,
  clearFilters,
  onRefresh,
}: Props) => {
  const activeFilters = [
    searchTerm,
    typeFilter !== 'all' ? typeFilter : null,
    standardFilter !== 'all' ? String(standardFilter) : null,
  ].filter(Boolean).length;

  return (
    <div className={styles.toolbar}>
      {/* ── Top Row ── */}
      <div className={styles.toolbarTop}>
        <div className={styles.searchBox}>
          <span className={styles.searchIcon}>
            <FaSearchLocation />
          </span>
          <input
            type="text"
            aria-label="Search Checklist Templates"
            placeholder="Search by template name, standard, checklist item..."
            className={styles.searchInput}
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>

        <div className={styles.toolbarActions}>
          <button className={styles.btnIcon} title="Print">
            <FcPrint />
          </button>
          <button
            className={styles.btnIcon}
            title="Refresh"
            onClick={onRefresh}
          >
            <FiRefreshCw size={16} />
          </button>
        </div>
      </div>

      {/* ── Bottom Row: Filters ── */}
      <div
        className={styles.toolbarFilters}
        style={{
          display: 'flex',
          flexWrap: 'wrap',
          alignItems: 'center',
          gap: 10,
          padding: '12px 14px',
          background: '#f8fafc',
          border: '1px solid #e2e8f0',
          borderRadius: 10,
        }}
      >
        <span
          style={{
            fontSize: 11,
            fontWeight: 700,
            color: '#64748b',
            textTransform: 'uppercase',
            letterSpacing: '0.05em',
            marginRight: 4,
          }}
        >
          🔍 Filters:
        </span>

        {/* Template type (purple accent — same as category on My Audits) */}
        <select
          className={styles.filterSelect}
          value={typeFilter}
          onChange={(e) => setTypeFilter(e.target.value as TemplateTypeFilter)}
          style={{
            minWidth: 190,
            padding: '7px 12px',
            borderRadius: 8,
            border:
              typeFilter !== 'all'
                ? '1.5px solid #7c3aed'
                : '1px solid #cbd5e1',
            background: typeFilter !== 'all' ? '#f5f3ff' : '#fff',
            fontSize: 13,
            fontWeight: 600,
            color: typeFilter !== 'all' ? '#7c3aed' : '#475569',
            cursor: 'pointer',
            outline: 'none',
          }}
        >
          {TYPE_OPTIONS.map((t) => (
            <option key={t.value} value={t.value}>
              {t.label}
            </option>
          ))}
        </select>

        {/* Standard (teal accent — same as status on My Audits) */}
        <select
          className={styles.filterSelect}
          value={standardFilter === 'all' ? 'all' : String(standardFilter)}
          onChange={(e) =>
            setStandardFilter(
              e.target.value === 'all' ? 'all' : Number(e.target.value),
            )
          }
          style={{
            minWidth: 170,
            padding: '7px 12px',
            borderRadius: 8,
            border:
              standardFilter !== 'all'
                ? '1.5px solid #0f766e'
                : '1px solid #cbd5e1',
            background: standardFilter !== 'all' ? '#f0fdfa' : '#fff',
            fontSize: 13,
            fontWeight: 600,
            color: standardFilter !== 'all' ? '#0f766e' : '#475569',
            cursor: 'pointer',
            outline: 'none',
          }}
        >
          <option value="all">All Standards</option>
          {standards.map((s) => (
            <option key={s.id} value={String(s.id)}>
              {s.name}
            </option>
          ))}
        </select>

        {activeFilters > 0 && (
          <button
            onClick={clearFilters}
            type="button"
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 5,
              padding: '7px 14px',
              borderRadius: 8,
              border: '1px solid #fca5a5',
              background: '#fef2f2',
              color: '#dc2626',
              cursor: 'pointer',
              fontSize: 12,
              fontWeight: 700,
              marginLeft: 'auto',
            }}
            title={`Clear ${activeFilters} active filter${activeFilters > 1 ? 's' : ''}`}
          >
            ✕ Clear ({activeFilters})
          </button>
        )}
      </div>
    </div>
  );
};

export default ChecklistTemplatesFilters;