import { useState } from "react";
import { AnimatePresence } from "framer-motion";
import { FunnelBackground } from "./Background";
import { StepShell } from "./StepShell";
import { Welcome } from "./steps/Welcome";
import { Details } from "./steps/Details";
import { Follow } from "./steps/Follow";
import { Upload } from "./steps/Upload";
import { Quiz } from "./steps/Quiz";
import { Result } from "./steps/Result";
import type { FunnelData, UserDetails, QuizAnswer } from "./types";
import { Toaster } from "@/components/ui/sonner";

const initial: FunnelData = {
  step: 0,
  user: { fullName: "", email: "", phone: "", instagram: "" },
  follows: null,
  screenshotName: null,
  answers: [],
  score: 0,
};

export function Funnel() {
  const [d, setD] = useState<FunnelData>(initial);

  const goto = (step: number) => setD((p) => ({ ...p, step }));
  const setUser = (user: UserDetails) => setD((p) => ({ ...p, user, step: 2 }));
  const setFollows = (v: boolean) => setD((p) => ({ ...p, follows: v }));
  const setScreenshot = (n: string) => setD((p) => ({ ...p, screenshotName: n }));
  const completeQuiz = (answers: QuizAnswer[], score: number) =>
    setD((p) => ({ ...p, answers, score, step: 5 }));

  return (
    <div className="min-h-screen flex items-center justify-center bg-grain">
      <FunnelBackground />
      <Toaster theme="dark" position="top-center" />
      <AnimatePresence mode="wait">
        <StepShell key={d.step} step={d.step}>
          {d.step === 0 && <Welcome onNext={() => goto(1)} />}
          {d.step === 1 && (
            <Details initial={d.user} onBack={() => goto(0)} onNext={setUser} />
          )}
          {d.step === 2 && (
            <Follow
              follows={d.follows}
              setFollows={setFollows}
              onBack={() => goto(1)}
              onNext={() => goto(3)}
            />
          )}
          {d.step === 3 && (
            <Upload
              current={d.screenshotName}
              setScreenshot={setScreenshot}
              onBack={() => goto(2)}
              onNext={() => goto(4)}
            />
          )}
          {d.step === 4 && (
            <Quiz onBack={() => goto(3)} onComplete={completeQuiz} />
          )}
          {d.step === 5 && (
            <Result data={d} onRestart={() => setD(initial)} />
          )}
        </StepShell>
      </AnimatePresence>
    </div>
  );
}