import { useCallback, useEffect, useState } from "react";
import { LogOut, Mail, RotateCw, ShieldAlert } from "lucide-react";
import OmsorgCard from "../../components/OmsorgCard";
import OmsorgButton from "../../components/ui/OmsorgButton";
import { useAuth } from "../../app/AuthContext";

function formatDate(iso) {
  return new Date(iso).toLocaleString("de-DE");
}

export default function DebugSessionsPage() {
  const { logout } = useAuth();
  const [sessions, setSessions] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  const [testEmailAddress, setTestEmailAddress] = useState("");
  const [testEmailSubject, setTestEmailSubject] = useState("");
  const [testEmailBody, setTestEmailBody] = useState("");
  const [isSendingTestEmail, setIsSendingTestEmail] = useState(false);
  const [testEmailResult, setTestEmailResult] = useState(null);

  const loadSessions = useCallback(async () => {
    setIsLoading(true);
    setError(null);
    const result = await window.omsorg.api.get("/api/admin/sessions");
    if (result.ok) {
      setSessions(result.data ?? []);
    } else {
      setError("Sessions konnten nicht geladen werden.");
    }
    setIsLoading(false);
  }, []);

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

  useEffect(() => {
    async function loadTemplate() {
      const result = await window.omsorg.api.get("/api/admin/email/password-reset-template");
      if (result.ok) {
        setTestEmailSubject(result.data.subject);
        setTestEmailBody(result.data.bodyTemplate);
      }
    }
    loadTemplate();
  }, []);

  async function revokeSession(id) {
    await window.omsorg.api.post(`/api/admin/sessions/${id}/revoke`);
    await loadSessions();
  }

  async function revokeAll() {
    await window.omsorg.api.post("/api/admin/sessions/revoke-all");
    await logout();
  }

  async function sendTestEmail() {
    setIsSendingTestEmail(true);
    setTestEmailResult(null);
    const result = await window.omsorg.api.post("/api/admin/email/test-send", {
      toAddress: testEmailAddress,
      subject: testEmailSubject,
      body: testEmailBody,
    });
    setTestEmailResult(
      result.ok
        ? { ok: true, message: `Testmail an ${testEmailAddress} ausgelöst.` }
        : {
            ok: false,
            message: result.data?.message
              ? `Testmail konnte nicht versendet werden: ${result.data.message}`
              : "Testmail konnte nicht versendet werden.",
          }
    );
    setIsSendingTestEmail(false);
  }

  return (
    <OmsorgCard title="Debug: Aktive Sessions">
      <p>
        Erzwingt bei einzelnen oder allen Nutzern sofort einen neuen Login - auch
        bereits ausgestellte Access-Tokens werden dabei ungültig, nicht erst nach Ablauf.
      </p>

      <div className="debug-sessions-actions">
        <OmsorgButton icon={RotateCw} variant="secondary" onClick={loadSessions}>
          Aktualisieren
        </OmsorgButton>
        <OmsorgButton icon={ShieldAlert} variant="danger" onClick={revokeAll}>
          Alle abmelden
        </OmsorgButton>
      </div>

      {isLoading && <p>Lädt...</p>}
      {error && <p className="login-error">{error}</p>}

      {!isLoading && !error && sessions.length === 0 && (
        <p>Keine aktiven Sessions.</p>
      )}

      {sessions.length > 0 && (
        <ul className="debug-sessions-list">
          {sessions.map((session) => (
            <li key={session.id} className="debug-sessions-row">
              <div>
                <strong>{session.username}</strong>
                <p className="debug-sessions-meta">
                  Ausgestellt: {formatDate(session.createdAt)} · Läuft ab: {formatDate(session.expiresAt)}
                </p>
              </div>
              <OmsorgButton
                icon={LogOut}
                variant="danger"
                onClick={() => revokeSession(session.id)}
              >
                Abmelden
              </OmsorgButton>
            </li>
          ))}
        </ul>
      )}

      <hr className="debug-sessions-divider" />

      <h3>E-Mail-Versand testen</h3>
      <p>
        Sendet eine Passwort-Reset-Testmail über den serverseitig konfigurierten Mail-Versand
        (<code>Email:Provider</code>, Account <code>Email:PasswordResetAccount</code>). Betreff/Text
        sind mit der echten Vorlage vorbefüllt und können vor dem Senden angepasst werden. Zugangsdaten
        selbst werden dabei nie an den Client übertragen.
      </p>

      <div className="debug-sessions-field">
        <label htmlFor="test-email-address">Empfänger</label>
        <input
          id="test-email-address"
          type="email"
          placeholder="empfaenger@beispiel.de"
          value={testEmailAddress}
          onChange={(event) => setTestEmailAddress(event.target.value)}
        />
      </div>

      <div className="debug-sessions-field">
        <label htmlFor="test-email-subject">Betreff</label>
        <input
          id="test-email-subject"
          type="text"
          value={testEmailSubject}
          onChange={(event) => setTestEmailSubject(event.target.value)}
        />
      </div>

      <div className="debug-sessions-field">
        <label htmlFor="test-email-body">Text</label>
        <textarea
          id="test-email-body"
          rows={4}
          value={testEmailBody}
          onChange={(event) => setTestEmailBody(event.target.value)}
        />
      </div>

      <div className="debug-sessions-actions">
        <OmsorgButton
          icon={Mail}
          variant="secondary"
          disabled={!testEmailAddress || !testEmailSubject || !testEmailBody || isSendingTestEmail}
          onClick={sendTestEmail}
        >
          {isSendingTestEmail ? "Sende..." : "Test-E-Mail senden"}
        </OmsorgButton>
      </div>

      {testEmailResult && (
        <p className={testEmailResult.ok ? "debug-sessions-meta" : "login-error"}>
          {testEmailResult.message}
        </p>
      )}
    </OmsorgCard>
  );
}
