"use client";

import React from "react";
import styles from "../commonstyle/dattabale.module.css";
import { FaSearchLocation } from "react-icons/fa";
import { FiRefreshCw, FiBarChart2, FiEyeOff, FiUser } from "react-icons/fi";
import type { AuditRequestStatus } from "@/lib/api/types/audit-request.types";

// ─── Filter types ──────────────────────────────────────────────────────────
export type DatePreset =
  | "all"
  | "today"
  | "this_week"
  | "this_month"
  | "next_month"
  | "past";

// ✅ Same shape as the Inquiry module's SubmitterOption
export interface SubmitterOption {
  id: number;
  firstName?: string;
  lastName?: string;
  email?: string;
}

// ✅ Same display-label helper as InquiryFilters
const formatSubmitter = (u: SubmitterOption): string => {
  const name = `${u.firstName ?? ""} ${u.lastName ?? ""}`.trim();
  if (name) return name;
  if (u.email) return u.email;
  return `User #${u.id}`;
};

interface Props {
  searchTerm: string;
  setSearchTerm: (v: string) => void;
  statusFilter: AuditRequestStatus | "all";
  setStatusFilter: (v: AuditRequestStatus | "all") => void;
  datePreset: DatePreset;
  setDatePreset: (v: DatePreset) => void;
  clearFilters: () => void;
  onRefresh?: () => void;
  showAnalytics?: boolean;
  onAnalyticsToggle?: () => void;

  monthFilter: number | "all"; // 0=Jan ... 11=Dec, or "all"
  setMonthFilter: (v: number | "all") => void;
  yearFilter: number | "all";
  setYearFilter: (v: number | "all") => void;
  customFrom: string; // "YYYY-MM-DD"
  setCustomFrom: (v: string) => void;
  customTo: string;
  setCustomTo: (v: string) => void;

  // ✅ User filter — SAME pattern as InquiryFilters:
  // only visible when showUserFilter is true (super admin / scheme)
  showUserFilter?: boolean;
  userFilter?: string; // "all" or String(user.id)
  setUserFilter?: (v: string) => void;
  submitters?: SubmitterOption[];
}

const STATUS_OPTIONS: { value: AuditRequestStatus | "all"; label: string }[] = [
  { value: "all", label: "All Statuses" },
  { value: "DRAFT", label: "📝 Draft" },
  { value: "SUBMITTED", label: "📤 Submitted" },
  { value: "UNDER_REVIEW", label: "👀 Under Review" },
  { value: "SCHEDULED", label: "✅ Scheduled" },
  { value: "REJECTED", label: "❌ Rejected" },
  { value: "CANCELLED", label: "🚫 Cancelled" },
  { value: "COMPLETED", label: "🏁 Completed" },
];

const DATE_OPTIONS: { value: DatePreset; label: string }[] = [
  { value: "all", label: "📅 All Dates" },
  { value: "today", label: "📍 Today" },
  { value: "this_week", label: "🗓️ This Week" },
  { value: "this_month", label: "📆 This Month" },
  { value: "next_month", label: "⏭️ Next Month" },
  { value: "past", label: "🕰️ Past" },
];

const MONTH_OPTIONS: { value: number | "all"; label: string }[] = [
  { value: "all", label: "📅 All Months" },
  { value: 0, label: "January" },
  { value: 1, label: "February" },
  { value: 2, label: "March" },
  { value: 3, label: "April" },
  { value: 4, label: "May" },
  { value: 5, label: "June" },
  { value: 6, label: "July" },
  { value: 7, label: "August" },
  { value: 8, label: "September" },
  { value: 9, label: "October" },
  { value: 10, label: "November" },
  { value: 11, label: "December" },
];

// Year list: current year ± a few. Adjust the range if you need older data.
const YEAR_OPTIONS: { value: number | "all"; label: string }[] = [
  { value: "all", label: "🗓️ All Years" },
  ...Array.from({ length: 6 }, (_, i) => {
    const y = new Date().getFullYear() - 2 + i; // 2 years back → 3 ahead
    return { value: y, label: String(y) };
  }),
];

