/* ============================================================
   Fashion AI Workflow — Phase 01 · Design Brief
   ============================================================ */

function Phase01({ state, setState, goNext }) {
  const upd = (k) => (v) => setState({ ...state, [k]: v });

  const required = ["garmentType", "silhouette", "fabric", "wearer"];
  const missing = required.filter((k) => !(state[k] && state[k].trim()));
  const ready = missing.length === 0;

  return (
    <>
      <PhaseHeader
        phase="01"
        title="Design Brief / 設計簡報"
        subtitle="Consolidate your design language. Four required fields unlock storyboard generation."
      />

      {/* Module 1 — Pattern (purple) */}
      <Module phase="01" title="① 版型模組 / PATTERN">
        <Field label="服裝類型 / GARMENT TYPE *" value={state.garmentType} onChange={upd("garmentType")} placeholder="oversized wool blazer" />
        <Field label="廓形語彙 / SILHOUETTE *" value={state.silhouette} onChange={upd("silhouette")} placeholder="boxy, dropped shoulder, longline" />
      </Module>

      {/* Module 2 — Material (blue) */}
      <Module phase="02" title="② 材質模組 / MATERIAL">
        <Field label="面料質感 / FABRIC *" value={state.fabric} onChange={upd("fabric")} placeholder="brushed wool, raw selvedge" />
        <Field label="色彩配置 / COLORWAY" value={state.colorway} onChange={upd("colorway")} placeholder="charcoal · ecru · ox-blood" />
      </Module>

      {/* Module 3 — Marketing (orange) */}
      <Module phase="03" title="③ 角色行銷模組 / MARKETING">
        <Field label="穿著者描述 / WEARER *" value={state.wearer} onChange={upd("wearer")} placeholder="late-20s art-director, tactile, considered" />
        <Field label="風格參考 / REFERENCES" value={state.references} onChange={upd("references")} placeholder="Margiela 2019, Jamie Hawkesworth" />

        <div className="field">
          <span className="field-label">行銷切角 / MARKETING ANGLE</span>
          <ChipGroup
            phase="03"
            options={["STYLE EDITORIAL", "LIFESTYLE STORY", "PRODUCT HERO", "UGC AUTHENTICITY"]}
            value={state.angle}
            onChange={upd("angle")}
          />
        </div>
        <div className="field">
          <span className="field-label">季節 / SEASON</span>
          <ChipGroup
            phase="03"
            options={["SPRING/SUMMER", "AUTUMN/WINTER", "RESORT", "TIMELESS"]}
            value={state.season}
            onChange={upd("season")}
          />
        </div>
      </Module>

      {/* Primary CTA */}
      <button
        className="cta-primary"
        disabled={!ready}
        onClick={() => ready && goNext()}
        style={ready ? {
          color: "#c9b8ff",
          borderColor: "rgba(201,184,255,0.45)",
          background: "rgba(201,184,255,0.14)",
        } : {}}
      >
        {ready
          ? "GENERATE STORYBOARD →"
          : `(fill ${missing.length} required field${missing.length > 1 ? "s" : ""} to continue)`}
      </button>
    </>
  );
}

window.Phase01 = Phase01;