import { useEffect, useState } from "react";

const STEPS = [
  "Drafting the screens",
  "Setting up logins",
  "Saving your stuff",
  "Putting it online",
];

export default function LaunchModal({ prompt, onClose }) {
  const [step, setStep] = useState(0);

  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  useEffect(() => {
    if (step >= STEPS.length) return undefined;
    const t = setTimeout(() => setStep(step + 1), 700);
    return () => clearTimeout(t);
  }, [step]);

  return (
    <div onClick={onClose}
         className="fixed inset-0 z-[100] grid place-items-center p-6 backdrop-blur-md"
         style={{ background: "oklch(0.10 0.005 60 / 0.7)", animation: "fadein .2s ease" }}>
      <div onClick={(e) => e.stopPropagation()}
           className="relative w-full max-w-[540px] rounded-[20px] p-7 pb-6 border border-hairline-2"
           style={{
             background: "linear-gradient(180deg, oklch(0.20 0.009 60), oklch(0.17 0.008 60))",
             boxShadow: "0 30px 80px -20px oklch(0 0 0 / 0.6), 0 0 60px -20px var(--c-accent-glow)",
           }}>
        <button type="button" onClick={onClose}
                className="absolute top-3.5 right-3.5 w-7 h-7 rounded-md text-fg-mute hover:text-fg hover:bg-[oklch(0.25_0.01_60)]"
                aria-label="Close">✕</button>

        <div className="flex items-center gap-2.5 text-accent font-mono text-[11px] uppercase tracking-[0.1em]">
          <i className="w-1.5 h-1.5 rounded-full animate-pulse-ok"
             style={{ background: "var(--c-accent)", boxShadow: "0 0 12px var(--c-accent-glow)" }} />
          Vibn is on it
        </div>
        <h3 className="mt-3 text-[24px] font-medium tracking-[-0.018em] leading-[1.15]">Keep vibing — we've got the rest.</h3>

        <div className="mt-3.5 p-3.5 rounded-[10px] border border-hairline font-mono text-[13px] text-fg-dim leading-[1.5]"
             style={{ background: "oklch(0.16 0.008 60)" }}>
          "{prompt}"
        </div>

        <div className="mt-[18px] flex flex-col gap-2.5">
          {STEPS.map((s, i) => (
            <Step key={s} label={s} state={i < step ? "done" : i === step ? "active" : "pending"} />
          ))}
        </div>

        <div className="mt-[18px] text-center font-mono text-[11px] text-fg-faint tracking-[0.04em]">
          No homework · No setup · No new tools to learn
        </div>
      </div>
    </div>
  );
}

function Step({ label, state }) {
  return (
    <div className={[
      "flex items-center gap-3 px-3.5 py-[11px] rounded-[10px] border border-hairline text-[14px] transition-colors",
      state === "done" ? "text-fg" : "text-fg-dim",
    ].join(" ")} style={{ background: "oklch(0.165 0.008 60)" }}>
      {state === "done" ? (
        <svg className="w-[18px] h-[18px] text-ok shrink-0" viewBox="0 0 20 20" fill="none">
          <path d="M4 10.5 8 14.5 16 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ) : state === "active" ? (
        <span className="w-3.5 h-3.5 rounded-full border-2 shrink-0"
              style={{
                borderColor: "oklch(0.30 0.01 60)",
                borderTopColor: "var(--c-accent)",
                animation: "spin .9s linear infinite",
              }} />
      ) : (
        <svg className="w-[18px] h-[18px] text-fg-faint shrink-0" viewBox="0 0 20 20" fill="none">
          <circle cx="10" cy="10" r="6" stroke="currentColor" strokeWidth="1.5"/>
        </svg>
      )}
      <span>{label}</span>
    </div>
  );
}
