/* BridgeWell Calculator — Dashboard (InputPanel + 4 cards).
   Faithful port of:
     src/components/InputPanel.tsx
     src/components/FinancialCard.tsx
     src/components/OperationalCard.tsx
     src/components/ClinicalCard.tsx
     src/components/ContactCard.tsx
*/

// =====================================================================
// InputField + InputPanel
// =====================================================================
function InputField({ Icon, label, value, onChange, min, max }) {
  return (
    <div className="ip-field">
      <div className="ip-field-head">
        <span className="ip-icon-tile"><Icon /></span>
        <label className="ip-label">{label}</label>
      </div>
      <input
        type="number"
        className="ip-num tabular"
        value={value}
        onChange={(e) => {
          const v = parseInt(e.target.value, 10);
          const safe = isNaN(v) ? min : v;
          onChange(Math.max(min, Math.min(max, safe)));
        }}
        min={min}
        max={max}
      />
    </div>
  );
}

function InputPanel({ inputs, onChange }) {
  const update = (key, value) => onChange({ ...inputs, [key]: value });

  return (
    <div className="dash-aside-inner">
      <div className="ip-head">
        <h2>Your School</h2>
        <p>Enter your details to see a personalized screening plan.</p>
      </div>

      <div className="ip-fields">
        <InputField
          Icon={window.Users}
          label="Student Population"
          value={inputs.studentPopulation}
          onChange={(v) => update("studentPopulation", v)}
          min={1}
          max={100000}
        />

        <InputField
          Icon={window.UserCheck}
          label="Available Staff"
          value={inputs.availableStaff}
          onChange={(v) => update("availableStaff", v)}
          min={1}
          max={500}
        />

        <div className="ip-field">
          <div className="ip-field-head">
            <span className="ip-icon-tile"><window.CalendarDays /></span>
            <label className="ip-label">Screenings Per Year</label>
          </div>
          <div className="ip-radio" role="group" aria-label="Screenings per year">
            {[1, 2].map((n) => (
              <button
                type="button"
                key={n}
                className={`ip-radio-card ${inputs.screeningsPerYear === n ? "is-active" : ""}`}
                onClick={() => update("screeningsPerYear", n)}
                aria-pressed={inputs.screeningsPerYear === n}
              >
                {n === 1 ? "Once" : "Twice"}
              </button>
            ))}
          </div>
        </div>

        <div className="ip-field">
          <div className="ip-field-head">
            <span className="ip-icon-tile"><window.ShieldCheck /></span>
            <div className="ip-label-block">
              <label className="ip-label">Insurance Coverage</label>
              <span className="ip-label-sub">Students with active Medi-Cal or Commercial Insurance</span>
            </div>
            <span className="ip-value tabular">{inputs.insuranceCoverage}%</span>
          </div>
          <input
            type="range"
            min={0}
            max={100}
            step={1}
            value={inputs.insuranceCoverage}
            onChange={(e) => update("insuranceCoverage", Number(e.target.value))}
            className="bw-slider"
            style={{ "--pct": inputs.insuranceCoverage + "%" }}
            aria-label="Insurance coverage"
          />
        </div>
      </div>
    </div>
  );
}

// =====================================================================
// FinancialCard
// =====================================================================
const SCENARIOS = {
  low:  { depression: 0.15, anxiety: 0.18, crisis: 0.05, label: "Low Flag Rate" },
  high: { depression: 0.35, anxiety: 0.42, crisis: 0.15, label: "High Flag Rate" },
};

function calcFollowUpHours(pop, scenario) {
  const depression = Math.round(pop * scenario.depression);
  const crisis = Math.round(pop * scenario.crisis);
  return (crisis * 1) + (depression * 10 / 60);
}

