"use client";

import { useEffect, useMemo, useState } from "react";
import Button from "@/components/ui/Button";
import Input from "@/components/ui/Input";
import Modal from "@/components/ui/Modal";

type Category = { id: string; name: string; slug: string };
type Props = { businessId: string; onClose(): void; onSave(): void };

export default function EventCategoryModal({ businessId, onClose, onSave }: Props) {
  const [name, setName] = useState("");
  const [selected, setSelected] = useState<Category | null>(null);
  const [error, setError] = useState("");
  const [saving, setSaving] = useState(false);
  const [categories, setCategories] = useState<Category[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let active = true;
    fetch(`/api/businesses/${businessId}/event-categories`)
      .then((res) => res.ok ? res.json() : [])
      .then((data) => { if (active) setCategories(data); })
      .finally(() => { if (active) setLoading(false); });
    return () => { active = false; };
  }, [businessId]);

  const value = name.trim();
  const canSave = useMemo(() => Boolean(value) && (!selected || value !== selected.name), [selected, value]);
  const reset = () => { setSelected(null); setName(""); setError(""); };
  const select = (category: Category) => { setSelected(category); setName(category.name); setError(""); };

  async function submit() {
    if (!canSave) return;
    setSaving(true);
    setError("");
    try {
      const editing = Boolean(selected);
      const res = await fetch(
        editing ? `/api/businesses/${businessId}/event-categories/${selected!.id}` : `/api/businesses/${businessId}/event-categories`,
        { method: editing ? "PATCH" : "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: value }) },
      );
      const body = await res.json();
      if (!res.ok) { setError(typeof body.error === "string" ? body.error : `Unable to ${editing ? "update" : "create"} the category.`); return; }
      onSave();
    } catch {
      setError(`Unable to ${selected ? "update" : "create"} the category.`);
    } finally { setSaving(false); }
  }

  return (
    <Modal title={selected ? "Edit category" : "Manage categories"} description="Create categories or select an existing one to rename it." onClose={onClose}>
      <div className="space-y-6 px-5 py-5 sm:px-6">
        <section>
          <div className="flex items-center justify-between gap-3">
            <div><p className="text-sm font-semibold text-[var(--text)]">Saved categories</p><p className="mt-1 text-xs text-[var(--text-faint)]">Select one to edit its name.</p></div>
            {selected && <button type="button" onClick={reset} className="text-xs font-medium text-[var(--accent)] hover:text-[var(--accent-hover)]">Add new</button>}
          </div>
          {loading ? <p className="mt-3 text-sm text-[var(--text-faint)]">Loading categories...</p> : categories.length === 0 ? <p className="mt-3 rounded-xl border border-dashed border-[var(--border)] px-3 py-4 text-sm text-[var(--text-faint)]">No categories created yet.</p> : (
            <div className="mt-3 flex max-h-40 flex-wrap gap-2 overflow-y-auto pr-1">
              {categories.map((category) => <button type="button" key={category.id} onClick={() => select(category)} aria-pressed={selected?.id === category.id} className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${selected?.id === category.id ? "border-[var(--accent)] bg-[var(--accent-muted)] text-[var(--accent-hover)]" : "border-transparent bg-[var(--bg-hover)] text-[var(--text-muted)] hover:border-[var(--border)] hover:text-[var(--text)]"}`}>{category.name}</button>)}
            </div>
          )}
        </section>
        <section className="border-t border-[var(--border)] pt-5">
          <Input label={selected ? "Edit category name" : "New category name"} value={name} onChange={(event) => { setName(event.target.value); setError(""); }} placeholder="e.g. Networking" autoFocus required />
          {selected && <p className="mt-2 text-xs text-[var(--text-faint)]">Editing &ldquo;{selected.name}&rdquo;</p>}
        </section>
        {error && <p className="rounded-xl border border-red-500/20 bg-red-500/10 px-3 py-2.5 text-sm text-red-500">{error}</p>}
      </div>
      <div className="flex justify-end gap-3 border-t border-[var(--border)] px-5 py-4 sm:px-6">
        <Button variant="secondary" onClick={onClose} disabled={saving}>Cancel</Button>
        <Button onClick={submit} disabled={saving || !canSave}>{saving ? "Saving..." : selected ? "Update category" : "Create category"}</Button>
      </div>
    </Modal>
  );
}