"use client";

import React from "react";
import styles from "../commonstyle/dattabale.module.css";
import { FaSearchLocation } from "react-icons/fa";
import { FiRefreshCw, FiFileText, FiBarChart2, FiDownload } from "react-icons/fi";

interface SelectOption { value: number | string; label: string; }

interface CompanyAuditFiltersProps {
  searchTerm:      string;
  setSearchTerm:   (v: string) => void;
  statusFilter:    string;
  setStatusFilter: (v: string) => void;
  stageFilter:     string;
  setStageFilter:  (v: string) => void;
  startDate:       string;
  setStartDate:    (v: string) => void;
  endDate:         string;
  setEndDate:      (v: string) => void;
  stageOptions?:   SelectOption[];
  clearFilters:    () => void;
  onRefresh?:      () => void;
  // Export & Analytics handlers
  onExportPdf?:    () => void;
  onExportExcel?:  () => void;
  onAnalyticsToggle?: () => void;
  showAnalytics?:  boolean;
  // Month / Year filters
  monthFilter?:    string;
  setMonthFilter?: (v: string) => void;
  yearFilter?:     string;
  setYearFilter?:  (v: string) => void;
}

const STATUS_OPTIONS = [
  { value: "all",         label: "All Statuses"  },
  { value: "Planned",     label: "Planned"       },
  { value: "Scheduled",   label: "Scheduled"     },
  { value: "In Progress", label: "In Progress"   },
  { value: "Completed",   label: "Completed"     },
  { value: "Cancelled",   label: "Cancelled"     },
];

// ✅ FIXED — Only these four stage options. No more server-provided extras.
const STAGE_OPTIONS = [
  { value: "all",             label: "All Stages"      },
  { value: "Stage 1",         label: "Stage 1"         },
  { value: "Stage 2",         label: "Stage 2"         },
  { value: "Surveillance",    label: "Surveillance"    },
  { value: "Recertification", label: "Recertification" },
];

// Months Jan–Dec (value is 2-digit month number)
const MONTH_OPTIONS = [
  { value: "all", label: "All Months" },
  { value: "01",  label: "January"   },
  { value: "02",  label: "February"  },
  { value: "03",  label: "March"     },
  { value: "04",  label: "April"     },
  { value: "05",  label: "May"       },
  { value: "06",  label: "June"      },
  { value: "07",  label: "July"      },
  { value: "08",  label: "August"    },
  { value: "09",  label: "September" },
  { value: "10",  label: "October"   },
  { value: "11",  label: "November"  },
  { value: "12",  label: "December"  },
];

// Year options (current ± 5)
const currentYear = new Date().getFullYear();
const YEAR_OPTIONS = [
  { value: "all", label: "All Years" },
  ...Array.from({ length: 11 }, (_, i) => {
    const y = String(currentYear - 5 + i);
    return { value: y, label: y };
  }),
];

const statusColors: Record<string, { bg: string; text: string }> = {
  Planned:       { bg: "#eff6ff", text: "#1d4ed8" },
  Scheduled:     { bg: "#eff6ff", text: "#1d4ed8" },
  "In Progress": { bg: "#fefce8", text: "#854d0e" },
  Completed:     { bg: "#f0fdf4", text: "#166534" },
  Cancelled:     { bg: "#fef2f2", text: "#991b1b" },
};

export function getStatusBadge(status: string) {
  const c = statusColors[status] ?? { bg: "#f3f4f6", text: "#6b7280" };
  return (
    <span style={{
      padding: "3px 10px", borderRadius: 12, fontSize: 11, fontWeight: 600,
      backgroundColor: c.bg, color: c.text,
    }}>
      {status || "—"}
    </span>
  );
}

