// Capacity Calculator tool component.
// Six inputs → one theoretical maximum annual collections number.
// Layout: ToolPageHeader + ToolFrame (InputCard left, ResultPanel + formula right).
// Depends on: tools-shared.jsx (must be loaded first — exports to window.*).
// Mounted into <div id="capacity-root"> in Views/Tools/Capacity.cshtml.
//
// Production port notes:
//   - Extracted from inline <script> in prototype Pareto Capacity Tool.html
//   - CTA href updated from "Pareto Contact.html" to "/Home/Index#contact-section"
//   - Related insight href updated from "Pareto Insights.html" to "/Home/Insights"
//   - App wrapper (SiteNav + SiteFooter) removed — handled by _Layout.cshtml

function CapacityTool() {
  const [days, setDays] = React.useState(232);
  const [hours, setHours] = React.useState(8);
  const [ops, setOps] = React.useState(4);
  const [drSplit, setDrSplit] = React.useState(33); // % of chair-hours that are doctor
  const [drGoal, setDrGoal] = React.useState(500);
  const [hygGoal, setHygGoal] = React.useState(150);

  const result = React.useMemo(() => {
    const d = Number(days) || 0;
    const h = Number(hours) || 0;
    const o = Number(ops) || 0;
    const dr = Number(drGoal) || 0;
    const hg = Number(hygGoal) || 0;

    const totalChairHours = d * h * o;
    const drHours = totalChairHours * (drSplit / 100);
    const hygHours = totalChairHours * (1 - drSplit / 100);

    const drRevenue = drHours * dr;
    const hygRevenue = hygHours * hg;
    const total = drRevenue + hygRevenue;

    return {
      totalChairHours,
      drHours, hygHours,
      drRevenue, hygRevenue,
      total,
      blendedHourly: totalChairHours > 0 ? total / totalChairHours : 0,
    };
  }, [days, hours, ops, drSplit, drGoal, hygGoal]);

  return (
    <>
      <ToolPageHeader
        eyebrow="Tool 01 / Maximum Collections"
        title="What's the most your office could collect?"
        scope="If your office were fully dialed in, this is the maximum you could collect in a year. It's a theoretical maximum, not a forecast."
      />

      <ToolFrame>
        <InputCard title="Inputs">
          <NumberField
            label="Days open per year"
            hint={`Subtract holidays, vacations, and office closures — about ${(days / 7).toFixed(0)} weeks`}
            value={days}
            onChange={setDays}
            min={0} max={365}
            suffix="days"
          />
          <NumberField
            label="Hours open per day"
            hint="Average across the week"
            value={hours}
            onChange={setHours}
            min={0} max={24} step={0.5}
            suffix="hrs"
          />
          <NumberField
            label="Operatories"
            hint="Operatory count"
            value={ops}
            onChange={setOps}
            min={1} max={50}
            suffix="ops"
          />
          <SplitField
            label="Operatory time split"
            hint="What share is doctor vs hygiene"
            leftLabel="Doctor"
            rightLabel="Hygiene"
            value={drSplit}
            onChange={setDrSplit}
          />
          <NumberField
            label="Doctor hourly goal"
            hint="Production target per doctor hour"
            value={drGoal}
            onChange={setDrGoal}
            min={0} max={5000} step={10}
            prefix="$"
            suffix="/ hr"
          />
          <NumberField
            label="Hygiene hourly goal"
            hint="Production target per hygiene hour"
            value={hygGoal}
            onChange={setHygGoal}
            min={0} max={1000} step={5}
            prefix="$"
            suffix="/ hr"
          />
        </InputCard>

        <div style={{
          position: 'sticky', top: 88,
          display: 'flex', flexDirection: 'column', gap: 20,
        }}>
          <ResultPanel
            headlineLabel="Annual Maximum Collections"
            headlineValue={fmtMoney(result.total)}
            headlineSub={
              <span style={{ fontStyle: 'italic', fontFamily: 'var(--pdt-serif)' }}>
                theoretical, not a forecast
              </span>
            }
            breakdown={[
              { label: 'Doctor side',        value: fmtMoney(result.drRevenue) },
              { label: 'Hygiene side',       value: fmtMoney(result.hygRevenue) },
              { label: 'Blended Hourly Goal', value: '$' + Math.round(result.blendedHourly).toLocaleString() },
            ]}
            footnote={
              <span style={{
                fontFamily: 'var(--pdt-serif)', fontStyle: 'italic',
                fontSize: 15, lineHeight: 1.55,
              }}>
                This is what your office could collect, if everything ran exactly
                as planned. Plenty of reasons it won't: you may be hiring and
                therefore have an unstaffed operatory, the provider job market
                is tight, sick days happen, low-production days happen, the
                unforeseen happens. All real, all valid. But this number is
                still worth knowing, because the gap between it and what you
                actually collect is where the work is.
              </span>
            }
          />

          <div style={{
            fontFamily: 'var(--pdt-mono)', fontSize: 11,
            color: 'var(--pdt-mute)', letterSpacing: '0.04em',
            lineHeight: 1.6,
          }}>
            Formula: days × hours × ops × (doctor% × $dr + hygiene% × $hyg)
          </div>
        </div>
      </ToolFrame>

      <ToolFooter
        doesntMeasure={
          <>
            It assumes every operatory is filled and each hour hits its goal.
            That's never how a real schedule looks. The gap between what's possible
            and what's actual is where utilization, no-shows, hygiene recall,
            provider mix, and case acceptance hide. Those don't fit in six inputs.
          </>
        }
        ctaText="Knowing your theoretical maximum is the easy half. Knowing where the other 25–40% goes is the work we do."
        ctaHref="/Home/Index#contact-section"
        // Related reading temporarily hidden — restore by uncommenting
        // relatedInsight={{
        //   title: 'Where is the slack hiding?',
        //   href: '/Home/Insights',
        // }}
      />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('capacity-root')).render(<CapacityTool />);