import { useEffect, useMemo, useState } from "react";
import SectionCard from "../components/SectionCard";
import { api } from "../lib/api";

function emptySettings() {
  return {
    enabled: false,
    password_set: false,
    access_password: "",
    clear_password: false,
    intro_text: "Vom Betriebsrat freigegebene Dokumente",
  };
}

function dateTime(value) {
  if (!value) return "";
  return new Intl.DateTimeFormat("de-DE", {
    dateStyle: "short",
    timeStyle: "short",
  }).format(new Date(value));
}

export default function PublicDocumentsAdminPage() {
  const [settings, setSettings] = useState(emptySettings());
  const [documents, setDocuments] = useState([]);
  const [publicPath, setPublicPath] = useState("/public-documents");
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState("");
  const [error, setError] = useState("");

  const publicUrl = useMemo(() => {
    if (typeof window === "undefined") return publicPath;
    return `${window.location.origin}${publicPath}`;
  }, [publicPath]);

  async function load() {
    setLoading(true);
    setError("");
    try {
      const data = await api.get("/documents/public-settings");
      setSettings({ ...emptySettings(), ...(data.settings || {}), access_password: "", clear_password: false });
      setDocuments(Array.isArray(data.documents) ? data.documents : []);
      setPublicPath(data.public_path || "/public-documents");
    } catch (err) {
      setError(err.message || "Einstellungen für öffentliche Dokumente konnten nicht geladen werden.");
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    load();
  }, []);

  function update(field, value) {
    setSettings((prev) => {
      const next = { ...prev, [field]: value };
      if (field === "access_password" && value) next.clear_password = false;
      if (field === "clear_password" && value) next.access_password = "";
      return next;
    });
  }

  async function save(event) {
    event.preventDefault();
    setError("");
    setMessage("");

    const password = String(settings.access_password || "").trim();
    const hasPasswordAfterSave = Boolean(password) || (Boolean(settings.password_set) && !settings.clear_password);

    if (password && password.length < 4) {
      setError("Das globale Kennwort muss mindestens 4 Zeichen lang sein.");
      return;
    }

    if (settings.enabled && !hasPasswordAfterSave) {
      setError("Zum Einschalten der öffentlichen Dokumentenseite muss ein Kennwort mit mindestens 4 Zeichen gesetzt sein.");
      return;
    }

    const payload = {
      enabled: Boolean(settings.enabled),
      intro_text: settings.intro_text || "",
      access_password: password,
      clear_password: Boolean(settings.clear_password),
    };

    try {
      const result = await api.put("/documents/public-settings", payload);
      setMessage("Einstellungen für öffentliche Dokumente gespeichert.");
      setSettings({ ...emptySettings(), ...(result.settings || {}), access_password: "", clear_password: false });
      await load();
    } catch (err) {
      setError(err.message || "Einstellungen konnten nicht gespeichert werden.");
    }
  }

  async function copyPublicUrl() {
    try {
      await navigator.clipboard.writeText(publicUrl);
      setMessage("Öffentliche URL kopiert.");
    } catch {
      setError("URL konnte nicht in die Zwischenablage kopiert werden.");
    }
  }

  return (
    <>
      <style>{`
        .public-doc-admin-grid { display: grid; gap: 18px; }
        .public-doc-admin-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
        .public-doc-admin-form { display: grid; gap: 14px; }
        .public-doc-admin-status-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
        .public-doc-admin-status { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 10px; font-weight: 800; }
        .public-doc-admin-status.on { background: #ecfdf5; color: #065f46; }
        .public-doc-admin-status.off { background: #fef2f2; color: #991b1b; }
        .public-doc-admin-status.neutral { background: #eff6ff; color: #1d4ed8; }
        .public-doc-admin-url { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
        .public-doc-admin-url code { background: rgba(15, 23, 42, .06); padding: 9px 11px; border-radius: 12px; word-break: break-all; }
        .public-doc-admin-note { color: var(--muted); line-height: 1.45; margin: 0; }
        .public-doc-admin-form .check-row { display: flex; align-items: center; gap: 10px; font-weight: 700; }
        .public-doc-admin-password-box { border: 1px solid rgba(37, 99, 235, .18); background: #f8fbff; border-radius: 18px; padding: 14px; display: grid; gap: 12px; }
        .public-doc-admin-password-box h3 { margin: 0; font-size: 1rem; color: #0f172a; }
        @media (max-width: 980px) { .public-doc-admin-two { grid-template-columns: 1fr; } }
      `}</style>

      <div className="public-doc-admin-grid">
        {error ? <div className="alert error">{error}</div> : null}
        {message ? <div className="alert success">{message}</div> : null}

        <SectionCard
          title="Öffentliche Dokumente"
          subtitle="Fast öffentliche Seite für Dokumente mit Vertraulichkeit „Öffentlich“. Der Zugriff ist nur mit globalem Kennwort möglich."
          actions={<button className="btn secondary" type="button" onClick={load} disabled={loading}>{loading ? "Lade…" : "Aktualisieren"}</button>}
        >
          <div className="public-doc-admin-status-row">
            <span className={`public-doc-admin-status ${settings.enabled ? "on" : "off"}`}>
              {settings.enabled ? "Eingeschaltet" : "Ausgeschaltet"}
            </span>
            <span className={`public-doc-admin-status ${settings.password_set ? "neutral" : "off"}`}>
              {settings.password_set ? "Kennwort gesetzt" : "Kein Kennwort gesetzt"}
            </span>
          </div>
          <div className="public-doc-admin-url" style={{ marginTop: 12 }}>
            <code>{publicUrl}</code>
            <button className="mini-btn" type="button" onClick={copyPublicUrl}>URL kopieren</button>
          </div>
        </SectionCard>

        <div className="public-doc-admin-two">
          <SectionCard title="Einstellungen" subtitle="Auf der öffentlichen Seite erscheinen nur Dokumente mit Vertraulichkeit „Öffentlich“ und erfolgreichem Virenscan — nach Kennworteingabe.">
            <form className="public-doc-admin-form" onSubmit={save}>
              <label className="check-row">
                <input type="checkbox" checked={Boolean(settings.enabled)} onChange={(event) => update("enabled", event.target.checked)} />
                <span>Öffentliche Dokumentenseite einschalten</span>
              </label>

              <div className="public-doc-admin-password-box">
                <h3>Kennwortschutz</h3>
                <p className="public-doc-admin-note">
                  Passwortregel: Das globale Kennwort muss mindestens 4 Zeichen lang sein. Ohne Kennwort kann die öffentliche Dokumentenseite nicht eingeschaltet werden.
                </p>

                <label>
                  <span>Globales Kennwort setzen/ändern</span>
                  <input
                    className="input"
                    type="password"
                    minLength="4"
                    value={settings.access_password || ""}
                    onChange={(event) => update("access_password", event.target.value)}
                    placeholder={settings.password_set ? "Neues Kennwort eingeben, um es zu ändern" : "Kennwort mindestens 4 Zeichen"}
                    autoComplete="new-password"
                  />
                </label>

                {settings.password_set ? (
                  <label className="check-row">
                    <input type="checkbox" checked={Boolean(settings.clear_password)} onChange={(event) => update("clear_password", event.target.checked)} />
                    <span>Kennwort entfernen</span>
                  </label>
                ) : null}
              </div>

              <label>
                <span>Beschreibung der öffentlichen Seite</span>
                <textarea className="input textarea" value={settings.intro_text || ""} onChange={(event) => update("intro_text", event.target.value)} />
              </label>

              <p className="public-doc-admin-note">
                Dokumente werden auf der öffentlichen Seite bereitgestellt, wenn sie im Dokument-Dialog die Vertraulichkeit „Öffentlich“ erhalten. Sichtbar sind sie erst nach Eingabe des globalen Kennworts.
              </p>

              <button className="btn" type="submit">Einstellungen speichern</button>
            </form>
          </SectionCard>

          <SectionCard title="Öffentlich freigegebene Dokumente" subtitle="Diese Dokumente werden nach Kennworteingabe auf der öffentlichen Seite gelistet.">
            <div className="table-wrap">
              <table className="table">
                <thead>
                  <tr><th>Dokument</th><th>Kategorie</th><th>Scan</th><th>Hochgeladen</th></tr>
                </thead>
                <tbody>
                  {documents.map((item) => (
                    <tr key={item.id}>
                      <td><strong>{item.title}</strong><br /><small>{item.document_number} · {item.file_name}</small></td>
                      <td>{item.category_label || "—"}</td>
                      <td>{item.scan_status}</td>
                      <td>{dateTime(item.uploaded_at)}</td>
                    </tr>
                  ))}
                  {!documents.length ? <tr><td colSpan="4">Noch keine öffentlich freigegebenen Dokumente vorhanden.</td></tr> : null}
                </tbody>
              </table>
            </div>
          </SectionCard>
        </div>
      </div>
    </>
  );
}
