"use client";

import { useState } from "react";
import styles from "./CalendarFeedPanel.module.css";

export function CalendarFeedPanel({ initiallyConfigured }: { initiallyConfigured: boolean }) {
  const [configured, setConfigured] = useState(initiallyConfigured);
  const [loading, setLoading] = useState(false);
  const [url, setUrl] = useState<string | null>(null);
  const [copied, setCopied] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function generate() {
    setLoading(true);
    setError(null);
    setCopied(false);
    try {
      const res = await fetch("/api/admin/calendar-feed/regenerate", { method: "POST", credentials: "include" });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        setError(data.error || "Der Kalender-Link konnte nicht erzeugt werden.");
        return;
      }
      setUrl(data.url);
      setConfigured(true);
    } catch {
      setError("Verbindung fehlgeschlagen.");
    } finally {
      setLoading(false);
    }
  }

  async function copy() {
    if (!url) return;
    try {
      await navigator.clipboard.writeText(url);
      setCopied(true);
    } catch {
      // Clipboard API can be unavailable (e.g. insecure context) — the
      // input is still selectable/copyable by hand in that case.
    }
  }

  return (
    <div className={styles.panel}>
      <h2 className={styles.heading}>Kalender synchronisieren</h2>
      <p className={styles.hint}>
        Abonniere deinen persönlichen Kalender in Apple Kalender, Google Kalender, Outlook, Thunderbird oder einer
        anderen iCalendar-kompatiblen App. Der Link enthält ein geheimes Zugriffstoken — teile ihn nicht.
      </p>

      {!url && (
        <p className={styles.status}>
          {configured ? "Ein Kalender-Link ist eingerichtet." : "Es ist noch kein Kalender-Link eingerichtet."}
        </p>
      )}

      {!url && (
        <button type="button" className={styles.button} onClick={generate} disabled={loading}>
          {loading ? "Wird erzeugt …" : configured ? "Kalender-Link neu generieren" : "Kalender-Link generieren"}
        </button>
      )}

      {error && <p className={styles.error}>{error}</p>}

      {url && (
        <div className={styles.result}>
          <p className={styles.resultWarning}>Wird nur jetzt einmal angezeigt — bitte gleich kopieren.</p>
          <div className={styles.urlRow}>
            <input className={styles.urlInput} type="text" readOnly value={url} onFocus={(e) => e.currentTarget.select()} />
            <button type="button" className={styles.secondaryButton} onClick={copy}>
              Kopieren
            </button>
          </div>
          {copied && <p className={styles.copied}>In die Zwischenablage kopiert.</p>}
          <button type="button" className={styles.secondaryButton} style={{ marginTop: 12 }} onClick={generate} disabled={loading}>
            {loading ? "Wird erzeugt …" : "Kalender-Link neu generieren"}
          </button>
        </div>
      )}

      <p className={styles.instructions}>
        <strong>Apple Kalender:</strong> Ablage → Neues Kalenderabonnement → Link einfügen.
        <br />
        <strong>Google Kalender:</strong> Weitere Kalender „+“ → Per URL → Link einfügen.
        <br />
        <strong>Outlook:</strong> Kalender hinzufügen → Aus dem Internet abonnieren → Link einfügen.
        <br />
        <strong>Thunderbird:</strong> Kalender → Neuer Kalender → Im Netzwerk → Link einfügen.
      </p>
    </div>
  );
}