import { useEffect, useState } from "react";
import { signOut } from "next-auth/react";
import Popup from "@/components/PopUp";
import Button from "@/components/Button";
import loginStyles from "@/styles/login.module.css";

interface Props {
  open: boolean;
  onClose: () => void;
}

export default function DeleteProfilePopUp({ open, onClose }: Props) {
  const [confirmed, setConfirmed] = useState(false);
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState("");
  const [messageType, setMessageType] = useState<"error" | "success" | null>(null);

  useEffect(() => {
    if (!open) {
      setConfirmed(false);
      setMessage("");
      setMessageType(null);
      setLoading(false);
    }
  }, [open]);

  async function handleDelete(e: React.FormEvent) {
    e.preventDefault();

    if (!confirmed) {
      setMessage("Bitte bestätige die Löschung per Checkbox.");
      setMessageType("error");
      return;
    }

    setLoading(true);
    setMessage("");
    setMessageType(null);

    try {
      const res = await fetch("/api/user/delete", { method: "DELETE" });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Fehler beim Löschen.");

      setMessage("Profil gelöscht. Du wirst abgemeldet...");
      setMessageType("success");

      setTimeout(() => {
        signOut({ callbackUrl: "/login" });
      }, 600);
    } catch (err: unknown) {
      setMessage(err instanceof Error ? err.message : "Unbekannter Fehler");
      setMessageType("error");
    } finally {
      setLoading(false);
    }
  }

  const messageColor =
    messageType === "success" ? "var(--color-success)" : "var(--color-error)";

  return (
    <Popup isOpen={open} onClose={onClose}>
      <form onSubmit={handleDelete} className={loginStyles.gapMd}>
        <h2>Profil löschen</h2>
        <p>
          Dein Konto und zugehörige Daten werden entfernt. Dieser Schritt kann nicht rückgängig
          gemacht werden.
        </p>

        <label style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
          <input
            type="checkbox"
            checked={confirmed}
            onChange={(e) => setConfirmed(e.target.checked)}
          />
          <span>Ja, ich möchte mein Profil dauerhaft löschen.</span>
        </label>

        <Button
          type="submit"
          disabled={loading}
        >
          {loading ? "Lösche..." : "Profil löschen"}
        </Button>

        {message && <p style={{ color: messageColor }}>{message}</p>}
      </form>
    </Popup>
  );
}