"use client";

import { useEffect, useState } from "react";

export interface PickerLabel {
  id: string;
  fileUrl: string;
  brandName: string;
  blendName: string;
  uploaderUsername: string;
}

export interface PickerFolder {
  id: string;
  name: string;
  labels: PickerLabel[];
}

type BrandResult = { id: string; name: string };
type BlendResult = { id: string; name: string };

function useDebounced<T>(value: T, delayMs: number) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delayMs);
    return () => clearTimeout(timer);
  }, [value, delayMs]);
  return debounced;
}

function LabelResultGrid({
  labels,
  onSelect,
}: {
  labels: PickerLabel[];
  onSelect: (label: PickerLabel) => void;
}) {
  if (labels.length === 0) {
    return <p className="mt-4 text-sm text-charcoal/50">No labels found.</p>;
  }
  return (
    <ul className="mt-4 grid grid-cols-3 gap-3 sm:grid-cols-4">
      {labels.map((label) => (
        <li key={label.id}>
          <button
            type="button"
            onClick={() => onSelect(label)}
            className="flex flex-col items-center gap-1 rounded-lg p-2 text-center hover:bg-charcoal/5"
          >
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={label.fileUrl}
              alt={`${label.brandName} ${label.blendName}`}
              className="h-16 w-16 rounded-full border border-charcoal/10 object-cover"
            />
            <span className="text-xs leading-tight text-charcoal">
              {label.brandName} - {label.blendName}
            </span>
          </button>
        </li>
      ))}
    </ul>
  );
}

