/* ============================================================
   Fashion AI Workflow — Phase 02 · Storyboard Prompts
   ============================================================ */

const STORYBOARD_PRESETS = [
  { label: "F1 · OPENING HERO", body: (b) => `A close, hands-on opening shot of ${b.garmentType || "the garment"} in ${b.colorway || "neutral palette"}, under cool studio light. Subject (${b.wearer || "wearer"}) pulls the collar, raw ${b.fabric || "selvedge edge"} in focus. 35mm, soft fall-off, low contrast film grain. Editorial framing, 4:5.` },
  { label: "F2 · DETAIL CUT",   body: (b) => `Macro of the ${b.silhouette || "construction"} — stitch line, dropped-shoulder seam, ${b.fabric || "fabric"} catching daylight. Pin-sharp. No subject face. 1:1.` },
  { label: "F3 · CONTEXT WIDE", body: (b) => `Subject at full length in a stripped concrete studio. ${b.garmentType || "Garment"} catches movement; reference: ${b.references || "Jamie Hawkesworth"}. 9:16.` },
  { label: "F4 · MOMENT",       body: (b) => `Off-guard frame, subject mid-step, ${b.angle || "STYLE EDITORIAL"} mood. Window light, no fashion-pose. 4:5.` },
  { label: "F5 · CLOSING TAG",  body: (b) => `Flat-lay close on ${b.fabric || "fabric"} with care label, ${b.season || "SEASON"} caption. Negative space at top for headline. 1:1.` },
];

function Phase02({ brief, goPrev, goNext }) {
  const [streaming, setStreaming] = React.useState(false);
  const [items, setItems] = React.useState(() => STORYBOARD_PRESETS.map((p) => ({ label: p.label, content: p.body(brief) })));

  const regen = () => {
    setStreaming(true);
    setItems(STORYBOARD_PRESETS.map((p) => ({ label: p.label, content: "" })));
    // Simulate streaming
    STORYBOARD_PRESETS.forEach((p, i) => {
      setTimeout(() => {
        setItems((prev) => prev.map((it, idx) => idx === i ? { ...it, content: p.body(brief) } : it));
        if (i === STORYBOARD_PRESETS.length - 1) setStreaming(false);
      }, 600 + i * 400);
    });
  };

  return (
    <>
      <PhaseHeader
        phase="02"
        title="Storyboard Prompts / 分鏡 Prompt"
        subtitle="Five ChatGPT Image 2 prompts. Use F1 → F5 in order — each frame builds narrative continuity."
      />

      <InfoBox phase="02" label="INFO · CHATGPT IMAGE 2">
        Open ChatGPT Image 2 in a fresh thread. Paste F1 first, generate, then continue with F2…F5 in the same thread so the model carries character & wardrobe.
      </InfoBox>

      {items.map((it, i) => (
        <PromptBlock key={i} phase="02" label={it.label} content={it.content} loading={streaming && !it.content} />
      ))}

      <ActionBar columns="1fr 1fr 2fr">
        <ActionBtn label="← BRIEF" onClick={goPrev} />
        <ActionBtn label="↻ REGEN" phase="02" variant="secondary" onClick={regen} />
        <ActionBtn label="HIGGSFIELD →" phase="03" variant="primary" onClick={goNext} />
      </ActionBar>
    </>
  );
}

window.Phase02 = Phase02;