"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { clsx } from "clsx";
import {
  changePasswordAction,
  createApiKeyAction,
  deleteChannelAction,
  importDataAction,
  revokeApiKeyAction,
  runSyncAction,
  saveChannelAction,
  setInstanceNameAction,
  setPublicProfilesAction,
  setRegistrationAction,
  setUserActiveAction,
  setUserRoleAction,
  testChannelAction,
  toggleChannelAction,
  updateProfileAction,
} from "@/app/actions/settings";
import { useToasts } from "@/components/Toasts";
import { formatDate } from "@/lib/labels";

/** Wiederverwendete Bausteine der Einstellungsseiten. */

function Field({
  id,
  label,
  hint,
  ...props
}: React.InputHTMLAttributes<HTMLInputElement> & { id: string; label: string; hint?: string }) {
  return (
    <div className="space-y-1.5">
      <label htmlFor={id} className="block text-sm font-medium text-[var(--fl-muted)]">
        {label}
      </label>
      <input id={id} name={id} className="fl-input" {...props} />
      {hint && <p className="text-xs text-[var(--fl-faint)]">{hint}</p>}
    </div>
  );
}

function Toggle({
  checked,
  onChange,
  label,
  hint,
  disabled,
}: {
  checked: boolean;
  onChange: (value: boolean) => void;
  label: string;
  hint?: string;
  disabled?: boolean;
}) {
  return (
    <label className="flex cursor-pointer items-start gap-3">
      <input
        type="checkbox"
        checked={checked}
        disabled={disabled}
        onChange={(event) => onChange(event.target.checked)}
        className="sr-only"
      />
      <span
        aria-hidden
        className={clsx(
          "mt-0.5 h-5 w-9 shrink-0 rounded-full p-0.5 transition-colors",
          checked ? "" : "bg-[var(--fl-surface-2)] ring-1 ring-[var(--fl-border-strong)]",
        )}
        style={checked ? { backgroundImage: "var(--fl-gradient)" } : undefined}
      >
        <span
          className={clsx(
            "block h-4 w-4 rounded-full bg-[var(--fl-text)] transition-transform",
            checked && "translate-x-4",
          )}
        />
      </span>
      <span className="min-w-0">
        <span className="block text-sm font-medium">{label}</span>
        {hint && <span className="block text-xs text-[var(--fl-faint)]">{hint}</span>}
      </span>
    </label>
  );
}

// ---------------------------------------------------------------------------
// Profil
// ---------------------------------------------------------------------------

