"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import Shell from "../../components/shell";
import LogoImg from "../../components/logo-img";
import { validateVoucher } from "@/lib/vouchers";
import { ALLOWED_REMINDER_DAYS, DEFAULT_REMINDER_DAYS } from "@/lib/reminders";
import type { LogoCandidate } from "@/lib/logo";

// Erweiterbar für Task 5 (Kontakte): zusätzliches Feld contactIds + <ContactSelect />
// ohne bestehende Felder anzufassen — Felder als Konfiguration belassen.
const FIELDS = [
  { name: "name", label: "Name", type: "text", placeholder: "z. B. Therme Erding" },
  { name: "anbieter", label: "Anbieter", type: "text", placeholder: "z. B. Therme Erding" },
  { name: "wertCents", label: "Wert (Cent)", type: "number", placeholder: "5000" },
  { name: "restCents", label: "Rest (Cent, leer = Wert)", type: "number", placeholder: "" },
  { name: "ablaufdatum", label: "Ablaufdatum", type: "date", placeholder: "" },
  { name: "codeText", label: "Code", type: "text", placeholder: "Code oder Nummer" },
  { name: "kategorie", label: "Kategorie", type: "text", placeholder: "z. B. Erlebnis" },
  { name: "notiz", label: "Notiz", type: "text", placeholder: "Optionale Notiz" },
] as const;

const inputClass =
  "mt-1.5 h-11 w-full rounded-field border border-line bg-white px-3.5 text-sm text-ink placeholder:text-muted/60";

