"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Icon } from "@/components/ui/Icon";
import { Swatches } from "@/components/ui/Swatches";
import { saveMailSettingsAction, saveOnboardingSettingsAction, saveAbsenceTypesAction, saveNewModulesAction } from "@/lib/admin/actions";
import type { MailSettings, OnboardingSettings, AbsenceTypeDef } from "@/lib/settings";

type ModuleDef = { href: string; label: string; icon: string };

export function SettingsForm({
  mail,
  onboarding,
  absenceTypes,
  modules,
  newModules,
}: {
  mail: MailSettings;
  onboarding: OnboardingSettings;
  absenceTypes: AbsenceTypeDef[];
  modules: ModuleDef[];
  newModules: string[];
}) {
  const router = useRouter();

  const [fromName, setFromName] = useState(mail.fromName);
  const [fromEmail, setFromEmail] = useState(mail.fromEmail);
  const [mailMsg, setMailMsg] = useState<{ ok?: boolean; error?: string } | null>(null);
  const [savingMail, setSavingMail] = useState(false);

  const [mode, setMode] = useState<OnboardingSettings["passwordMode"]>(onboarding.passwordMode);
  const [defaultPassword, setDefaultPassword] = useState(onboarding.defaultPassword);
  const [obMsg, setObMsg] = useState<{ ok?: boolean; error?: string } | null>(null);
  const [savingOb, setSavingOb] = useState(false);

  const [types, setTypes] = useState<AbsenceTypeDef[]>(absenceTypes);
  const [atMsg, setAtMsg] = useState<{ ok?: boolean; error?: string } | null>(null);
  const [savingAt, setSavingAt] = useState(false);

  const [marked, setMarked] = useState<string[]>(newModules);
  const [nmMsg, setNmMsg] = useState<{ ok?: boolean; error?: string } | null>(null);
  const [savingNm, setSavingNm] = useState(false);
  const toggleMarked = (href: string) =>
    setMarked((m) => (m.includes(href) ? m.filter((x) => x !== href) : [...m, href]));
  const saveNm = async () => {
    setSavingNm(true);
    setNmMsg(null);
    const res = await saveNewModulesAction(marked);
    setSavingNm(false);
    setNmMsg(res);
    if (res.ok) router.refresh();
  };

  const saveMail = async () => {
    setSavingMail(true);
    setMailMsg(null);
    const res = await saveMailSettingsAction({ fromName, fromEmail });
    setSavingMail(false);
    setMailMsg(res);
    if (res.ok) router.refresh();
  };

  const saveOb = async () => {
    setSavingOb(true);
    setObMsg(null);
    const res = await saveOnboardingSettingsAction({ passwordMode: mode, defaultPassword });
    setSavingOb(false);
    setObMsg(res);
    if (res.ok) router.refresh();
  };

  const updateType = (i: number, patch: Partial<AbsenceTypeDef>) =>
    setTypes((ts) => ts.map((t, j) => (j === i ? { ...t, ...patch } : t)));
  const addType = () =>
    setTypes((ts) => [...ts, { key: `TYPE_${ts.length + 1}`, label: "Neue Art", color: "#9ed7ff", countsVacation: false }]);
  const removeType = (i: number) => setTypes((ts) => ts.filter((_, j) => j !== i));
  const saveAt = async () => {
    setSavingAt(true);
    setAtMsg(null);
    const res = await saveAbsenceTypesAction(types);
    setSavingAt(false);
    setAtMsg(res);
    if (res.ok) router.refresh();
  };

  return (
    <div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
      <section className="card" data-reveal>
        <h2 className="mb-1">E-Mail-Absender</h2>
        <p className="text-muted mb-4 text-sm">
          Absender für Willkommens- und Systemnachrichten. Der SMTP-Zugang selbst wird über
          Umgebungsvariablen konfiguriert.
        </p>
        <div className="flex flex-col gap-4">
          <div className="field">
            <label className="label">Absendername</label>
            <input className="input" value={fromName} onChange={(e) => setFromName(e.target.value)} placeholder="Avaria Team OS" />
          </div>
          <div className="field">
            <label className="label">Absenderadresse</label>
            <input className="input" value={fromEmail} onChange={(e) => setFromEmail(e.target.value)} placeholder="no-reply@avaria.media" />
          </div>
          <div className="text-muted text-xs">
            Vorschau: <code>{fromName || "Avaria Team OS"} &lt;{fromEmail || "no-reply@avaria.media"}&gt;</code>
          </div>
          {mailMsg?.error ? <p className="field-error">{mailMsg.error}</p> : null}
          {mailMsg?.ok ? <p className="text-sm" style={{ color: "var(--green, #7ee787)" }}>Gespeichert.</p> : null}
          <div>
            <button className="btn btn-primary" onClick={saveMail} disabled={savingMail}>
              {savingMail ? "Speichern …" : "Speichern"}
            </button>
          </div>
        </div>
      </section>

      <section className="card" data-reveal data-reveal-delay={80}>
        <h2 className="mb-1">Onboarding-Passwort</h2>
        <p className="text-muted mb-4 text-sm">
          Legt fest, wie das Erstpasswort neuer Nutzer erzeugt wird. Es wird in der Willkommens-Mail
          mitgeteilt und dem Admin nach dem Anlegen angezeigt.
        </p>
        <div className="flex flex-col gap-4">
          <div className="field">
            <label className="label">Modus</label>
            <div className="flex flex-wrap gap-2">
              <button type="button" className="pill" data-active={mode === "generated"} onClick={() => setMode("generated")}>
                <Icon name="shield" size={14} /> Automatisch generieren
              </button>
              <button type="button" className="pill" data-active={mode === "fixed"} onClick={() => setMode("fixed")}>
                <Icon name="pin" size={14} /> Fester Standardwert
              </button>
            </div>
          </div>
          {mode === "fixed" ? (
            <div className="field">
              <label className="label">Standardpasswort</label>
              <input className="input" value={defaultPassword} onChange={(e) => setDefaultPassword(e.target.value)} placeholder="mind. 8 Zeichen" />
            </div>
          ) : (
            <p className="text-muted text-sm">
              Für jeden neuen Nutzer wird ein individuelles, sicheres Passwort erzeugt (empfohlen).
            </p>
          )}
          {obMsg?.error ? <p className="field-error">{obMsg.error}</p> : null}
          {obMsg?.ok ? <p className="text-sm" style={{ color: "var(--green, #7ee787)" }}>Gespeichert.</p> : null}
          <div>
            <button className="btn btn-primary" onClick={saveOb} disabled={savingOb}>
              {savingOb ? "Speichern …" : "Speichern"}
            </button>
          </div>
        </div>
      </section>

      <section className="card lg:col-span-2" data-reveal>
        <div className="mb-3 flex items-center justify-between">
          <div>
            <h2>Abwesenheitsarten</h2>
            <p className="text-muted text-sm mt-0.5">
              Diese Arten stehen beim Beantragen von Abwesenheiten zur Auswahl.
            </p>
          </div>
          <button className="pill btn-sm" onClick={addType}>
            <Icon name="plus" size={14} /> Art
          </button>
        </div>
        <div className="flex flex-col gap-2">
          {types.map((t, i) => (
            <div key={i} className="abs-type-row">
              <span className="abs-type-dot" style={{ background: t.color }} />
              <input
                className="input"
                style={{ maxWidth: 220 }}
                value={t.label}
                onChange={(e) => updateType(i, { label: e.target.value })}
                placeholder="Bezeichnung"
              />
              <div className="flex-1">
                <Swatches value={t.color} onChange={(c) => updateType(i, { color: c ?? "#9ed7ff" })} />
              </div>
              <button
                type="button"
                className="pill btn-sm"
                data-active={t.countsVacation}
                onClick={() => updateType(i, { countsVacation: !t.countsVacation })}
                title="Zählt als Urlaubstag"
              >
                <Icon name={t.countsVacation ? "check" : "calendar"} size={13} /> Urlaub
              </button>
              <button className="att-preview-x" onClick={() => removeType(i)} aria-label="Entfernen">
                <Icon name="trash" size={14} />
              </button>
            </div>
          ))}
        </div>
        {atMsg?.error ? <p className="field-error mt-2">{atMsg.error}</p> : null}
        {atMsg?.ok ? <p className="mt-2 text-sm" style={{ color: "var(--green, #7ee787)" }}>Gespeichert.</p> : null}
        <div className="mt-4">
          <button className="btn btn-primary" onClick={saveAt} disabled={savingAt}>
            {savingAt ? "Speichern …" : "Arten speichern"}
          </button>
        </div>
      </section>

      <section className="card lg:col-span-2" data-reveal>
        <h2 className="mb-1">Module als „neu" markieren</h2>
        <p className="text-muted mb-4 text-sm">Markierte Module werden im Navigator mit einem „Neu"-Badge hervorgehoben.</p>
        <div className="mark-grid">
          {modules.map((m) => {
            const on = marked.includes(m.href);
            return (
              <button key={m.href} type="button" className="mark-tile" data-active={on} onClick={() => toggleMarked(m.href)}>
                <span className="mark-icon"><Icon name={m.icon} size={17} /></span>
                <span className="min-w-0 flex-1 truncate text-left font-bold">{m.label}</span>
                <span className="select-check" data-active={on}>{on ? <Icon name="check" size={13} /> : null}</span>
              </button>
            );
          })}
        </div>
        {nmMsg?.error ? <p className="field-error mt-3">{nmMsg.error}</p> : null}
        {nmMsg?.ok ? <p className="mt-3 text-sm" style={{ color: "var(--green, #7ee787)" }}>Gespeichert.</p> : null}
        <div className="mt-4">
          <button className="btn btn-primary" onClick={saveNm} disabled={savingNm}>
            {savingNm ? "Speichern …" : "Hervorhebung speichern"}
          </button>
        </div>
      </section>
    </div>
  );
}