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: "Reichen Sie hier vertraulich einen Vorschlag oder ein Anliegen für die Tagesordnung ein.",
    target_committee_id: "",
  };
}

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

function validatePasswordRule(password) {
  const value = String(password || "").trim();
  if (!value) return true;
  return value.length >= 4;
}

export default function KummerkastenAdminPage() {
  const [settings, setSettings] = useState(emptySettings());
  const [committees, setCommittees] = useState([]);
  const [submissions, setSubmissions] = useState([]);
  const [publicPath, setPublicPath] = useState("/kummerkasten");
  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("/kummerkasten/settings");
      setSettings({ ...emptySettings(), ...(data.settings || {}) });
      setCommittees(Array.isArray(data.committees) ? data.committees : []);
      setSubmissions(Array.isArray(data.submissions) ? data.submissions : []);
      setPublicPath(data.public_path || "/kummerkasten");
    } catch (err) {
      setError(err.message || "Kummerkasten-Einstellungen konnten nicht geladen werden.");
    } finally {
      setLoading(false);
    }
  }

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

  function update(field, value) {
    setSettings((prev) => ({ ...prev, [field]: value }));
  }

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

    const accessPassword = String(settings.access_password || "").trim();

    if (!validatePasswordRule(accessPassword)) {
      setError("Das globale Kennwort muss mindestens 4 Zeichen lang sein.");
      return;
    }

    if (settings.enabled && !settings.password_set && !accessPassword) {
      setError("Zum Einschalten des Kummerkastens muss zuerst ein Kennwort eingegeben werden.");
      return;
    }

    if (settings.enabled && settings.clear_password && !accessPassword) {
      setError("Der Kummerkasten kann nicht eingeschaltet bleiben, wenn das gespeicherte Kennwort entfernt wird.");
      return;
    }

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

    try {
      const result = await api.put("/kummerkasten/settings", payload);
      setMessage("Kummerkasten-Einstellungen gespeichert.");
      setSettings({ ...emptySettings(), ...(result.settings || {}), access_password: "", clear_password: false });
      await load();
    } catch (err) {
      setError(err.message || "Kummerkasten-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>{`
        .kummer-admin-grid { display: grid; gap: 18px; }
        .kummer-admin-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
        .kummer-admin-form { display: grid; gap: 14px; }
        .kummer-admin-inline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
        .kummer-admin-status { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 10px; font-weight: 800; }
        .kummer-admin-status.on { background: #ecfdf5; color: #065f46; }
        .kummer-admin-status.off { background: #fef2f2; color: #991b1b; }
        .kummer-admin-url { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
        .kummer-admin-url code { background: rgba(15, 23, 42, .06); padding: 9px 11px; border-radius: 12px; word-break: break-all; }
        .kummer-admin-note { color: var(--muted); line-height: 1.45; margin: 0; }
        .kummer-admin-form .check-row { display: flex; align-items: center; gap: 10px; font-weight: 700; }
        @media (max-width: 980px) { .kummer-admin-two, .kummer-admin-inline { grid-template-columns: 1fr; } }
      `}</style>

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

        <SectionCard
          title="Kummerkasten"
          subtitle="Fast öffentliche Seite mit globalem Kennwort. Eingereichte Anliegen werden automatisch als TOP-Bestandseinträge erzeugt."
          actions={
            <button className="btn secondary" type="button" onClick={load} disabled={loading}>
              {loading ? "Lade…" : "Aktualisieren"}
            </button>
          }
        >
          <div className="kummer-admin-url">
            <span className={`kummer-admin-status ${settings.enabled ? "on" : "off"}`}>
              {settings.enabled ? "Eingeschaltet" : "Ausgeschaltet"}
            </span>
            <code>{publicUrl}</code>
            <button className="mini-btn" type="button" onClick={copyPublicUrl}>URL kopieren</button>
          </div>
        </SectionCard>

        <div className="kummer-admin-two">
          <SectionCard title="Einstellungen" subtitle="Zum Einschalten muss ein Kennwort gesetzt sein. Das Kennwort wird nur als Hash gespeichert.">
            <form className="kummer-admin-form" onSubmit={save}>
              <label className="check-row">
                <input
                  type="checkbox"
                  checked={Boolean(settings.enabled)}
                  onChange={(event) => update("enabled", event.target.checked)}
                />
                <span>Kummerkasten-Seite einschalten</span>
              </label>

              <label>
                <span>Globales Kennwort {settings.password_set ? "(bereits gesetzt)" : ""}</span>
                <input
                  className="input"
                  type="password"
                  value={settings.access_password || ""}
                  onChange={(event) => update("access_password", event.target.value)}
                  placeholder={settings.password_set ? "Leer lassen, um Kennwort beizubehalten" : "Kennwort setzen"}
                  autoComplete="new-password"
                  minLength={4}
                  maxLength={200}
                />
              </label>

              <p className="kummer-admin-note">
                Passwortregel: Das globale Kennwort muss mindestens 4 Zeichen lang sein. Zum Einschalten muss ein Kennwort gespeichert sein. Wenn Sie ein neues Kennwort eintragen, wird es beim Speichern direkt übernommen.
              </p>

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

              <label>
                <span>Einleitungstext der öffentlichen Seite</span>
                <textarea
                  className="input textarea"
                  value={settings.intro_text || ""}
                  onChange={(event) => update("intro_text", event.target.value)}
                />
              </label>
              <label>
                <span>Ziel-Gremium / Ausschuss</span>
                <select
                  className="input"
                  value={settings.target_committee_id || ""}
                  onChange={(event) => update("target_committee_id", event.target.value)}
                >
                  <option value="">Kein Ziel-Gremium</option>
                  {committees.map((committee) => (
                    <option key={committee.id} value={committee.id}>{committee.name}</option>
                  ))}
                </select>
              </label>

              <p className="kummer-admin-note">
                Einreichungen landen im TOP-Bestand ohne Sitzungszuordnung. Die spätere Zuordnung zu einer Sitzung erfolgt wie bei normalen TOP-Bestandseinträgen.
              </p>

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

          <SectionCard title="Letzte Einreichungen" subtitle="Die erzeugten TOPs sind zusätzlich im TOP-Bestand sichtbar.">
            <div className="table-wrap">
              <table className="table">
                <thead>
                  <tr>
                    <th>Zeitpunkt</th>
                    <th>Einreichung</th>
                    <th>TOP</th>
                  </tr>
                </thead>
                <tbody>
                  {submissions.map((item) => (
                    <tr key={item.id}>
                      <td>{dateTime(item.created_at)}</td>
                      <td>
                        <strong>{item.title}</strong>
                        <br />
                        <small>
                          {item.submitter_name || "anonym"}
                          {item.target_committee_name ? ` · ${item.target_committee_name}` : ""}
                        </small>
                      </td>
                      <td>
                        #{item.agenda_item_id}
                        <br />
                        <small>{item.agenda_title}</small>
                      </td>
                    </tr>
                  ))}
                  {!submissions.length ? (
                    <tr><td colSpan="3">Noch keine Einreichungen vorhanden.</td></tr>
                  ) : null}
                </tbody>
              </table>
            </div>
          </SectionCard>
        </div>
      </div>
    </>
  );
}
