"use client";

import React, { useMemo } from "react";
import styles from "../commonstyle/dattabale.module.css";
import { FaSearchLocation } from "react-icons/fa";
import { FcPrint } from "react-icons/fc";
import { FiBarChart2, FiRefreshCw, FiEyeOff, FiFileText } from "react-icons/fi";
import { useRouter } from "next/navigation";

interface CompanyFiltersProps {
  searchTerm: string;
  setSearchTerm: (v: string) => void;
  cityFilter: string;
  setCityFilter: (v: string) => void;
  standardFilter: string;
  setStandardFilter: (v: string) => void;
  monthFilter: string;          // ✅ added
  setMonthFilter: (v: string) => void;  // ✅ added
  startDate: string;
  setStartDate: (v: string) => void;
  endDate: string;
  setEndDate: (v: string) => void;
  cities?: string[];
  clearFilters: () => void;
  onRefresh?: () => void;
  onAnalyticsToggle?: () => void;
  showAnalytics?: boolean;
}

const STANDARDS = [
  { value: "all",            label: "All Standards"  },
  { value: "ISO 9001:2015",  label: "ISO 9001:2015"  },
  { value: "ISO 14001:2015", label: "ISO 14001:2015" },
  { value: "ISO 45001:2018", label: "ISO 45001:2018" },
];

const MONTHS = [
  { 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"    },
];

export const CompanyFilters = ({
  searchTerm, setSearchTerm,
  cityFilter, setCityFilter,
  standardFilter, setStandardFilter,
  monthFilter, setMonthFilter,
  startDate, setStartDate,
  endDate, setEndDate,
  cities = [],
  clearFilters, onRefresh, onAnalyticsToggle, showAnalytics = false,
}: CompanyFiltersProps) => {
  const router = useRouter();

  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 Companies"
            placeholder="Search by name, code, contact, email..."
            className={styles.searchInput}
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>

        <div className={styles.toolbarActions}>
          <button
            title="View Company Reports"
            onClick={() => router.push("/modules/companies/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)" }}
          >
            <FiFileText size={16} /> Reports
          </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,#059669)" : "linear-gradient(135deg,#667eea,#764ba2)", color: "white", border: "none", borderRadius: "8px", fontSize: "0.875rem", fontWeight: "600", cursor: "pointer" }}
            >
              {showAnalytics ? <><FiEyeOff size={16} /> Hide Analytics</> : <><FiBarChart2 size={16} /> Analytics</>}
            </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}>

        <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>

        {/* ✅ Month filter */}
        <div className={styles.filterGroup}>
          <select
            className={styles.filterSelect}
            value={monthFilter}
            onChange={(e) => setMonthFilter(e.target.value)}
          >
            {MONTHS.map((m) => (
              <option key={m.value} value={m.value}>{m.label}</option>
            ))}
          </select>
        </div>

        <div className={styles.filterGroup}>
          <select
            className={styles.filterSelect}
            value={cityFilter}
            onChange={(e) => setCityFilter(e.target.value)}
          >
            <option value="all">All Cities</option>
            {cities.map((c) => <option key={c} value={c}>{c}</option>)}
          </select>
        </div>

        <div className={styles.filterGroup}>
          <select
            className={styles.filterSelect}
            value={standardFilter}
            onChange={(e) => setStandardFilter(e.target.value)}
          >
            {STANDARDS.map((s) => <option key={s.value} value={s.value}>{s.label}</option>)}
          </select>
        </div>

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

export default CompanyFilters;