'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 { DocumentStatus } from '@/lib/api/types/documents.types';
import { CATEGORY_META } from '@/lib/api/mappers/documents.mappers';

interface Props {
  searchTerm: string;
  setSearchTerm: (v: string) => void;
  categoryFilter: string;
  setCategoryFilter: (v: string) => void;
  statusFilter: DocumentStatus | 'all';
  setStatusFilter: (v: DocumentStatus | 'all') => void;
  clearFilters: () => void;
  onRefresh?: () => void;
  showStatusFilter?: boolean;
}

// Only use status values that exist in DocumentStatus type
const STATUS_OPTIONS: { value: DocumentStatus | 'all'; label: string }[] = [
  { value: 'all', label: 'All Statuses' },
  { value: 'active', label: 'Active' },
  { value: 'archived', label: 'Archived' },
];

const CATEGORY_OPTIONS = [
  { value: 'all', label: 'All Categories' },
  ...Object.keys(CATEGORY_META).map((k) => ({
    value: k,
    label: `${CATEGORY_META[k].icon} ${CATEGORY_META[k].label}`,
  })),
];

export default function DocumentsFilters({
  searchTerm,
  setSearchTerm,
  categoryFilter,
  setCategoryFilter,
  statusFilter,
  setStatusFilter,
  clearFilters,
  onRefresh,
  showStatusFilter = true,
}: Props) {
  const activeFilters = [
    searchTerm,
    categoryFilter !== 'all' ? categoryFilter : null,
    statusFilter !== 'all' ? statusFilter : 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 Documents"
            placeholder="Search by title, description..."
            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>

        {/* Category */}
        <select
          className={styles.filterSelect}
          value={categoryFilter}
          onChange={(e) => setCategoryFilter(e.target.value)}
          style={{
            minWidth: 160,
            padding: '7px 12px',
            borderRadius: 8,
            border:
              categoryFilter !== 'all'
                ? '1.5px solid #7c3aed'
                : '1px solid #cbd5e1',
            background: categoryFilter !== 'all' ? '#f5f3ff' : '#fff',
            fontSize: 13,
            fontWeight: 600,
            color: categoryFilter !== 'all' ? '#7c3aed' : '#475569',
            cursor: 'pointer',
            outline: 'none',
          }}
        >
          {CATEGORY_OPTIONS.map((c) => (
            <option key={c.value} value={c.value}>
              {c.label}
            </option>
          ))}
        </select>

        {/* Status - only shown to admins */}
        {showStatusFilter && (
          <select
            className={styles.filterSelect}
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value as DocumentStatus | 'all')}
            style={{
              minWidth: 150,
              padding: '7px 12px',
              borderRadius: 8,
              border:
                statusFilter !== 'all'
                  ? '1.5px solid #0f766e'
                  : '1px solid #cbd5e1',
              background: statusFilter !== 'all' ? '#f0fdfa' : '#fff',
              fontSize: 13,
              fontWeight: 600,
              color: statusFilter !== 'all' ? '#0f766e' : '#475569',
              cursor: 'pointer',
              outline: 'none',
            }}
          >
            {STATUS_OPTIONS.map((s) => (
              <option key={s.value} value={s.value}>
                {s.label}
              </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>
  );
}