"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,
  FiFileText,
  FiBarChart2,
  FiEyeOff,
} from "react-icons/fi";
import { useRouter } from "next/navigation";
import type {
  CertStatus,
  CertType,
} from "@/lib/api/types/certificate.types";

// Type definitions for filters
export type DocumentFilter =
  | "all"
  | "draft_only"
  | "final_only"
  | "pending_issue";
export type DateFilter =
  | "all"
  | "expiring_this_month"
  | "expiring_3_months"
  | "issued_this_month"
  | "issued_this_year";
export type DomainFilter = "all" | "local" | "international";

// ✅ NEW — Month filter type (1-12 or 'all')
export type MonthFilter =
  | "all"
  | "1"
  | "2"
  | "3"
  | "4"
  | "5"
  | "6"
  | "7"
  | "8"
  | "9"
  | "10"
  | "11"
  | "12";

// ✅ NEW — Month filter scope (which date to filter by)
export type MonthScope = "issue" | "expire";

interface Props {
  searchTerm: string;
  setSearchTerm: (v: string) => void;
  statusFilter: CertStatus | "all";
  setStatusFilter: (v: CertStatus | "all") => void;
  typeFilter: CertType | "all";
  setTypeFilter: (v: CertType | "all") => void;
  clearFilters: () => void;
  onRefresh?: () => void;

  showAnalytics?: boolean;
  onAnalyticsToggle?: () => void;

  previousCertHref?: string;

  documentFilter?: DocumentFilter;
  setDocumentFilter?: (v: DocumentFilter) => void;

  dateFilter?: DateFilter;
  setDateFilter?: (v: DateFilter) => void;

  domainFilter?: DomainFilter;
  setDomainFilter?: (v: DomainFilter) => void;

  // ✅ NEW — Month filter props
  monthFilter?: MonthFilter;
  setMonthFilter?: (v: MonthFilter) => void;

  // ✅ NEW — Which date to filter by (issue or expire)
  monthScope?: MonthScope;
  setMonthScope?: (v: MonthScope) => void;
}

const STATUS_OPTIONS: { value: CertStatus | "all"; label: string }[] = [
  { value: "all", label: "All Statuses" },
  { value: "pending_scan", label: "Pending Scan" },
  { value: "active", label: "Active" },
  { value: "superseded", label: "Superseded" },
  { value: "expired", label: "Expired" },
  { value: "revoked", label: "Revoked" },
];

const TYPE_OPTIONS: { value: CertType | "all"; label: string }[] = [
  { value: "all", label: "All Types" },
  { value: "INITIAL", label: "Initial" },
  { value: "SURVEILLANCE", label: "Surveillance" },
  { value: "RECERTIFICATION", label: "Recertification" },
];

const DOCUMENT_OPTIONS: { value: DocumentFilter; label: string }[] = [
  { value: "all", label: "📄 All Documents" },
  { value: "draft_only", label: "📋 Draft Only (no scan)" },
  { value: "final_only", label: "✅ Final Certificate (scanned)" },
  { value: "pending_issue", label: "⏳ Pending Issue" },
];

const DATE_OPTIONS: { value: DateFilter; label: string }[] = [
  { value: "all", label: "📅 All Dates" },
  { value: "expiring_this_month", label: "🔥 Expiring This Month" },
  { value: "expiring_3_months", label: "⚠️ Expiring Next 3 Months" },
  { value: "issued_this_month", label: "🆕 Issued This Month" },
  { value: "issued_this_year", label: "📆 Issued This Year" },
];

const DOMAIN_OPTIONS: { value: DomainFilter; label: string }[] = [
  { value: "all", label: "🌍 All Domains" },
  { value: "local", label: "🇦🇪 Local Only" },
  { value: "international", label: "🌐 International Only" },
];

// ✅ NEW — Month options
const MONTH_OPTIONS: { value: MonthFilter; label: string }[] = [
  { value: "all", label: "📅 All Months" },
  { value: "1", label: "Jan" },
  { value: "2", label: "Feb" },
  { value: "3", label: "Mar" },
  { value: "4", label: "Apr" },
  { value: "5", label: "May" },
  { value: "6", label: "Jun" },
  { value: "7", label: "Jul" },
  { value: "8", label: "Aug" },
  { value: "9", label: "Sep" },
  { value: "10", label: "Oct" },
  { value: "11", label: "Nov" },
  { value: "12", label: "Dec" },
];

