// VerticalAppEnv.jsx — Vertical App with structured form workflow
const { useState: useStateVA } = React;

function VerticalAppEnv({ onHITL }) {
  const [form, setForm] = useStateVA({
    counterparty: "Acme Holdings GmbH",
    matter: "Vendor onboarding · Q2 2026",
    pod: "pod-legal-eu",
    risk: "Standard",
    notes: "",
  });
  const [done, setDone] = useStateVA(false);
  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  return (
    <div className="ask-va">
      <aside className="ask-va__rail">
        <div className="eyebrow">Workflow steps</div>
        <ol className="ask-va__steps">
          <li className="ask-va__step is-done"><span className="ask-va__step-num">01</span> Counterparty</li>
          <li className="ask-va__step is-done"><span className="ask-va__step-num">02</span> Knowledge Pod</li>
          <li className="ask-va__step is-active"><span className="ask-va__step-num">03</span> Risk parameters</li>
          <li className="ask-va__step"><span className="ask-va__step-num">04</span> Human approval</li>
          <li className="ask-va__step"><span className="ask-va__step-num">05</span> Audit & dispatch</li>
        </ol>
        <div className="ask-va__bound">
          <Icon name="lock" size={12}/>
          <span>Mathematically bound to <strong>{form.pod}</strong></span>
        </div>
      </aside>

      <main className="ask-va__main">
        <header className="ask-va__head">
          <div>
            <div className="eyebrow">App Vertical · Compliance</div>
            <h2 className="ask-va__title">Generate compliance memo</h2>
            <p className="ask-va__sub">Structured workflow replaces the open prompt. Output is auditable and bound to the assigned Pod.</p>
          </div>
          <span className="badge badge-outline">v2.4.1</span>
        </header>

        <div className="ask-va__grid">
          <Field label="Counterparty">
            <input className="input" value={form.counterparty} onChange={e => update("counterparty", e.target.value)} />
          </Field>
          <Field label="Matter">
            <input className="input" value={form.matter} onChange={e => update("matter", e.target.value)} />
          </Field>
          <Field label="Knowledge Pod">
            <select className="input" value={form.pod} onChange={e => update("pod", e.target.value)}>
              <option>pod-legal-eu</option>
              <option>pod-finance-us</option>
              <option>pod-research-de</option>
            </select>
          </Field>
          <Field label="Risk class">
            <div className="ask-va__seg">
              {["Standard", "Elevated", "High"].map(r => (
                <button key={r} className={`ask-va__seg-btn ${form.risk === r ? "is-active" : ""}`} onClick={() => update("risk", r)}>{r}</button>
              ))}
            </div>
          </Field>
          <Field label="Additional notes" full>
            <textarea className="input" rows="3" value={form.notes} onChange={e => update("notes", e.target.value)} placeholder="Optional context for the memo generation…"/>
          </Field>
        </div>

        {done ? (
          <div className="ask-va__done">
            <Icon name="check" size={16}/>
            <span>Task executed. Audit log securely updated. Output artifact <code>MEMO-0941.pdf</code> saved to workbench.</span>
          </div>
        ) : (
          <div className="ask-va__cta">
            <button className="btn btn-secondary">Save draft</button>
            <button className="btn btn-primary" onClick={() => onHITL(() => setDone(true))}>
              <Icon name="play" size={14}/> Run with approval
            </button>
          </div>
        )}
      </main>
    </div>
  );
}

function Field({ label, full, children }) {
  return (
    <div className={`ask-va__field ${full ? "ask-va__field--full" : ""}`}>
      <label className="ask-va__label">{label}</label>
      {children}
    </div>
  );
}

window.VerticalAppEnv = VerticalAppEnv;
window.Field = Field;