export const AuditRequestFilters = ({
  searchTerm,
  setSearchTerm,
  statusFilter,
  setStatusFilter,
  datePreset,
  setDatePreset,
  clearFilters,
  onRefresh,
  showAnalytics = false,
  onAnalyticsToggle,
  monthFilter,
  setMonthFilter,
  yearFilter,
  setYearFilter,
  customFrom,
  setCustomFrom,
  customTo,
  setCustomTo,
  showUserFilter = false,
  userFilter = "all",
  setUserFilter,
  submitters = [],
}: Props) => {
  const activeFilterCount = [
    statusFilter !== "all",
    datePreset !== "all",
    monthFilter !== "all",
    yearFilter !== "all",
    userFilter !== "all", // ✅ count user filter too
    !!customFrom,
    !!customTo,
  ].filter(Boolean).length;

  return (
    <div className={styles.toolbar}>
      {/* ─── Top Row: Search + Actions ─── */}
      <div className={styles.toolbarTop}>
        <div className={styles.searchBox}>
          <span className={styles.searchIcon}>
            <FaSearchLocation />
          </span>
          <input
            type="text"
            aria-label="Search Audit Requests"
            placeholder="Search by company, auditee, email, request id..."
            className={styles.searchInput}
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>

        <div className={styles.toolbarActions}>
          {/* Stats toggle */}
          {onAnalyticsToggle && (
            <button
              title={showAnalytics ? "Hide analytics" : "Show analytics"}
              onClick={onAnalyticsToggle}
              style={{
                display: "flex",
                alignItems: "center",
                gap: 6,
                padding: "8px 16px",
                background: showAnalytics
                  ? "linear-gradient(135deg, #475569 0%, #64748b 100%)"
                  : "linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%)",
                color: "white",
                border: "none",
                borderRadius: 8,
                fontSize: "0.875rem",
                fontWeight: 600,
                cursor: "pointer",
                boxShadow: "0 2px 8px rgba(109,40,217,0.3)",
                whiteSpace: "nowrap",
              }}
            >
              {showAnalytics ? <FiEyeOff size={14} /> : <FiBarChart2 size={14} />}
              {showAnalytics ? "Hide Stats" : "Stats"}
            </button>
          )}

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

      {/* ─── Bottom Row: Filters ─── */}
      <div
        className={styles.toolbarFilters}
        style={{ flexWrap: "wrap", gap: 8 }}
      >
        {/* Status */}
        <div className={styles.filterGroup}>
          <select
            className={styles.filterSelect}
            value={statusFilter}
            onChange={(e) =>
              setStatusFilter(e.target.value as AuditRequestStatus | "all")
            }
            style={{
              borderColor: statusFilter !== "all" ? "#8b14d4" : undefined,
              fontWeight: statusFilter !== "all" ? 600 : undefined,
            }}
          >
            {STATUS_OPTIONS.map((s) => (
              <option key={s.value} value={s.value}>
                {s.label}
              </option>
            ))}
          </select>
        </div>

        {/* ✅ User filter — SAME as Inquiry module: /users list, filter by id,
            teal accent, only shown when showUserFilter is true */}
        {showUserFilter && setUserFilter && (
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 6,
              padding: "4px 10px 4px 8px",
              borderRadius: 8,
              background: userFilter !== "all" ? "#ecfeff" : "transparent",
              border:
                userFilter !== "all"
                  ? "1px solid #67e8f9"
                  : "1px solid transparent",
            }}
          >
            <FiUser size={14} style={{ color: "#0891b2", flexShrink: 0 }} />
            <select
              className={styles.filterSelect}
              value={userFilter}
              onChange={(e) => setUserFilter(e.target.value)}
              style={{
                minWidth: 200,
                padding: "6px 10px",
                borderRadius: 6,
                border:
                  userFilter !== "all"
                    ? "1.5px solid #0891b2"
                    : "1px solid #cbd5e1",
                background: "#fff",
                fontSize: 13,
                fontWeight: 600,
                color: userFilter !== "all" ? "#0e7490" : "#475569",
                cursor: "pointer",
                outline: "none",
              }}
              title="Filter by user who submitted the audit request"
            >
              <option value="all">👥 All Users ({submitters.length})</option>
              {submitters.length === 0 ? (
                <option value="" disabled>
                  — No users found —
                </option>
              ) : (
                submitters.map((u) => (
                  <option key={u.id} value={String(u.id)}>
                    {formatSubmitter(u)}
                  </option>
                ))
              )}
            </select>
          </div>
        )}

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

        {/* Month */}
        <div className={styles.filterGroup}>
          <select
            className={styles.filterSelect}
            value={monthFilter}
            onChange={(e) =>
              setMonthFilter(
                e.target.value === "all" ? "all" : Number(e.target.value),
              )
            }
            style={{
              borderColor: monthFilter !== "all" ? "#0e7490" : undefined,
              fontWeight: monthFilter !== "all" ? 600 : undefined,
            }}
          >
            {MONTH_OPTIONS.map((m) => (
              <option key={String(m.value)} value={m.value}>
                {m.label}
              </option>
            ))}
          </select>
        </div>

        {/* Year */}
        <div className={styles.filterGroup}>
          <select
            className={styles.filterSelect}
            value={yearFilter}
            onChange={(e) =>
              setYearFilter(
                e.target.value === "all" ? "all" : Number(e.target.value),
              )
            }
            style={{
              borderColor: yearFilter !== "all" ? "#0e7490" : undefined,
              fontWeight: yearFilter !== "all" ? 600 : undefined,
            }}
          >
            {YEAR_OPTIONS.map((y) => (
              <option key={String(y.value)} value={y.value}>
                {y.label}
              </option>
            ))}
          </select>
        </div>

        {/* Custom range: From */}
        <div className={styles.filterGroup}>
          <input
            type="date"
            className={styles.filterSelect}
            value={customFrom}
            onChange={(e) => setCustomFrom(e.target.value)}
            title="From date"
            style={{
              borderColor: customFrom ? "#f59e0b" : undefined,
              fontWeight: customFrom ? 600 : undefined,
            }}
          />
        </div>

        {/* Custom range: To */}
        <div className={styles.filterGroup}>
          <input
            type="date"
            className={styles.filterSelect}
            value={customTo}
            min={customFrom || undefined}
            onChange={(e) => setCustomTo(e.target.value)}
            title="To date"
            style={{
              borderColor: customTo ? "#f59e0b" : undefined,
              fontWeight: customTo ? 600 : undefined,
            }}
          />
        </div>

        {/* Clear button */}
        {activeFilterCount > 0 && (
          <button
            className={styles.clearFiltersBtn}
            onClick={clearFilters}
            title="Clear all filters"
          >
            ✕ Clear ({activeFilterCount})
          </button>
        )}
      </div>
    </div>
  );
};