// No-show / overbook, Analytics, Settings

const NoShow = ({ onSendReminder, onApplyOverbook }) => {
  const { PATIENTS, DAYS } = window.MOCK;
  const highRisk = [...PATIENTS].sort((a, b) => b.noShowRisk - a.noShowRisk).slice(0, 8);
  const [appliedSlots, setAppliedSlots] = useState({});
  const overbookSlots = [
    { id: 'ob1', day: 'Wed', dayId: 'wed', time: '4:00 PM', dept: 'General Medicine', currentNoShow: 62, recommended: 1, confidence: 'High' },
    { id: 'ob2', day: 'Thu', dayId: 'thu', time: '8:30 AM', dept: 'Radiology', currentNoShow: 48, recommended: 1, confidence: 'Medium' },
    { id: 'ob3', day: 'Fri', dayId: 'fri', time: '9:00 AM', dept: 'Dermatology', currentNoShow: 55, recommended: 1, confidence: 'High' },
    { id: 'ob4', day: 'Fri', dayId: 'fri', time: '2:30 PM', dept: 'Orthopedics', currentNoShow: 41, recommended: 0, confidence: 'Medium' },
  ];
  return (
    <div style={{ padding: 20 }}>
      <div className="grid-3" style={{ marginBottom: 16 }}>
        <div className="kpi">
          <div className="kpi-label">7-day no-show rate</div>
          <div className="kpi-val">11.2%</div>
          <div className="kpi-delta up">▼ 2.3 pts vs last week</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Slots recovered by overbooking</div>
          <div className="kpi-val">34</div>
          <div className="kpi-delta up">+$18,200 captured</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Model confidence</div>
          <div className="kpi-val">0.87</div>
          <div className="kpi-delta up">Stable</div>
        </div>
      </div>

      <div className="grid-2">
        <div className="card">
          <div className="card-head">
            <div className="card-title">Recommended overbooks</div>
            <div className="card-sub">Based on historical patterns + patient-level risk</div>
          </div>
          <table className="tbl">
            <thead><tr><th>Slot</th><th>Dept</th><th>Historical no-show</th><th>Recommend</th><th>Confidence</th><th></th></tr></thead>
            <tbody>
              {overbookSlots.map((s, i) => (
                <tr key={i}>
                  <td><div className="prow-name">{s.day} {s.time}</div></td>
                  <td className="muted">{s.dept}</td>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div style={{ width: 64, height: 5, background: 'var(--bg-sub)', borderRadius: 99, overflow: 'hidden' }}>
                        <div style={{ width: `${s.currentNoShow}%`, height: '100%', background: 'var(--warn)' }} />
                      </div>
                      <span className="mono" style={{ fontSize: 11 }}>{s.currentNoShow}%</span>
                    </div>
                  </td>
                  <td className="mono">+{s.recommended}</td>
                  <td><Pill tone={s.confidence === 'High' ? 'ok' : 'warn'}>{s.confidence}</Pill></td>
                  <td>{s.recommended > 0 ? (
                    appliedSlots[s.id]
                      ? <Pill tone="ok"><Icon name="check" size={10} /> Applied</Pill>
                      : <button className="btn sm primary" onClick={() => {
                          setAppliedSlots(prev => ({ ...prev, [s.id]: true }));
                          onApplyOverbook && onApplyOverbook(s);
                        }}>Apply</button>
                  ) : <button className="btn sm ghost">Skip</button>}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="card">
          <div className="card-head">
            <div className="card-title">High-risk patients this week</div>
            <div className="card-sub">Trigger reminders or reserve waitlist backup</div>
          </div>
          <table className="tbl">
            <thead><tr><th>Patient</th><th>Risk</th><th>Action</th></tr></thead>
            <tbody>
              {highRisk.map(p => (
                <tr key={p.id}>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <Avatar name={p.name} size={26} />
                      <div>
                        <div className="prow-name">{p.name}</div>
                        <div className="prow-sub">{p.mrn}</div>
                      </div>
                    </div>
                  </td>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div style={{ width: 72, height: 5, background: 'var(--bg-sub)', borderRadius: 99, overflow: 'hidden' }}>
                        <div style={{ width: `${p.noShowRisk}%`, height: '100%', background: 'var(--err)' }} />
                      </div>
                      <span className="mono" style={{ fontSize: 11 }}>{p.noShowRisk}%</span>
                    </div>
                  </td>
                  <td><button className="btn sm" onClick={() => onSendReminder(p)}>Send reminder</button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

const Analytics = () => {
  const { DEPARTMENTS } = window.MOCK;
  const waitTrend = [14, 13, 13, 12, 12, 11, 10, 9, 10, 9, 9, 8];
  const utilTrend = [70, 71, 72, 74, 73, 75, 76, 78, 77, 78, 79, 78];
  const conflictsTrend = [6, 5, 5, 4, 4, 3, 3, 2, 3, 2, 2, 2];

  return (
    <div style={{ padding: 20 }}>
      <div className="kpi-row">
        <div className="kpi">
          <div className="kpi-label">Scheduling conflicts</div>
          <div className="kpi-val">↓ 67%</div>
          <div className="kpi-delta up">Since IHSP rollout</div>
          <Spark data={conflictsTrend} color="var(--err-text)" />
        </div>
        <div className="kpi">
          <div className="kpi-label">Avg patient wait</div>
          <div className="kpi-val">9m</div>
          <div className="kpi-delta up">▼ 5m vs baseline</div>
          <Spark data={waitTrend} />
        </div>
        <div className="kpi">
          <div className="kpi-label">Resource utilization</div>
          <div className="kpi-val">78%</div>
          <div className="kpi-delta up">+12 pts</div>
          <Spark data={utilTrend} color="var(--ok-text)" />
        </div>
        <div className="kpi">
          <div className="kpi-label">Coord. hours saved</div>
          <div className="kpi-val">142h</div>
          <div className="kpi-delta up">per week</div>
          <Spark data={[40,55,72,88,100,115,130,142]} />
        </div>
      </div>

      <div className="chart-grid">
        <div className="card">
          <div className="card-head">
            <div className="card-title">Department throughput — last 12 weeks</div>
          </div>
          <div className="card-body">
            <div className="stack">
              {DEPARTMENTS.map((d, i) => {
                const series = Array.from({ length: 12 }, (_, k) => 30 + ((i * 7 + k * 11) % 50) + k * 2);
                return (
                  <div key={d.id}>
                    <div className="row-space" style={{ marginBottom: 2 }}>
                      <span style={{ fontSize: 12, fontWeight: 500 }}>
                        <span style={{ width: 8, height: 8, borderRadius: 99, background: d.color, display: 'inline-block', marginRight: 6 }} />
                        {d.name}
                      </span>
                      <span className="mono muted" style={{ fontSize: 11 }}>{series[series.length - 1]} appts/wk</span>
                    </div>
                    <Spark data={series} color={d.color} height={28} />
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><div className="card-title">Patient satisfaction</div></div>
          <div className="card-body" style={{ textAlign: 'center', padding: '28px 20px' }}>
            <div className="serif" style={{ fontSize: 64, fontWeight: 500, letterSpacing: '-0.02em' }}>4.7</div>
            <div className="muted" style={{ fontSize: 12 }}>out of 5 · 2,314 responses</div>
            <div style={{ marginTop: 18, textAlign: 'left' }}>
              {[
                ['On-time appointments', 92],
                ['Wait-time satisfaction', 88],
                ['Scheduling ease', 94],
                ['Communication', 90],
              ].map(([k, v]) => (
                <div key={k} style={{ marginBottom: 10 }}>
                  <div className="row-space" style={{ marginBottom: 3 }}>
                    <span style={{ fontSize: 12 }}>{k}</span>
                    <span className="mono" style={{ fontSize: 11 }}>{v}%</span>
                  </div>
                  <div className="res-util-bar"><div className="res-util-fill" style={{ width: `${v}%` }} /></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const Settings = ({ dark, onToggleDark }) => {
  const [rules, setRules] = useState([
    { id: 1, name: 'Urgent overrides routine within 24h', enabled: true, tier: 'urgent' },
    { id: 2, name: 'Max wait 14 days for oncology follow-up', enabled: true, tier: 'sla' },
    { id: 3, name: 'Lab results must precede specialist consults', enabled: true, tier: 'dependency' },
    { id: 4, name: 'Post-op within 7 days of discharge', enabled: true, tier: 'sla' },
    { id: 5, name: 'Elevated priority for patients > 75', enabled: false, tier: 'age' },
    { id: 6, name: 'Imaging must precede orthopedic surgical consult', enabled: true, tier: 'dependency' },
  ]);
  const [autoLevel, setAutoLevel] = useState(65);

  return (
    <div style={{ padding: 20, maxWidth: 820 }}>
      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-head"><div className="card-title">Appearance</div><div className="card-sub">Interface theme</div></div>
        <div className="card-body">
          <div className="row" style={{ gap: 8 }}>
            <button className={`btn ${!dark ? 'primary' : ''}`} onClick={() => onToggleDark(false)}>Light</button>
            <button className={`btn ${dark ? 'primary' : ''}`} onClick={() => onToggleDark(true)}><Icon name="moon" size={12} /> Dark</button>
            <div style={{ flex: 1 }} />
            <span className="muted" style={{ fontSize: 12 }}>Current: {dark ? 'Dark' : 'Light'}</span>
          </div>
        </div>
      </div>

      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-head"><div className="card-title">Automation level</div><div className="card-sub">How much the scheduler can auto-resolve without confirmation</div></div>
        <div className="card-body">
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <span className="muted" style={{ fontSize: 12 }}>Manual</span>
            <input type="range" min="0" max="100" value={autoLevel} onChange={e => setAutoLevel(+e.target.value)} style={{ flex: 1 }} />
            <span className="muted" style={{ fontSize: 12 }}>Full auto</span>
            <span className="mono" style={{ fontSize: 12, minWidth: 36, textAlign: 'right' }}>{autoLevel}%</span>
          </div>
          <div className="muted" style={{ fontSize: 12, marginTop: 10 }}>
            At {autoLevel}%, the system will auto-apply re-optimizations that affect ≤{Math.round(autoLevel / 20)} patients and require confirmation for larger disruptions.
          </div>
        </div>
      </div>

      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-head"><div className="card-title">Prioritization rules</div><div className="card-sub">Move beyond first-come-first-serve</div></div>
        <table className="tbl">
          <thead><tr><th style={{ width: 60 }}>On</th><th>Rule</th><th>Type</th><th></th></tr></thead>
          <tbody>
            {rules.map(r => (
              <tr key={r.id}>
                <td>
                  <label style={{ display: 'inline-block', width: 34, height: 20, borderRadius: 99, background: r.enabled ? 'var(--accent)' : 'var(--border-strong)', position: 'relative', cursor: 'pointer', transition: 'background 0.15s' }} onClick={() => setRules(rs => rs.map(x => x.id === r.id ? { ...x, enabled: !x.enabled } : x))}>
                    <span style={{ position: 'absolute', top: 2, left: r.enabled ? 16 : 2, width: 16, height: 16, borderRadius: 99, background: 'white', transition: 'left 0.15s' }} />
                  </label>
                </td>
                <td>{r.name}</td>
                <td><Pill tone={r.tier === 'urgent' ? 'err' : r.tier === 'sla' ? 'warn' : 'accent'}>{r.tier}</Pill></td>
                <td><button className="btn sm ghost"><Icon name="edit" size={12} /></button></td>
              </tr>
            ))}
          </tbody>
        </table>
        <div style={{ padding: 12 }}><button className="btn sm"><Icon name="plus" size={12} /> Add rule</button></div>
      </div>

      <div className="card">
        <div className="card-head"><div className="card-title">Notification channels</div></div>
        <div className="card-body">
          {['SMS reminders to patients', 'Email confirmations', 'Staff push notifications', 'Provider delay alerts', 'Waitlist auto-offer'].map(c => (
            <div key={c} style={{ padding: '10px 0', borderBottom: '1px dashed var(--border)', display: 'flex', alignItems: 'center' }}>
              <span style={{ flex: 1, fontSize: 13 }}>{c}</span>
              <label style={{ display: 'inline-block', width: 34, height: 20, borderRadius: 99, background: 'var(--accent)', position: 'relative' }}>
                <span style={{ position: 'absolute', top: 2, left: 16, width: 16, height: 16, borderRadius: 99, background: 'white' }} />
              </label>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { NoShow, Analytics, Settings });