import { useState, useMemo, useEffect, useCallback } from "react";
import { Search } from "lucide-react";
import { toast } from "sonner";
import {
  fetchLuxsinAudioBrands,
  fetchLuxsinAudioModelList,
  fetchLuxsinAudioModels,
  type LuxsinAudioBrand,
  type LuxsinAudioModelListItem,
  type LuxsinAudioModel,
} from "@/lib/luxsinApi";
import { CATALOG_TARGETS } from "../eqConstants";
import type { PeqEqUi } from "../types";
import { eqInterp } from "../eqFormatters";

type BrandDrawerTab = "brands" | "models" | "target";

export function BrandDrawer({
  open,
  onClose,
  eqUi,
  onConfirm,
}: {
  open: boolean;
  onClose: () => void;
  eqUi: PeqEqUi;
  onConfirm: (brand: string, name: string, target: string, form?: string) => Promise<boolean>;
}) {
  const [brandDrawerTab, setBrandDrawerTab] = useState<BrandDrawerTab>("brands");
  const [brandSearchQuery, setBrandSearchQuery] = useState("");
  const [catalogBrands, setCatalogBrands] = useState<LuxsinAudioBrand[]>([]);
  const [catalogBrandsLoading, setCatalogBrandsLoading] = useState(false);
  const [catalogBrandsError, setCatalogBrandsError] = useState<string | null>(null);
  const [catalogSearchResults, setCatalogSearchResults] = useState<LuxsinAudioModelListItem[]>([]);
  const [catalogSearchLoading, setCatalogSearchLoading] = useState(false);
  const [catalogSearchError, setCatalogSearchError] = useState<string | null>(null);
  const [selectedCatalogBrand, setSelectedCatalogBrand] = useState<string>("");
  const [catalogModels, setCatalogModels] = useState<LuxsinAudioModel[]>([]);
  const [catalogModelsLoading, setCatalogModelsLoading] = useState(false);
  const [catalogModelsError, setCatalogModelsError] = useState<string | null>(null);
  const [selectedCatalogModelFromSearch, setSelectedCatalogModelFromSearch] = useState<string>("");
  const [selectedCatalogModelName, setSelectedCatalogModelName] = useState("");
  const [selectedCatalogModelForm, setSelectedCatalogModelForm] = useState<string | undefined>(undefined);
  const [selectedCatalogTarget, setSelectedCatalogTarget] = useState<string>("");
  const [isConfirmingTarget, setIsConfirmingTarget] = useState(false);

  /* ── Derived data ── */
  const filteredCatalogBrands = useMemo(() => {
    const q = brandSearchQuery.trim().toLowerCase();
    if (!q) return catalogBrands;
    return catalogBrands.filter((b) => b.name.toLowerCase().includes(q));
  }, [catalogBrands, brandSearchQuery]);

  const availableCatalogTargets = useMemo(() => {
    if (selectedCatalogModelForm === "in-ear") {
      return CATALOG_TARGETS.filter((item) => item.ear === "in" || item.ear === "all");
    }
    if (selectedCatalogModelForm === "over-ear") {
      return CATALOG_TARGETS.filter((item) => item.ear === "over" || item.ear === "all");
    }
    return CATALOG_TARGETS;
  }, [selectedCatalogModelForm]);

  /* ── API calls ── */
  const loadCatalogBrands = useCallback(async () => {
    setCatalogBrandsLoading(true);
    setCatalogBrandsError(null);
    try {
      const list = await fetchLuxsinAudioBrands();
      const sorted = [...list].sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" }));
      setCatalogBrands(sorted);
    } catch (e) {
      const msg = e instanceof Error ? e.message : "加载失败";
      setCatalogBrandsError(msg);
      toast.error(eqUi.toastBrandsFail);
    } finally {
      setCatalogBrandsLoading(false);
    }
  }, [eqUi]);

  const searchCatalogByKeyword = useCallback(async (keyword: string) => {
    const q = keyword.trim();
    if (!q) {
      setCatalogSearchResults([]);
      setCatalogSearchError(null);
      setCatalogSearchLoading(false);
      return;
    }
    setCatalogSearchLoading(true);
    setCatalogSearchError(null);
    try {
      const list = await fetchLuxsinAudioModelList(q, 1000);
      setCatalogSearchResults(list);
    } catch (e) {
      const msg = e instanceof Error ? e.message : "搜索失败";
      setCatalogSearchError(msg);
      setCatalogSearchResults([]);
    } finally {
      setCatalogSearchLoading(false);
    }
  }, []);

  const loadCatalogModels = useCallback(async (brandName: string) => {
    setSelectedCatalogModelFromSearch("");
    setCatalogModelsLoading(true);
    setCatalogModelsError(null);
    try {
      const list = await fetchLuxsinAudioModels(brandName);
      const sorted = [...list].sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" }));
      setCatalogModels(sorted);
    } catch (e) {
      const msg = e instanceof Error ? e.message : "加载失败";
      setCatalogModelsError(msg);
      toast.error(eqUi.toastModelsFail);
    } finally {
      setCatalogModelsLoading(false);
    }
  }, [eqUi]);

  /* ── Effects ── */
  // Auto-load brands when drawer opens
  useEffect(() => {
    if (!open) return;
    void loadCatalogBrands();
  }, [open, loadCatalogBrands]);

  // Search debounce
  useEffect(() => {
    if (!open || brandDrawerTab !== "brands") return;
    const timer = window.setTimeout(() => {
      void searchCatalogByKeyword(brandSearchQuery);
    }, 260);
    return () => window.clearTimeout(timer);
  }, [open, brandDrawerTab, brandSearchQuery, searchCatalogByKeyword]);

  // Escape key
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  // Body overflow lock
  useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = prev;
    };
  }, [open]);

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-[110] flex flex-col justify-end">
      <button
        type="button"
        className="absolute inset-0 bg-black/55"
        aria-label={eqUi.closeDrawer}
        onClick={onClose}
      />
      <div
        className="relative z-10 flex h-[58dvh] flex-shrink-0 flex-col overflow-hidden rounded-t-[18px] bg-white shadow-[0_-8px_32px_rgba(0,0,0,0.35)]"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex shrink-0 items-center justify-center pt-2 pb-1">
          <div className="h-1 w-10 rounded-full bg-black/15" />
        </div>
        <div className="flex shrink-0 items-stretch rounded-t-[12px] bg-[#2c2c2e] px-1 pt-1">
          {(["brands", "models", "target"] as const).map((tab) => {
            const active = brandDrawerTab === tab;
            const label =
              tab === "brands" ? eqUi.tabBrands : tab === "models" ? eqUi.tabModels : eqUi.tabTarget;
            return (
              <button
                key={tab}
                type="button"
                className={`flex-1 py-2.5 text-[14px] font-medium transition-colors rounded-t-[10px] ${
                  active ? "bg-[#1c1c1e] text-white" : "text-white/55 hover:text-white/80"
                }`}
                onClick={() => setBrandDrawerTab(tab)}
              >
                {label}
              </button>
            );
          })}
        </div>

        <div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-white">
          {brandDrawerTab === "brands" && (
            <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
              <div className="shrink-0 border-b border-black/8 px-3 py-2.5">
                <div className="flex items-center gap-2 rounded-[10px] border border-black/12 bg-[#f5f5f7] px-3 py-2">
                  <Search size={18} className="shrink-0 text-black/35" />
                  <input
                    type="search"
                    value={brandSearchQuery}
                    onChange={(e) => setBrandSearchQuery(e.target.value)}
                    placeholder={eqUi.searchPlaceholder}
                    className="min-w-0 flex-1 bg-transparent text-[15px] text-black/80 outline-none placeholder:text-black/35"
                  />
                </div>
              </div>
              <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain touch-pan-y">
                {brandSearchQuery.trim() && catalogSearchLoading && (
                  <div className="py-10 text-center text-[14px] text-black/45">{eqUi.searching}</div>
                )}
                {!!brandSearchQuery.trim() && !catalogSearchLoading && catalogSearchError && (
                  <div className="px-4 py-8 text-center text-[14px] text-red-600/90">{catalogSearchError}</div>
                )}
                {!!brandSearchQuery.trim() &&
                  !catalogSearchLoading &&
                  !catalogSearchError &&
                  catalogSearchResults.length === 0 && (
                    <div className="py-10 text-center text-[14px] text-black/45">{eqUi.noSearchResults}</div>
                  )}
                {!!brandSearchQuery.trim() &&
                  !catalogSearchLoading &&
                  !catalogSearchError &&
                  catalogSearchResults.map((item, idx) => (
                    <button
                      key={`${item.brandName}-${item.modelName}-${idx}`}
                      type="button"
                      className="w-full border-b border-black/[0.06] px-4 py-3.5 text-left active:bg-black/[0.04] transition-colors"
                      onClick={() => {
                        setSelectedCatalogBrand(item.brandName);
                        setSelectedCatalogModelFromSearch(item.modelName);
                        setSelectedCatalogModelName(item.modelName);
                        setSelectedCatalogModelForm(item.form);
                        setSelectedCatalogTarget("");
                        setCatalogModels([{ id: 0, name: item.modelName, ...(item.form ? { form: item.form } : {}) }]);
                        setCatalogModelsLoading(false);
                        setCatalogModelsError(null);
                        setBrandDrawerTab("target");
                      }}
                    >
                      <div className="text-[15px] text-black/85 font-medium">{item.modelName}</div>
                      <div className="mt-0.5 text-[12px] text-black/50">{item.brandName}</div>
                    </button>
                  ))}
                {!brandSearchQuery.trim() && catalogBrandsLoading && (
                  <div className="py-10 text-center text-[14px] text-black/45">{eqUi.loading}</div>
                )}
                {!brandSearchQuery.trim() && !catalogBrandsLoading && catalogBrandsError && (
                  <div className="px-4 py-8 text-center text-[14px] text-red-600/90">{catalogBrandsError}</div>
                )}
                {!brandSearchQuery.trim() && !catalogBrandsLoading && !catalogBrandsError && filteredCatalogBrands.length === 0 && (
                  <div className="py-10 text-center text-[14px] text-black/45">{eqUi.noBrandMatch}</div>
                )}
                {!brandSearchQuery.trim() &&
                  !catalogBrandsLoading &&
                  !catalogBrandsError &&
                  filteredCatalogBrands.map((b) => (
                    <button
                      key={b.id}
                      type="button"
                      className="w-full border-b border-black/[0.06] px-4 py-3.5 text-left text-[16px] text-black/85 active:bg-black/[0.04] transition-colors"
                      onClick={() => {
                        setSelectedCatalogBrand(b.name);
                        setSelectedCatalogModelFromSearch("");
                        setSelectedCatalogModelName("");
                        setSelectedCatalogModelForm(undefined);
                        setSelectedCatalogTarget("");
                        setBrandDrawerTab("models");
                        void loadCatalogModels(b.name);
                      }}
                    >
                      {b.name}
                    </button>
                  ))}
              </div>
            </div>
          )}
          {brandDrawerTab === "models" && (
            <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
            <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain touch-pan-y">
              <div className="sticky top-0 z-10 border-b border-black/8 bg-white px-4 py-2.5 text-[13px] text-black/55">
                {eqUi.brandLabel}<span className="font-semibold text-black/80">{selectedCatalogBrand || "—"}</span>
                {selectedCatalogModelFromSearch && (
                  <span className="ml-2 text-black/45">
                    {eqUi.modelFromSearchLabel}
                    {selectedCatalogModelFromSearch}
                  </span>
                )}
              </div>
              {!selectedCatalogBrand && (
                <div className="py-10 text-center text-[14px] text-black/45">{eqUi.selectBrandFirst}</div>
              )}
              {!!selectedCatalogBrand && catalogModelsLoading && (
                <div className="py-10 text-center text-[14px] text-black/45">{eqUi.loading}</div>
              )}
              {!!selectedCatalogBrand && !catalogModelsLoading && catalogModelsError && (
                <div className="px-4 py-8 text-center text-[14px] text-red-600/90">{catalogModelsError}</div>
              )}
              {!!selectedCatalogBrand && !catalogModelsLoading && !catalogModelsError && catalogModels.length === 0 && (
                <div className="py-10 text-center text-[14px] text-black/45">{eqUi.noModelsForBrand}</div>
              )}
              {!!selectedCatalogBrand &&
                !catalogModelsLoading &&
                !catalogModelsError &&
                catalogModels.map((m) => (
                  <button
                    key={`${m.id}-${m.name}`}
                    type="button"
                    className="w-full border-b border-black/[0.06] px-4 py-3.5 text-left text-[16px] text-black/85 active:bg-black/[0.04] transition-colors"
                    onClick={() => {
                      setSelectedCatalogModelName(m.name);
                      setSelectedCatalogModelForm(m.form);
                      setSelectedCatalogTarget("");
                      setBrandDrawerTab("target");
                    }}
                  >
                    <div>{m.name}</div>
                    {m.form && <div className="mt-0.5 text-[12px] text-black/50">{m.form}</div>}
                  </button>
                ))}
            </div>
            </div>
          )}
          {brandDrawerTab === "target" && (
            <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
            <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain touch-pan-y">
              <div className="sticky top-0 z-10 border-b border-black/8 bg-white px-4 py-2.5 text-[13px] text-black/55 space-y-0.5">
                <div>
                  {eqUi.targetBrand}
                  <span className="font-semibold text-black/80">{selectedCatalogBrand || "—"}</span>
                </div>
                <div>
                  {eqUi.targetModel}
                  <span className="font-semibold text-black/80">{selectedCatalogModelName || "—"}</span>
                </div>
                <div>
                  {eqUi.targetForm}
                  <span className="font-semibold text-black/80">{selectedCatalogModelForm || eqUi.formAll}</span>
                </div>
              </div>
              <div className="px-5 pt-4 pb-3">
                <button
                  type="button"
                  disabled={!selectedCatalogTarget || isConfirmingTarget}
                  className="w-full h-10 rounded-full text-[24px] leading-none transition-all disabled:cursor-not-allowed flex items-center justify-center gap-3"
                  style={{
                    background: selectedCatalogTarget && !isConfirmingTarget
                      ? "linear-gradient(180deg, #6a6a6d 0%, #565659 100%)"
                      : "linear-gradient(180deg, #8b8b8f 0%, #78787c 100%)",
                    color: selectedCatalogTarget && !isConfirmingTarget ? "#00FFF6" : "rgba(255,255,255,0.55)",
                    boxShadow: selectedCatalogTarget && !isConfirmingTarget
                      ? "inset 0 1px 0 rgba(255,255,255,0.15)"
                      : "inset 0 1px 0 rgba(255,255,255,0.08)",
                    opacity: selectedCatalogTarget && !isConfirmingTarget ? 1 : 0.9,
                  }}
                  onClick={async () => {
                    if (isConfirmingTarget) return;
                    setIsConfirmingTarget(true);
                    try {
                      const completed = await onConfirm(
                        selectedCatalogBrand,
                        selectedCatalogModelName,
                        selectedCatalogTarget,
                        selectedCatalogModelForm,
                      );
                      if (completed) {
                        onClose();
                        toast.success(eqUi.toastNewEqOk);
                      } else {
                        toast.info(eqUi.overwritePresetCancelled);
                      }
                    } catch {
                      toast.error(eqUi.toastCurveFail);
                    } finally {
                      setIsConfirmingTarget(false);
                    }
                  }}
                >
                  {isConfirmingTarget && (
                    <span
                      className="inline-block w-4 h-4 rounded-full border-2 border-white/40 border-t-[#00FFF6] animate-spin"
                      aria-hidden="true"
                    />
                  )}
                  {isConfirmingTarget ? eqUi.confirmLoading : eqUi.confirmButton}
                </button>
              </div>
              {!selectedCatalogModelName && (
                <div className="py-10 text-center text-[14px] text-black/45">{eqUi.selectModelFirst}</div>
              )}
              {!!selectedCatalogModelName && availableCatalogTargets.length === 0 && (
                <div className="py-10 text-center text-[14px] text-black/45">{eqUi.noTargets}</div>
              )}
              {!!selectedCatalogModelName &&
                availableCatalogTargets.map((target) => {
                  const active = selectedCatalogTarget === target.name;
                  return (
                    <button
                      key={target.name}
                      type="button"
                      className="w-full border-b border-black/[0.06] px-4 py-3 text-left active:bg-black/[0.04] transition-colors"
                      style={active ? { background: "rgba(0,255,246,0.14)" } : undefined}
                      onClick={() => {
                        setSelectedCatalogTarget(target.name);
                        toast.success(eqInterp(eqUi.toastTargetSelected, { name: target.name }));
                      }}
                    >
                      <div className="text-[15px] text-black/85 font-medium">{target.name}</div>
                      <div className="mt-1 text-[12px] text-black/55">
                        {eqInterp(eqUi.bassBoost, {
                          fc: String(target.bassBoost.fc),
                          q: String(target.bassBoost.q),
                          gain: String(target.bassBoost.gain),
                        })}
                      </div>
                    </button>
                  );
                })}
            </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}