function FinancialCard({ results, inputs }) {
  const { grossRevenue, laborCost, totalScreeningHours, crisisFollowUpHours } = results;
  const totalStaffHours = totalScreeningHours + crisisFollowUpHours;
  const freq = inputs.screeningsPerYear;

  const lowFollowUp = calcFollowUpHours(inputs.studentPopulation, SCENARIOS.low) * freq;
  const highFollowUp = calcFollowUpHours(inputs.studentPopulation, SCENARIOS.high) * freq;
  const lowStaffCost = (totalScreeningHours + lowFollowUp) * 30;
  const highStaffCost = (totalScreeningHours + highFollowUp) * 30;
  const lowNet = grossRevenue - lowStaffCost;
  const highNet = grossRevenue - highStaffCost;

  // Manual bar comparison (no recharts dep)
  const maxBar = Math.max(grossRevenue, laborCost, 1);
  const revPct = (grossRevenue / maxBar) * 100;
  const costPct = (laborCost / maxBar) * 100;

  return (
    <div className="card dash-card-wide">
      {/* Gross Revenue */}
      <div className="card-head">
        <div className="card-icon positive"><window.DollarSign /></div>
        <div>
          <h3 className="card-title">Gross Revenue</h3>
          <p className="card-sub">Billable insurance reimbursements</p>
        </div>
      </div>
      <div>
        <window.AnimatedNumber
          value={grossRevenue}
          prefix="$"
          decimals={0}
          className="fin-amount tabular metric-glow"
        />
      </div>
      <p className="fin-amount-sub">at $35 per insured student screening</p>

      <div className="card-rule"></div>

      {/* Staff Investment */}
      <div className="card-head">
        <div className="card-icon neutral"><window.Clock /></div>
        <div>
          <h3 className="card-title">Estimated Staff Investment</h3>
          <p className="card-sub">Already funded — not deducted from revenue</p>
        </div>
      </div>

      <div className="fin-pair">
        <div className="fin-cell">
          <p className="fin-cell-lbl">Total Staff Hours</p>
          <p className="fin-cell-val tabular">
            <window.AnimatedNumber value={totalStaffHours} decimals={1} />
          </p>
          <div className="fin-cell-detail">
            <div className="fin-cell-detail-row">
              <span>Screening</span>
              <span className="tabular"><window.AnimatedNumber value={totalScreeningHours} decimals={1} suffix="h" /></span>
            </div>
            <div className="fin-cell-detail-row">
              <span>Follow-up</span>
              <span className="tabular"><window.AnimatedNumber value={crisisFollowUpHours} decimals={1} suffix="h" /></span>
            </div>
          </div>
        </div>
        <div className="fin-cell">
          <p className="fin-cell-lbl">Estimated Staff Cost</p>
          <p className="fin-cell-val muted tabular">
            <window.AnimatedNumber value={laborCost} prefix="$" decimals={0} />
          </p>
          <p className="fin-cell-foot">at $30/hr avg</p>
        </div>
      </div>

      {/* Inline bar comparison (replaces recharts) */}
      <div className="fin-bars" aria-label="Gross Revenue vs Staff Cost">
        <div className="fin-bar-row">
          <span className="fin-bar-label">Gross Revenue</span>
          <div className="fin-bar-track">
            <div className="fin-bar-fill positive" style={{ width: revPct + "%" }}>
              ${Math.round(grossRevenue).toLocaleString()}
            </div>
          </div>
        </div>
        <div className="fin-bar-row">
          <span className="fin-bar-label">Staff Cost (Funded)</span>
          <div className="fin-bar-track">
            <div className="fin-bar-fill muted" style={{ width: costPct + "%" }}>
              ${Math.round(laborCost).toLocaleString()}
            </div>
          </div>
        </div>
      </div>

      <div className="card-rule"></div>

      {/* ROI Range */}
      <div className="card-head">
        <div className="card-icon"><window.TrendingUp /></div>
        <div>
          <h3 className="card-title">ROI Range</h3>
          <p className="card-sub">Based on low vs. high student flag rates</p>
        </div>
      </div>
      <div className="fin-roi">
        <ScenarioCell label={SCENARIOS.low.label} cost={lowStaffCost} net={lowNet} />
        <ScenarioCell label={SCENARIOS.high.label} cost={highStaffCost} net={highNet} />
      </div>

      <div className="fin-callout">
        <window.CheckCircle2 />
        <p>
          {highNet >= 0
            ? "Even at the highest flag rates, screening generates positive revenue."
            : "Staff costs are already funded — gross revenue is additional income."}
        </p>
      </div>
    </div>
  );
}

function ScenarioCell({ label, cost, net }) {
  const positive = net >= 0;
  return (
    <div className="fin-roi-cell">
      <p className="fin-roi-eyebrow">{label}</p>
      <p className="fin-roi-lbl">Staff cost</p>
      <p className="fin-roi-val tabular">
        <window.AnimatedNumber value={cost} prefix="$" decimals={0} />
      </p>
      <p className={`fin-roi-net ${positive ? "positive" : "negative"} tabular`}>
        Net: <window.AnimatedNumber value={net} prefix={positive ? "+" : ""} decimals={0} />
      </p>
    </div>
  );
}

