/* NutriDMS — FDA Supplement Facts Studio (Master PRD Module 4, Phase 3)
   Formula builder + proprietary blends + live Supplement Facts preview +
   deterministic validation. US FDA 21 CFR 101.36 only. */
(function () {
  const { useState: uS, useMemo: uM } = React;
  const S = window.Supplements;

  function SupplementStudio() {
    const app = (typeof useApp === "function") ? useApp() : { role: "admin", toast: function () {} };
    const role = app.role, toast = app.toast;
    const [items, setItems] = uS(() => (S ? S.list() : []));
    const [sel, setSel] = uS(null);   // supplement id
    const refresh = () => setItems(S.list());
    const cur = sel ? S.get(sel) : null;

    if (!S) return <div className="page"><div className="sup-empty">Supplement engine unavailable.</div></div>;

    const create = () => { const s = S.upsert(S.blank()); s.name = "Untitled supplement"; S.upsert(s); refresh(); setSel(s.id); };

    return (
      <div className="page sup-studio">
        <div className="page-head">
          <div>
            <h1 className="page-title">Supplement Facts</h1>
            <p className="page-sub">US FDA 21 CFR 101.36 Supplement Facts panels. Consumer education cards are separate — this generates the legal panel only.</p>
          </div>
          <button className="btn primary" onClick={create}><Icon name="plus" size={16} /> New supplement</button>
        </div>
        {!cur ? (
          items.length === 0
            ? <div className="sup-empty"><Icon name="pill" size={30} /><h3>No supplements yet</h3><p>Create a supplement formula to generate its Supplement Facts panel.</p><button className="btn primary" onClick={create}><Icon name="plus" size={15} /> New supplement</button></div>
            : <div className="sup-grid">{items.map((s) => (
                <button key={s.id} className="sup-card" onClick={() => setSel(s.id)}>
                  <div className="sup-card-ic"><Icon name="pill" size={18} /></div>
                  <div className="sup-card-b"><b>{s.name || "Untitled"}</b><span>{(s.dietaryIngredients || []).length} ingredients · {(s.blends || []).length} blends</span></div>
                  <span className={"pill " + (s.status === "approved" ? "success" : "neutral")}>{s.status}</span>
                </button>))}</div>
        ) : <SupplementEditor id={sel} onBack={() => { setSel(null); refresh(); }} role={role} toast={toast} />}
      </div>
    );
  }

  function SupplementEditor({ id, onBack, role, toast }) {
    const [s, setS] = uS(() => S.get(id) || S.blank());
    const set = (k, v) => { const n = Object.assign({}, s, { [k]: v }); setS(n); S.upsert(n); };
    const panel = uM(() => S.buildPanel(s), [s]);
    const val = uM(() => S.validate(s), [s]);
    const canEdit = ["reviewer", "compliance", "manager", "admin", "super-admin"].includes(role);

    const addIng = () => set("dietaryIngredients", (s.dietaryIngredients || []).concat([{ name: S.nutrientNames[0], amount: "", unit: "mg", hasDV: true }]));
    const updIng = (i, k, v) => { const a = s.dietaryIngredients.slice(); a[i] = Object.assign({}, a[i], { [k]: v }); set("dietaryIngredients", a); };
    const delIng = (i) => set("dietaryIngredients", s.dietaryIngredients.filter((_, j) => j !== i));
    const addBlend = () => set("blends", (s.blends || []).concat([{ name: "Proprietary Blend", totalMg: "", constituents: [] }]));
    const updBlend = (i, k, v) => { const b = s.blends.slice(); b[i] = Object.assign({}, b[i], { [k]: v }); set("blends", b); };
    const addConst = (i) => { const b = s.blends.slice(); b[i].constituents = (b[i].constituents || []).concat([{ name: "" }]); set("blends", b); };
    const updConst = (i, j, v) => { const b = s.blends.slice(); b[i].constituents[j] = { name: v }; set("blends", b); };

    return (
      <div className="sup-edit">
        <button className="btn ghost sm" onClick={onBack} style={{ marginBottom: 12 }}><Icon name="arrow-left" size={14} /> All supplements</button>
        <div className="sup-cols">
          <div className="sup-form card pad">
            <div className="sup-sec-h">Identity</div>
            <div className="sup-fgrid">
              <label>Name<input value={s.name} disabled={!canEdit} onChange={(e) => set("name", e.target.value)} /></label>
              <label>Brand<input value={s.brand} disabled={!canEdit} onChange={(e) => set("brand", e.target.value)} /></label>
              <label>Serving form<input value={s.servingForm} disabled={!canEdit} onChange={(e) => set("servingForm", e.target.value)} placeholder="1 capsule" /></label>
              <label>Servings/container<input type="number" value={s.servingsPerContainer} disabled={!canEdit} onChange={(e) => set("servingsPerContainer", e.target.value)} /></label>
              <label>Population<select value={s.population} disabled={!canEdit} onChange={(e) => set("population", e.target.value)}>{S.SF_POPULATIONS.map((p) => <option key={p.id} value={p.id}>{p.label}</option>)}</select></label>
            </div>
            <div className="sup-sec-h">Dietary ingredients {canEdit && <button className="sup-add" onClick={addIng}><Icon name="plus" size={13} /> Add</button>}</div>
            {(s.dietaryIngredients || []).map((ing, i) => (
              <div key={i} className="sup-ing-row">
                <select value={ing.name} disabled={!canEdit} onChange={(e) => updIng(i, "name", e.target.value)}>{S.nutrientNames.concat(ing.name && !S.nutrientNames.includes(ing.name) ? [ing.name] : []).map((n) => <option key={n}>{n}</option>)}</select>
                <input type="number" value={ing.amount} placeholder="Amt" disabled={!canEdit} onChange={(e) => updIng(i, "amount", e.target.value)} />
                <input value={ing.unit} placeholder="unit" disabled={!canEdit} onChange={(e) => updIng(i, "unit", e.target.value)} />
                {canEdit && <button className="sup-del" onClick={() => delIng(i)}><Icon name="trash-2" size={13} /></button>}
              </div>
            ))}
            <div className="sup-sec-h">Proprietary blends {canEdit && <button className="sup-add" onClick={addBlend}><Icon name="plus" size={13} /> Add</button>}</div>
            {(s.blends || []).map((b, i) => (
              <div key={i} className="sup-blend">
                <div className="sup-ing-row"><input value={b.name} disabled={!canEdit} onChange={(e) => updBlend(i, "name", e.target.value)} /><input type="number" value={b.totalMg} placeholder="mg" disabled={!canEdit} onChange={(e) => updBlend(i, "totalMg", e.target.value)} /></div>
                {(b.constituents || []).map((c, j) => <input key={j} className="sup-const" value={c.name} placeholder="Constituent" disabled={!canEdit} onChange={(e) => updConst(i, j, e.target.value)} />)}
                {canEdit && <button className="sup-add sm" onClick={() => addConst(i)}><Icon name="plus" size={12} /> Constituent</button>}
              </div>
            ))}
            <div className="sup-sec-h">Other ingredients</div>
            <textarea className="sup-other" value={(s.otherIngredients || []).join(", ")} disabled={!canEdit} onChange={(e) => set("otherIngredients", e.target.value.split(",").map((x) => x.trim()).filter(Boolean))} placeholder="Gelatin, microcrystalline cellulose, magnesium stearate" />
          </div>

          <div className="sup-side">
            <div className="sup-panel">
              <div className="sfp-title">{panel.title}</div>
              <div className="sfp-serv"><span>Serving Size</span><b>{panel.serving}</b></div>
              {panel.servingsPerContainer ? <div className="sfp-serv sm"><span>Servings Per Container</span><b>{panel.servingsPerContainer}</b></div> : null}
              <div className="sfp-rule-lg" />
              <div className="sfp-dvhead"><span>Amount Per Serving</span><span>% DV</span></div>
              {panel.rows.map((r, i) => (
                <div key={i} className={"sfp-row" + (r.indent ? " ind" : "") + (r.bold ? " b" : "")}>
                  <span>{r.label}{r.amount ? " " + r.amount : ""}</span><span>{r.dv == null ? (r.blend || r.indent ? "" : "†") : r.dv + "%"}</span>
                </div>
              ))}
              <div className="sfp-rule-sm" />
              {panel.footnotes.map((f, i) => <div key={i} className="sfp-foot">{f}</div>)}
              <div className="sfp-basis">{panel.basisNote}</div>
            </div>
            <div className={"sup-val " + val.status}>
              <div className="sup-val-h"><Icon name={val.status === "pass" ? "check-circle-2" : val.status === "fail" ? "x-circle" : "alert-triangle"} size={15} /> Validation · {val.status.toUpperCase()}</div>
              {val.items.length === 0 ? <div className="sup-val-ok">All checks pass.</div> : val.items.map((it, i) => (
                <div key={i} className={"sup-val-row " + it.state}><b>{it.title}</b><span>{it.detail}</span></div>
              ))}
              <div className="sup-val-note"><Icon name="info" size={11} /> Loraa explains findings; a dietitian or compliance reviewer approves claims. Not FDA approval.</div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (typeof window !== "undefined") window.SupplementStudio = SupplementStudio;
})();