/* ============================================================
   IRONLOG — Sections 2: Philosophy pull-quote, Supplements
   ============================================================ */

/* ============================================================
   PHILOSOPHY — magazine pull-quote
   ============================================================ */
function Philosophy({ data, admin, onUpdate }) {
  const [edit, setEdit] = useState(false);
  const paras = data.body.split("\n\n");
  return (
    <section id="philosophy" className="section philo">
      <div className="container">
        <Reveal>
          <Editable admin={admin} label="Edit philosophy" penPos="tr" onEdit={() => setEdit(true)}>
            <div className="philo-inner">
              <span className="philo-mark display" aria-hidden="true">“</span>
              <div className="section-index" style={{ marginBottom: 24 }}>04 — CREED</div>
              <blockquote className="philo-quote">
                {paras.map((p, i) => (
                  <p key={i} className={i === 0 ? "philo-lead" : "philo-body"}>{p}</p>
                ))}
              </blockquote>
              <div className="philo-by head">{data.by}</div>
            </div>
          </Editable>
        </Reveal>
      </div>
      {edit && (
        <Modal title="Edit philosophy" onClose={() => setEdit(false)}>
          <PhiloForm data={data} onCancel={() => setEdit(false)} onSave={(d) => { onUpdate(d); setEdit(false); }} />
        </Modal>
      )}
    </section>
  );
}
function PhiloForm({ data, onCancel, onSave }) {
  const [body, setBody] = useState(data.body);
  const [by, setBy] = useState(data.by);
  return (
    <>
      <div className="field"><label>Body (blank line = new paragraph)</label>
        <textarea className="textarea" style={{ minHeight: 200 }} value={body} onChange={(e)=>setBody(e.target.value)} /></div>
      <div className="field"><label>Attribution</label><input className="input" value={by} onChange={(e)=>setBy(e.target.value)} /></div>
      <div style={{ display:"flex", gap:12, justifyContent:"flex-end" }}>
        <button className="btn" onClick={onCancel}>Cancel</button>
        <button className="btn btn-primary" onClick={() => onSave({ ...data, body, by })}><Icons.Check size={15}/> Save</button>
      </div>
    </>
  );
}

/* ============================================================
   SUPPLEMENTS — nutrition-label card
   ============================================================ */
function Supplements({ items, admin, onSave, onAdd, onRemove }) {
  const [editing, setEditing] = useState(null); // item | {new}
  return (
    <section id="supplements" className="section">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="section-index">06 — FUEL</div>
            <h2 className="section-title">Daily<br/>Intake</h2>
          </div>
          <p className="muted" style={{ maxWidth: 300, margin: 0 }}>What goes in, every day. Dosed for recovery and performance — nothing for show.</p>
        </Reveal>

        <Reveal className="supp-wrap">
          <div className="card supp-card">
            <div className="supp-head">
              <span className="display supp-title">SUPPLEMENT FACTS</span>
              <span className="eyebrow" style={{ letterSpacing: "0.22em" }}>Per day</span>
            </div>
            <div className="supp-rule-thick" />
            <ul className="supp-list">
              {items.map((s) => (
                <li key={s.id} className="supp-row">
                  <div className="supp-main">
                    <span className="supp-name head">{s.name}</span>
                    {s.note && <span className="supp-note dim">{s.note}</span>}
                  </div>
                  <span className={"tag " + (s.timing === "Daily" ? "tag-gym" : "tag-pr")} style={{ marginLeft: "auto" }}>{s.timing}</span>
                  <span className="supp-amt display tnum">{s.amount}<span className="supp-unit">{s.unit}</span></span>
                  {admin && (
                    <span className="supp-actions">
                      <button className="pen pen-sm" onClick={() => setEditing(s)} aria-label={"Edit " + s.name}><Icons.Pen /></button>
                      <button className="pen pen-sm" onClick={() => onRemove(s.id)} aria-label={"Remove " + s.name}><Icons.Trash /></button>
                    </span>
                  )}
                </li>
              ))}
            </ul>
            <div className="supp-rule-thick" />
            <div className="supp-foot">
              <span className="dim" style={{ fontSize: 12 }}>* Maintenance calories. No cut, ever.</span>
              {admin && <button className="btn" onClick={() => setEditing({ new: true })}><Icons.Plus size={15}/> Add row</button>}
            </div>
          </div>
        </Reveal>
      </div>

      {editing && (
        <SuppEdit item={editing.new ? null : editing}
          onClose={() => setEditing(null)}
          onSave={(it) => { editing.new ? onAdd(it) : onSave(it); setEditing(null); }} />
      )}
    </section>
  );
}

function SuppEdit({ item, onClose, onSave }) {
  const isNew = !item;
  const [name, setName] = useState(item ? item.name : "");
  const [amount, setAmount] = useState(item ? item.amount : "");
  const [unit, setUnit] = useState(item ? item.unit : "g");
  const [note, setNote] = useState(item ? item.note : "");
  const [timing, setTiming] = useState(item ? item.timing : "Daily");
  return (
    <Modal title={isNew ? "Add supplement" : "Edit " + item.name} onClose={onClose}
      footer={<>
        <button className="btn" onClick={onClose}>Cancel</button>
        <button className="btn btn-primary" disabled={!name || amount === ""}
          onClick={() => onSave({ id: item ? item.id : "supp-" + Date.now(), name, amount: Number(amount), unit, note, timing })}>
          <Icons.Check size={15}/> {isNew ? "Add" : "Save"}</button>
      </>}>
      <div className="field"><label>Name</label><input className="input" value={name} onChange={(e)=>setName(e.target.value)} placeholder="e.g. Magnesium" /></div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 130px", gap: 14 }}>
        <div className="field"><label>Amount</label><input className="input tnum" type="number" value={amount} onChange={(e)=>setAmount(e.target.value)} /></div>
        <div className="field"><label>Unit</label>
          <select className="select" value={unit} onChange={(e)=>setUnit(e.target.value)}>
            {["g","mg","IU","mcg","ml","caps","scoop"].map(u => <option key={u} value={u}>{u}</option>)}
          </select>
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 150px", gap: 14 }}>
        <div className="field" style={{ marginBottom: 0 }}><label>Note</label><input className="input" value={note} onChange={(e)=>setNote(e.target.value)} placeholder="timing / purpose" /></div>
        <div className="field" style={{ marginBottom: 0 }}><label>Frequency</label>
          <select className="select" value={timing} onChange={(e)=>setTiming(e.target.value)}>
            <option>Daily</option><option>Train days</option><option>As needed</option>
          </select>
        </div>
      </div>
    </Modal>
  );
}

Object.assign(window, { Philosophy, Supplements });