/* ClinicFlow AI — pages part 1: Dashboard, Patients list, Patient Profile, Appointments */

const { useState: _us, useEffect: _ue, useMemo: _um } = React;

// =================== DASHBOARD ===================
function DashboardPage({ navigate, actions }) {
  const { APPOINTMENTS, FOLLOWUPS, ACTIVITY, SPARK, PATIENTS } = window.CF_DATA;
  const [sentIds, setSentIds] = _us(new Set());
  const todayAppts = APPOINTMENTS.filter(a => a.day === 'today');
  const pendingFu = FOLLOWUPS.filter(f => f.state === 'pending' && !sentIds.has(f.id)).slice(0, 4);

  const sendFu = (f) => {
    setSentIds(s => new Set([...s, f.id]));
    window.toast(`Follow-up sent to ${f.patient}`, { sub: 'Delivered via WhatsApp', type: 'success' });
  };
  const openCompose = (name) => {
    const patient = PATIENTS.find(p => p.name === name) || { name, phone: '+91 90000 00000' };
    actions?.openCompose(patient);
  };

  return (
    <div className="view">
      {/* Row 1: KPIs */}
      <div className="kpi-grid">
        <KPICard label="Total Patients" value="1,284" trend="+8.2%" trendDir="up"
          foot="42 new this month" />
        <KPICard label="Appointments This Week" value="186" trend="+12%" trendDir="up">
          <div style={{ marginTop: 10 }}>
            <Sparkline data={SPARK} />
          </div>
        </KPICard>
        <KPICard label="Follow-up Rate" value="87%" trend="+3.4%" trendDir="up">
          <div style={{ position: 'absolute', right: 18, top: 16 }}>
            <ProgressRing pct={87} />
          </div>
        </KPICard>
        <KPICard label="Missed Appointments" value="12" trend="−18%" trendDir="down"
          foot="2 require follow-up" />
      </div>

      {/* Row 2: 60/40 */}
      <div style={{ display: 'grid', gridTemplateColumns: '3fr 2fr', gap: 16, marginBottom: 24 }}>
        {/* Upcoming Appointments */}
        <div className="card">
          <div className="card-header">
            <div>
              <div className="card-title">Upcoming Appointments</div>
              <div className="text-xs text-muted" style={{ marginTop: 2 }}>Today, May 21 · {todayAppts.length} scheduled</div>
            </div>
            <button className="btn btn-link" onClick={() => navigate('appointments')}>
              View all <I.arrowRight size={12}/>
            </button>
          </div>
          <div className="row-list">
            {todayAppts.slice(0, 5).map(a => (
              <div key={a.id} className="row">
                <PatientAvatar name={a.patient} />
                <div className="row-main">
                  <div className="row-name">{a.patient}</div>
                  <div className="row-sub">
                    <span className="mono">{a.time}</span> · {a.doctor} · {a.kind}
                  </div>
                </div>
                <StatusBadge value={a.status} />
                <div className="row-actions">
                  <button className="btn-icon" title="Reschedule"
                    onClick={() => window.toast(`Reschedule dialog for ${a.patient}`, { sub: 'Pick a new slot from the appointments page', type: 'info' })}>
                    <I.calendar size={14}/>
                  </button>
                  <button className="btn-icon wa" title="WhatsApp" onClick={() => openCompose(a.patient)}>
                    <I.wa size={14}/>
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* AI Follow-up Queue */}
        <div className="ai-card">
          <div className="card-header" style={{ marginBottom: 12 }}>
            <div className="flex items-center gap-2">
              <div style={{
                width: 28, height: 28, borderRadius: 8,
                background: 'linear-gradient(135deg, #7C3AED, #4F46E5)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'white'
              }}>
                <I.zap size={14} fill="white" sw="0" />
              </div>
              <div>
                <div className="card-title">AI Follow-Up Agent</div>
                <div className="text-xs text-muted" style={{ marginTop: 2 }}>{pendingFu.length} pending · runs every 2h</div>
              </div>
            </div>
            <button className="btn btn-link" onClick={() => navigate('followups')}>
              <I.arrowRight size={14}/>
            </button>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {pendingFu.map(f => (
              <div key={f.id} style={{
                background: 'white', borderRadius: 10, padding: 12,
                border: '1px solid rgba(124, 58, 237, 0.08)'
              }}>
                <div className="flex items-center gap-2" style={{ marginBottom: 6 }}>
                  <span style={{ fontWeight: 600, fontSize: 13, color: 'var(--ink)' }}>{f.patient}</span>
                  <StatusBadge value={f.type} />
                  {f.ai && <AIBadge />}
                </div>
                <div style={{ fontSize: 12, color: 'var(--gray-600)', lineHeight: 1.5,
                  display: '-webkit-box', WebkitLineClamp: 1, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
                  {f.preview}
                </div>
                <div className="flex items-center gap-2" style={{ marginTop: 8 }}>
                  <span className="mono" style={{ fontSize: 10 }}>{f.scheduledFor}</span>
                  <div style={{ marginLeft: 'auto', display: 'flex', gap: 4 }}>
                    <button className="btn btn-ghost btn-sm" onClick={() => actions?.openEditFollowup(f)}>Edit</button>
                    <button className="btn btn-primary btn-sm" onClick={() => sendFu(f)}>
                      <I.send size={11} />Send
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Activity strip */}
      <div className="activity-strip">
        <div className="card-header" style={{ marginBottom: 8 }}>
          <div className="card-title">Recent Activity</div>
          <span className="mono" style={{ fontSize: 11 }}>Live</span>
        </div>
        {ACTIVITY.map((a, i) => (
          <div key={i} className="activity-item">
            <span className="activity-dot" style={{ background: a.color }} />
            <span className="text-sm" style={{ color: 'var(--gray-700)' }}>{a.text}</span>
            <span className="activity-time">{a.time}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// =================== PATIENTS LIST ===================
function PatientsPage({ navigate, actions }) {
  const { PATIENTS } = window.CF_DATA;
  const [filter, setFilter] = _us('All');
  const [query, setQuery] = _us('');
  const [page, setPage] = _us(1);
  const pageSize = 8;

  const counts = _um(() => {
    const c = { All: PATIENTS.length, New: 0, Active: 0, 'At Risk': 0, Inactive: 0 };
    PATIENTS.forEach(p => { c[p.status] = (c[p.status] || 0) + 1; });
    return c;
  }, []);

  const filtered = PATIENTS.filter(p => {
    if (filter !== 'All' && p.status !== filter) return false;
    if (query && !p.name.toLowerCase().includes(query.toLowerCase()) && !p.phone.includes(query)) return false;
    return true;
  });
  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
  const safePage = Math.min(page, totalPages);
  const start = (safePage - 1) * pageSize;
  const paged = filtered.slice(start, start + pageSize);

  return (
    <div className="view">
      <div className="page-header">
        <div>
          <h1>Patients</h1>
          <p>{counts.All} total · {counts.Active} active · {counts['At Risk']} at risk</p>
        </div>
        <button className="btn btn-primary btn-lg" onClick={() => actions?.addPatient()}>
          <I.plus size={14} sw={2.5}/>Add Patient
        </button>
      </div>

      <div className="flex items-center justify-between" style={{ marginBottom: 16, gap: 16 }}>
        <div style={{ flex: '0 0 300px' }}>
          <div className="search-wrap">
            <I.search size={14} className="search-icon" />
            <input className="search-input" placeholder="Search patients..."
              value={query} onChange={e => setQuery(e.target.value)} />
          </div>
        </div>
        <div className="filter-chips">
          {['All', 'New', 'Active', 'At Risk', 'Inactive'].map(f => (
            <button key={f} className={`chip ${filter === f ? 'active' : ''}`} onClick={() => { setFilter(f); setPage(1); }}>
              {f}<span className="count">{counts[f] || 0}</span>
            </button>
          ))}
        </div>
      </div>

      <div className="table-card">
        <table className="table">
          <thead>
            <tr>
              <th>Patient</th>
              <th>Last Visit</th>
              <th>Next Follow-up</th>
              <th>Risk</th>
              <th>WhatsApp</th>
              <th style={{ textAlign: 'right' }}>Actions</th>
            </tr>
          </thead>
          <tbody>
            {paged.length === 0 ? (
              <tr><td colSpan="6" style={{ padding: 0 }}>
                <window.EmptyState
                  icon={<I.search size={22}/>}
                  title="No patients match"
                  body={query ? `Try a different search or clear the "${filter}" filter.` : `No patients in the "${filter}" segment yet.`}
                  action={(query || filter !== 'All') && (
                    <button className="btn btn-ghost" onClick={() => { setQuery(''); setFilter('All'); }}>Clear filters</button>
                  )}
                />
              </td></tr>
            ) : paged.map(p => (
              <tr key={p.id} style={{ cursor: 'pointer' }} onClick={() => navigate('profile', p.id)}>
                <td>
                  <div className="patient-cell">
                    <PatientAvatar name={p.name} />
                    <div>
                      <div className="patient-name">{p.name}</div>
                      <div className="patient-phone">{p.phone}</div>
                    </div>
                  </div>
                </td>
                <td className="mono">{p.lastVisit}</td>
                <td>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                    <span className="mono" style={{ fontSize: 12 }}>{p.nextFollowup}</span>
                    <StatusBadge value={p.followupType} />
                  </div>
                </td>
                <td><StatusBadge value={p.risk} dot /></td>
                <td>
                  <div className="flex items-center gap-2" style={{ color: '#25D366' }}>
                    <WaTicks state={p.wa} />
                    <span style={{ fontSize: 12, color: 'var(--gray-600)', textTransform: 'capitalize' }}>{p.wa}</span>
                  </div>
                </td>
                <td onClick={e => e.stopPropagation()}>
                  <div className="row-actions" style={{ justifyContent: 'flex-end' }}>
                    <button className="btn-icon" title="View" onClick={() => navigate('profile', p.id)}><I.user size={14}/></button>
                    <button className="btn-icon wa" title="Message" onClick={() => actions?.openCompose(p)}><I.wa size={14}/></button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="pagination">
          <span>Showing {filtered.length === 0 ? 0 : start + 1}–{Math.min(start + pageSize, filtered.length)} of {filtered.length}</span>
          <div className="pagination-pages">
            <button className="page-btn" onClick={() => setPage(p => Math.max(1, p - 1))} disabled={safePage === 1}><I.chevL size={12}/></button>
            {Array.from({ length: totalPages }).map((_, i) => (
              <button key={i} className={`page-btn ${safePage === i + 1 ? 'active' : ''}`} onClick={() => setPage(i + 1)}>{i + 1}</button>
            ))}
            <button className="page-btn" onClick={() => setPage(p => Math.min(totalPages, p + 1))} disabled={safePage === totalPages}><I.chevR size={12}/></button>
          </div>
        </div>
      </div>
    </div>
  );
}

// =================== PATIENT PROFILE ===================
function PatientProfilePage({ patientId, navigate, actions }) {
  const { PATIENTS, WA_THREAD } = window.CF_DATA;
  const patient = PATIENTS.find(p => p.id === patientId) || PATIENTS[0];
  const [tab, setTab] = _us('Overview');

  const meta = window.avatarFor(patient.name);

  return (
    <div className="view">
      <div className="page-header" style={{ marginBottom: 16 }}>
        <div className="flex items-center gap-2" style={{ fontSize: 13, color: 'var(--gray-500)' }}>
          <button className="btn btn-link" onClick={() => navigate('patients')} style={{ paddingLeft: 0 }}>
            <I.chevL size={14}/>Patients
          </button>
          <span style={{ color: 'var(--gray-300)' }}>/</span>
          <span style={{ color: 'var(--ink)' }}>{patient.name}</span>
        </div>
        <span className="mono">{patient.id}</span>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '35% 1fr', gap: 16, alignItems: 'flex-start' }}>
        {/* LEFT — Patient card */}
        <div className="card">
          <div style={{ textAlign: 'center', padding: '8px 0 20px' }}>
            <span className="avatar xl" style={{ background: meta.bg, margin: '0 auto', display: 'inline-flex' }}>
              {meta.initials}
            </span>
            <h2 style={{ marginTop: 16, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, color: 'var(--ink)', letterSpacing: '-0.01em' }}>{patient.name}</h2>
            <div className="mono" style={{ marginTop: 4 }}>{patient.id}</div>
            <div style={{ marginTop: 12 }}>
              <StatusBadge value={`${patient.risk}`} dot /> &nbsp;
              <span className="badge badge-neutral" style={{ marginLeft: 4 }}>Risk score</span>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, padding: '12px 0' }}>
            <div className="flex items-center gap-3"><I.phone size={14} stroke="#9CA3AF"/><span className="mono">{patient.phone}</span></div>
            <div className="flex items-center gap-3"><I.mail  size={14} stroke="#9CA3AF"/><span style={{ fontSize: 13, color: 'var(--gray-700)' }}>{patient.email}</span></div>
            <div className="flex items-center gap-3"><I.cake  size={14} stroke="#9CA3AF"/><span style={{ fontSize: 13, color: 'var(--gray-700)' }}>{patient.dob} · {new Date().getFullYear() - parseInt(patient.dob.slice(0,4))} yrs</span></div>
          </div>

          <button className="btn btn-wa btn-block btn-lg" style={{ marginTop: 8 }} onClick={() => actions?.openCompose(patient)}>
            <I.wa size={15}/>Send WhatsApp
          </button>

          <div className="divider" />

          <div className="card-label" style={{ marginBottom: 8 }}>Care details</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13 }}>
            <div className="flex justify-between"><span className="text-muted">Patient since</span><span className="font-semi text-ink">{patient.since}</span></div>
            <div className="flex justify-between"><span className="text-muted">Assigned doctor</span><span className="font-semi text-ink">{patient.doctor}</span></div>
            <div className="flex justify-between"><span className="text-muted">Last visit</span><span className="mono">{patient.lastVisit}</span></div>
            <div className="flex justify-between"><span className="text-muted">Next follow-up</span><span className="mono">{patient.nextFollowup}</span></div>
          </div>

          <div className="divider" />

          <div className="card-label" style={{ marginBottom: 10 }}>Tags</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {patient.tags.map(t => <span key={t} className="badge badge-neutral">{t}</span>)}
          </div>
        </div>

        {/* RIGHT — Tabbed */}
        <div>
          <div className="tab-bar">
            {['Overview', 'Appointments', 'Consultations', 'WhatsApp History', 'Follow-ups'].map(t => (
              <button key={t} className={`tab ${tab === t ? 'active' : ''}`} onClick={() => setTab(t)}>{t}</button>
            ))}
          </div>

          {tab === 'Overview' && (
            <div className="view">
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 16 }}>
                <div className="stat-tile">
                  <div className="stat-tile-label">Total Visits</div>
                  <div className="stat-tile-value">14</div>
                  <div className="text-xs text-muted" style={{ marginTop: 4 }}>Since {patient.since.slice(0,4)}</div>
                </div>
                <div className="stat-tile">
                  <div className="stat-tile-label">Follow-up Completion</div>
                  <div className="stat-tile-value">92%</div>
                  <div className="text-xs text-muted" style={{ marginTop: 4 }}>13 of 14 closed-loop</div>
                </div>
              </div>

              <div className="ai-card">
                <div className="flex items-center gap-2" style={{ marginBottom: 10 }}>
                  <AIBadge />
                  <span className="card-label">AI Generated Summary · last consultation</span>
                  <span className="mono" style={{ marginLeft: 'auto' }}>{patient.lastVisit}</span>
                </div>
                <h3 style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink)', marginBottom: 6 }}>Diagnosis</h3>
                <p style={{ fontSize: 13, color: 'var(--gray-700)', marginBottom: 12 }}>
                  Type 2 diabetes — stable on current regimen. HbA1c trending down (7.1 → 6.8) over last 4 months. No acute complaints.
                </p>
                <h3 style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink)', marginBottom: 6 }}>Prescription notes</h3>
                <p style={{ fontSize: 13, color: 'var(--gray-700)', marginBottom: 12 }}>
                  Continue Metformin 500mg BD with meals. Vitamin D3 60K weekly × 8 weeks. Foot exam advised next visit.
                </p>
                <div className="flex items-center gap-2" style={{ paddingTop: 8, borderTop: '1px solid rgba(124,58,237,0.15)' }}>
                  <I.calendar size={14} stroke="var(--purple-600)" />
                  <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--purple-700)' }}>Next follow-up: {patient.nextFollowup}</span>
                </div>
              </div>
            </div>
          )}

          {tab === 'Appointments' && (
            <div className="view card">
              <div className="timeline">
                {[
                  { date: '2026-05-22', dr: 'Dr. Verma', status: 'pending',   note: 'Quarterly follow-up · HbA1c review' },
                  { date: '2026-05-14', dr: 'Dr. Verma', status: 'confirmed', note: 'Consult — medication adjustment' },
                  { date: '2026-02-11', dr: 'Dr. Iyer',  status: 'confirmed', note: 'Lipid panel + cardio screen' },
                  { date: '2025-11-04', dr: 'Dr. Verma', status: 'confirmed', note: 'Annual diabetic review' },
                  { date: '2025-08-21', dr: 'Dr. Khan',  status: 'missed',    note: 'Endocrine consult — rescheduled' },
                ].map((e, i) => (
                  <div key={i} className={`timeline-item ${e.status === 'confirmed' ? 'success' : e.status === 'missed' ? 'danger' : 'warning'}`}>
                    <div className="timeline-date">{e.date}</div>
                    <div className="timeline-title">{e.dr} · <span style={{ fontWeight: 400, color: 'var(--gray-600)' }}>{e.note}</span></div>
                    <div style={{ marginTop: 6 }}><StatusBadge value={e.status} /></div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {tab === 'Consultations' && (
            <div className="view">
              {[
                {
                  date: '2026-05-14', time: '10:30 AM', dr: 'Dr. Aditi Verma',
                  diagnosis: 'Type 2 diabetes — well-controlled. HbA1c 6.8 (down from 7.1). Reports occasional morning lightheadedness.',
                  prescription: 'Continue Metformin 500mg BD with meals · Vitamin D3 60K weekly × 8 weeks · Foot exam advised next visit',
                  vitals: { bp: '128/82', hr: '72', wt: '64.4 kg', glucose: '124 mg/dL' },
                  attachments: [{ name: 'HbA1c-May14.pdf', size: '124 KB' }, { name: 'Lipid-panel.pdf', size: '88 KB' }],
                  ai: true,
                },
                {
                  date: '2026-02-11', time: '4:15 PM', dr: 'Dr. Ravi Iyer',
                  diagnosis: 'Cardio screen following family history. ECG normal · Lipid profile borderline (LDL 132).',
                  prescription: 'Dietary counselling · Brisk walk 30 min × 5 days/week · Follow-up lipid in 3 months',
                  vitals: { bp: '132/86', hr: '78', wt: '64.9 kg' },
                  attachments: [{ name: 'ECG-Feb11.pdf', size: '1.1 MB' }],
                  ai: false,
                },
                {
                  date: '2025-11-04', time: '11:00 AM', dr: 'Dr. Aditi Verma',
                  diagnosis: 'Annual diabetic review. All parameters stable. Mild peripheral neuropathy in left foot — monitor.',
                  prescription: 'Continue current regimen · B12 supplement · Diabetic foot care education',
                  vitals: { bp: '130/84', hr: '74', wt: '65.1 kg', glucose: '142 mg/dL' },
                  attachments: [],
                  ai: false,
                },
              ].map((c, i) => (
                <div key={i} className="consult-card">
                  <div className="consult-head">
                    <PatientAvatar name={c.dr.replace('Dr. ', '')} />
                    <div style={{ flex: 1 }}>
                      <div style={{ fontWeight: 600, color: 'var(--ink)', fontSize: 14 }}>{c.dr}</div>
                      <div className="mono" style={{ marginTop: 2 }}>{c.date} · {c.time}</div>
                    </div>
                    <span className="dr-pill">Consultation</span>
                    {c.ai && <AIBadge/>}
                  </div>

                  {c.vitals && (
                    <div className="consult-section">
                      <div className="consult-section-title">Vitals</div>
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>
                        {Object.entries(c.vitals).map(([k, v]) => (
                          <div key={k}>
                            <div className="mono" style={{ fontSize: 10, color: 'var(--gray-400)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{k}</div>
                            <div style={{ fontWeight: 600, color: 'var(--ink)', fontSize: 14, fontFamily: 'var(--font-display)', letterSpacing: '-0.01em' }}>{v}</div>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}

                  <div className="consult-section">
                    <div className="consult-section-title">Diagnosis</div>
                    <div className="consult-section-body">{c.diagnosis}</div>
                  </div>

                  <div className="consult-section">
                    <div className="consult-section-title">Prescription</div>
                    <div className="consult-section-body">{c.prescription}</div>
                  </div>

                  {c.attachments.length > 0 && (
                    <div className="consult-section">
                      <div className="consult-section-title">Attachments</div>
                      <div className="consult-section-body" style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                        {c.attachments.map(a => (
                          <span key={a.name} className="attachment">
                            <span className="file-ico"><I.beaker size={12}/></span>
                            {a.name}
                            <span className="file-size">{a.size}</span>
                          </span>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}

          {tab === 'WhatsApp History' && (
            <div className="view">
              <div className="wa-thread">
                {WA_THREAD.map((m, i) => {
                  if (m.day) return <div key={i} className="wa-day">{m.day}</div>;
                  return (
                    <div key={i} className={`wa-bubble ${m.dir}`}>
                      {m.text}
                      <span className="wa-meta">
                        <span>{m.time}</span>
                        {m.dir === 'sent' && <span className="ticks"><WaTicks state={m.ticks}/></span>}
                      </span>
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {tab === 'Follow-ups' && (
            <div className="view">
              {[
                { type: 'Medication', state: 'sent', date: '2026-05-15', when: 'Sent · 6:00 PM', text: 'Hi Aanya, reminder to continue Metformin 500mg twice daily with meals. Let us know about side effects.', ai: true, replied: true },
                { type: 'Test', state: 'sent', date: '2026-05-12', when: 'Sent · 9:00 AM', text: 'Bloodwork prep — fasting not required. Walk-in slots Tue 8–11 AM.', ai: true, replied: true },
                { type: 'Revisit', state: 'pending', date: '2026-05-22', when: 'Scheduled · 6:00 PM', text: 'Quarterly HbA1c follow-up · Dr. Verma has openings on Friday morning.', ai: true, replied: false },
                { type: 'Medication', state: 'sent', date: '2026-02-25', when: 'Sent · 10:00 AM', text: 'Vitamin D3 60K weekly · 6 of 8 doses completed. Two remaining.', ai: false, replied: true },
              ].map((f, i) => (
                <div key={i} className={`fu-card ${f.ai && f.state !== 'failed' ? 'ai' : ''}`} style={{ marginBottom: 10 }}>
                  <div className="fu-main">
                    <div className="fu-name-row">
                      <span className="fu-name">{patient.name}</span>
                      <StatusBadge value={f.type} />
                      {f.ai && <AIBadge/>}
                      <StatusBadge value={f.state} />
                      {f.replied && <span className="badge badge-success"><WaTicks state="read"/>Read</span>}
                    </div>
                    <p className="fu-preview">{f.text}</p>
                    <div className="fu-meta">
                      <I.calendar size={12} stroke="#9CA3AF"/>
                      <span>{f.date} · {f.when}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// =================== APPOINTMENTS ===================
function AppointmentsPage({ actions }) {
  const { APPOINTMENTS } = window.CF_DATA;
  const [view, setView] = _us('Week');
  const [selectedId, setSelectedId] = _us(null);
  // Local override map: { [apptId]: 'confirmed' | 'pending' | 'missed' | 'completed' }
  const [statusOverrides, setStatusOverrides] = _us({});

  const apptStatus = (a) => statusOverrides[a.id] || a.status;
  const setStatus = (id, status, name) => {
    setStatusOverrides(s => ({ ...s, [id]: status }));
    const labels = { completed: 'Marked complete', missed: 'Marked missed', confirmed: 'Confirmed' };
    window.toast(`${labels[status] || 'Updated'} · ${name}`, { type: status === 'missed' ? 'info' : 'success' });
  };

  // Week: build days Mon..Sun with current = today
  const days = [
    { label: 'Mon', num: 18, count: 0 },
    { label: 'Tue', num: 19, count: 1 },
    { label: 'Wed', num: 20, count: 2 },
    { label: 'Thu', num: 21, count: 6, today: true },
    { label: 'Fri', num: 22, count: 3 },
    { label: 'Sat', num: 23, count: 1 },
    { label: 'Sun', num: 24, count: 0 },
  ];
  const hours = ['09', '10', '11', '12', '13', '14', '15', '16'];

  // Map appointment time → row col
  function findAppt(hour, dayIdx) {
    if (!days[dayIdx].today) return null;
    const a = APPOINTMENTS.find(a => a.day === 'today' && a.time.startsWith(hour));
    return a;
  }
  const selected = APPOINTMENTS.find(a => a.id === selectedId);

  return (
    <div className="view">
      <div className="page-header">
        <div>
          <h1>Appointments</h1>
          <p>Week of May 18 · {APPOINTMENTS.filter(a => a.day === 'today').length} today, {APPOINTMENTS.filter(a => a.day === 'tomorrow').length} tomorrow</p>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '3fr 2fr', gap: 16, alignItems: 'flex-start' }}>
        {/* Calendar */}
        <div className="card">
          <div className="cal-head">
            <div className="cal-nav">
              <button className="btn-icon"><I.chevL size={14}/></button>
              <span className="cal-month">May 2026</span>
              <button className="btn-icon"><I.chevR size={14}/></button>
            </div>
            <div className="cal-toggle">
              <button className={view === 'Day' ? 'active' : ''} onClick={() => setView('Day')}>Day</button>
              <button className={view === 'Week' ? 'active' : ''} onClick={() => setView('Week')}>Week</button>
              <button className={view === 'Month' ? 'active' : ''} onClick={() => setView('Month')}>Month</button>
            </div>
          </div>

          <div className="cal-week">
            <div></div>
            {days.map((d, i) => (
              <div key={i} className={`cal-day-head ${d.today ? 'today' : ''}`}>
                {d.label}
                <div className="num">{d.num}</div>
                <div className="dot-row">
                  {Array.from({ length: Math.min(d.count, 3) }).map((_, k) => <span key={k}/>)}
                </div>
              </div>
            ))}

            {hours.map((h) => (
              <React.Fragment key={h}>
                <div className="cal-time-label">{h}:00</div>
                {days.map((d, di) => {
                  const a = findAppt(h, di);
                  const isNow = d.today && h === '11';
                  return (
                    <div key={di} className={`cal-cell ${isNow ? 'now' : ''}`}>
                      {a && (
                        <div className={`appt-pill ${
                          apptStatus(a) === 'confirmed' || apptStatus(a) === 'completed' ? 'green' :
                          apptStatus(a) === 'pending' ? 'amber' : 'red'
                        }`} onClick={() => setSelectedId(a.id)}>
                          <div className="who">{a.patient.split(' ')[0]}</div>
                          <div style={{ opacity: 0.7, fontSize: 10 }}>{a.time} · {a.doctor.replace('Dr. ', '')}</div>
                        </div>
                      )}
                    </div>
                  );
                })}
              </React.Fragment>
            ))}
          </div>
        </div>

        {/* Right: today's list */}
        <div className="card" style={{ position: 'sticky', top: 80 }}>
          <div className="card-header">
            <div>
              <div className="card-label">Today</div>
              <div className="card-title" style={{ marginTop: 4 }}>Thursday, May 21</div>
            </div>
            <span className="badge badge-purple">{APPOINTMENTS.filter(a => a.day === 'today').length} appts</span>
          </div>
          <div className="row-list">
            {APPOINTMENTS.filter(a => a.day === 'today').map(a => (
              <div key={a.id} className="row" style={{ padding: '12px 0', cursor: 'pointer', background: selectedId === a.id ? 'var(--purple-50)' : '' }}
                onClick={() => setSelectedId(a.id)}>
                <div style={{
                  background: 'var(--purple-50)', color: 'var(--purple-700)',
                  padding: '6px 10px', borderRadius: 8, fontFamily: 'var(--font-mono)',
                  fontSize: 12, fontWeight: 500, minWidth: 56, textAlign: 'center'
                }}>{a.time}</div>
                <div className="row-main">
                  <div className="row-name">{a.patient}</div>
                  <div className="row-sub">{a.doctor} · {a.kind}</div>
                </div>
                <StatusBadge value={apptStatus(a) === 'completed' ? 'confirmed' : apptStatus(a)} />
              </div>
            ))}
          </div>

          <div className="divider" />

          <div className="card-label" style={{ marginBottom: 10 }}>
            {selected ? `Actions · ${selected.patient}` : 'Quick actions'}
          </div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <button className="btn btn-ghost btn-sm" disabled={!selected}
              onClick={() => selected && setStatus(selected.id, 'completed', selected.patient)}>
              <I.check size={12}/>Mark complete
            </button>
            <button className="btn btn-subtle btn-sm" disabled={!selected}
              onClick={() => selected && setStatus(selected.id, 'missed', selected.patient)}>
              <I.x size={12}/>Mark missed
            </button>
            <button className="btn btn-subtle btn-sm" disabled={!selected}
              onClick={() => selected && window.toast(`Reschedule dialog · ${selected.patient}`, { type: 'info' })}>
              <I.calendar size={12}/>Reschedule
            </button>
          </div>

          <div className="divider" />

          <div className="card-label" style={{ marginBottom: 10 }}>Upcoming · Tomorrow</div>
          <div className="row-list">
            {APPOINTMENTS.filter(a => a.day === 'tomorrow').map(a => (
              <div key={a.id} className="row" style={{ padding: '10px 0' }}>
                <PatientAvatar name={a.patient} size="sm" />
                <div className="row-main">
                  <div className="row-name" style={{ fontSize: 12 }}>{a.patient}</div>
                  <div className="row-sub"><span className="mono">{a.time}</span> · {a.doctor}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <button className="fab" title="Add Appointment" onClick={() => actions?.addAppt()}>
        <I.plus size={22} sw={2.5}/>
      </button>
    </div>
  );
}

Object.assign(window, { DashboardPage, PatientsPage, PatientProfilePage, AppointmentsPage });