// Step 3 — Configure selected use cases (accordions)

function Step3({ form, selected, names, setNames, onNext, onBack }) {
  const { USE_CASES } = window.TB_DATA;
  const [openId, setOpenId] = React.useState(selected[0] || null);

  const selectedCases = selected
    .map(id => USE_CASES.find(u => u.id === id))
    .filter(Boolean);

  // Seed defaults when entering this step for any use case not yet named.
  React.useEffect(() => {
    const next = { ...names };
    let changed = false;
    for (const uc of selectedCases) {
      if (!next[uc.id]) next[uc.id] = {};
      for (const f of uc.nameFields) {
        if (!next[uc.id][f.key]) {
          next[uc.id][f.key] = f.fn(form.company);
          changed = true;
        }
      }
    }
    if (changed) setNames(next);
    // eslint-disable-next-line
  }, [selected.join(","), form.company]);

  const setVal = (ucId, key) => (e) => {
    setNames({ ...names, [ucId]: { ...(names[ucId] || {}), [key]: e.target.value } });
  };

  return (
    <div className="fade-enter">
      <div className="step-header">
        <div>
          <div className="eyebrow">Step 03 — Configure</div>
          <h1 className="h-display">Name things the way the demo should read.</h1>
          <p className="h-sub">Defaults use <b>{form.company || "your prospect"}</b>. The components list on the right shows what gets built — that part's fixed per use case.</p>
        </div>
        <div className="step-header-badge green">
          <div className="v">{selectedCases.length}</div>
          <div className="k">use cases</div>
        </div>
      </div>

      <div className="card" style={{ marginBottom: 16 }}>
        <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--ink-4)", fontWeight: 600, marginBottom: 14 }}>
          Tenant branding & contact
        </div>
        <div className="form-grid">
          <div className="field">
            <label>Brand color</label>
            <div className="color-field">
              <div className="color-swatch" style={{ background: form.brandColor || "var(--surface-2)" }}>
                <input type="color" value={form.brandColor || "#6B4FEA"}
                  onChange={(e) => setForm({ ...form, brandColor: e.target.value })} />
              </div>
              <input className="input" placeholder="#6B4FEA"
                value={form.brandColor || ""}
                onChange={(e) => setForm({ ...form, brandColor: e.target.value })} />
            </div>
            <span className="hint">Threads through the generated pages.</span>
          </div>
          <div className="field">
            <label>Primary contact name</label>
            <input className="input" placeholder="e.g. Marcus Sultzer"
              value={form.contactName || ""} onChange={(e) => setForm({ ...form, contactName: e.target.value })} />
          </div>
          <div className="field full">
            <label>Primary contact email</label>
            <input className="input" type="email" placeholder="marcus@prospect.com"
              value={form.contactEmail || ""} onChange={(e) => setForm({ ...form, contactEmail: e.target.value })} />
            <span className="hint">Referenced in generated email templates.</span>
          </div>
        </div>
      </div>

      <div className="acc-list">
        {selectedCases.map((uc, i) => {
          const open = openId === uc.id;
          return (
            <div key={uc.id} className={`acc ${open ? "open" : ""}`}>
              <button className="acc-head" onClick={() => setOpenId(open ? null : uc.id)}>
                <div className="l">
                  <div className="idx">{String(i+1).padStart(2,"0")}</div>
                  <div>
                    <div className="t">{uc.name}</div>
                    <div className="s">{uc.components.length} components · {uc.nameFields.length} editable name{uc.nameFields.length === 1 ? "" : "s"}</div>
                  </div>
                </div>
                <Ic.chev />
              </button>
              {open && (
                <div className="acc-body fade-enter">
                  <div>
                    <div className="col-label">Editable names</div>
                    <div className="name-fields">
                      {uc.nameFields.map(f => (
                        <div className="field" key={f.key}>
                          <label>{f.label}</label>
                          <input className="input" value={(names[uc.id] && names[uc.id][f.key]) || ""}
                            onChange={setVal(uc.id, f.key)} />
                        </div>
                      ))}
                    </div>
                  </div>
                  <div>
                    <div className="col-label">What gets built · {uc.components.length} items</div>
                    <ul className="component-list">
                      {uc.components.map(c => (
                        <li key={c.k}>
                          <ComponentIcon kind={c.t} />
                          <div style={{ display: "flex", flexDirection: "column", flex: 1, minWidth: 0 }}>
                            <span style={{ fontWeight: 500 }}>{c.k}</span>
                            <span style={{ color: "var(--ink-4)", fontSize: 11.5 }}>{c.d}</span>
                          </div>
                          <span className="kind">{c.t}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              )}
            </div>
          );
        })}
      </div>

      <FooterActions
        left={<><span className="count-pill">{selectedCases.length} use case{selectedCases.length===1?"":"s"}</span><span>Values are saved automatically</span></>}
        primaryLabel={<>Review & Build <Ic.arrow /></>}
        onPrimary={onNext}
        onBack={onBack}
      />
    </div>
  );
}

Object.assign(window, { Step3 });