export function CompanyAuditFilters({
  searchTerm,    setSearchTerm,
  statusFilter,  setStatusFilter,
  stageFilter,   setStageFilter,
  startDate,     setStartDate,
  endDate,       setEndDate,
  stageOptions = [], // kept in props for compatibility, but no longer rendered
  clearFilters,  onRefresh,
  onExportPdf, onExportExcel, onAnalyticsToggle, showAnalytics = false,
  // Month / Year
  monthFilter = "all", setMonthFilter,
  yearFilter  = "all", setYearFilter,
}: CompanyAuditFiltersProps) {
  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 Audits"
            placeholder="Search by company, auditor, stage, findings..."
            className={styles.searchInput}
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>

        <div className={styles.toolbarActions}>
          {/* Export PDF button */}
          <button
            onClick={onExportPdf}
            title="Export to PDF"
            style={{
              display: "flex", alignItems: "center", gap: 6,
              padding: "8px 16px",
              background: "linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%)",
              color: "white", border: "none", borderRadius: 8,
              fontSize: "0.875rem", fontWeight: 600, cursor: "pointer",
              boxShadow: "0 2px 8px rgba(37,99,235,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(37,99,235,0.4)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.transform = "translateY(0)";
              e.currentTarget.style.boxShadow = "0 2px 8px rgba(37,99,235,0.3)";
            }}
          >
            <FiFileText size={16} /> Export PDF
          </button>

          {/* Analytics button */}
          <button
            onClick={onAnalyticsToggle}
            title={showAnalytics ? "Hide Analytics" : "Show Analytics"}
            style={{
              display: "flex", alignItems: "center", gap: 6,
              padding: "8px 16px",
              background: showAnalytics
                ? "linear-gradient(135deg, #10b981 0%, #059669 100%)"
                : "linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%)",
              color: "white", border: "none", borderRadius: 8,
              fontSize: "0.875rem", fontWeight: 600, cursor: "pointer",
              boxShadow: showAnalytics
                ? "0 2px 8px rgba(16,185,129,0.3)"
                : "0 2px 8px rgba(124,58,237,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)"; }}
          >
            <FiBarChart2 size={16} /> Analytics
          </button>

          {/* Export Excel button */}
          <button
            onClick={onExportExcel}
            title="Export to Excel"
            style={{
              display: "flex", alignItems: "center", gap: 6,
              padding: "8px 16px",
              background: "linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%)",
              color: "white", border: "none", borderRadius: 8,
              fontSize: "0.875rem", fontWeight: 600, cursor: "pointer",
              boxShadow: "0 2px 8px rgba(37,99,235,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(37,99,235,0.4)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.transform = "translateY(0)";
              e.currentTarget.style.boxShadow = "0 2px 8px rgba(37,99,235,0.3)";
            }}
          >
            <FiDownload size={16} /> Export Excel
          </button>

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

      {/* ── Bottom row: filter controls ── */}
      <div className={styles.toolbarFilters} style={{ flexWrap: "wrap", gap: 8 }}>
        {/* Month filter */}
        <div className={styles.filterGroup}>
          <label className={styles.filterLabel}>Month:</label>
          <select
            className={styles.filterSelect}
            value={monthFilter}
            onChange={(e) => setMonthFilter?.(e.target.value)}
          >
            {MONTH_OPTIONS.map((m) => (
              <option key={m.value} value={m.value}>{m.label}</option>
            ))}
          </select>
        </div>

        {/* Year filter */}
        <div className={styles.filterGroup}>
          <label className={styles.filterLabel}>Year:</label>
          <select
            className={styles.filterSelect}
            value={yearFilter}
            onChange={(e) => setYearFilter?.(e.target.value)}
          >
            {YEAR_OPTIONS.map((y) => (
              <option key={y.value} value={y.value}>{y.label}</option>
            ))}
          </select>
        </div>

        {/* Custom date range */}
        <div className={styles.filterGroup}>
          <label className={styles.filterLabel}>Start Date:</label>
          <input
            type="date"
            value={startDate}
            onChange={(e) => setStartDate(e.target.value)}
            className={styles.filterSelect}
          />
        </div>

        <div className={styles.filterGroup}>
          <label className={styles.filterLabel}>End Date:</label>
          <input
            type="date"
            value={endDate}
            onChange={(e) => setEndDate(e.target.value)}
            className={styles.filterSelect}
          />
        </div>

        {/* Status filter */}
        <div className={styles.filterGroup}>
          <select
            className={styles.filterSelect}
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
          >
            {STATUS_OPTIONS.map((o) => (
              <option key={o.value} value={o.value}>{o.label}</option>
            ))}
          </select>
        </div>

        {/* ✅ FIXED — Audit Stage dropdown: ONLY the four fixed options now */}
        <div className={styles.filterGroup}>
          <select
            className={styles.filterSelect}
            value={stageFilter}
            onChange={(e) => setStageFilter(e.target.value)}
          >
            {STAGE_OPTIONS.map((s) => (
              <option key={s.value} value={String(s.value)}>{s.label}</option>
            ))}
            {/* NOTE: server-provided stageOptions removed from rendering on purpose.
                Prop is still accepted to avoid breaking the parent. */}
          </select>
        </div>

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

export default CompanyAuditFilters;