// Dashboard / Today view
const { DEPARTMENTS, DOCTORS, ROOMS, EQUIPMENT, PATIENTS, APPOINTMENTS, DAYS, WAITLIST, NOTIFICATIONS, fmt } = window.MOCK;

const Dashboard = ({ onOpenAppt, onGoto, onDismissBanner, bannerDismissed, onReoptimize, reoptimized }) => {
  const today = APPOINTMENTS.filter(a => a.dayId === 'wed');
  const completed = today.filter(a => a.status === 'completed').length;
  const inProgress = today.filter(a => a.status === 'in-progress').length;
  const upcoming = today.filter(a => a.status === 'scheduled').length;
  const conflicts = 2;
  const utilization = 78;

  const upcomingList = today.filter(a => a.status !== 'completed').slice(0, 6);

  return (
    <div className="dash-grid">
      <div>
        {!bannerDismissed && (
          <div className="disruption-banner">
            <span className="pulse" />
            <div style={{ flex: 1 }}>
              <b>Dr. Solberg is running 12 min late.</b>{' '}
              <span style={{ opacity: 0.85 }}>2 downstream appointments at risk. Re-optimization ready to apply.</span>
            </div>
            <div className="actions">
              <button className="btn sm" onClick={() => onGoto('calendar')}>View impact</button>
              <button className="btn sm primary" onClick={onReoptimize}>{reoptimized ? 'Applied ✓' : 'Re-optimize'}</button>
              <button className="btn sm ghost" onClick={onDismissBanner}><Icon name="x" size={12} /></button>
            </div>
          </div>
        )}

        <div className="kpi-row">
          <div className="kpi">
            <div className="kpi-label">Today's appts</div>
            <div className="kpi-val">{today.length}</div>
            <div className="kpi-delta up">▲ 6 vs. Tue</div>
            <Spark data={[12,14,13,16,15,18,17,today.length]} />
          </div>
          <div className="kpi">
            <div className="kpi-label">Utilization</div>
            <div className="kpi-val">{utilization}%</div>
            <div className="kpi-delta up">▲ 4 pts</div>
            <Spark data={[71,70,74,72,75,76,78,utilization]} color="var(--ok-text)" />
          </div>
          <div className="kpi">
            <div className="kpi-label">Avg wait</div>
            <div className="kpi-val">9<span style={{ fontSize: 16, color: 'var(--text-3)' }}>m</span></div>
            <div className="kpi-delta up">▼ 3m</div>
            <Spark data={[14,13,12,11,12,10,9,9]} color="var(--accent)" />
          </div>
          <div className="kpi">
            <div className="kpi-label">Conflicts</div>
            <div className="kpi-val">{conflicts}</div>
            <div className="kpi-delta down">2 unresolved</div>
            <Spark data={[6,5,4,5,3,3,2,2]} color="var(--err-text)" />
          </div>
        </div>

        <div className="card" style={{ marginBottom: 16 }}>
          <div className="card-head">
            <div>
              <div className="card-title">Now & next · Wed Apr 15</div>
              <div className="card-sub">{completed} done · {inProgress} in room · {upcoming} upcoming</div>
            </div>
            <button className="btn sm" style={{ marginLeft: 'auto' }} onClick={() => onGoto('calendar')}>Open calendar <Icon name="arrow" size={12} /></button>
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 90 }}>Time</th>
                <th>Patient</th>
                <th>Service</th>
                <th>Provider</th>
                <th>Room</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              {upcomingList.map(a => {
                const p = PATIENTS.find(x => x.id === a.patientId);
                const d = DOCTORS.find(x => x.id === a.docId);
                const r = ROOMS.find(x => x.id === a.roomId);
                const dept = DEPARTMENTS.find(x => x.id === a.dept);
                return (
                  <tr key={a.id} onClick={() => onOpenAppt(a)}>
                    <td className="mono">{a.startLabel}</td>
                    <td>
                      <div className="prow-name">{p.name}</div>
                      <div className="prow-sub">{p.mrn} · {p.age}{p.sex}</div>
                    </td>
                    <td>
                      <Pill><span style={{ width: 6, height: 6, borderRadius: 99, background: dept.color, display: 'inline-block' }} /> {a.typeLabel}</Pill>
                    </td>
                    <td>{d.name}</td>
                    <td>{r.name}</td>
                    <td><StatusPill status={a.status} /></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      <div>
        <div className="card" style={{ marginBottom: 16 }}>
          <div className="card-head">
            <div className="card-title">Department load</div>
          </div>
          <div className="card-body">
            <div className="stack">
              {DEPARTMENTS.slice(0, 6).map(d => {
                const load = APPOINTMENTS.filter(a => a.dayId === 'wed' && a.dept === d.id).length;
                const pct = Math.min(100, load * 18);
                return (
                  <div key={d.id}>
                    <div className="row-space" style={{ marginBottom: 4 }}>
                      <span style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12 }}>
                        <span style={{ width: 8, height: 8, borderRadius: 99, background: d.color }} />
                        {d.name}
                      </span>
                      <span className="mono muted" style={{ fontSize: 11 }}>{load} appts</span>
                    </div>
                    <div className="res-util-bar"><div className="res-util-fill" style={{ width: `${pct}%`, background: d.color }} /></div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div className="card-title">Live notifications</div>
            <button className="btn sm ghost" style={{ marginLeft: 'auto' }} onClick={() => onGoto('notifications')}>All</button>
          </div>
          <div>
            {NOTIFICATIONS.slice(0, 4).map(n => (
              <div key={n.id} style={{ padding: '12px 16px', borderBottom: '1px solid var(--border)', display: 'flex', gap: 10 }}>
                <div style={{
                  width: 28, height: 28, borderRadius: 7, flexShrink: 0,
                  background: n.severity === 'error' ? 'var(--err-soft)' : n.severity === 'warn' ? 'var(--warn-soft)' : 'var(--accent-soft)',
                  color: n.severity === 'error' ? 'var(--err-text)' : n.severity === 'warn' ? 'var(--warn-text)' : 'var(--accent-text)',
                  display: 'grid', placeItems: 'center',
                }}>
                  <Icon name={n.severity === 'error' ? 'alert' : n.severity === 'warn' ? 'warn' : 'bell'} size={14} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12, fontWeight: 600 }}>{n.title}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 2 }}>{n.body}</div>
                </div>
                <div style={{ fontSize: 10, color: 'var(--text-3)' }}>{n.ts}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Dashboard });