export function ProfileForm({
  user,
  publicProfilesEnabled,
}: {
  user: {
    name: string;
    email: string;
    region: string;
    publicProfile: boolean;
    showAchievements: boolean;
    profileSlug: string | null;
    notifyNewEpisode: boolean;
    notifyRelease: boolean;
    notifyAvailability: boolean;
  };
  publicProfilesEnabled: boolean;
}) {
  const router = useRouter();
  const { report } = useToasts();
  const [pending, startTransition] = useTransition();
  const [state, setState] = useState(user);

  return (
    <form
      action={() =>
        startTransition(async () => {
          report(
            await updateProfileAction({
              name: state.name,
              region: state.region,
              publicProfile: state.publicProfile,
              showAchievements: state.showAchievements,
              profileSlug: state.profileSlug || null,
              notifyNewEpisode: state.notifyNewEpisode,
              notifyRelease: state.notifyRelease,
              notifyAvailability: state.notifyAvailability,
            }),
          );
          router.refresh();
        })
      }
      className="space-y-5"
    >
      <Field
        id="name"
        label="Anzeigename"
        value={state.name}
        onChange={(event) => setState({ ...state, name: event.target.value })}
        required
      />

      <div className="space-y-1.5">
        <label className="block text-sm font-medium text-[var(--fl-muted)]">E-Mail-Adresse</label>
        <p className="fl-input text-[var(--fl-faint)]">{user.email}</p>
      </div>

      <Field
        id="region"
        label="Region"
        value={state.region}
        maxLength={2}
        onChange={(event) => setState({ ...state, region: event.target.value.toUpperCase() })}
        hint="Zwei Buchstaben nach ISO 3166 — bestimmt, welche Streamingdienste angezeigt werden (DE, AT, CH …)."
      />

      <fieldset className="space-y-3">
        <legend className="mb-1 text-sm font-medium text-[var(--fl-muted)]">
          Wovon soll Flimmer dir berichten?
        </legend>
        <Toggle
          checked={state.notifyNewEpisode}
          onChange={(value) => setState({ ...state, notifyNewEpisode: value })}
          label="Neue Episoden"
          hint="Wenn bei einer Serie in deiner Bibliothek eine Folge dazukommt."
        />
        <Toggle
          checked={state.notifyRelease}
          onChange={(value) => setState({ ...state, notifyRelease: value })}
          label="Neue Releases"
          hint="Kinostart oder Heimkinostart eines Films auf deiner Watchlist."
        />
        <Toggle
          checked={state.notifyAvailability}
          onChange={(value) => setState({ ...state, notifyAvailability: value })}
          label="Neu verfügbar"
          hint="Wenn ein Watchlist-Titel auf einem Dienst in deiner Region auftaucht."
        />
      </fieldset>

      {publicProfilesEnabled && (
        <fieldset className="space-y-3">
          <legend className="mb-1 text-sm font-medium text-[var(--fl-muted)]">
            Öffentliches Profil
          </legend>
          <Toggle
            checked={state.publicProfile}
            onChange={(value) => setState({ ...state, publicProfile: value })}
            label="Profil öffentlich zeigen"
            hint="Eine schlichte Seite mit deinen Zahlen und zuletzt gesehenen Titeln — ohne Notizen."
          />
          {state.publicProfile && (
            <>
              <Field
                id="profileSlug"
                label="Adresse"
                value={state.profileSlug ?? ""}
                onChange={(event) => setState({ ...state, profileSlug: event.target.value })}
                placeholder="dein-name"
                hint="Erreichbar unter /u/<adresse>"
              />
              <Toggle
                checked={state.showAchievements}
                onChange={(value) => setState({ ...state, showAchievements: value })}
                label="Errungenschaften zeigen"
                hint="Die erreichten Abzeichen erscheinen auf der Profilseite."
              />
            </>
          )}
        </fieldset>
      )}

      <button type="submit" disabled={pending} className="fl-btn fl-btn-primary">
        {pending ? "Einen Moment …" : "Speichern"}
      </button>
    </form>
  );
}

export function PasswordForm() {
  const { report } = useToasts();
  const [pending, startTransition] = useTransition();

  return (
    <form
      action={(formData) =>
        startTransition(async () => {
          const result = await changePasswordAction({
            current: String(formData.get("current") ?? ""),
            next: String(formData.get("next") ?? ""),
            repeat: String(formData.get("repeat") ?? ""),
          });
          report(result);
          if (result.ok) window.location.href = "/anmelden";
        })
      }
      className="space-y-4"
    >
      <Field id="current" label="Bisheriges Passwort" type="password" autoComplete="current-password" required />
      <Field
        id="next"
        label="Neues Passwort"
        type="password"
        autoComplete="new-password"
        required
        hint="Mindestens 10 Zeichen."
      />
      <Field id="repeat" label="Neues Passwort wiederholen" type="password" autoComplete="new-password" required />
      <p className="text-xs text-[var(--fl-faint)]">
        Nach dem Wechsel wirst du auf allen Geräten abgemeldet.
      </p>
      <button type="submit" disabled={pending} className="fl-btn fl-btn-ghost">
        Passwort ändern
      </button>
    </form>
  );
}

// ---------------------------------------------------------------------------
// API-Schlüssel
// ---------------------------------------------------------------------------