export default function NewVoucherPage() {
  const router = useRouter();
  const [values, setValues] = useState<Record<string, string>>({});
  const [errors, setErrors] = useState<string[]>([]);
  const [serverError, setServerError] = useState("");
  const [contacts, setContacts] = useState<{ id: number; name: string }[]>([]);
  const [contactIds, setContactIds] = useState<number[]>([]);
  const [members, setMembers] = useState<{ id: number; name: string }[]>([]);
  const [memberId, setMemberId] = useState("");
  const [reminderDays, setReminderDays] = useState<number[]>([...DEFAULT_REMINDER_DAYS]);
  const [candidates, setCandidates] = useState<LogoCandidate[]>([]);
  const [logoSearching, setLogoSearching] = useState(false);
  const [logoError, setLogoError] = useState("");
  const [logoSearched, setLogoSearched] = useState(false);
  const [selectedLogo, setSelectedLogo] = useState<LogoCandidate | null>(null);

  useEffect(() => {
    fetch("/api/contacts")
      .then((r) => (r.ok ? r.json() : []))
      .then(setContacts)
      .catch(() => {});
    fetch("/api/members")
      .then((r) => (r.ok ? r.json() : []))
      .then(setMembers)
      .catch(() => {});
  }, []);

  function set(name: string, value: string) {
    setValues((v) => ({ ...v, [name]: value }));
  }

  function toggleDay(day: number) {
    setReminderDays((days) => (days.includes(day) ? days.filter((d) => d !== day) : [...days, day].sort((a, b) => b - a)));
  }

  async function searchLogos() {
    const q = (values.anbieter ?? "").trim();
    if (!q) {
      setLogoError("Bitte zuerst einen Anbieter eintragen.");
      return;
    }
    setLogoSearching(true);
    setLogoError("");
    setLogoSearched(false);
    try {
      const res = await fetch(`/api/logos/search?q=${encodeURIComponent(q)}`);
      const data = await res.json().catch(() => null);
      if (!res.ok) {
        setLogoError(data?.error ?? "Suche fehlgeschlagen");
        setCandidates([]);
      } else {
        setCandidates(Array.isArray(data) ? data : []);
        if (!Array.isArray(data) || data.length === 0) setLogoError("Kein Logo gefunden.");
      }
    } catch {
      setLogoError("Suche fehlgeschlagen");
      setCandidates([]);
    } finally {
      setLogoSearching(false);
      setLogoSearched(true);
    }
  }

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    const wertCents = Number(values.wertCents);
    const restRaw = values.restCents;
    const input = {
      name: values.name ?? "",
      anbieter: values.anbieter ?? "",
      wertCents,
      restCents: restRaw === undefined || restRaw === "" ? wertCents : Number(restRaw),
      ablaufdatum: values.ablaufdatum || null,
      codeText: values.codeText || null,
      kategorie: values.kategorie || null,
      notiz: values.notiz || null,
    };
    const errs = validateVoucher(input);
    setErrors(errs);
    if (errs.length) return;
    const res = await fetch("/api/vouchers", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ ...input, contactIds, reminderDays, providerDomain: selectedLogo?.domain ?? null, memberId: memberId === "" ? null : Number(memberId) }),
    });
    if (!res.ok) {
      const data = await res.json().catch(() => ({}));
      setErrors(data.errors ?? []);
      setServerError(data.errors ? "" : "Speichern fehlgeschlagen");
      return;
    }
    const created = await res.json();
    router.push(`/vouchers/${created.id}`);
  }

  return (
    <Shell>
      <Link href="/" className="text-sm font-medium text-muted hover:text-ink">
        ← Zurück
      </Link>
      <h1 className="mt-2 text-2xl font-semibold tracking-tight">Gutschein anlegen</h1>
      <p className="mt-1 text-sm text-muted">Alle Angaben lassen sich später noch ändern.</p>
      <form onSubmit={onSubmit} className="mt-5 rounded-card border border-line bg-white p-5 sm:p-6" noValidate>
        <div className="mb-4">
          <label htmlFor="memberId" className="block text-[13px] font-semibold">
            Angelegt von
          </label>
          {members.length === 0 ? (
            <p className="mt-1.5 text-[13px] text-muted">
              Noch keine Haushaltsmitglieder. Lege sie unter <Link href="/settings" className="font-semibold text-brand-700 underline">Einstellungen</Link> an.
            </p>
          ) : (
            <select
              id="memberId"
              value={memberId}
              onChange={(e) => setMemberId(e.target.value)}
              className={`${inputClass} appearance-none`}
            >
              <option value="">Nicht erfasst</option>
              {members.map((m) => (
                <option key={m.id} value={m.id}>
                  {m.name}
                </option>
              ))}
            </select>
          )}
        </div>
        <div className="grid gap-4 sm:grid-cols-2">
          {FIELDS.map((f) => (
            <div key={f.name} className={f.name === "notiz" ? "sm:col-span-2" : undefined}>
              <label htmlFor={f.name} className="block text-[13px] font-semibold">
                {f.label}
              </label>
              <input
                id={f.name}
                name={f.name}
                type={f.type}
                value={values[f.name] ?? ""}
                placeholder={f.placeholder || undefined}
                onChange={(e) => set(f.name, e.target.value)}
                aria-invalid={errors.includes(f.name)}
                className={`${inputClass} ${errors.includes(f.name) ? "border-danger" : ""}`}
              />
              {errors.includes(f.name) && (
                <p className="mt-1 text-[13px] font-medium text-danger">Bitte prüfe dieses Feld.</p>
              )}
            </div>
          ))}
        </div>
        <div className="mt-4 rounded-field bg-wash p-4">
          <h2 className="text-[13px] font-semibold">Anbieterlogo</h2>
          {selectedLogo ? (
            <div className="mt-2 flex items-center gap-3">
              <LogoImg logoUrl={selectedLogo.logoUrl} name={selectedLogo.name} />
              <div className="min-w-0 flex-1">
                <p className="truncate text-sm font-semibold">{selectedLogo.name}</p>
                <p className="truncate text-[13px] text-muted">{selectedLogo.domain}</p>
              </div>
              <button
                type="button"
                onClick={() => setSelectedLogo(null)}
                className="shrink-0 rounded-field border border-line bg-white px-3 py-1.5 text-[13px] font-medium hover:text-danger"
              >
                Entfernen
              </button>
            </div>
          ) : (
            <>
              <p className="mt-0.5 text-[13px] text-muted">Logo anhand des Anbieternamens suchen und bestätigen.</p>
              <button
                type="button"
                onClick={searchLogos}
                disabled={logoSearching}
                className="mt-2 h-10 rounded-field border border-line bg-white px-4 text-sm font-semibold transition-colors hover:border-brand-600 hover:text-brand-700 disabled:opacity-60"
              >
                {logoSearching ? "Sucht …" : "Logo suchen"}
              </button>
              {logoError && <p role="alert" className="mt-2 text-[13px] font-medium text-danger">{logoError}</p>}
              {logoSearched && !logoError && candidates.length > 0 && (
                <ul className="mt-2 grid gap-1.5">
                  {candidates.map((c) => (
                    <li key={c.domain}>
                      <button
                        type="button"
                        onClick={() => {
                          setSelectedLogo(c);
                          setCandidates([]);
                          setLogoSearched(false);
                        }}
                        className="flex w-full items-center gap-3 rounded-[10px] px-2 py-1.5 text-left transition-colors hover:bg-white"
                      >
                        <LogoImg logoUrl={c.logoUrl} name={c.name} size={36} />
                        <span className="min-w-0">
                          <span className="block truncate text-sm font-semibold">{c.name}</span>
                          <span className="block truncate text-[13px] text-muted">{c.domain}</span>
                        </span>
                      </button>
                    </li>
                  ))}
                </ul>
              )}
            </>
          )}
        </div>
        <fieldset className="mt-4">
          <legend className="text-[13px] font-semibold">Erinnerung (Tage vorher)</legend>
          <p className="mt-0.5 text-[13px] text-muted">Nichts ausgewählt bedeutet keine Erinnerung.</p>
          <div className="mt-2 flex flex-wrap gap-2">
            {ALLOWED_REMINDER_DAYS.map((day) => {
              const checked = reminderDays.includes(day);
              return (
                <label
                  key={day}
                  className={`flex cursor-pointer items-center gap-2 rounded-full border px-3.5 py-2 text-sm font-medium transition-colors ${
                    checked ? "border-brand-700 bg-brand-600 text-white" : "border-line bg-white hover:border-brand-600"
                  }`}
                >
                  <input
                    type="checkbox"
                    checked={checked}
                    onChange={() => toggleDay(day)}
                    className="sr-only"
                  />
                  {day} {day === 1 ? "Tag" : "Tage"}
                </label>
              );
            })}
          </div>
        </fieldset>
        <section id="kontakte" aria-label="Empfänger" className="mt-4 rounded-field bg-wash p-4">
          <h2 className="text-[13px] font-semibold">Empfänger</h2>
          <p className="mt-0.5 text-[13px] text-muted">Wer soll an diesen Gutschein erinnert werden?</p>
          {contacts.length === 0 ? (
            <p className="mt-2 text-[13px] text-muted">
              Noch keine Kontakte. Lege sie unter <Link href="/contacts" className="font-semibold text-brand-700 underline">Kontakte</Link> an.
            </p>
          ) : (
            <ul className="mt-2 grid gap-1.5">
              {contacts.map((c) => (
                <li key={c.id}>
                  <label className="flex cursor-pointer items-center gap-2.5 rounded-lg px-1 py-1 text-sm hover:bg-white">
                    <input
                      type="checkbox"
                      checked={contactIds.includes(c.id)}
                      onChange={(e) =>
                        setContactIds((ids) => (e.target.checked ? [...ids, c.id] : ids.filter((x) => x !== c.id)))
                      }
                      className="h-4 w-4 accent-brand-700"
                    />
                    {c.name}
                  </label>
                </li>
              ))}
            </ul>
          )}
        </section>
        {serverError && (
          <p role="alert" className="mt-4 rounded-field bg-danger/10 px-3.5 py-2.5 text-sm font-medium text-danger">
            {serverError}
          </p>
        )}
        <button
          type="submit"
          className="mt-5 h-12 w-full rounded-field bg-brand-600 text-sm font-semibold text-white transition-colors hover:bg-brand-700 active:scale-[0.99] sm:w-auto sm:px-8"
        >
          Speichern
        </button>
      </form>
    </Shell>
  );
}