"use client";

import { useState } from "react";
import { Search, RotateCcw } from "lucide-react";
import DatePicker from "@/components/ui/DatePicker";
import { useBankWiseAumFilters } from "@/hooks/useBankWiseAumFilters";

const LABEL =
  "block text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1";

const INPUT =
  "h-9 w-full rounded-md border border-slate-200 bg-white px-3 text-sm text-slate-800 shadow-sm";

function formatDate(date: Date) {
  const y = date.getFullYear();
  const m = String(date.getMonth() + 1).padStart(2, "0");
  const d = String(date.getDate()).padStart(2, "0");
  return `${y}-${m}-${d}`;
}

export function BankWiseAumFiltersBar({ onApply, isLoading = false }: any) {
  const [isCompare, setIsCompare] = useState(false);
  const today = formatDate(new Date());

  const [filters, setFilters] = useState({
    bank: "",
    assetClass: "",
    sector: "",
    country: "",
    compareFrom: "",
    compareTo: today,
  });

  const { filters: options } = useBankWiseAumFilters();

  function update(key: string, value: string) {
    setFilters((prev) => ({ ...prev, [key]: value }));
  }

  function handleApply() {
    // Normal apply — never sends dates
    onApply({
      bank: filters.bank,
      assetClass: filters.assetClass,
      sector: filters.sector,
      country: filters.country,
      compareFrom: isCompare ? filters.compareFrom : "",
      compareTo: isCompare ? filters.compareTo : "",
    });
  }

  function handleReset() {
    const resetData = {
      bank: "",
      assetClass: "",
      sector: "",
      country: "",
      compareFrom: "",
      compareTo: today,
    };
    setFilters(resetData);
    setIsCompare(false);
    onApply({
      bank: "",
      assetClass: "",
      sector: "",
      country: "",
      compareFrom: "",
      compareTo: "",
    });
  }

  function handleRunCompare() {
    if (!filters.compareFrom || !filters.compareTo) return;
    // Compare — sends all filters INCLUDING both dates
    onApply({
      bank: filters.bank,
      assetClass: filters.assetClass,
      sector: filters.sector,
      country: filters.country,
      compareFrom: filters.compareFrom,
      compareTo: filters.compareTo,
    });
  }

  return (
    <div className="rounded-xl border border-slate-200 bg-white p-5 shadow-sm space-y-4">

      {/* ── TOP FILTER ROW ── */}
      <div className="flex flex-wrap items-end gap-4">

        {/* Bank */}
        <div className="min-w-[160px]">
          <label className={LABEL}>Bank</label>
          <select
            className={INPUT}
            value={filters.bank}
            onChange={(e) => update("bank", e.target.value)}
          >
            <option value="">All Banks</option>
            {options.banks?.map((b: string) => (
              <option key={b} value={b}>{b}</option>
            ))}
          </select>
        </div>

        {/* Asset Class */}
        <div className="min-w-[180px]">
          <label className={LABEL}>Asset Class</label>
          <select
            className={INPUT}
            value={filters.assetClass}
            onChange={(e) => update("assetClass", e.target.value)}
          >
            <option value="">All Classes</option>
            {options.assetClasses?.map((a: string) => (
              <option key={a} value={a}>{a}</option>
            ))}
          </select>
        </div>

        {/* Sector */}
        <div className="min-w-[180px]">
          <label className={LABEL}>Sector</label>
          <select
            className={INPUT}
            value={filters.sector}
            onChange={(e) => update("sector", e.target.value)}
          >
            <option value="">All Sectors</option>
            {options.sectors?.map((s: string) => (
              <option key={s} value={s}>{s}</option>
            ))}
          </select>
        </div>

        {/* Country */}
        <div className="min-w-[180px]">
          <label className={LABEL}>Country</label>
          <select
            className={INPUT}
            value={filters.country}
            onChange={(e) => update("country", e.target.value)}
          >
            <option value="">All Countries</option>
            {options.countries?.map((c: string) => (
              <option key={c} value={c}>{c}</option>
            ))}
          </select>
        </div>

        {/* Buttons */}
        <div className="flex gap-2">
          <button
            onClick={handleApply}
            disabled={isLoading}
            className="h-9 px-4 bg-blue-600 text-white text-sm font-semibold rounded-md flex items-center gap-1.5 disabled:opacity-60"
          >
            <Search className="h-3.5 w-3.5" />
            Apply
          </button>

           <button
            onClick={() => {
              setIsCompare((prev) => {
                const next = !prev;

                // 👉 when closing compare
                if (!next) {
                  setFilters((f) => ({
                    ...f,
                    compareFrom: "",
                    compareTo: formatDate(new Date()), // today
                  }));
                }

                return next;
              });
            }}
            className={`h-9 px-4 border rounded-md text-sm font-semibold transition
              ${isCompare
                ? "bg-blue-50 border-blue-400 text-blue-600"
                : "text-slate-700 border-slate-200"}`}
          >
            Compare
          </button>

          <button
            onClick={handleReset}
            disabled={isLoading}
            className="h-9 px-4 border border-slate-200 rounded-md text-sm font-semibold text-slate-700 flex items-center gap-1.5 disabled:opacity-60"
          >
            <RotateCcw className="h-3.5 w-3.5" />
            Reset
          </button>
        </div>
      </div>

      {/* ── COMPARE SECTION ── */}
      {isCompare && (
        <div className="flex flex-wrap items-end gap-4 border-t pt-4">
          <div className="min-w-[160px]">
            <DatePicker
              label="Compare From"
              value={filters.compareFrom}
              onChange={(date: Date) => update("compareFrom", formatDate(date))}
            />
          </div>

          <div className="min-w-[160px]">
            <DatePicker
              label="Compare To"
              value={filters.compareTo}
              onChange={(date: Date) => update("compareTo", formatDate(date))}
            />
          </div>

          <button
            onClick={handleRunCompare}
            disabled={!filters.compareFrom || !filters.compareTo || isLoading}
            className="h-9 px-4 bg-blue-600 text-white text-sm font-semibold rounded-md disabled:opacity-50"
          >
            Run Compare
          </button>
        </div>
      )}
    </div>
  );
}