export function ApiKeys({
  keys,
}: {
  keys: { id: string; name: string; prefix: string; lastUsedAt: Date | null; createdAt: Date }[];
}) {
  const router = useRouter();
  const { report } = useToasts();
  const [pending, startTransition] = useTransition();
  const [secret, setSecret] = useState<string | null>(null);

  return (
    <div className="space-y-5">
      <form
        action={(formData) => {
          const name = String(formData.get("keyName") ?? "").trim();
          if (!name) return;
          startTransition(async () => {
            const result = await createApiKeyAction(name);
            report(result);
            if (result.secret) setSecret(result.secret);
            router.refresh();
          });
        }}
        className="flex flex-wrap items-end gap-2"
      >
        <div className="min-w-48 flex-1 space-y-1.5">
          <label htmlFor="keyName" className="block text-sm font-medium text-[var(--fl-muted)]">
            Neuer Schlüssel
          </label>
          <input id="keyName" name="keyName" placeholder="z. B. Handy-Skript" className="fl-input" />
        </div>
        <button type="submit" disabled={pending} className="fl-btn fl-btn-primary">
          Anlegen
        </button>
      </form>

      {secret && (
        <div
          role="alert"
          className="rounded-xl border p-3"
          style={{
            borderColor: "color-mix(in oklab, var(--fl-warning) 45%, transparent)",
            backgroundColor: "color-mix(in oklab, var(--fl-warning) 10%, transparent)",
          }}
        >
          <p className="text-sm font-medium text-[var(--fl-warning)]">
            Einmalig sichtbar — jetzt kopieren:
          </p>
          <code className="mt-2 block break-all rounded-lg bg-[var(--fl-surface-2)] p-2 font-mono text-xs">
            {secret}
          </code>
          <button
            type="button"
            onClick={() => {
              void navigator.clipboard?.writeText(secret);
              report({ ok: true, message: "In die Zwischenablage kopiert" });
            }}
            className="fl-btn fl-btn-ghost mt-2 px-3 py-1.5 text-sm"
          >
            Kopieren
          </button>
        </div>
      )}

      {keys.length === 0 ? (
        <p className="text-sm text-[var(--fl-faint)]">Noch kein Schlüssel angelegt.</p>
      ) : (
        <ul className="divide-y divide-[var(--fl-border)]">
          {keys.map((key) => (
            <li key={key.id} className="flex flex-wrap items-center gap-3 py-3">
              <div className="min-w-0 flex-1">
                <p className="text-sm font-medium">{key.name}</p>
                <p className="font-mono text-xs text-[var(--fl-faint)]">
                  {key.prefix}… · angelegt {formatDate(key.createdAt)}
                  {key.lastUsedAt ? ` · zuletzt benutzt ${formatDate(key.lastUsedAt)}` : " · nie benutzt"}
                </p>
              </div>
              <button
                type="button"
                disabled={pending}
                onClick={() =>
                  startTransition(async () => {
                    report(await revokeApiKeyAction(key.id));
                    router.refresh();
                  })
                }
                className="text-sm text-[var(--fl-faint)] underline-offset-4 hover:text-[var(--fl-danger)] hover:underline"
              >
                Zurückziehen
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Benachrichtigungskanäle
// ---------------------------------------------------------------------------

const CHANNEL_FIELDS: Record<string, { key: string; label: string; placeholder: string }[]> = {
  EMAIL: [{ key: "email", label: "Abweichende Adresse", placeholder: "leer = Konto-Adresse" }],
  NTFY: [
    { key: "server", label: "Server", placeholder: "https://ntfy.sh" },
    { key: "topic", label: "Topic", placeholder: "flimmer-abc123" },
    { key: "token", label: "Zugriffstoken", placeholder: "optional" },
  ],
  GOTIFY: [
    { key: "url", label: "Server", placeholder: "https://gotify.example.com" },
    { key: "token", label: "Anwendungs-Token", placeholder: "AxB..." },
  ],
  WEBHOOK: [
    { key: "webhookUrl", label: "Adresse", placeholder: "https://discord.com/api/webhooks/…" },
  ],
};

const CHANNEL_LABEL: Record<string, string> = {
  EMAIL: "E-Mail",
  NTFY: "ntfy",
  GOTIFY: "Gotify",
  WEBHOOK: "Webhook (Discord, Slack, …)",
};

export function ChannelList({
  channels,
  smtpReady,
}: {
  channels: { id: string; kind: string; name: string; config: Record<string, string>; enabled: boolean }[];
  smtpReady: boolean;
}) {
  const router = useRouter();
  const { report } = useToasts();
  const [pending, startTransition] = useTransition();
  const [kind, setKind] = useState<string>("NTFY");
  const [config, setConfig] = useState<Record<string, string>>({});

  return (
    <div className="space-y-6">
      {channels.length > 0 && (
        <ul className="divide-y divide-[var(--fl-border)]">
          {channels.map((channel) => (
            <li key={channel.id} className="flex flex-wrap items-center gap-3 py-3">
              <div className="min-w-0 flex-1">
                <p className="text-sm font-medium">
                  {channel.name}
                  <span className="ml-2 text-xs font-normal text-[var(--fl-faint)]">
                    {CHANNEL_LABEL[channel.kind] ?? channel.kind}
                  </span>
                </p>
                <p className="truncate text-xs text-[var(--fl-faint)]">
                  {Object.entries(channel.config)
                    .filter(([key]) => key !== "token")
                    .map(([key, value]) => `${key}: ${value}`)
                    .join(" · ") || "ohne weitere Angaben"}
                </p>
              </div>

              <Toggle
                checked={channel.enabled}
                onChange={(value) =>
                  startTransition(async () => {
                    report(await toggleChannelAction(channel.id, value));
                    router.refresh();
                  })
                }
                label=""
              />
              <button
                type="button"
                disabled={pending}
                onClick={() =>
                  startTransition(async () => {
                    report(await testChannelAction(channel.id));
                  })
                }
                className="fl-btn fl-btn-ghost px-3 py-1.5 text-sm"
              >
                Testen
              </button>
              <button
                type="button"
                disabled={pending}
                onClick={() =>
                  startTransition(async () => {
                    report(await deleteChannelAction(channel.id));
                    router.refresh();
                  })
                }
                className="text-sm text-[var(--fl-faint)] underline-offset-4 hover:text-[var(--fl-danger)] hover:underline"
              >
                Entfernen
              </button>
            </li>
          ))}
        </ul>
      )}

      <form
        action={(formData) => {
          const name = String(formData.get("channelName") ?? "").trim();
          if (!name) return;
          startTransition(async () => {
            report(await saveChannelAction({ kind, name, config }));
            setConfig({});
            router.refresh();
          });
        }}
        className="space-y-4 border-t border-[var(--fl-border)] pt-5"
      >
        <h3 className="text-sm font-semibold">Kanal hinzufügen</h3>

        <div className="space-y-1.5">
          <label htmlFor="kind" className="block text-sm font-medium text-[var(--fl-muted)]">
            Art
          </label>
          <select
            id="kind"
            value={kind}
            onChange={(event) => {
              setKind(event.target.value);
              setConfig({});
            }}
            className="fl-input"
          >
            {Object.entries(CHANNEL_LABEL).map(([value, label]) => (
              <option key={value} value={value}>
                {label}
              </option>
            ))}
          </select>
          {kind === "EMAIL" && !smtpReady && (
            <p className="text-xs text-[var(--fl-warning)]">
              Für diese Instanz ist kein SMTP-Zugang eingerichtet — E-Mails können nicht verschickt
              werden.
            </p>
          )}
        </div>

        <Field id="channelName" label="Name" placeholder="z. B. Handy" required />

        {(CHANNEL_FIELDS[kind] ?? []).map((field) => (
          <div key={field.key} className="space-y-1.5">
            <label
              htmlFor={`cfg-${field.key}`}
              className="block text-sm font-medium text-[var(--fl-muted)]"
            >
              {field.label}
            </label>
            <input
              id={`cfg-${field.key}`}
              value={config[field.key] ?? ""}
              onChange={(event) => setConfig({ ...config, [field.key]: event.target.value })}
              placeholder={field.placeholder}
              className="fl-input"
            />
          </div>
        ))}

        <button type="submit" disabled={pending} className="fl-btn fl-btn-primary">
          Kanal anlegen
        </button>
      </form>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Import
// ---------------------------------------------------------------------------

export function ImportForm() {
  const router = useRouter();
  const { report } = useToasts();
  const [pending, startTransition] = useTransition();
  const [format, setFormat] = useState<"csv" | "trakt">("csv");
  const [summary, setSummary] = useState<string[] | null>(null);

  return (
    <div className="space-y-4">
      <div className="flex gap-2">
        {(["csv", "trakt"] as const).map((option) => (
          <button
            key={option}
            type="button"
            onClick={() => setFormat(option)}
            aria-pressed={format === option}
            className="rounded-full border px-4 py-2 text-sm font-medium transition-colors"
            style={
              format === option
                ? {
                    backgroundImage: "var(--fl-gradient)",
                    color: "var(--fl-on-accent)",
                    borderColor: "transparent",
                  }
                : { borderColor: "var(--fl-border)", color: "var(--fl-muted)" }
            }
          >
            {option === "csv" ? "CSV" : "Trakt.tv (JSON)"}
          </button>
        ))}
      </div>

      <p className="text-sm text-[var(--fl-muted)]">
        {format === "csv"
          ? "Die Kopfzeile braucht mindestens eine Spalte mit dem Titel. Erkannt werden außerdem Typ, Status, Bewertung, TMDB, Jahr und Notiz."
          : "Ein Export aus Trakt.tv — Watchlist, History, Ratings oder Collection. Flimmer sucht selbst die Einträge heraus."}
      </p>

      <input
        type="file"
        accept={format === "csv" ? ".csv,text/csv" : ".json,application/json"}
        onChange={(event) => {
          const file = event.target.files?.[0];
          if (!file) return;
          setSummary(null);

          startTransition(async () => {
            const content = await file.text();
            const result = await importDataAction(format, content);
            report({ ok: result.ok, message: result.message });

            if (result.summary) {
              setSummary([
                `${result.summary.processed} Zeilen gelesen`,
                `${result.summary.added} neu aufgenommen`,
                `${result.summary.skipped} übersprungen (schon vorhanden oder unvollständig)`,
                ...result.summary.errors.slice(0, 5),
              ]);
            }
            router.refresh();
          });
        }}
        disabled={pending}
        className="fl-input file:mr-3 file:rounded-lg file:border-0 file:bg-[var(--fl-surface-2)] file:px-3 file:py-1.5 file:text-sm file:text-[var(--fl-text)]"
      />

      <p className="text-xs text-[var(--fl-faint)]">
        Der Import überschreibt nichts: Titel, die schon in deiner Bibliothek liegen, bleiben
        unangetastet.
      </p>

      {summary && (
        <ul className="rounded-xl border border-[var(--fl-border)] p-3 text-sm text-[var(--fl-muted)]">
          {summary.map((line, index) => (
            <li key={index}>{line}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Verwaltung
// ---------------------------------------------------------------------------

export function AdminSettings({
  registrationEnabled,
  publicProfilesEnabled,
  instanceName,
}: {
  registrationEnabled: boolean;
  publicProfilesEnabled: boolean;
  instanceName: string;
}) {
  const router = useRouter();
  const { report } = useToasts();
  const [pending, startTransition] = useTransition();

  return (
    <div className="space-y-5">
      <form
        action={(formData) =>
          startTransition(async () => {
            report(await setInstanceNameAction(String(formData.get("instanceName") ?? "")));
            router.refresh();
          })
        }
        className="flex flex-wrap items-end gap-2"
      >
        <div className="min-w-48 flex-1">
          <Field id="instanceName" label="Name der Instanz" defaultValue={instanceName} />
        </div>
        <button type="submit" disabled={pending} className="fl-btn fl-btn-ghost">
          Speichern
        </button>
      </form>

      <Toggle
        checked={registrationEnabled}
        onChange={(value) =>
          startTransition(async () => {
            report(await setRegistrationAction(value));
            router.refresh();
          })
        }
        label="Registrierung offen"
        hint="Solange es kein einziges Konto gibt, bleibt die Registrierung unabhängig davon offen."
      />

      <Toggle
        checked={publicProfilesEnabled}
        onChange={(value) =>
          startTransition(async () => {
            report(await setPublicProfilesAction(value));
            router.refresh();
          })
        }
        label="Öffentliche Profile erlauben"
        hint="Schaltet die Profilseiten instanzweit ab, unabhängig von der Einstellung der Nutzer."
      />

      <div className="border-t border-[var(--fl-border)] pt-5">
        <button
          type="button"
          disabled={pending}
          onClick={() =>
            startTransition(async () => {
              report(await runSyncAction());
              router.refresh();
            })
          }
          className="fl-btn fl-btn-primary"
        >
          {pending ? "Läuft …" : "Abgleich jetzt starten"}
        </button>
        <p className="mt-2 text-xs text-[var(--fl-faint)]">
          Frischt laufende Serien bei TMDB auf, verschickt fällige Benachrichtigungen und räumt den
          Papierkorb. Kann eine Weile dauern.
        </p>
      </div>
    </div>
  );
}

export function UserRow({
  user,
  isSelf,
}: {
  user: { id: string; name: string; email: string; role: string; isActive: boolean; entries: number };
  isSelf: boolean;
}) {
  const router = useRouter();
  const { report } = useToasts();
  const [pending, startTransition] = useTransition();

  return (
    <li className="flex flex-wrap items-center gap-3 py-3">
      <div className="min-w-0 flex-1">
        <p className="text-sm font-medium">
          {user.name}
          {user.role === "ADMIN" && (
            <span
              className="ml-2 rounded-full px-2 py-0.5 text-[0.65rem] font-semibold text-[var(--fl-on-accent)]"
              style={{ backgroundImage: "var(--fl-gradient)" }}
            >
              Verwaltung
            </span>
          )}
          {!user.isActive && (
            <span className="ml-2 text-[0.65rem] font-semibold text-[var(--fl-danger)]">gesperrt</span>
          )}
        </p>
        <p className="truncate text-xs text-[var(--fl-faint)]">
          {user.email} · {user.entries} {user.entries === 1 ? "Titel" : "Titel"}
        </p>
      </div>

      {!isSelf && (
        <>
          <button
            type="button"
            disabled={pending}
            onClick={() =>
              startTransition(async () => {
                report(await setUserRoleAction(user.id, user.role === "ADMIN" ? "USER" : "ADMIN"));
                router.refresh();
              })
            }
            className="fl-btn fl-btn-ghost px-3 py-1.5 text-sm"
          >
            {user.role === "ADMIN" ? "Rechte entziehen" : "Zur Verwaltung"}
          </button>
          <button
            type="button"
            disabled={pending}
            onClick={() =>
              startTransition(async () => {
                report(await setUserActiveAction(user.id, !user.isActive));
                router.refresh();
              })
            }
            className="text-sm text-[var(--fl-faint)] underline-offset-4 hover:text-[var(--fl-text)] hover:underline"
          >
            {user.isActive ? "Sperren" : "Freigeben"}
          </button>
        </>
      )}
    </li>
  );
}