"use client";

import { useState, useRef, useEffect } from "react";
import { Search, ChevronDown, Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { PRIMARY_COLOR, type CSSPropertiesWithVars } from "@/lib/common";
import { CalendarFilters } from "@/types/calendar";

interface Bank {
  bank_id: string;
  bank_name: string;
}

interface AssetClass {
  key: string;
  label: string;
}

interface CalendarFilterPanelProps {
  banks: Bank[];
  assetClasses: AssetClass[];
  filters: CalendarFilters;
  onChange: (partial: Partial<CalendarFilters>) => void;
  onSave: () => void;
  onCancel: () => void;
  saving: boolean;
  error: string | null;
  // Name field
  name: string;
  onNameChange: (value: string) => void;
}

export function CalendarFilterPanel({
  banks,
  assetClasses,
  filters,
  onChange,
  onSave,
  onCancel,
  saving,
  error,
  name,
  onNameChange,
}: CalendarFilterPanelProps) {
  const canSave = name.trim().length > 0 && !saving;

  return (
    <div className="mt-6 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
      {/* Name field */}
      <div className="mb-4">
        <label className="mb-2 block text-xs font-semibold text-slate-700">
          Calendar Name <span className="text-red-400">*</span>
        </label>
        <input
          type="text"
          value={name}
          onChange={(e) => onNameChange(e.target.value)}
          placeholder="e.g. Personal Cashflow, Business Accounts…"
          className="w-full max-w-sm rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none transition-all duration-200 ease-in-out"
          onFocus={(e) => {
            e.currentTarget.style.borderColor = PRIMARY_COLOR;
            e.currentTarget.style.boxShadow = `0 0 0 1px ${PRIMARY_COLOR}15`;
          }}
          onBlur={(e) => {
            e.currentTarget.style.borderColor = "";
            e.currentTarget.style.boxShadow = "";
          }}
          onMouseEnter={(e) => {
            if (document.activeElement !== e.currentTarget)
              e.currentTarget.style.borderColor = `${PRIMARY_COLOR}99`;
          }}
          onMouseLeave={(e) => {
            if (document.activeElement !== e.currentTarget)
              e.currentTarget.style.borderColor = "";
          }}
          onKeyDown={(e) => {
            if (e.key === "Enter" && canSave) onSave();
          }}
        />
      </div>

      {/* Filters grid — same as ReportFilters panel */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {/* Banks — search-multi-select */}
        <BankMultiSelect
          banks={banks}
          value={filters.bank_ids}
          onChange={(ids) => onChange({ bank_ids: ids })}
        />

        {/* Asset Class — select */}
        <div>
          <label className="mb-2 block text-xs font-semibold text-slate-700">
            Asset Class
          </label>
          <select
            value={filters.asset_class}
            onChange={(e) => onChange({ asset_class: e.target.value })}
            className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:outline-none transition-all duration-200 ease-in-out"
            onFocus={(e) => {
              e.currentTarget.style.borderColor = PRIMARY_COLOR;
              e.currentTarget.style.boxShadow = `0 0 0 1px ${PRIMARY_COLOR}15`;
            }}
            onBlur={(e) => {
              e.currentTarget.style.borderColor = "";
              e.currentTarget.style.boxShadow = "";
            }}
            onMouseEnter={(e) => {
              if (document.activeElement !== e.currentTarget)
                e.currentTarget.style.borderColor = `${PRIMARY_COLOR}99`;
            }}
            onMouseLeave={(e) => {
              if (document.activeElement !== e.currentTarget)
                e.currentTarget.style.borderColor = "";
            }}
          >
            <option value="">All Asset Classes</option>
            {assetClasses.map((ac) => (
              <option key={ac.key} value={ac.key}>
                {ac.label}
              </option>
            ))}
          </select>
        </div>

        {/* Date From */}
        {/* <DateField
          label="Date From"
          value={filters.date_from}
          onChange={(v) => onChange({ date_from: v })}
        /> */}

        {/* Date To */}
        {/* <DateField
          label="Date To"
          value={filters.date_to}
          onChange={(v) => onChange({ date_to: v })}
        /> */}
      </div>

      {/* Error */}
      {error && (
        <p className="mt-3 text-sm text-red-500">{error}</p>
      )}

      {/* Actions — Save / Cancel */}
      <div className="mt-4 flex items-center justify-end gap-3 border-t border-slate-200 pt-4">
        <button
          onClick={onCancel}
          disabled={saving}
          className="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50 transition-colors disabled:opacity-50"
        >
          Cancel
        </button>
        <button
          onClick={onSave}
          disabled={!canSave}
          className="inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-semibold text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          style={{ backgroundColor: PRIMARY_COLOR }}
          onMouseEnter={(e) => {
            if (canSave) e.currentTarget.style.backgroundColor = "#357a3d";
          }}
          onMouseLeave={(e) => {
            if (canSave) e.currentTarget.style.backgroundColor = PRIMARY_COLOR;
          }}
        >
          {saving && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
          {saving ? "Saving…" : "Save"}
        </button>
      </div>
    </div>
  );
}

// ─── Date Field ──────────────────────────────────────────────────────────────

function DateField({
  label,
  value,
  onChange,
}: {
  label: string;
  value: string;
  onChange: (v: string) => void;
}) {
  return (
    <div>
      <label className="mb-2 block text-xs font-semibold text-slate-700">
        {label}
      </label>
      <input
        type="date"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:outline-none transition-all duration-200 ease-in-out"
        onFocus={(e) => {
          e.currentTarget.style.borderColor = PRIMARY_COLOR;
          e.currentTarget.style.boxShadow = `0 0 0 1px ${PRIMARY_COLOR}15`;
        }}
        onBlur={(e) => {
          e.currentTarget.style.borderColor = "";
          e.currentTarget.style.boxShadow = "";
        }}
        onMouseEnter={(e) => {
          if (document.activeElement !== e.currentTarget)
            e.currentTarget.style.borderColor = `${PRIMARY_COLOR}99`;
        }}
        onMouseLeave={(e) => {
          if (document.activeElement !== e.currentTarget)
            e.currentTarget.style.borderColor = "";
        }}
      />
    </div>
  );
}

// ─── Bank Multi-Select ───────────────────────────────────────────────────────

function BankMultiSelect({
  banks,
  value,
  onChange,
}: {
  banks: Bank[];
  value: string[];
  onChange: (ids: string[]) => void;
}) {
  const [isOpen, setIsOpen] = useState(false);
  const [searchTerm, setSearchTerm] = useState("");
  const dropdownRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
        setIsOpen(false);
        setSearchTerm("");
      }
    };
    if (isOpen) {
      document.addEventListener("mousedown", handleClickOutside);
      return () => document.removeEventListener("mousedown", handleClickOutside);
    }
  }, [isOpen]);

  const hasComma = searchTerm.includes(",");

  const filtered = banks.filter((b) => {
    if (!searchTerm) return true;
    if (hasComma) {
      const terms = searchTerm.split(",").map((t) => t.trim().toLowerCase()).filter(Boolean);
      return terms.some((t) => b.bank_name.toLowerCase().includes(t));
    }
    return b.bank_name.toLowerCase().includes(searchTerm.toLowerCase());
  });

  // Auto-select on search
  useEffect(() => {
    if (!searchTerm.trim()) return;
    const matched = filtered.map((b) => b.bank_id);
    const isDiff =
      matched.length !== value.length ||
      matched.some((id) => !value.includes(id));
    if (isDiff) onChange(matched);
  }, [searchTerm, filtered.length]);

  const toggle = (id: string) => {
    onChange(
      value.includes(id) ? value.filter((v) => v !== id) : [...value, id]
    );
  };

  const getLabel = () => {
    if (value.length === 0) return `0/${banks.length}`;
    if (value.length === 1) {
      return banks.find((b) => b.bank_id === value[0])?.bank_name ?? value[0];
    }
    return `${value.length}/${banks.length} selected`;
  };

  return (
    <div className="relative" ref={dropdownRef}>
      <label className="mb-2 block text-xs font-semibold text-slate-700">
        Banks
      </label>
      <button
        type="button"
        onClick={() => setIsOpen((v) => !v)}
        className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-left text-sm focus:outline-none transition-all duration-200 ease-in-out flex items-center justify-between"
        onFocus={(e) => {
          e.currentTarget.style.borderColor = PRIMARY_COLOR;
          e.currentTarget.style.boxShadow = `0 0 0 1px ${PRIMARY_COLOR}15`;
        }}
        onBlur={(e) => {
          e.currentTarget.style.borderColor = "";
          e.currentTarget.style.boxShadow = "";
        }}
        onMouseEnter={(e) => {
          if (document.activeElement !== e.currentTarget)
            e.currentTarget.style.borderColor = `${PRIMARY_COLOR}99`;
        }}
        onMouseLeave={(e) => {
          if (document.activeElement !== e.currentTarget)
            e.currentTarget.style.borderColor = "";
        }}
      >
        <span className={value.length === 0 ? "text-slate-500" : "text-slate-900"}>
          {getLabel()}
        </span>
        <ChevronDown
          className={cn("h-4 w-4 text-slate-500 transition-transform", isOpen && "rotate-180")}
        />
      </button>

      {isOpen && (
        <div className="absolute z-50 mt-1 w-full rounded-lg border border-slate-200 bg-white shadow-lg">
          {/* Search */}
          <div className="p-3 border-b border-slate-200">
            <div className="relative group">
              <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400 transition-colors duration-200 group-hover:text-[#428B4D]" />
              <input
                type="text"
                placeholder="Search... (use comma for multiple)"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === "Tab") {
                    e.preventDefault();
                    const pos = e.currentTarget.selectionStart || 0;
                    const before = searchTerm.slice(0, pos);
                    const after = searchTerm.slice(pos);
                    const insert = before.endsWith(",") || before.endsWith(", ") ? " " : ", ";
                    setSearchTerm(before + insert + after);
                  }
                }}
                className="w-full pl-8 pr-3 py-1.5 text-sm border border-slate-300 rounded-md focus:outline-none transition-all duration-200 ease-in-out"
                onFocus={(e) => {
                  e.currentTarget.style.borderColor = PRIMARY_COLOR;
                  e.currentTarget.style.boxShadow = `0 0 0 1px ${PRIMARY_COLOR}15`;
                }}
                onBlur={(e) => {
                  e.currentTarget.style.borderColor = "";
                  e.currentTarget.style.boxShadow = "";
                }}
                onClick={(e) => e.stopPropagation()}
              />
            </div>
            <div className="mt-2 flex items-center justify-between text-xs">
              <div className="flex items-center gap-2">
                <button
                  type="button"
                  onClick={() => onChange(banks.map((b) => b.bank_id))}
                  className="font-semibold hover:underline"
                  style={{ color: PRIMARY_COLOR }}
                >
                  Select All
                </button>
                <span className="text-slate-400">|</span>
                <button
                  type="button"
                  onClick={() => onChange([])}
                  className="font-semibold hover:underline"
                  style={{ color: PRIMARY_COLOR }}
                >
                  Clear All
                </button>
              </div>
              <span className="text-slate-600 font-semibold">
                {value.length}/{banks.length}
              </span>
            </div>
          </div>

          {/* Options */}
          <div className="max-h-60 overflow-y-auto p-2">
            {filtered.length === 0 ? (
              <div className="px-3 py-4 text-center text-sm text-slate-500">
                No results found
              </div>
            ) : (
              filtered.map((bank) => (
                <label
                  key={bank.bank_id}
                  className="flex items-center gap-3 px-3 py-2 hover:bg-slate-50 cursor-pointer rounded-lg transition-colors"
                >
                  <input
                    type="checkbox"
                    checked={value.includes(bank.bank_id)}
                    onChange={() => toggle(bank.bank_id)}
                    className="h-4 w-4 rounded border-slate-300 cursor-pointer"
                    style={{ accentColor: "#ffd294" }}
                  />
                  <span className="text-sm text-slate-700">{bank.bank_name}</span>
                </label>
              ))
            )}
          </div>
        </div>
      )}
    </div>
  );
}