"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Icon } from "@/components/ui/Icon";
import { Swatches } from "@/components/ui/Swatches";
import { IconPicker } from "@/components/ui/IconPicker";
import { createProtocolAction, updateProtocolAction } from "@/lib/protocols/actions";
import type { ProtocolDTO } from "@/lib/protocols/queries";

// Auswahl passender Symbole für einen Protokollstrang.
const ICONS = ["history", "projects", "settings", "meetings", "shield", "activity", "alert", "list"];

export function ProtocolDialog({
  protocol,
  onClose,
}: {
  protocol: ProtocolDTO | null;
  onClose: () => void;
}) {
  const router = useRouter();
  const isNew = !protocol;

  const [name, setName] = useState(protocol?.name ?? "");
  const [description, setDescription] = useState(protocol?.description ?? "");
  const [color, setColor] = useState<string | null>(protocol?.color ?? "#9ed7ff");
  const [icon, setIcon] = useState(protocol?.icon ?? "history");
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const save = async () => {
    setError(null);
    if (!name.trim()) return setError("Name darf nicht leer sein.");

    setSaving(true);
    const payload = { name, description, color, icon };
    const res = isNew
      ? await createProtocolAction(payload)
      : await updateProtocolAction(protocol!.id, payload);
    setSaving(false);

    if (res.error) return setError(res.error);
    onClose();
    if (isNew && res.id) router.push(`/changelog?p=${res.id}`);
    router.refresh();
  };

  return (
    <div className="dialog-overlay" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <div className="dialog-card animate-in" role="dialog" aria-modal="true">
        <div className="mb-4 flex items-start gap-3">
          <span className="vault-mark" style={{ color: color ?? "var(--blue)" }}>
            <Icon name={icon} size={18} />
          </span>
          <div className="min-w-0 flex-1">
            <h3 className="leading-tight">{isNew ? "Neues Protokoll" : "Protokoll bearbeiten"}</h3>
            <p className="text-muted mt-1 text-sm">
              Ein Strang bündelt zusammengehörige Einträge — etwa Releases, Wartungen
              oder Besprechungen.
            </p>
          </div>
        </div>

        {error ? <p className="field-error mb-3">{error}</p> : null}

        <div className="flex flex-col gap-4">
          <div className="field">
            <label className="label">Name</label>
            <input
              className="input"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="z. B. Team OS Releases"
              autoFocus
            />
          </div>

          <div className="field">
            <label className="label">Beschreibung</label>
            <input
              className="input"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="Worum geht es in diesem Protokoll?"
            />
          </div>

          <div className="field">
            <label className="label">Farbe</label>
            <Swatches value={color} onChange={setColor} />
          </div>

          <div className="field">
            <label className="label">Symbol</label>
            <IconPicker value={icon} onChange={setIcon} options={ICONS} />
          </div>
        </div>

        <div className="mt-5 flex items-center justify-end gap-2">
          <button className="btn btn-ghost" onClick={onClose} disabled={saving}>
            Abbrechen
          </button>
          <button className="btn btn-primary" onClick={save} disabled={saving || !name.trim()}>
            {saving ? "Speichern …" : isNew ? "Anlegen" : "Speichern"}
          </button>
        </div>
      </div>
    </div>
  );
}