"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Icon } from "@/components/ui/Icon";
import { DatePicker } from "@/components/ui/DatePicker";
import { confirmDialog, alertDialog } from "@/components/ui/Dialog";
import { createCreatorAction, updateCreatorAction, deleteCreatorAction } from "@/lib/creators/actions";
import {
  PLATFORMS,
  PLATFORM_META,
  STATUSES,
  CATEGORIES,
  GAME_CATEGORIES,
  CONTENT_TYPES,
  CONTACT_METHODS,
  type PlatformKey,
} from "@/lib/creators/constants";
import type { CreatorDetail } from "@/lib/creators/queries";
import type { CreatorStatus, CreatorContentType } from "@prisma/client";

type Opt = { id: string; name: string };
type PForm = { handle: string; url: string; followers: string; liveStatus: boolean; metrics: Record<string, string> };

export function CreatorDrawer({
  creator,
  managers,
  projects,
  autoPlatforms,
  onClose,
  onSaved,
}: {
  creator: CreatorDetail | null;
  managers: Opt[];
  projects: Opt[];
  autoPlatforms: string[];
  onClose: () => void;
  onSaved: () => void;
}) {
  const router = useRouter();
  const isNew = !creator;

  const [f, setF] = useState({
    name: creator?.name ?? "",
    firstName: creator?.firstName ?? "",
    lastName: creator?.lastName ?? "",
    stageName: creator?.stageName ?? "",
    birthDate: creator?.birthDate?.slice(0, 10) ?? "",
    country: creator?.country ?? "",
    language: creator?.language ?? "",
    timezone: creator?.timezone ?? "",
    privateEmail: creator?.privateEmail ?? "",
    avariaEmail: creator?.avariaEmail ?? "",
    phone: creator?.phone ?? "",
    discord: creator?.discord ?? "",
    preferredContact: creator?.preferredContact ?? "",
    category: creator?.category ?? "",
    gameCategory: creator?.gameCategory ?? "",
    contentType: (creator?.contentType ?? "") as CreatorContentType | "",
    contactMethod: creator?.contactMethod ?? "",
    contactedAt: creator?.contactedAt?.slice(0, 10) ?? "",
    lastActivityAt: creator?.lastActivityAt?.slice(0, 10) ?? "",
    nextContactAt: creator?.nextContactAt?.slice(0, 10) ?? "",
    entryDate: creator?.entryDate?.slice(0, 10) ?? "",
    blockedReason: creator?.blockedReason ?? "",
    notes: creator?.notes ?? "",
  });
  const set = <K extends keyof typeof f>(k: K, v: (typeof f)[K]) => setF((s) => ({ ...s, [k]: v }));

  const [status, setStatus] = useState<CreatorStatus>(creator?.status ?? "OBSERVING");
  const [rating, setRating] = useState<number>(creator?.rating ?? 0);
  const [managerId, setManagerId] = useState(creator?.managerId ?? "");
  const [deputyId, setDeputyId] = useState(creator?.deputyId ?? "");
  const [projectIds, setProjectIds] = useState<string[]>(creator?.projectIds ?? []);
  const [plats, setPlats] = useState<Record<string, PForm>>(() => {
    const out: Record<string, PForm> = {};
    for (const pk of PLATFORMS) {
      const ex = creator?.platformRows.find((r) => r.platform === pk);
      const metrics: Record<string, string> = {};
      for (const m of PLATFORM_META[pk].metrics) metrics[m.key] = ex?.metrics[m.key] != null ? String(ex.metrics[m.key]) : "";
      out[pk] = { handle: ex?.handle ?? "", url: ex?.url ?? "", followers: ex ? String(ex.followers) : "", liveStatus: ex?.liveStatus ?? false, metrics };
    }
    return out;
  });
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const setPlat = (pk: string, patch: Partial<PForm>) => setPlats((ps) => ({ ...ps, [pk]: { ...ps[pk], ...patch } }));
  const setPlatMetric = (pk: string, mk: string, v: string) => setPlats((ps) => ({ ...ps, [pk]: { ...ps[pk], metrics: { ...ps[pk].metrics, [mk]: v } } }));
  const toggleProject = (id: string) => setProjectIds((a) => (a.includes(id) ? a.filter((x) => x !== id) : [...a, id]));

  const save = async () => {
    setSaving(true);
    setError(null);
    const platforms = PLATFORMS.filter((pk) => {
      const p = plats[pk];
      return p.handle.trim() || p.url.trim() || Number(p.followers) > 0;
    }).map((pk) => {
      const p = plats[pk];
      const metrics: Record<string, number> = {};
      for (const [mk, mv] of Object.entries(p.metrics)) if (mv.trim() !== "" && !Number.isNaN(Number(mv))) metrics[mk] = Number(mv);
      return { platform: pk, handle: p.handle || null, url: p.url || null, followers: Number(p.followers) || 0, liveStatus: p.liveStatus, metrics };
    });

    const payload = {
      ...f,
      name: f.name,
      contentType: f.contentType || null,
      status,
      rating: rating || null,
      managerId: managerId || null,
      deputyId: deputyId || null,
      projectIds,
      platforms,
    };
    const res = isNew ? await createCreatorAction(payload) : await updateCreatorAction(creator!.id, payload);
    setSaving(false);
    if (res.error) return setError(res.error);
    onSaved();
    router.refresh();
  };

  const remove = async () => {
    if (!creator) return;
    if (!(await confirmDialog({ title: "Creator löschen?", message: `„${creator.stageName ?? creator.name}" und alle Daten werden dauerhaft entfernt.`, danger: true }))) return;
    const res = await deleteCreatorAction(creator.id);
    if (res.error) await alertDialog({ title: "Fehler", message: res.error, danger: true });
    else { onSaved(); }
  };

  return (
    <div className="drawer-overlay" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <div className="drawer drawer-profile animate-in">
        <div className="mb-4 flex items-center justify-between">
          <span className="eyebrow">{isNew ? "Neuer Creator" : "Creator bearbeiten"}</span>
          <button className="btn btn-ghost btn-sm" onClick={onClose} aria-label="Schließen"><Icon name="close" size={16} /></button>
        </div>
        {error ? <p className="field-error mb-3">{error}</p> : null}

        <div className="profile-body flex flex-col gap-4">
          {/* Basis */}
          <div className="card-sub">
            <div className="label mb-2">Basis</div>
            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
              <div className="field"><label className="label">Anzeigename *</label><input className="input" value={f.name} onChange={(e) => set("name", e.target.value)} placeholder="Name / Creator-Name" /></div>
              <div className="field"><label className="label">Künstlername / Nickname</label><input className="input" value={f.stageName} onChange={(e) => set("stageName", e.target.value)} placeholder="z. B. StreamKing" /></div>
              <div className="field"><label className="label">Vorname</label><input className="input" value={f.firstName} onChange={(e) => set("firstName", e.target.value)} /></div>
              <div className="field"><label className="label">Nachname</label><input className="input" value={f.lastName} onChange={(e) => set("lastName", e.target.value)} /></div>
            </div>
          </div>

          {/* Status & Pipeline */}
          <div className="card-sub">
            <div className="label mb-2">Pipeline & Bewertung</div>
            <div className="field">
              <label className="label">Status</label>
              <div className="flex flex-wrap gap-2">
                {STATUSES.map((s) => (
                  <button key={s.value} type="button" className="pill" data-active={status === s.value} onClick={() => setStatus(s.value)}>
                    <span className="status-badge-dot" style={{ background: s.color }} /> {s.label}
                  </button>
                ))}
              </div>
            </div>
            {status === "BLOCKED" ? (
              <div className="field mt-3"><label className="label">Sperrgrund</label><textarea className="textarea" style={{ minHeight: 48 }} value={f.blockedReason} onChange={(e) => set("blockedReason", e.target.value)} placeholder="Interne Dokumentation …" /></div>
            ) : null}
            <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
              <div className="field">
                <label className="label">Potenzial-Bewertung</label>
                <div className="flex items-center gap-1">{[1, 2, 3, 4, 5].map((n) => <button key={n} type="button" className="star-btn" data-active={n <= rating} onClick={() => setRating(n === rating ? 0 : n)}>★</button>)}</div>
              </div>
              <div className="field">
                <label className="label">Kontaktmethode</label>
                <select className="select" value={f.contactMethod} onChange={(e) => set("contactMethod", e.target.value)}>
                  <option value="">— keine —</option>
                  {CONTACT_METHODS.map((m) => <option key={m.value} value={m.value}>{m.label}</option>)}
                </select>
              </div>
              <div className="field"><label className="label">Kontaktaufnahme</label><DatePicker value={f.contactedAt} onChange={(v) => set("contactedAt", v)} /></div>
              <div className="field"><label className="label">Letzte Aktivität</label><DatePicker value={f.lastActivityAt} onChange={(v) => set("lastActivityAt", v)} /></div>
              <div className="field"><label className="label">Wiedervorlage</label><DatePicker value={f.nextContactAt} onChange={(v) => set("nextContactAt", v)} /></div>
              <div className="field"><label className="label">Eintrittsdatum</label><DatePicker value={f.entryDate} onChange={(v) => set("entryDate", v)} /></div>
            </div>
          </div>

          {/* Einordnung */}
          <div className="card-sub">
            <div className="label mb-2">Einordnung</div>
            <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
              <div className="field">
                <label className="label">Hauptkategorie</label>
                <select className="select" value={f.category} onChange={(e) => set("category", e.target.value)}>
                  <option value="">—</option>{CATEGORIES.map((c) => <option key={c.value} value={c.value}>{c.label}</option>)}
                </select>
              </div>
              <div className="field">
                <label className="label">Gaming-Bereich</label>
                <select className="select" value={f.gameCategory} onChange={(e) => set("gameCategory", e.target.value)}>
                  <option value="">—</option>{GAME_CATEGORIES.map((c) => <option key={c.value} value={c.value}>{c.label}</option>)}
                </select>
              </div>
              <div className="field">
                <label className="label">Content-Typ</label>
                <select className="select" value={f.contentType} onChange={(e) => set("contentType", e.target.value as CreatorContentType | "")}>
                  <option value="">—</option>{CONTENT_TYPES.map((c) => <option key={c.value} value={c.value}>{c.label}</option>)}
                </select>
              </div>
            </div>
          </div>

          {/* Betreuung */}
          <div className="card-sub">
            <div className="label mb-2">Betreuung</div>
            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
              <div className="field">
                <label className="label">Creator-Manager</label>
                <select className="select" value={managerId} onChange={(e) => setManagerId(e.target.value)}><option value="">— keiner —</option>{managers.map((m) => <option key={m.id} value={m.id}>{m.name}</option>)}</select>
              </div>
              <div className="field">
                <label className="label">Stellvertretung</label>
                <select className="select" value={deputyId} onChange={(e) => setDeputyId(e.target.value)}><option value="">— keine —</option>{managers.map((m) => <option key={m.id} value={m.id}>{m.name}</option>)}</select>
              </div>
            </div>
          </div>

          {/* Persönlich & Kontakt */}
          <div className="card-sub">
            <div className="label mb-2">Persönliche Daten & Kontakt</div>
            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
              <div className="field"><label className="label">Geburtsdatum</label><DatePicker value={f.birthDate} onChange={(v) => set("birthDate", v)} /></div>
              <div className="field"><label className="label">Land</label><input className="input" value={f.country} onChange={(e) => set("country", e.target.value)} placeholder="z. B. Deutschland" /></div>
              <div className="field"><label className="label">Sprache</label><input className="input" value={f.language} onChange={(e) => set("language", e.target.value)} placeholder="z. B. Deutsch" /></div>
              <div className="field"><label className="label">Zeitzone</label><input className="input" value={f.timezone} onChange={(e) => set("timezone", e.target.value)} placeholder="z. B. Europe/Berlin" /></div>
              <div className="field"><label className="label">Private E-Mail</label><input className="input" value={f.privateEmail} onChange={(e) => set("privateEmail", e.target.value)} /></div>
              <div className="field"><label className="label">Avaria-E-Mail</label><input className="input" value={f.avariaEmail} onChange={(e) => set("avariaEmail", e.target.value)} placeholder="name@creator.avaria-media.de" /></div>
              <div className="field"><label className="label">Telefon</label><input className="input" value={f.phone} onChange={(e) => set("phone", e.target.value)} placeholder="optional" /></div>
              <div className="field"><label className="label">Discord</label><input className="input" value={f.discord} onChange={(e) => set("discord", e.target.value)} placeholder="name#0000" /></div>
              <div className="field">
                <label className="label">Bevorzugter Kontakt</label>
                <select className="select" value={f.preferredContact} onChange={(e) => set("preferredContact", e.target.value)}>
                  <option value="">—</option>{CONTACT_METHODS.map((m) => <option key={m.value} value={m.value}>{m.label}</option>)}
                </select>
              </div>
            </div>
          </div>

          {/* Social */}
          <div className="card-sub">
            <div className="label mb-2">Social-Media-Accounts <span className="text-muted" style={{ fontWeight: 400 }}>— werden ab sofort getrackt</span></div>
            <div className="sync-hint mb-3">
              <Icon name="activity" size={14} />
              <span>
                {autoPlatforms.length
                  ? <>Handle/URL eintragen — Werte für <b style={{ color: "var(--text)" }}>{autoPlatforms.map((k) => PLATFORM_META[k as PlatformKey]?.label ?? k).join(", ")}</b> werden beim Speichern automatisch über die API abgerufen. Übrige Kanäle manuell pflegen.</>
                  : <>Noch keine API-Zugangsdaten hinterlegt — Werte werden manuell gepflegt. Sobald Twitch-/YouTube-Keys in der Umgebung gesetzt sind, ruft das System sie automatisch ab.</>}
              </span>
            </div>
            <div className="flex flex-col gap-3">
              {PLATFORMS.map((pk) => {
                const meta = PLATFORM_META[pk as PlatformKey];
                const p = plats[pk];
                const isAuto = autoPlatforms.includes(pk);
                return (
                  <div key={pk} className="platform-edit-block" style={{ ["--pc" as string]: meta.color }}>
                    <div className="flex items-center gap-2">
                      <span className="platform-icon"><Icon name={pk} size={17} /></span>
                      <span className="font-bold" style={{ minWidth: 78 }}>{meta.label}</span>
                      {isAuto ? <span className="badge" style={{ color: "#9defb0" }}>Auto</span> : null}
                      <input className="input" style={{ flex: 1, minWidth: 90 }} value={p.handle} onChange={(e) => setPlat(pk, { handle: e.target.value })} placeholder="@handle" />
                      <input className="input" style={{ flex: 1, minWidth: 110 }} value={p.url} onChange={(e) => setPlat(pk, { url: e.target.value })} placeholder="URL" />
                      <button type="button" className="pill" data-active={p.liveStatus} onClick={() => setPlat(pk, { liveStatus: !p.liveStatus })} title="Aktuell live">LIVE</button>
                    </div>
                    <div className="mt-2 flex flex-wrap gap-2">
                      <label className="metric-input"><span>{meta.followerLabel}</span><input className="input" type="number" min={0} value={p.followers} onChange={(e) => setPlat(pk, { followers: e.target.value })} /></label>
                      {meta.metrics.map((m) => (
                        <label key={m.key} className="metric-input"><span>{m.short}</span><input className="input" type="number" min={0} value={p.metrics[m.key] ?? ""} onChange={(e) => setPlatMetric(pk, m.key, e.target.value)} /></label>
                      ))}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Notizen & Projekte */}
          <div className="field"><label className="label">Interne Beschreibung / Hinweise</label><textarea className="textarea" style={{ minHeight: 60 }} value={f.notes} onChange={(e) => set("notes", e.target.value)} placeholder="Content-Art, Zielgruppe, Besonderheiten, Markenfit …" /></div>
          {projects.length > 0 ? (
            <div className="field">
              <label className="label">Projekt-Zuordnung</label>
              <div className="flex flex-wrap gap-2">
                {projects.map((p) => (
                  <button key={p.id} type="button" className="pill" data-active={projectIds.includes(p.id)} onClick={() => toggleProject(p.id)}>{p.name}{projectIds.includes(p.id) ? <Icon name="check" size={13} /> : null}</button>
                ))}
              </div>
            </div>
          ) : null}
        </div>

        <div className="form-footer">
          {!isNew ? <button className="btn btn-danger btn-sm" onClick={remove} disabled={saving}><Icon name="trash" size={14} /> Löschen</button> : <span />}
          <div className="flex items-center gap-2">
            <button className="btn btn-ghost" onClick={onClose} disabled={saving}>Abbrechen</button>
            <button className="btn btn-primary" onClick={save} disabled={saving || !f.name.trim()}>{saving ? "Speichern …" : isNew ? "Anlegen" : "Speichern"}</button>
          </div>
        </div>
      </div>
    </div>
  );
}