export const CertificateFilters = ({
  searchTerm,
  setSearchTerm,
  statusFilter,
  setStatusFilter,
  typeFilter,
  setTypeFilter,
  clearFilters,
  onRefresh,
  showAnalytics = false,
  onAnalyticsToggle,
  previousCertHref = "/modules/excel",
  documentFilter = "all",
  setDocumentFilter,
  dateFilter = "all",
  setDateFilter,
  domainFilter = "all",
  setDomainFilter,
  // ✅ NEW
  monthFilter = "all",
  setMonthFilter,
  monthScope = "issue",
  setMonthScope,
}: Props) => {
  const router = useRouter();

  // ✅ Count active filters for badge
  const activeFilterCount = [
    statusFilter !== "all",
    typeFilter !== "all",
    documentFilter !== "all",
    dateFilter !== "all",
    domainFilter !== "all",
    monthFilter !== "all",
  ].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 Certificates"
            placeholder="Search by cert no or company name..."
            className={styles.searchInput}
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>

        <div className={styles.toolbarActions}>
          {/* 📈 Reports button */}
          <button
            title="View Certificate Reports"
            onClick={() => router.push("/modules/certificates/report")}
            style={{
              display: "flex",
              alignItems: "center",
              gap: "6px",
              padding: "8px 16px",
              background: "linear-gradient(135deg, #0f766e 0%, #14b8a6 100%)",
              color: "white",
              border: "none",
              borderRadius: "8px",
              fontSize: "0.875rem",
              fontWeight: "600",
              cursor: "pointer",
              boxShadow: "0 2px 8px rgba(15,118,110,0.3)",
              whiteSpace: "nowrap",
              transition: "transform 0.15s, box-shadow 0.15s",
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.transform = "translateY(-1px)";
              e.currentTarget.style.boxShadow =
                "0 4px 12px rgba(15,118,110,0.4)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.transform = "translateY(0)";
              e.currentTarget.style.boxShadow =
                "0 2px 8px rgba(15,118,110,0.3)";
            }}
          >
            <FiFileText size={16} /> Reports
          </button>

          {/* 📊 Analytics inline toggle button */}
          {onAnalyticsToggle && (
            <button
              title={showAnalytics ? "Hide Analytics" : "Show Analytics"}
              onClick={onAnalyticsToggle}
              style={{
                display: "flex",
                alignItems: "center",
                gap: "6px",
                padding: "8px 16px",
                background: showAnalytics
                  ? "linear-gradient(135deg, #10b981 0%, #059669 100%)"
                  : "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
                color: "white",
                border: "none",
                borderRadius: "8px",
                fontSize: "0.875rem",
                fontWeight: 600,
                cursor: "pointer",
                boxShadow: showAnalytics
                  ? "0 2px 8px rgba(16,185,129,0.3)"
                  : "0 2px 8px rgba(102,126,234,0.3)",
                whiteSpace: "nowrap",
                transition: "transform 0.15s, box-shadow 0.15s",
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = "translateY(-1px)";
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = "translateY(0)";
              }}
            >
              {showAnalytics ? (
                <>
                  <FiEyeOff size={16} /> Hide Analytics
                </>
              ) : (
                <>
                  <FiBarChart2 size={16} /> Analytics
                </>
              )}
            </button>
          )}

          {/* 📋 Previous Certificate button */}
          <button
            title="Previous Certificates (Legacy + Overseas + Migrated)"
            onClick={() => router.push(previousCertHref)}
            style={{
              display: "flex",
              alignItems: "center",
              gap: "6px",
              padding: "8px 16px",
              background: "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)",
              color: "white",
              border: "none",
              borderRadius: "8px",
              fontSize: "0.875rem",
              fontWeight: 600,
              cursor: "pointer",
              boxShadow: "0 2px 8px rgba(245,158,11,0.3)",
              whiteSpace: "nowrap",
              transition: "transform 0.15s, box-shadow 0.15s",
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.transform = "translateY(-1px)";
              e.currentTarget.style.boxShadow =
                "0 4px 12px rgba(245,158,11,0.4)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.transform = "translateY(0)";
              e.currentTarget.style.boxShadow =
                "0 2px 8px rgba(245,158,11,0.3)";
            }}
          >
            📋 Previous Certificates
          </button>

          <button className={styles.btnIcon} title="Export to Excel">
            📤
          </button>
          <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={{ flexWrap: "wrap", gap: 8 }}
      >
        {/* Status Filter */}
        <div className={styles.filterGroup}>
          <select
            className={styles.filterSelect}
            value={statusFilter}
            onChange={(e) =>
              setStatusFilter(e.target.value as CertStatus | "all")
            }
          >
            {STATUS_OPTIONS.map((s) => (
              <option key={s.value} value={s.value}>
                {s.label}
              </option>
            ))}
          </select>
        </div>

        {/* Type Filter */}
        <div className={styles.filterGroup}>
          <select
            className={styles.filterSelect}
            value={typeFilter}
            onChange={(e) =>
              setTypeFilter(e.target.value as CertType | "all")
            }
          >
            {TYPE_OPTIONS.map((t) => (
              <option key={t.value} value={t.value}>
                {t.label}
              </option>
            ))}
          </select>
        </div>

        {/* Document Filter */}
        {setDocumentFilter && (
          <div className={styles.filterGroup}>
            <select
              className={styles.filterSelect}
              value={documentFilter}
              onChange={(e) =>
                setDocumentFilter(e.target.value as DocumentFilter)
              }
              style={{
                borderColor:
                  documentFilter !== "all" ? "#14b8a6" : undefined,
                fontWeight: documentFilter !== "all" ? 600 : undefined,
              }}
            >
              {DOCUMENT_OPTIONS.map((d) => (
                <option key={d.value} value={d.value}>
                  {d.label}
                </option>
              ))}
            </select>
          </div>
        )}

        {/* Date Filter */}
        {setDateFilter && (
          <div className={styles.filterGroup}>
            <select
              className={styles.filterSelect}
              value={dateFilter}
              onChange={(e) => setDateFilter(e.target.value as DateFilter)}
              style={{
                borderColor: dateFilter !== "all" ? "#f59e0b" : undefined,
                fontWeight: dateFilter !== "all" ? 600 : undefined,
              }}
            >
              {DATE_OPTIONS.map((d) => (
                <option key={d.value} value={d.value}>
                  {d.label}
                </option>
              ))}
            </select>
          </div>
        )}

        {/* ✅ NEW — Month Filter (Jan-Dec) */}
        {setMonthFilter && (
          <div
            className={styles.filterGroup}
            style={{ display: "flex", gap: 4 }}
          >
            <select
              className={styles.filterSelect}
              value={monthFilter}
              onChange={(e) => setMonthFilter(e.target.value as MonthFilter)}
              style={{
                borderColor: monthFilter !== "all" ? "#a855f7" : undefined,
                fontWeight: monthFilter !== "all" ? 600 : undefined,
              }}
              title="Filter by specific month"
            >
              {MONTH_OPTIONS.map((m) => (
                <option key={m.value} value={m.value}>
                  {m.label}
                </option>
              ))}
            </select>

            {/* ✅ Scope toggle — only show when month is selected */}
            {monthFilter !== "all" && setMonthScope && (
              <select
                className={styles.filterSelect}
                value={monthScope}
                onChange={(e) =>
                  setMonthScope(e.target.value as MonthScope)
                }
                style={{
                  borderColor: "#a855f7",
                  fontWeight: 600,
                  fontSize: "0.8rem",
                }}
                title="Filter month by Issue or Expire date"
              >
                <option value="issue">📆 Issue</option>
                <option value="expire">⏰ Expire</option>
              </select>
            )}
          </div>
        )}

        {/* Domain Filter */}
        {setDomainFilter && (
          <div className={styles.filterGroup}>
            <select
              className={styles.filterSelect}
              value={domainFilter}
              onChange={(e) =>
                setDomainFilter(e.target.value as DomainFilter)
              }
              style={{
                borderColor: domainFilter !== "all" ? "#3b82f6" : undefined,
                fontWeight: domainFilter !== "all" ? 600 : undefined,
              }}
            >
              {DOMAIN_OPTIONS.map((d) => (
                <option key={d.value} value={d.value}>
                  {d.label}
                </option>
              ))}
            </select>
          </div>
        )}

        {/* Active filter count badge */}
        {activeFilterCount > 0 && (
          <span
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 4,
              padding: "6px 10px",
              background: "linear-gradient(135deg, #0f766e 0%, #14b8a6 100%)",
              color: "white",
              borderRadius: 6,
              fontSize: 12,
              fontWeight: 600,
            }}
          >
            🔍 {activeFilterCount} active filter
            {activeFilterCount > 1 ? "s" : ""}
          </span>
        )}

        <button
          className={styles.clearFiltersBtn}
          onClick={clearFilters}
          type="button"
        >
          ✕ Clear Filters
        </button>
      </div>
    </div>
  );
};

export default CertificateFilters;