import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

interface Passage {
  id: number;
  speaker?: string;
  text: string;
  options: { label: string; nextId: number }[];
}

const celebrityScripts: { [key: string]: Passage[] } = {
  "KAHN": [ ... ], // unchanged for brevity
  "DIVINE": [ ... ],
  "GARLAND": [ ... ],
  "RIMBAUD": [ ... ]
};

const celebrityHints: { [key: string]: string } = {
  "KAHN": "*soft humming... a hint of operetta... laughter trailing off*",
  "DIVINE": "*loud chewing... heels clicking... laughter that ruptures the tape*",
  "GARLAND": "*a swelling orchestra tune, slightly warped... somewhere over something*",
  "RIMBAUD": "*ink dripping... French muttering... bootsteps in a wet alley*"
};

const celebrityList = Object.keys(celebrityScripts);

export default function SeanceSimulator() {
  const [loading, setLoading] = useState(true);
  const [celebrity, setCelebrity] = useState<string null>(null);
  const [currentId, setCurrentId] = useState(0);
  const [guessPhase, setGuessPhase] = useState(true);
  const [userGuess, setUserGuess] = useState<string null>(null);

  useEffect(() =&gt; {
    const timer = setTimeout(() =&gt; {
      const randomCeleb = celebrityList[Math.floor(Math.random() * celebrityList.length)];
      setCelebrity(randomCeleb);
      setLoading(false);
    }, 3000);
    return () =&gt; clearTimeout(timer);
  }, []);

  if (loading || !celebrity) {
    return (
      <div classname="min-h-screen bg-black text-green-300 flex items-center justify-center text-center animate-glitch">
        <div classname="font-mono text-lg animate-pulse">
          [LOADING SÉANCE FEED... PLEASE ADJUST TRACKING]<br>
          <span classname="text-xs opacity-50">VHS SIGNAL ACQUISITION IN PROGRESS</span><br><br>
          <span classname="text-sm italic text-green-400/80 animate-glitch-text">{celebrityHints[celebrityList[Math.floor(Math.random() * celebrityList.length)]]}</span>
        </div>
      </div>
    );
  }

  if (guessPhase) {
    return (
      <div classname="min-h-screen bg-black text-white p-6 flex flex-col items-center justify-center animate-glitch-soft">
        <card classname="max-w-xl bg-gray-900 border border-white/10 shadow-xl">
          <cardcontent classname="p-6 space-y-6">
            <div classname="text-sm text-green-400 uppercase tracking-wider animate-glitch-text">Spirit Transmission Incoming</div>
            <div classname="whitespace-pre-line text-lg font-mono leading-relaxed animate-glitch-text">
              A voice rises from static... Can you guess which spirit has answered your call?
            </div>
            <div classname="grid grid-cols-1 gap-3">
              {celebrityList.map((name, idx) =&gt; (
                <button key="{idx}" variant="ghost" classname="text-pink-400 hover:text-white animate-glitch-hover" onclick="{()"> {
                    setUserGuess(name);
                    setGuessPhase(false);
                    setCurrentId(0);
                  }}
                &gt;
                  {name}
                </button>
              ))}
            </div>
          </cardcontent>
        </card>
      </div>
    );
  }

  const script = celebrityScripts[celebrity];
  const current = script.find(p =&gt; p.id === currentId)!;

  return (
    <div classname="min-h-screen bg-black text-white p-6 flex items-center justify-center animate-glitch-soft">
      <card classname="max-w-xl bg-gray-900 border border-white/10 shadow-xl">
        <cardcontent classname="p-6 space-y-6">
          {current.speaker &amp;&amp; (
            <div classname="text-sm text-pink-400 uppercase tracking-wider animate-glitch-text">{current.speaker}</div>
          )}
          <div classname="whitespace-pre-line text-lg font-mono leading-relaxed animate-glitch-text">
            {current.text}
          </div>
          <div classname="grid grid-cols-1 gap-3">
            {current.options.map((opt, idx) =&gt; (
              <button key="{idx}" variant="ghost" classname="text-pink-400 hover:text-white animate-glitch-hover" onclick="{()"> setCurrentId(opt.nextId)}
              &gt;
                {opt.label}
              </button>
            ))}
          </div>
          <div classname="text-xs text-center text-white/50 pt-4">
            You guessed: <span classname="text-pink-300">{userGuess}</span>{" "}
            {userGuess === celebrity ? "✔️" : "❌"}
          </div>
        </cardcontent>
      </card>
    </div>
  );
}</string></string>