// components/StartSessionPopup.tsx
import Popup from "@/components/PopUp";
import Button from "@/components/Button";
import { useState } from "react";
import { useRouter } from "next/router";

interface Props {
  open: boolean;
  onClose: () => void;
  onConfirm: () => void | Promise<void>;
  // wenn du onConfirm weiterverwenden möchtest, wir rufen es trotzdem
}

export default function StartSessionPopup({ open, onClose, onConfirm }: Props) {
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState("");
  const router = useRouter();

  async function handleConfirm() {
    try {
      setLoading(true);
      setMessage("");

      // optional: führe die bestehende onConfirm-Logik aus
      await onConfirm?.();

      // HIER: Call API to create session
      // NOTE: Ersetze adminId mit echtem Auth-User-ID
      // const adminId = 1; // TODO: aus deinem Auth-System ziehen (z.B. getSession)
    
      const res = await fetch("/api/ws/new", {
        method: "POST",
        headers: {"Content-Type": "application/json" },
        body: JSON.stringify({}),
      });

      if (!res.ok) {
        const json = await res.json().catch(() => ({ message: "Fehler" }));
        throw new Error(json?.message ?? "Fehler beim Erstellen der Session");
      }




      const { sessionCode } = await res.json();
      // redirect to lobby
      router.push(`/session/${sessionCode}`);
      // nur bei Erfolg schließen (optional)
      onClose();
    } catch (err: unknown) {
      setMessage(err instanceof Error ? err.message : "Unbekannter Fehler");
      console.error(err);
    } finally {
      setLoading(false);
    }
  }

  return (
    <Popup isOpen={open} onClose={onClose}>
      <div className="flex flex-col gap-4 text-left">
        <h2 className="text-xl font-semibold">Session-Raum erstellen?</h2>
        <p>Möchtest du wirklich eine neue Kreativ-Session starten?</p>
        {message && <p className="text-red-500">{message}</p>}
        <div style={{ display: "flex", gap: "var(--spacing-md)", justifyContent: "flex-end", marginTop: "var(--spacing-lg)" }}>
          <Button variant="secondary" onClick={onClose}>
            Abbrechen
          </Button>
          <Button variant="primary" onClick={handleConfirm} disabled={loading}>
            {loading ? "Starte..." : "Ja, starten"}
          </Button>
        </div>
      </div>
    </Popup>
  );
}