"use client";

import { useActionState, useEffect, useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import {
  createTodoTemplateAction,
  updateTodoTemplateAction,
  deleteTodoTemplateAction,
  createTodosFromTemplateAction,
} from "@/lib/actions/todos";
import type { StaffOption } from "@/components/admin/TodoBoard";

export type TodoTemplateRow = {
  id: string;
  name: string;
  defaultProject: string;
  itemCount: number;
  itemsText: string;
};

const FORMAT_HINT =
  "Eine Aufgabe pro Zeile. Optional mit „ | “ getrennt: +Tage (Fälligkeit ab Startdatum), #Label, hoch/niedrig. Beispiel: Referenzbilder sammeln | +2 | #Vorbereitung | hoch";
const fieldCls =
  "bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50";

export function TodoTemplateManager({
  templates,
  staffList,
  viewerId,
  canManage,
}: {
  templates: TodoTemplateRow[];
  staffList: StaffOption[];
  viewerId: string;
  canManage: boolean;
}) {
  return (
    <details className="mb-4 rounded-2xl border border-white/10 bg-[var(--rk-surface)] p-4">
      <summary className="cursor-pointer text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">
        ToDo-Vorlagen ({templates.length})
      </summary>
      <div className="mt-3 flex flex-col gap-2">
        {templates.length === 0 && (
          <p className="text-sm text-[var(--rk-ink-muted)]">Noch keine Vorlagen.</p>
        )}
        {templates.map((t) => (
          <TemplateRow key={t.id} tpl={t} staffList={staffList} viewerId={viewerId} canManage={canManage} />
        ))}
        {canManage && <NewTemplateForm />}
      </div>
    </details>
  );
}

function TemplateRow({
  tpl,
  staffList,
  viewerId,
  canManage,
}: {
  tpl: TodoTemplateRow;
  staffList: StaffOption[];
  viewerId: string;
  canManage: boolean;
}) {
  const router = useRouter();
  const [pending, startTransition] = useTransition();
  const [applyOpen, setApplyOpen] = useState(false);
  const [applyState, applyAction, applyPending] = useActionState(
    createTodosFromTemplateAction.bind(null, tpl.id),
    {} as { error?: string; success?: boolean }
  );

  useEffect(() => {
    if (applyState.success) {
      router.refresh();
      setApplyOpen(false);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [applyState.success]);

  return (
    <div className="rounded-lg border border-white/10 p-3">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <p className="text-sm">
          {tpl.name}{" "}
          <span className="text-xs text-[var(--rk-ink-muted)]">
            · {tpl.itemCount} ToDo{tpl.itemCount === 1 ? "" : "s"}
            {tpl.defaultProject ? ` · Projekt „${tpl.defaultProject}“` : ""}
          </span>
        </p>
        <div className="flex items-center gap-3">
          <button
            type="button"
            onClick={() => setApplyOpen((v) => !v)}
            className="rounded-lg border border-[var(--rk-accent)]/50 px-3 py-1 text-xs text-[var(--rk-accent)] hover:border-[var(--rk-accent)]"
          >
            Anwenden
          </button>
          {canManage && (
            <button
              type="button"
              disabled={pending}
              onClick={() => {
                if (confirm(`Vorlage „${tpl.name}“ löschen?`)) {
                  startTransition(async () => {
                    await deleteTodoTemplateAction(tpl.id);
                    router.refresh();
                  });
                }
              }}
              className="text-xs text-red-400/80 hover:text-red-400 disabled:opacity-50"
            >
              Löschen
            </button>
          )}
        </div>
      </div>

      {applyOpen && (
        <form action={applyAction} className="mt-3 flex flex-wrap items-end gap-2 border-t border-white/10 pt-3">
          <label className="flex flex-col gap-1 text-[0.7rem] text-[var(--rk-ink-muted)]">
            Zuständig
            <select name="assigneeId" defaultValue={viewerId} className={`${fieldCls} [color-scheme:dark] py-1.5`}>
              {staffList.map((s) => (
                <option key={s.id} value={s.id}>
                  {s.id === viewerId ? `${s.name} (ich)` : s.name}
                </option>
              ))}
            </select>
          </label>
          <label className="flex flex-col gap-1 text-[0.7rem] text-[var(--rk-ink-muted)]">
            Projekt
            <input name="project" defaultValue={tpl.defaultProject} className={`${fieldCls} py-1.5`} />
          </label>
          <label className="flex flex-col gap-1 text-[0.7rem] text-[var(--rk-ink-muted)]">
            Startdatum
            <input
              name="baseDate"
              type="date"
              defaultValue={new Date().toISOString().slice(0, 10)}
              className={`${fieldCls} [color-scheme:dark] py-1.5`}
            />
          </label>
          <button
            type="submit"
            disabled={applyPending}
            className="rounded-lg bg-[var(--rk-accent)] px-3.5 py-2 text-xs font-semibold uppercase tracking-[0.1em] text-[#141413] transition-opacity hover:opacity-90 disabled:opacity-50"
          >
            {applyPending ? "…" : `${tpl.itemCount} ToDos anlegen`}
          </button>
          {applyState.error && <p className="w-full text-xs text-red-400">{applyState.error}</p>}
        </form>
      )}

      {canManage && (
        <details className="mt-2">
          <summary className="cursor-pointer text-[0.7rem] text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)]">
            Bearbeiten ▾
          </summary>
          <TemplateEditForm tpl={tpl} />
        </details>
      )}
    </div>
  );
}

function TemplateEditForm({ tpl }: { tpl: TodoTemplateRow }) {
  const router = useRouter();
  const [state, action, pending] = useActionState(
    updateTodoTemplateAction.bind(null, tpl.id),
    {} as { error?: string; success?: boolean }
  );
  useEffect(() => {
    if (state.success) router.refresh();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [state.success]);

  return (
    <form action={action} className="mt-2 flex flex-col gap-2">
      <input name="name" defaultValue={tpl.name} required maxLength={120} className={fieldCls} />
      <input
        name="defaultProject"
        defaultValue={tpl.defaultProject}
        maxLength={80}
        placeholder="Standard-Projekt (optional)"
        className={fieldCls}
      />
      <textarea name="items" defaultValue={tpl.itemsText} rows={5} className={`${fieldCls} resize-y font-mono text-xs`} />
      <p className="text-[0.7rem] text-[var(--rk-ink-muted)]">{FORMAT_HINT}</p>
      <button
        type="submit"
        disabled={pending}
        className="self-start rounded-lg border border-white/30 px-3 py-1.5 text-xs hover:border-white disabled:opacity-50"
      >
        {pending ? "…" : "Speichern"}
      </button>
      {state.error && <p className="text-xs text-red-400">{state.error}</p>}
    </form>
  );
}

function NewTemplateForm() {
  const router = useRouter();
  const [state, action, pending] = useActionState(createTodoTemplateAction, {} as { error?: string; success?: boolean });
  const [open, setOpen] = useState(false);
  useEffect(() => {
    if (state.success) {
      router.refresh();
      setOpen(false);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [state.success]);

  if (!open) {
    return (
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="self-start rounded-lg border border-white/30 px-3 py-1.5 text-xs hover:border-white"
      >
        + Neue Vorlage
      </button>
    );
  }

  return (
    <form action={action} className="flex flex-col gap-2 rounded-lg border border-white/10 p-3">
      <input name="name" required maxLength={120} placeholder="Name, z. B. „Neue Convention“" className={fieldCls} />
      <input name="defaultProject" maxLength={80} placeholder="Standard-Projekt (optional)" className={fieldCls} />
      <textarea
        name="items"
        rows={5}
        required
        placeholder={"Team-Anmeldung prüfen | +0\nReferenzbilder sammeln | +3 | #Vorbereitung\nEquipment packen | +7 | hoch"}
        className={`${fieldCls} resize-y font-mono text-xs`}
      />
      <p className="text-[0.7rem] text-[var(--rk-ink-muted)]">{FORMAT_HINT}</p>
      <div className="flex gap-2">
        <button
          type="submit"
          disabled={pending}
          className="rounded-lg border border-white/30 px-3 py-1.5 text-xs hover:border-white disabled:opacity-50"
        >
          {pending ? "…" : "Vorlage speichern"}
        </button>
        <button
          type="button"
          onClick={() => setOpen(false)}
          className="rounded-lg border border-white/15 px-3 py-1.5 text-xs text-[var(--rk-ink-muted)] hover:border-white/40"
        >
          Abbrechen
        </button>
      </div>
      {state.error && <p className="text-xs text-red-400">{state.error}</p>}
    </form>
  );
}