"use client";

import { useState, useTransition } from "react";
import { getSensitiveDataAction, setSensitiveDataAction } from "@/lib/actions/sensitiveData";

type Values = { iban: string; socialSecurityNumber: string; taxId: string };
type AuditEntry = { id: string; action: "viewed" | "edited"; byName: string; at: string };

// Geteilt zwischen Kunden-Selbstauskunft (/account/profile) und Admin-
// Personalakte (/admin/team/[clientId]) - dieselbe Komponente, nur ein
// anderes clientId. Maskiert per Default, entschlüsselt erst auf expliziten
// Klick (siehe Kommentar in sensitiveData.ts, warum nicht schon beim
// Seitenaufruf) - Sicherheitsanforderung Personalsystem, 24.09.2026.
export function SensitiveDataPanel({
  clientId,
  auditLog,
}: {
  clientId: string;
  // Nur von der Admin-Seite übergeben (payroll_sensitive_data-Berechtigung
  // schon dort geprüft) - im Selbstauskunft-Kontext undefined, dann wird
  // kein Audit-Log-Abschnitt gezeigt.
  auditLog?: AuditEntry[];
}) {
  const [values, setValues] = useState<Values | null>(null);
  const [editing, setEditing] = useState(false);
  const [pending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);
  const [saved, setSaved] = useState(false);

  function reveal() {
    setError(null);
    startTransition(async () => {
      const res = await getSensitiveDataAction(clientId);
      if (res.error) setError(res.error);
      else setValues({ iban: res.iban || "", socialSecurityNumber: res.socialSecurityNumber || "", taxId: res.taxId || "" });
    });
  }

  function save(formData: FormData) {
    setError(null);
    startTransition(async () => {
      const res = await setSensitiveDataAction(clientId, formData);
      if (res.error) setError(res.error);
      else {
        setEditing(false);
        setValues({
          iban: String(formData.get("iban") || ""),
          socialSecurityNumber: String(formData.get("socialSecurityNumber") || ""),
          taxId: String(formData.get("taxId") || ""),
        });
        setSaved(true);
      }
    });
  }

  return (
    <div className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-5 flex flex-col gap-3">
      <div>
        <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">Sensible Daten</p>
        <p className="text-xs text-[var(--rk-ink-muted)] mt-0.5">
          Bankverbindung, Sozialversicherungsnummer, Steuer-ID — verschlüsselt gespeichert, nur für dich selbst und die Personalabteilung sichtbar.
        </p>
      </div>

      {!values && !editing && (
        <button
          type="button"
          disabled={pending}
          onClick={reveal}
          className="self-start border border-white/30 rounded-lg px-4 py-2 text-xs uppercase tracking-[0.15em] hover:border-white disabled:opacity-50"
        >
          {pending ? "…" : "Anzeigen"}
        </button>
      )}

      {values && !editing && (
        <div className="flex flex-col gap-2 text-sm">
          <p>
            <span className="text-[var(--rk-ink-muted)]">IBAN: </span>
            {values.iban || "—"}
          </p>
          <p>
            <span className="text-[var(--rk-ink-muted)]">Sozialversicherungsnummer: </span>
            {values.socialSecurityNumber || "—"}
          </p>
          <p>
            <span className="text-[var(--rk-ink-muted)]">Steuer-ID: </span>
            {values.taxId || "—"}
          </p>
          <div className="flex items-center gap-3 mt-1">
            <button type="button" onClick={() => setEditing(true)} className="text-xs border border-white/30 rounded-lg px-3.5 py-1.5 hover:border-white">
              Bearbeiten
            </button>
            <button type="button" onClick={() => setValues(null)} className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)]">
              Ausblenden
            </button>
          </div>
        </div>
      )}

      {editing && (
        <form
          action={(formData) => save(formData)}
          className="flex flex-col gap-3"
        >
          <label className="flex flex-col gap-1 text-xs">
            <span className="text-[var(--rk-ink-muted)]">IBAN</span>
            <input
              name="iban"
              defaultValue={values?.iban}
              autoComplete="off"
              disabled={pending}
              className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 text-sm disabled:opacity-50"
            />
          </label>
          <label className="flex flex-col gap-1 text-xs">
            <span className="text-[var(--rk-ink-muted)]">Sozialversicherungsnummer</span>
            <input
              name="socialSecurityNumber"
              defaultValue={values?.socialSecurityNumber}
              autoComplete="off"
              disabled={pending}
              className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 text-sm disabled:opacity-50"
            />
          </label>
          <label className="flex flex-col gap-1 text-xs">
            <span className="text-[var(--rk-ink-muted)]">Steuer-ID</span>
            <input
              name="taxId"
              defaultValue={values?.taxId}
              autoComplete="off"
              disabled={pending}
              className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 text-sm disabled:opacity-50"
            />
          </label>
          <div className="flex items-center gap-3">
            <button
              type="submit"
              disabled={pending}
              className="text-xs border border-white/30 rounded-lg px-3.5 py-1.5 hover:border-white disabled:opacity-50"
            >
              Speichern
            </button>
            <button type="button" disabled={pending} onClick={() => setEditing(false)} className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)]">
              Abbrechen
            </button>
          </div>
        </form>
      )}

      {error && <p className="text-xs text-red-400">{error}</p>}
      {saved && !editing && <p className="text-xs text-emerald-400">Gespeichert.</p>}

      {auditLog && auditLog.length > 0 && (
        <div className="mt-2 pt-3 border-t border-white/10">
          <p className="text-[0.65rem] uppercase tracking-[0.08em] text-[var(--rk-ink-muted)] mb-1.5">Zugriffs-Log</p>
          <div className="flex flex-col gap-1">
            {auditLog.map((e) => (
              <p key={e.id} className="text-xs text-[var(--rk-ink-muted)]">
                {e.byName} · {e.action === "viewed" ? "angesehen" : "geändert"} ·{" "}
                {new Date(e.at).toLocaleString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" })}
              </p>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}