"use client";
import Link from "next/link";

const DEBUG_ENABLED = process.env.NEXT_PUBLIC_ENABLE_DEBUG !== "0";

const PHASES: { phase: string; screens: [string, string][] }[] = [
  {
    phase: "Phase 1 — The Mirror",
    screens: [
      ["hook", "Hook (remarketing entry)"],
      ["confession", "How many tomorrows?"],
      ["count_react", "Count reaction"],
      ["excuses", "Your Excuses (Tinder)"],
      ["response", "Excuse reaction"],
      ["loop", "The Loop (animation)"],
      ["sayit", "Say it out loud"],
      ["sit", "The Sit (10s)"],
      ["checkin", "Name the feeling"],
      ["debrief", "The Debrief (felt moment + threat + relief)"],
      ["debrief2", "The Debrief 2 (reflex + it gets harder)"],
    ],
  },
  {
    phase: "Phase 2 — The Crack",
    screens: [
      ["question", "What if you don't enjoy it?"],
      ["choice", "Can you smoke now?"],
      ["mindful_grab", "Mindful: grab a cigarette"],
      ["mindful_light", "Mindful: light up"],
      ["mindful_attention", "Mindful: where's the pleasure?"],
      ["mindful_autopilot", "Mindful: autopilot test"],
      ["mindful_reveal", "Mindful: the reveal"],
      ["memory_recall", "Memory: recall (no cigarette)"],
      ["memory_reveal", "Memory: the reveal"],
      ["reframe", "The Reframe"],
    ],
  },
  {
    phase: "Phase 3 — The Bridge",
    screens: [
      ["twopaths", "Two Paths (voicemails)"],
      ["offer", "The Offer (conversion)"],
      ["success", "Start success"],
      ["impl", "Implementation intention"],
      ["done", "Done"],
      ["notnow", "Not now (objection + community)"],
    ],
  },
];

export default function SessionDebug() {
  if (!DEBUG_ENABLED) {
    return (
      <main className="flex flex-1 items-center justify-center px-6 text-center">
        <p className="text-lg font-bold">Not available</p>
      </main>
    );
  }
  return (
    <main className="mx-auto w-full max-w-2xl px-5 py-8">
      <h1 className="text-2xl font-extrabold text-teal-deep">Discovery (V4) — QA Debug</h1>
      <p className="mt-1 text-sm text-muted-foreground">
        Jump to any screen (opens with sample answers so personalized copy renders).{" "}
        <Link href="/" className="font-semibold text-teal underline">
          ▶ start from the top
        </Link>
      </p>

      {PHASES.map((p) => (
        <section key={p.phase} className="mt-7">
          <h2 className="border-b-2 border-border pb-1 text-lg font-bold">{p.phase}</h2>
          <div className="mt-2 space-y-1">
            {p.screens.map(([id, label]) => (
              <Link
                key={id}
                href={`/?screen=${id}`}
                target="_blank"
                className="flex items-center gap-3 rounded-lg border border-border bg-card px-3 py-2 text-sm transition hover:border-teal/60 hover:bg-accent/30"
              >
                <span className="min-w-[150px] font-bold text-teal-deep">{id}</span>
                <span className="text-muted-foreground">{label}</span>
              </Link>
            ))}
          </div>
        </section>
      ))}
    </main>
  );
}