// =====================================================================
// OperationalCard
// =====================================================================
function OperationalCard({ results }) {
  const { totalScreeningHours, screeningsPerYear } = results;
  return (
    <div className="card">
      <div className="card-head">
        <div className="card-icon"><window.Clock /></div>
        <div>
          <h3 className="card-title">Screening Effort</h3>
          <p className="card-sub">Total time investment</p>
        </div>
      </div>

      <div className="op-big">
        <span className="op-big-num metric-glow tabular">
          <window.AnimatedNumber value={totalScreeningHours} decimals={1} />
        </span>
        <span className="op-big-unit">Hours</span>
      </div>

      <div className="op-rows">
        <div className="op-row">
          <span className="op-row-lbl">Screenings per year</span>
          <span className="op-row-val">{screeningsPerYear}×</span>
        </div>
        <div className="op-row">
          <span className="op-row-lbl">Minutes per screening</span>
          <span className="op-row-val">10.6 min</span>
        </div>
        {screeningsPerYear === 2 && (
          <div className="op-row">
            <span className="op-row-lbl">Per cycle</span>
            <span className="op-row-val tabular">
              <window.AnimatedNumber value={totalScreeningHours / 2} decimals={1} suffix="h" />
            </span>
          </div>
        )}
      </div>
    </div>
  );
}

// =====================================================================
// ClinicalCard
// =====================================================================
function RiskRow({ label, value, rate, critical }) {
  return (
    <div className="cl-row">
      <div className="cl-row-l">
        <span className={`cl-dot ${critical ? "crit" : ""}`}></span>
        <span className="cl-row-lbl">{label}</span>
      </div>
      <div className="cl-row-r">
        <span className={`cl-row-val tabular ${critical ? "crit" : ""}`}>
          <window.AnimatedNumber value={value} />
        </span>
        <span className="cl-row-pct">({rate})</span>
      </div>
    </div>
  );
}

function ClinicalCard({ results }) {
  const { depressionRisk, anxietyRisk, crisisRisk, crisisFollowUpHours } = results;
  return (
    <div className="card">
      <div className="card-head">
        <div className="card-icon"><window.Heart /></div>
        <div>
          <h3 className="card-title">Students Identified</h3>
          <p className="card-sub">Who will we help?</p>
        </div>
      </div>

      <div className="cl-rows">
        <RiskRow label="Depression Risk (PHQ-2)" value={depressionRisk} rate="25%" />
        <RiskRow label="Anxiety Risk (GAD-2)" value={anxietyRisk} rate="30%" />
        <RiskRow label="Suicide / Crisis Risk" value={crisisRisk} rate="10%" critical />
      </div>

      <div className="card-rule"></div>

      <div className="cl-crisis">
        <window.AlertCircle />
        <div>
          <p className="cl-crisis-lbl">Crisis Follow-up Required</p>
          <p className="cl-crisis-val tabular">
            <window.AnimatedNumber value={crisisFollowUpHours} decimals={1} suffix=" hours" />
          </p>
        </div>
      </div>
    </div>
  );
}

// =====================================================================
// ContactCard
// =====================================================================
const BOOKING_URL = "https://app.apollo.io/#/meet/scott_spanier_97d/30-min-BridgeWell";

function ContactCard() {
  return (
    <section id="contact" className="card contact-card dash-card-wide">
      <div className="contact-grid">
        <div>
          <p className="contact-eyebrow">Talk to BridgeWell</p>
          <h2 className="contact-title">Ready to bring early detection to your students?</h2>
          <p className="contact-body">
            Book a 20-minute call to walk through your numbers, review implementation,
            and see how BridgeWell fits your district's workflow — no pressure, no slide deck.
          </p>
        </div>
        <div className="contact-actions">
          <a href={BOOKING_URL} target="_blank" rel="noopener noreferrer" className="contact-btn">
            <window.Calendar />
            Book a call
            <window.ArrowUpRight />
          </a>
        </div>
      </div>
    </section>
  );
}

// =====================================================================
// Dashboard shell
// =====================================================================
function Dashboard({ inputs, setInputs }) {
  const results = window.useScreeningCalculator(inputs);

  return (
    <main className="dash-main">
      <aside>
        <InputPanel inputs={inputs} onChange={setInputs} />
      </aside>
      <section className="dash-cards">
        <FinancialCard results={results} inputs={inputs} />
        <OperationalCard results={results} />
        <ClinicalCard results={results} />
        <ContactCard />
      </section>
    </main>
  );
}

Object.assign(window, { Dashboard, InputPanel });