"use client";

import { useEffect, useState } from "react";
import { signOut, useSession } from "next-auth/react";

export default function SettingsPage() {
  const { data } = useSession();
  const [viewToken, setViewToken] = useState<string | null>(null);
  const [viewId, setViewId] = useState<string | null>(null);
  const [subscribedCategories, setSubscribedCategories] = useState<Set<string>>(new Set());
  const [allCategories, setAllCategories] = useState<{ id: string; name: string }[]>([]);
  const [categoryError, setCategoryError] = useState<string | null>(null);
  const [categoryStatus, setCategoryStatus] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [status, setStatus] = useState<string | null>(null);
  const [profileError, setProfileError] = useState<string | null>(null);
  const [profileStatus, setProfileStatus] = useState<string | null>(null);
  const [theme, setTheme] = useState<"light" | "dark">("light");
  const [copyStatus, setCopyStatus] = useState<"success" | "error" | null>(null);

  const loadView = async () => {
    try {
      const response = await fetch("/api/views/default");
      if (!response.ok) return;
      const payload = await response.json();
      setViewToken(payload.token);
      setViewId(payload.id);
      const ids = new Set<string>(
        (payload.categories || []).map((item: { categoryId: string }) => item.categoryId)
      );
      setSubscribedCategories(ids);
    } catch {
      // ignore
    }
  };

  const loadCategories = async () => {
    try {
      const response = await fetch("/api/categories");
      if (!response.ok) return;
      setAllCategories(await response.json());
    } catch {
      // ignore
    }
  };

  useEffect(() => {
    if (data?.user) {
      loadView();
      loadCategories();
    }
  }, [data?.user]);

  useEffect(() => {
    if (typeof window === "undefined") return;
    const saved = window.localStorage.getItem("theme");
    const next = saved === "dark" ? "dark" : "light";
    setTheme(next);
    document.documentElement.dataset.theme = next;
  }, []);

  const rotateToken = async () => {
    setError(null);
    setStatus(null);
    setCopyStatus(null);
    const response = await fetch("/api/views/default/rotate", { method: "POST" });
    if (!response.ok) {
      const payload = await response.json();
      setError(payload.error || "Token konnte nicht erneuert werden.");
      return;
    }
    const payload = await response.json();
    setViewToken(payload.token);
    setStatus("Neuer iCal-Link erstellt.");
  };

  const updateProfile = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setProfileError(null);
    setProfileStatus(null);
    const formData = new FormData(event.currentTarget);
    const payload = {
      currentPassword: formData.get("currentPassword"),
      newEmail: formData.get("newEmail"),
      newPassword: formData.get("newPassword")
    };

    const response = await fetch("/api/profile", {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload)
    });

    if (!response.ok) {
      const data = await response.json();
      setProfileError(data.error || "Profil konnte nicht aktualisiert werden.");
      return;
    }

    const dataRes = await response.json();
    setProfileStatus("Profil aktualisiert.");
    if (dataRes.changedEmail || dataRes.changedPassword) {
      setProfileStatus("Profil aktualisiert. Bitte erneut anmelden.");
      await signOut({ callbackUrl: "/login" });
    }
  };

  const baseUrl = typeof window === "undefined" ? "" : window.location.origin;
  const icalUrl = viewToken ? `${baseUrl}/api/ical/${viewToken}` : "";

  const applyTheme = (next: "light" | "dark") => {
    setTheme(next);
    if (typeof window !== "undefined") {
      window.localStorage.setItem("theme", next);
      document.documentElement.dataset.theme = next;
    }
  };

  const copyIcalUrl = async () => {
    if (!icalUrl) return;
    setCopyStatus(null);
    try {
      if (navigator.clipboard?.writeText) {
        await navigator.clipboard.writeText(icalUrl);
      } else {
        const textarea = document.createElement("textarea");
        textarea.value = icalUrl;
        textarea.setAttribute("readonly", "true");
        textarea.style.position = "absolute";
        textarea.style.left = "-9999px";
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand("copy");
        document.body.removeChild(textarea);
      }
      setCopyStatus("success");
    } catch {
      setCopyStatus("error");
    }
    window.setTimeout(() => setCopyStatus(null), 2500);
  };

  const toggleCategory = async (categoryId: string) => {
    if (!viewId) return;
    setCategoryError(null);
    setCategoryStatus(null);
    const isSubscribed = subscribedCategories.has(categoryId);
    const response = await fetch(`/api/views/${viewId}/categories`, {
      method: isSubscribed ? "DELETE" : "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ categoryId })
    });

    if (!response.ok) {
      const payload = await response.json();
      setCategoryError(payload.error || "Kategorien konnten nicht aktualisiert werden.");
      return;
    }

    const next = new Set(subscribedCategories);
    if (isSubscribed) {
      next.delete(categoryId);
      setCategoryStatus("Kategorie entfernt.");
    } else {
      next.add(categoryId);
      setCategoryStatus("Kategorie abonniert.");
    }
    setSubscribedCategories(next);
  };

  return (
    <div className="space-y-6">
      <section className="card space-y-4">
        <div>
          <p className="text-xs uppercase tracking-[0.2em] text-slate-500">Profil</p>
          <h1 className="text-2xl font-semibold">Einstellungen</h1>
        </div>
        <form onSubmit={updateProfile} className="grid gap-3 md:grid-cols-2">
          <input
            name="newEmail"
            type="email"
            placeholder={`Neue E-Mail (aktuell: ${data?.user?.email || ""})`}
            className="rounded-xl border border-slate-300 px-3 py-2 md:col-span-2"
          />
          <input
            name="newPassword"
            type="password"
            placeholder="Neues Passwort"
            className="rounded-xl border border-slate-300 px-3 py-2"
          />
          <input
            name="currentPassword"
            type="password"
            placeholder="Aktuelles Passwort (Pflicht)"
            required
            className="rounded-xl border border-slate-300 px-3 py-2"
          />
          <button type="submit" className="btn-accent md:col-span-2">
            Speichern
          </button>
        </form>
        {profileStatus && (
          <p className="text-sm text-emerald-600">{profileStatus}</p>
        )}
        {profileError && <p className="text-sm text-red-600">{profileError}</p>}
      </section>

      <section className="card space-y-4">
        <div>
          <p className="text-xs uppercase tracking-[0.2em] text-slate-500">
            Darstellung
          </p>
          <h2 className="text-lg font-semibold">Theme</h2>
        </div>
        <div className="flex flex-wrap gap-2">
          <button
            type="button"
            onClick={() => applyTheme("light")}
            className={`rounded-full border px-4 py-2 text-sm font-semibold transition ${
              theme === "light"
                ? "border-slate-900 bg-slate-900 text-white"
                : "border-slate-200 text-slate-700 hover:bg-slate-100"
            }`}
          >
            Hell
          </button>
          <button
            type="button"
            onClick={() => applyTheme("dark")}
            className={`rounded-full border px-4 py-2 text-sm font-semibold transition ${
              theme === "dark"
                ? "border-slate-900 bg-slate-900 text-white"
                : "border-slate-200 text-slate-700 hover:bg-slate-100"
            }`}
          >
            Dunkel
          </button>
        </div>
      </section>

      <section className="card space-y-3">
        <div>
          <p className="text-xs uppercase tracking-[0.2em] text-slate-500">iCal</p>
          <h2 className="text-lg font-semibold">Persönlicher Kalenderlink</h2>
        </div>
        <p className="text-sm text-slate-600">
          Dein Link kann in externen Kalender-Apps abonniert werden.
        </p>
        {viewToken ? (
          <div className="rounded-xl border border-slate-200 bg-slate-50 p-3 text-sm">
            <div className="flex items-center justify-between gap-3">
              <p className="font-medium">iCal URL</p>
              <div className="relative">
                <button
                  type="button"
                  onClick={copyIcalUrl}
                  aria-label="iCal-Link kopieren"
                  className="rounded-full border border-slate-200 p-2 text-slate-600 transition hover:bg-slate-100"
                >
                  <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
                    <rect x="9" y="9" width="13" height="13" rx="2" />
                    <rect x="3" y="3" width="13" height="13" rx="2" />
                  </svg>
                </button>
                {copyStatus && (
                  <div
                    className={`absolute right-0 top-full mt-2 rounded-full px-3 py-1 text-[11px] font-semibold shadow ${
                      copyStatus === "success"
                        ? "bg-emerald-100 text-emerald-700"
                        : "bg-rose-100 text-rose-700"
                    }`}
                  >
                    {copyStatus === "success" ? "Kopiert" : "Fehler"}
                  </div>
                )}
              </div>
            </div>
            <p className="break-all text-slate-700">{icalUrl}</p>
          </div>
        ) : (
          <p className="text-sm text-slate-600">iCal-Link wird geladen...</p>
        )}
        <button type="button" className="btn-ghost" onClick={rotateToken}>
          Link erneuern
        </button>
        {status && <p className="text-sm text-emerald-600">{status}</p>}
        {error && <p className="text-sm text-red-600">{error}</p>}
      </section>

      <section className="card space-y-4">
        <div>
          <p className="text-xs uppercase tracking-[0.2em] text-slate-500">
            Kategorien
          </p>
          <h2 className="text-lg font-semibold">Kategorien abonnieren</h2>
        </div>
        {allCategories.length === 0 ? (
          <p className="text-sm text-slate-600">Noch keine Kategorien vorhanden.</p>
        ) : (
          <div className="flex flex-wrap gap-2">
            {allCategories.map((category) => {
              const isSubscribed = subscribedCategories.has(category.id);
              return (
                <button
                  key={category.id}
                  type="button"
                  className={`rounded-full border px-3 py-1 text-xs ${
                    isSubscribed
                      ? "border-emerald-200 bg-emerald-50 text-emerald-700"
                      : "border-slate-200 text-slate-700"
                  }`}
                  onClick={() => toggleCategory(category.id)}
                >
                  {category.name}
                </button>
              );
            })}
          </div>
        )}
        {categoryStatus && (
          <p className="text-sm text-emerald-600">{categoryStatus}</p>
        )}
        {categoryError && <p className="text-sm text-red-600">{categoryError}</p>}
      </section>
    </div>
  );
}