export function LabelPickerModal({
  open,
  onClose,
  onSelect,
  folders,
}: {
  open: boolean;
  onClose: () => void;
  onSelect: (label: PickerLabel) => void;
  folders: PickerFolder[];
}) {
  const [tab, setTab] = useState<"search" | "browse" | "folders">("search");

  const [searchQuery, setSearchQuery] = useState("");
  const [searchResults, setSearchResults] = useState<PickerLabel[]>([]);
  const debouncedSearchQuery = useDebounced(searchQuery, 250);

  const [brandQuery, setBrandQuery] = useState("");
  const [brandResults, setBrandResults] = useState<BrandResult[]>([]);
  const [selectedBrand, setSelectedBrand] = useState<BrandResult | null>(null);
  const [blendQuery, setBlendQuery] = useState("");
  const [blendResults, setBlendResults] = useState<BlendResult[]>([]);
  const [selectedBlend, setSelectedBlend] = useState<BlendResult | null>(null);
  const [browseResults, setBrowseResults] = useState<PickerLabel[]>([]);
  const debouncedBrandQuery = useDebounced(brandQuery, 250);
  const debouncedBlendQuery = useDebounced(blendQuery, 250);

  const [activeFolder, setActiveFolder] = useState<PickerFolder | null>(null);

  useEffect(() => {
    if (!debouncedSearchQuery) return;
    fetch(`/api/labels/search?q=${encodeURIComponent(debouncedSearchQuery)}`)
      .then((res) => res.json())
      .then((data) => setSearchResults(data.results ?? []));
  }, [debouncedSearchQuery]);

  useEffect(() => {
    if (selectedBrand || !debouncedBrandQuery) return;
    fetch(`/api/brands/search?q=${encodeURIComponent(debouncedBrandQuery)}`)
      .then((res) => res.json())
      .then((data) => setBrandResults(data.results ?? []));
  }, [debouncedBrandQuery, selectedBrand]);

  useEffect(() => {
    if (!selectedBrand || selectedBlend || !debouncedBlendQuery) return;
    fetch(
      `/api/blends/search?brand_id=${selectedBrand.id}&q=${encodeURIComponent(debouncedBlendQuery)}`,
    )
      .then((res) => res.json())
      .then((data) => setBlendResults(data.results ?? []));
  }, [debouncedBlendQuery, selectedBrand, selectedBlend]);

  useEffect(() => {
    if (!selectedBlend) return;
    fetch(`/api/labels/search?blendId=${selectedBlend.id}`)
      .then((res) => res.json())
      .then((data) => setBrowseResults(data.results ?? []));
  }, [selectedBlend]);

  if (!open) return null;

  function handleSelect(label: PickerLabel) {
    onSelect(label);
    onClose();
  }

  function resetBrowse() {
    setSelectedBrand(null);
    setBrandQuery("");
    setSelectedBlend(null);
    setBlendQuery("");
    setBrowseResults([]);
  }

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 px-6"
      onClick={onClose}
    >
      <div
        className="max-h-[80vh] w-full max-w-lg overflow-y-auto rounded-lg bg-warm-white p-6 shadow-xl"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-center justify-between">
          <h2 className="font-heading text-xl font-semibold text-charcoal">
            Choose a label
          </h2>
          <button
            type="button"
            onClick={onClose}
            className="text-sm text-charcoal/60 hover:text-terracotta"
          >
            Close
          </button>
        </div>

        <div className="mt-4 flex gap-4 border-b border-charcoal/10 text-sm">
          {(["search", "browse", "folders"] as const).map((t) => (
            <button
              key={t}
              type="button"
              onClick={() => setTab(t)}
              className={`border-b-2 px-1 pb-2 font-medium capitalize ${
                tab === t
                  ? "border-terracotta text-terracotta"
                  : "border-transparent text-charcoal/60 hover:text-charcoal"
              }`}
            >
              {t}
            </button>
          ))}
        </div>

        {tab === "search" && (
          <div>
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder="Search brand, blend, or uploader..."
              className="mt-4 w-full rounded border border-charcoal/20 bg-cream px-3 py-2 text-charcoal"
            />
            {searchQuery && (
              <LabelResultGrid labels={searchResults} onSelect={handleSelect} />
            )}
          </div>
        )}

        {tab === "browse" && (
          <div>
            <div className="mt-4 flex flex-col gap-3">
              <input
                type="text"
                value={selectedBrand ? selectedBrand.name : brandQuery}
                onChange={(e) => {
                  setSelectedBrand(null);
                  setSelectedBlend(null);
                  setBrandQuery(e.target.value);
                }}
                placeholder="Start typing a brand name..."
                className="rounded border border-charcoal/20 bg-cream px-3 py-2 text-charcoal"
              />
              {!selectedBrand && brandResults.length > 0 && (
                <ul className="rounded border border-charcoal/20 bg-cream">
                  {brandResults.map((brand) => (
                    <li key={brand.id}>
                      <button
                        type="button"
                        onClick={() => {
                          setSelectedBrand(brand);
                          setBrandQuery("");
                          setBrandResults([]);
                        }}
                        className="w-full px-3 py-1.5 text-left hover:bg-charcoal/5"
                      >
                        {brand.name}
                      </button>
                    </li>
                  ))}
                </ul>
              )}

              {selectedBrand && (
                <input
                  type="text"
                  value={selectedBlend ? selectedBlend.name : blendQuery}
                  onChange={(e) => {
                    setSelectedBlend(null);
                    setBlendQuery(e.target.value);
                  }}
                  placeholder="Start typing a blend name..."
                  className="rounded border border-charcoal/20 bg-cream px-3 py-2 text-charcoal"
                />
              )}
              {selectedBrand && !selectedBlend && blendResults.length > 0 && (
                <ul className="rounded border border-charcoal/20 bg-cream">
                  {blendResults.map((blend) => (
                    <li key={blend.id}>
                      <button
                        type="button"
                        onClick={() => {
                          setSelectedBlend(blend);
                          setBlendQuery("");
                          setBlendResults([]);
                        }}
                        className="w-full px-3 py-1.5 text-left hover:bg-charcoal/5"
                      >
                        {blend.name}
                      </button>
                    </li>
                  ))}
                </ul>
              )}

              {selectedBrand && (
                <button
                  type="button"
                  onClick={resetBrowse}
                  className="w-fit text-xs text-terracotta hover:underline"
                >
                  Start over
                </button>
              )}
            </div>

            {selectedBlend && (
              <LabelResultGrid labels={browseResults} onSelect={handleSelect} />
            )}
          </div>
        )}

        {tab === "folders" && (
          <div>
            {activeFolder ? (
              <div>
                <button
                  type="button"
                  onClick={() => setActiveFolder(null)}
                  className="mt-4 text-sm text-terracotta hover:underline"
                >
                  &larr; All folders
                </button>
                <LabelResultGrid
                  labels={activeFolder.labels}
                  onSelect={handleSelect}
                />
              </div>
            ) : folders.length === 0 ? (
              <p className="mt-4 text-sm text-charcoal/50">
                You don&apos;t have any folders yet.
              </p>
            ) : (
              <ul className="mt-4 flex flex-col gap-2">
                {folders.map((folder) => (
                  <li key={folder.id}>
                    <button
                      type="button"
                      onClick={() => setActiveFolder(folder)}
                      className="w-full rounded border border-charcoal/10 px-3 py-2 text-left text-sm text-charcoal hover:border-terracotta"
                    >
                      {folder.name}{" "}
                      <span className="text-charcoal/50">
                        ({folder.labels.length})
                      </span>
                    </button>
                  </li>
                ))}
              </ul>
            )}
          </div>
        )}
      </div>
    </div>
  );
}