"use client";

import React from "react";
import styles from "../../modules/commonstyle/dattabale.module.css";

interface Props {
  searchTerm: string;
  setSearchTerm: (v: string) => void;
  standardFilter: string;
  setStandardFilter: (v: string) => void;
  statusFilter: string;
  setStatusFilter: (v: string) => void;
  clearFilters: () => void;
  onRefresh: () => void;
  onImport: () => void;
}

const STANDARD_FILTER_OPTIONS = [
  { value: "all", label: "All Standards" },
  { value: "9001", label: "ISO 9001 (QMS)" },
  { value: "14001", label: "ISO 14001 (EMS)" },
  { value: "45001", label: "ISO 45001 (OHA)" },
  { value: "22000", label: "ISO 22000 (FSMS)" },
  { value: "IMS", label: "IMS (Integrated)" },
  { value: "HACCP", label: "HACCP" },
  { value: "HALAL", label: "HALAL" },
  { value: "HALAL", label: "HALAL" },
];

const STATUS_FILTER_OPTIONS = [
  { value: "all", label: "All Sources" },
  { value: "QRS", label: "QRS (UAE)" },
  { value: "TQS", label: "TQS (Overseas)" },
  { value: "MIGRATION", label: "MIGRATION" },
];

export function LegacyFilters({
  searchTerm,
  setSearchTerm,
  standardFilter,
  setStandardFilter,
  statusFilter,
  setStatusFilter,
  clearFilters,
  onRefresh,
  onImport,
}: Props) {
  const hasFilters =
    !!searchTerm || standardFilter !== "all" || statusFilter !== "all";

  return (
    <div
      style={{
        display: "flex",
        flexWrap: "wrap",
        alignItems: "center",
        gap: 10,
        padding: "12px 16px",
        marginBottom: 12,
        backgroundColor: "#fff",
        border: "1px solid #e5e7eb",
        borderRadius: 10,
      }}
    >
      {/* Search */}
      <div style={{ flex: "1 1 240px", minWidth: 220 }}>
        <input
          type="text"
          placeholder="🔍 Search cert no or company..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          style={{
            width: "100%",
            padding: "9px 12px",
            border: "1.5px solid #e5e7eb",
            borderRadius: 8,
            fontSize: 13,
            outline: "none",
            transition: "border-color 0.15s",
          }}
          onFocus={(e) => (e.currentTarget.style.borderColor = "#14b8a6")}
          onBlur={(e) => (e.currentTarget.style.borderColor = "#e5e7eb")}
        />
      </div>

      {/* Standard filter */}
      <select
        value={standardFilter}
        onChange={(e) => setStandardFilter(e.target.value)}
        style={{
          padding: "9px 12px",
          border: "1.5px solid #e5e7eb",
          borderRadius: 8,
          fontSize: 13,
          backgroundColor: "#fff",
          cursor: "pointer",
          minWidth: 160,
        }}
      >
        {STANDARD_FILTER_OPTIONS.map((o) => (
          <option key={o.value} value={o.value}>
            {o.label}
          </option>
        ))}
      </select>

      {/* Status/Source filter */}
      <select
        value={statusFilter}
        onChange={(e) => setStatusFilter(e.target.value)}
        style={{
          padding: "9px 12px",
          border: "1.5px solid #e5e7eb",
          borderRadius: 8,
          fontSize: 13,
          backgroundColor: "#fff",
          cursor: "pointer",
          minWidth: 140,
        }}
      >
        {STATUS_FILTER_OPTIONS.map((o) => (
          <option key={o.value} value={o.value}>
            {o.label}
          </option>
        ))}
      </select>

      {/* Clear filters */}
      {hasFilters && (
        <button
          onClick={clearFilters}
          style={{
            padding: "9px 14px",
            border: "1px solid #fca5a5",
            backgroundColor: "#fef2f2",
            color: "#b91c1c",
            borderRadius: 8,
            cursor: "pointer",
            fontSize: 12,
            fontWeight: 600,
          }}
        >
          ✕ Clear
        </button>
      )}

      {/* Spacer */}
      <div style={{ flex: 1 }} />

      {/* Refresh */}
      <button
        onClick={onRefresh}
        style={{
          padding: "9px 14px",
          border: "1px solid #e5e7eb",
          backgroundColor: "#fff",
          color: "#475569",
          borderRadius: 8,
          cursor: "pointer",
          fontSize: 13,
          fontWeight: 600,
          display: "inline-flex",
          alignItems: "center",
          gap: 4,
        }}
        title="Refresh"
      >
        🔄 Refresh
      </button>

      {/* Import */}
      <button
        onClick={onImport}
        style={{
          padding: "9px 16px",
          border: "1px solid #6366f1",
          backgroundColor: "#eef2ff",
          color: "#4f46e5",
          borderRadius: 8,
          cursor: "pointer",
          fontSize: 13,
          fontWeight: 700,
          display: "inline-flex",
          alignItems: "center",
          gap: 6,
        }}
      >
        📥 Import Excel
      </button>
    </div>
  );
}