// Screen: Compounding — formula library + cost rollup detail
function Compounding({ density }) {
  const { useState } = React;
  const [selId, setSelId] = useState(FORMULAS[0].id);
  const sel = FORMULAS.find(f => f.id === selId);
  const ingCost = sel.ingredients.reduce((a, x) => a + x.cost, 0);
  const labor = 6.5;
  const totalCost = ingCost + labor;
  const margin = (sel.price - totalCost) / sel.price;

  return (
    <div className={'content' + (density === 'compact' ? ' compact' : '')} data-screen-label="Compounding">
      <div className="comp-layout">

        {/* Formula library */}
        <div>
          <SectionHead title={'Formula library · ' + FORMULAS.length + ' active · Sedro-Woolley lab'}></SectionHead>
          <div className="card" style={{ marginTop: 10, overflow: 'hidden' }}>
            <table className="data">
              <thead>
                <tr>
                  <th>Formula</th>
                  <th>BUD</th>
                  <th className="num">Fills MTD</th>
                  <th className="num">Cost</th>
                  <th className="num">Price</th>
                  <th className="num">Margin</th>
                </tr>
              </thead>
              <tbody>
                {FORMULAS.map(f => {
                  const m = (f.price - f.costPerUnit - 6.5) / f.price;
                  return (
                    <tr key={f.id} className={'click' + (f.id === selId ? ' sel' : '')} onClick={() => setSelId(f.id)}>
                      <td>
                        <div style={{ fontWeight: 600 }}>{f.name}</div>
                        <div style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{f.category} · {f.form}</div>
                      </td>
                      <td className="mono">{f.bud}</td>
                      <td className="num">{f.mtdFills}</td>
                      <td className="num mono">${(f.costPerUnit + 6.5).toFixed(2)}</td>
                      <td className="num mono">${f.price.toFixed(2)}</td>
                      <td className="num">
                        <span className="marginbar-mini"><i style={{ width: (m * 100) + '%' }}></i></span>
                        <span style={{ fontWeight: 700, color: 'var(--moss)' }}>{(m * 100).toFixed(0)}%</span>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>

        {/* Detail */}
        <div className="card formula-detail">
          <div className="fd-head">
            <div className="kicker" style={{ marginBottom: 6 }}>Master formula record</div>
            <h3>{sel.name}</h3>
            <div className="form">{sel.form}</div>
          </div>
          <div className="fd-meta">
            <div><div className="k">Lot</div><div className="v mono">{sel.lot}</div></div>
            <div><div className="k">Beyond-use date</div><div className="v">{sel.bud}</div></div>
            <div><div className="k">Fills MTD</div><div className="v">{sel.mtdFills}</div></div>
          </div>
          <div className="fd-meta" style={{ gridTemplateColumns: '1fr' }}>
            <div><div className="k">Most frequent prescriber</div><div className="v" style={{ fontWeight: 500 }}>{sel.prescriber}</div></div>
          </div>
          <div className="fd-cost">
            <table className="data">
              <thead>
                <tr><th>Ingredient</th><th>Qty</th><th className="num">Cost</th></tr>
              </thead>
              <tbody>
                {sel.ingredients.map((ing, i) => (
                  <tr key={i}>
                    <td>{ing.name}</td>
                    <td className="mono">{ing.qty}</td>
                    <td className="num mono">${ing.cost.toFixed(2)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="fd-margin">
            <div className="row"><span>Ingredients</span><span className="mono">${ingCost.toFixed(2)}</span></div>
            <div className="row"><span>Lab labor allocation</span><span className="mono">${labor.toFixed(2)}</span></div>
            <div className="row"><span>Price</span><span className="mono">${sel.price.toFixed(2)}</span></div>
            <div className="row total">
              <span>Gross margin</span>
              <span className="moss">{(margin * 100).toFixed(1)}% · ${(sel.price - totalCost).toFixed(2)}/fill</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Compounding });