/* ClinicFlow AI — pages part 2: Follow-ups, Analytics, Communications, Settings */

const { useState: _us2, useMemo: _um2 } = React;

// =================== FOLLOW-UPS ===================
function FollowUpsPage({ actions }) {
  const { FOLLOWUPS } = window.CF_DATA;
  const [filter, setFilter] = _us2('All');
  const [items, setItems] = _us2(FOLLOWUPS);
  const [running, setRunning] = _us2(false);

  // Expose mutation hook so EditFollowupModal can patch items here
  React.useEffect(() => {
    window.cfMutateFollowup = (updated) => {
      setItems(prev => prev.map(p => p.id === updated.id ? { ...p, ...updated } : p));
    };
    return () => { delete window.cfMutateFollowup; };
  }, []);

  const counts = _um2(() => {
    const c = { All: items.length, Pending: 0, Sent: 0, Failed: 0 };
    items.forEach(f => {
      if (f.state === 'pending') c.Pending++;
      else if (f.state === 'sent') c.Sent++;
      else if (f.state === 'failed') c.Failed++;
    });
    return c;
  }, [items]);

  const filtered = items.filter(f => {
    if (filter === 'All') return true;
    return f.state === filter.toLowerCase();
  });

  const sendNow = (f) => {
    setItems(items.map(x => x.id === f.id ? { ...x, state: 'sent' } : x));
    window.toast(`Sent to ${f.patient}`, { sub: 'Delivered via WhatsApp', type: 'success' });
  };
  const dismiss = (f) => {
    setItems(items.filter(x => x.id !== f.id));
    window.toast(`Dismissed follow-up for ${f.patient}`, { type: 'info' });
  };
  const retry = (f) => {
    setItems(items.map(x => x.id === f.id ? { ...x, state: 'sent' } : x));
    window.toast(`Retry succeeded · ${f.patient}`, { type: 'success' });
  };
  const runAgent = () => {
    setRunning(true);
    window.toast('AI Agent running', { sub: 'Processing follow-up candidates...', type: 'info' });
    setTimeout(() => {
      setRunning(false);
      window.toast('AI Agent finished', { sub: '3 new follow-ups queued', type: 'success' });
    }, 1500);
  };

  return (
    <div className="view">
      <div className="page-header">
        <div>
          <div className="flex items-center gap-2" style={{ marginBottom: 4 }}>
            <div style={{
              width: 32, height: 32, borderRadius: 8,
              background: 'linear-gradient(135deg, #7C3AED, #4F46E5)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'white'
            }}>
              <I.zap size={16} fill="white" sw="0" />
            </div>
            <h1>AI Follow-Up Agent</h1>
          </div>
          <p>{counts.Pending} messages pending · Last run: 2 hours ago · {counts.Sent} sent today</p>
        </div>
        <button className="btn btn-ghost btn-lg" onClick={runAgent} disabled={running}>
          <I.refresh size={14} style={{ animation: running ? 'spin 1s linear infinite' : 'none' }} />
          {running ? 'Running…' : 'Run Agent Now'}
        </button>
      </div>

      <div className="filter-chips" style={{ marginBottom: 16 }}>
        {['All', 'Pending', 'Sent', 'Failed'].map(f => (
          <button key={f} className={`chip ${filter === f ? 'active' : ''}`} onClick={() => setFilter(f)}>
            {f}<span className="count">{counts[f] || 0}</span>
          </button>
        ))}
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {filtered.length === 0 ? (
          <window.EmptyState
            icon={<I.zap size={22}/>}
            title={filter === 'All' ? "Inbox zero — you're all caught up" : `No ${filter.toLowerCase()} follow-ups`}
            body={filter === 'All' ? "The AI Agent has no pending tasks right now. New candidates appear every 2 hours."
                                   : "Switch filters above to see other states."}
            action={filter !== 'All' ? <button className="btn btn-ghost" onClick={() => setFilter('All')}>Show all</button> : null}
          />
        ) : filtered.map(f => (
          <div key={f.id} className={`fu-card ${f.ai && f.state !== 'failed' ? 'ai' : ''} ${f.state === 'failed' ? 'failed' : ''}`}>
            <PatientAvatar name={f.patient} size="lg" />
            <div className="fu-main">
              <div className="fu-name-row">
                <span className="fu-name">{f.patient}</span>
                <StatusBadge value={f.type} />
                {f.ai && <AIBadge />}
                {f.state === 'failed' && <StatusBadge value="failed" />}
                {f.state === 'sent' && <StatusBadge value="sent" />}
              </div>
              <p className="fu-preview">{f.preview}</p>
              <div className="fu-meta">
                <I.calendar size={12} stroke="#9CA3AF"/>
                <span>Scheduled for {f.scheduledFor}</span>
                <span style={{ margin: '0 4px', color: 'var(--gray-300)' }}>·</span>
                <span className="mono">{f.id}</span>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6, minWidth: 200 }}>
              <div className="flex items-center gap-2">
                {f.state === 'failed' ? (
                  <button className="btn btn-primary" onClick={() => retry(f)}><I.retry size={13}/>Retry</button>
                ) : f.state === 'sent' ? (
                  <button className="btn btn-subtle" disabled style={{ opacity: 0.6 }}>
                    <I.check size={13} stroke="#10B981"/>Delivered
                  </button>
                ) : (
                  <button className="btn btn-primary" onClick={() => sendNow(f)}><I.send size={12}/>Send Now</button>
                )}
                <button className="btn btn-ghost" onClick={() => actions?.openEditFollowup(f)}><I.edit size={12}/>Edit</button>
              </div>
              <button className="btn btn-link" style={{ fontSize: 12 }} onClick={() => dismiss(f)}>Dismiss</button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// =================== ANALYTICS ===================
function AnalyticsPage() {
  const { APPTS_OVER_TIME, RETENTION_TREND } = window.CF_DATA;
  const [range, setRange] = _us2('This Month');
  const [rangeOpen, setRangeOpen] = _us2(false);

  return (
    <div className="view">
      <div className="banner-gradient">
        <div>
          <h1>Analytics</h1>
          <p>Insights across patients, appointments, and AI outreach</p>
        </div>
        <div style={{ position: 'relative', zIndex: 2 }} className="menu-anchor">
          <button className="btn btn-subtle" style={{ background: 'white', borderColor: 'var(--purple-200)' }}
            onClick={() => setRangeOpen(o => !o)}>
            {range} <I.chevDown size={12}/>
          </button>
          <window.Menu open={rangeOpen} onClose={() => setRangeOpen(false)}>
            <div className="menu-label">Date range</div>
            {['Today', 'This Week', 'This Month', 'Last 30 days', 'Last Quarter', 'This Year', 'Custom...'].map(opt => (
              <button key={opt} className={`menu-item ${range === opt ? 'active' : ''}`}
                onClick={() => { setRange(opt); setRangeOpen(false); if (opt === 'Custom...') window.toast('Custom range picker coming soon', { type: 'info' }); }}>
                {range === opt && <span className="menu-icon"><I.check size={14}/></span>}
                <span style={{ marginLeft: range === opt ? 0 : 24 }}>{opt}</span>
              </button>
            ))}
          </window.Menu>
        </div>
      </div>

      <div className="kpi-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
        <KPICard label="Follow-up Completion" value="87.2%" trend="+3.4%" trendDir="up"
          foot="vs 83.8% last month" />
        <KPICard label="Patient Retention" value="91%" trend="+5.1%" trendDir="up"
          foot="6-month rolling average" />
        <KPICard label="Avg Response Time" value="4.2h" trend="−22%" trendDir="down"
          foot="From WhatsApp send → reply" />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '3fr 2fr', gap: 16, marginBottom: 24 }}>
        <div className="card">
          <div className="card-header">
            <div>
              <div className="card-title">Appointments Over Time</div>
              <div className="text-xs text-muted" style={{ marginTop: 2 }}>Last 7 days</div>
            </div>
            <div className="flex items-center gap-2">
              <span className="status-dot" style={{ background: 'var(--purple-500)' }}/>
              <span className="text-xs text-muted">Booked</span>
            </div>
          </div>
          <AreaChart data={APPTS_OVER_TIME} />
        </div>

        <div className="card">
          <div className="card-header" style={{ marginBottom: 8 }}>
            <div className="card-title">Follow-up Status</div>
          </div>
          <div className="flex items-center" style={{ gap: 24 }}>
            <Donut segments={[
              { label: 'Completed', value: 218, color: '#10B981' },
              { label: 'Pending',   value: 36,  color: '#F59E0B' },
              { label: 'Failed',    value: 14,  color: '#EF4444' },
            ]} />
            <div className="legend" style={{ flex: 1 }}>
              <div className="legend-row"><span className="sw" style={{background:'#10B981'}}/>Completed<span className="pct">218</span></div>
              <div className="legend-row"><span className="sw" style={{background:'#F59E0B'}}/>Pending  <span className="pct">36</span></div>
              <div className="legend-row"><span className="sw" style={{background:'#EF4444'}}/>Failed   <span className="pct">14</span></div>
              <div className="divider" style={{ margin: '4px 0' }}/>
              <div className="legend-row text-muted">Success rate <span className="pct" style={{ color: 'var(--success)' }}>81%</span></div>
            </div>
          </div>
        </div>
      </div>

      <div className="card" style={{ marginBottom: 24 }}>
        <div className="card-header">
          <div>
            <div className="card-title">Patient Retention Trend</div>
            <div className="text-xs text-muted" style={{ marginTop: 2 }}>6-month view · % of patients with completed follow-ups</div>
          </div>
          <div className="flex items-center gap-3">
            <div className="flex items-center gap-2"><span className="status-dot" style={{ background: 'var(--purple-600)' }}/><span className="text-xs text-muted">Retention</span></div>
          </div>
        </div>
        <LineChart data={RETENTION_TREND} />
      </div>

      {/* Weekly summary preview */}
      <div className="card">
        <div className="card-header">
          <div>
            <div className="card-title">Weekly Summary Preview</div>
            <div className="text-xs text-muted" style={{ marginTop: 2 }}>This is what your WhatsApp will receive every Monday at 8:00 AM</div>
          </div>
          <span className="badge badge-purple"><I.wa size={10} fill="currentColor" sw="0"/>WhatsApp · Auto</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, alignItems: 'flex-start' }}>
          <div className="wa-thread" style={{ minHeight: 280 }}>
            <div className="wa-bubble received" style={{ maxWidth: '90%' }}>
              <strong style={{ display: 'block', color: 'var(--ink)', marginBottom: 4 }}>Apollo Family Clinic</strong>
              <span style={{ display: 'block', marginBottom: 6, fontWeight: 600, color: 'var(--gray-700)' }}>📊 Weekly Summary · May 14 – May 20</span>
              <span style={{ display: 'block', marginBottom: 4 }}>• 186 appointments this week (+12%)</span>
              <span style={{ display: 'block', marginBottom: 4 }}>• 24 new patients onboarded</span>
              <span style={{ display: 'block', marginBottom: 4 }}>• 142 AI follow-ups sent · 87% replied</span>
              <span style={{ display: 'block', marginBottom: 4 }}>• 12 missed appointments — 8 rescheduled</span>
              <span style={{ display: 'block', marginBottom: 6 }}>• Retention up to 91% (6-mo high)</span>
              <span style={{ display: 'block', color: 'var(--purple-600)', fontWeight: 600 }}>View dashboard →</span>
              <span className="wa-meta">
                <span>8:00 AM</span>
                <span className="ticks"><WaTicks state="read"/></span>
              </span>
            </div>
          </div>
          <div>
            <div className="card-label" style={{ marginBottom: 12 }}>Send schedule</div>
            <div style={{ fontSize: 13, lineHeight: 1.7, color: 'var(--gray-700)' }}>
              <div><strong style={{ color: 'var(--ink)' }}>Monday 8:00 AM</strong></div>
              <div className="text-muted" style={{ marginTop: 4 }}>Auto-sent to the clinic owner's WhatsApp every week.</div>
              <div className="divider" />
              <div className="card-label" style={{ marginBottom: 8 }}>Recipients</div>
              <div className="flex items-center gap-2" style={{ marginBottom: 6 }}>
                <PatientAvatar name="Dr Vimal Rao" size="sm"/>
                <div>
                  <div className="font-semi text-ink text-xs">Dr. Vimal Rao</div>
                  <div className="mono">+91 99000 11223</div>
                </div>
              </div>
              <button className="btn btn-ghost btn-sm" style={{ marginTop: 10 }}
                onClick={() => window.toast('Preview opened (demo)', { sub: 'Sent to Dr. Vimal Rao May 20 · read at 8:14 AM' })}>
                Preview last summary
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// =================== COMMUNICATIONS ===================
function CommunicationsPage({ actions }) {
  const { PATIENTS, WA_THREAD } = window.CF_DATA;
  const [active, setActive] = _us2(PATIENTS[0].id);
  const [draft, setDraft] = _us2('');
  const [convFilter, setConvFilter] = _us2('All');
  const [convQuery, setConvQuery] = _us2('');
  // Per-patient extra messages added in this session
  const [extraByPatient, setExtraByPatient] = _us2({});
  const patient = PATIENTS.find(p => p.id === active);

  const previews = {
    'P-1042': 'Take it with or right after meals to reduce stomach upset.',
    'P-1043': "Hello Vikram, it's been 3 weeks since your last BP check…",
    'P-1044': 'Walk-in slots are available Tuesday between 8 AM and 11 AM.',
    'P-1045': 'Your follow-up is scheduled for tomorrow at 11:00 AM.',
    'P-1046': 'Thank you. Your prescription renewal has been submitted.',
    'P-1047': 'Reminder: lipid panel scheduled for 3:30 PM today.',
    'P-1048': 'Welcome to Apollo Family Clinic — here are your next steps.',
    'P-1049': 'You missed your last appointment — let us help reschedule.',
  };

  const filteredConvs = PATIENTS.slice(0, 9).filter(p => {
    if (convQuery && !p.name.toLowerCase().includes(convQuery.toLowerCase())) return false;
    return true;
  });

  const send = () => {
    if (!draft.trim()) return;
    const now = new Date();
    const time = now.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
    const msg = { dir: 'sent', text: draft.trim(), time, ticks: 'sent' };
    setExtraByPatient(m => ({ ...m, [active]: [...(m[active] || []), msg] }));
    setDraft('');
    window.toast(`Sent to ${patient.name}`, { type: 'success' });
    // Simulate delivered → read
    setTimeout(() => setExtraByPatient(m => {
      const arr = (m[active] || []).map(x => x === msg ? { ...x, ticks: 'delivered' } : x);
      return { ...m, [active]: arr };
    }), 800);
    setTimeout(() => setExtraByPatient(m => {
      const arr = (m[active] || []).map(x => x.text === msg.text && x.time === msg.time ? { ...x, ticks: 'read' } : x);
      return { ...m, [active]: arr };
    }), 1800);
  };

  return (
    <div className="view" style={{
      background: 'white', border: '1px solid var(--border-strong)',
      borderRadius: 12, overflow: 'hidden', height: 'calc(100vh - 64px - 64px)'
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: '30% 70%', height: '100%' }}>
        {/* Left: conversation list */}
        <div className="conv-list">
          <div style={{ padding: 16, borderBottom: '1px solid var(--border-strong)' }}>
            <div className="search-wrap">
              <I.search size={14} className="search-icon" />
              <input className="search-input" placeholder="Search conversations..."
                value={convQuery} onChange={e => setConvQuery(e.target.value)} />
            </div>
            <div className="flex items-center gap-2" style={{ marginTop: 12 }}>
              {['All', 'Unread', 'AI'].map(f => (
                <button key={f} className={`chip ${convFilter === f ? 'active' : ''}`} onClick={() => setConvFilter(f)}>
                  {f} {f === 'Unread' && <span className="count">3</span>}
                </button>
              ))}
            </div>
          </div>
          <div className="scroll-area" style={{ flex: 1 }}>
            {filteredConvs.map((p, i) => (
              <div key={p.id} className={`conv-row ${active === p.id ? 'active' : ''}`} onClick={() => setActive(p.id)}>
                <PatientAvatar name={p.name} />
                <div className="row-main">
                  <div className="flex items-center gap-2">
                    <span className="conv-name">{p.name}</span>
                    <span className="conv-time" style={{ marginLeft: 'auto' }}>{['10:24', '9:48', '9:02', 'Yest', 'Yest', 'Mon', 'Mon', 'Sun', 'Fri'][i]}</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <WaTicks state={p.wa} />
                    <span className="conv-preview" style={{ flex: 1 }}>{previews[p.id] || 'Conversation preview...'}</span>
                    {i < 3 && <span className="unread-dot" />}
                  </div>
                </div>
              </div>
            ))}
            {filteredConvs.length === 0 && (
              <div style={{ padding: 32, textAlign: 'center', color: 'var(--gray-500)', fontSize: 13 }}>No matches</div>
            )}
          </div>
        </div>

        {/* Right: thread */}
        <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
          {/* Header */}
          <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--border-strong)', display: 'flex', alignItems: 'center', gap: 12 }}>
            <PatientAvatar name={patient.name} />
            <div style={{ flex: 1 }}>
              <div className="font-semi text-ink" style={{ fontSize: 14 }}>{patient.name}</div>
              <div className="text-xs text-muted">{patient.phone} · <span style={{ color: '#25D366', fontWeight: 600 }}>WhatsApp Business</span></div>
            </div>
            <span className="badge badge-success"><span className="status-dot" style={{ background: 'var(--success)' }}/>Online</span>
            <button className="btn-icon"><I.more size={14}/></button>
          </div>

          {/* Thread */}
          <div className="wa-thread" style={{ flex: 1, borderRadius: 0, overflowY: 'auto' }}>
            {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>
              );
            })}
            {(extraByPatient[active] || []).map((m, i) => (
              <div key={`x-${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>

          {/* Quick templates */}
          <div style={{ padding: '10px 16px', display: 'flex', gap: 6, borderTop: '1px solid var(--border-strong)', overflowX: 'auto' }}>
            {['Appointment Reminder', 'Follow-up Check', 'Prescription Refill', 'Test Result Ready', 'Custom'].map(t => (
              <button key={t} className="chip" onClick={() => setDraft(`Hi ${patient.name.split(' ')[0]}, ${t.toLowerCase()}…`)}>{t}</button>
            ))}
          </div>

          {/* Input */}
          <div style={{ padding: 14, borderTop: '1px solid var(--border-strong)', display: 'flex', alignItems: 'center', gap: 10 }}>
            <I.wa size={20} stroke="#25D366" />
            <input className="search-input"
              placeholder="Type a message..."
              value={draft}
              onChange={(e) => setDraft(e.target.value)}
              onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } }}
              style={{ flex: 1 }} />
            <button className="btn btn-wa" disabled={!draft.trim()} onClick={send}>
              <I.send size={14}/>Send
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// =================== SETTINGS ===================
function SettingsPage() {
  const [section, setSection] = _us2('WhatsApp Config');
  const sections = ['Clinic Profile', 'Staff', 'WhatsApp Config', 'Summary Schedule', 'Billing'];

  return (
    <div className="view">
      <div className="page-header">
        <div>
          <h1>Settings</h1>
          <p>Manage clinic profile, staff, WhatsApp integration, and billing</p>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 24, alignItems: 'flex-start' }}>
        {/* Sub-nav */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 2, position: 'sticky', top: 96 }}>
          {sections.map(s => (
            <button key={s} className={`nav-item ${section === s ? 'active' : ''}`} onClick={() => setSection(s)}>
              {s}
            </button>
          ))}
        </div>

        <div>
          {section === 'WhatsApp Config' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div className="card">
                <div className="card-header" style={{ marginBottom: 8 }}>
                  <div>
                    <div className="card-title">WhatsApp Business Connection</div>
                    <div className="text-xs text-muted" style={{ marginTop: 2 }}>Outbound messages from your clinic</div>
                  </div>
                  <span className="badge badge-success"><span className="status-dot" style={{ background: 'var(--success)' }}/>Connected</span>
                </div>
                <div className="divider" />

                <div className="field">
                  <label className="field-label">Clinic Bot Number</label>
                  <span className="field-hint">The verified WhatsApp Business number used for all patient outreach.</span>
                  <div className="input-prefix" style={{ marginTop: 6 }}>
                    <span className="prefix"><I.wa size={16} fill="currentColor" sw="0"/></span>
                    <input defaultValue="+91 80471 02288" />
                  </div>
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <div className="field">
                    <label className="field-label">API Key ID</label>
                    <input className="input" defaultValue="wabb_prod_8z2k9q1n" readOnly />
                  </div>
                  <div className="field">
                    <label className="field-label">API Secret</label>
                    <input className="input" type="password" defaultValue="••••••••••••••" readOnly />
                  </div>
                </div>

                <div className="field">
                  <label className="field-label">Webhook URL</label>
                  <input className="input" defaultValue="https://api.clinicflow.ai/v1/webhooks/wa/apollo-family" readOnly />
                </div>

                <div className="flex items-center gap-2" style={{ marginTop: 8 }}>
                  <button className="btn btn-primary"
                    onClick={() => window.toast('Connection test successful', { sub: 'WhatsApp Business API · 142ms', type: 'success' })}>
                    <I.check size={13}/>Test Connection
                  </button>
                  <button className="btn btn-ghost"
                    onClick={() => window.toast('Credentials rotated', { sub: 'Old keys revoked', type: 'success' })}>
                    Rotate Credentials
                  </button>
                  <span className="mono" style={{ marginLeft: 'auto' }}>last tested · 11:42 AM</span>
                </div>
              </div>

              <div className="card">
                <div className="card-title" style={{ marginBottom: 14 }}>Templates</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {[
                    { name: 'Appointment Reminder', lang: 'en/hi', status: 'Approved' },
                    { name: 'Follow-up Check',      lang: 'en',    status: 'Approved' },
                    { name: 'Prescription Refill',  lang: 'en/hi', status: 'Approved' },
                    { name: 'Test Result Ready',    lang: 'en/hi', status: 'Pending'  },
                  ].map(t => (
                    <div key={t.name} className="flex items-center gap-3" style={{ padding: '10px 0', borderBottom: '1px solid #F1F3F5' }}>
                      <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--purple-50)', color: 'var(--purple-600)',
                        display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                        <I.message size={14}/>
                      </div>
                      <div className="row-main">
                        <div className="row-name">{t.name}</div>
                        <div className="row-sub">{t.lang}</div>
                      </div>
                      <StatusBadge value={t.status === 'Approved' ? 'confirmed' : 'pending'} />
                      <button className="btn btn-link"><I.edit size={13}/></button>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}

          {section === 'Summary Schedule' && (
            <div className="card">
              <div className="card-title" style={{ marginBottom: 8 }}>Weekly Summary Schedule</div>
              <p className="text-xs text-muted" style={{ marginBottom: 20 }}>Send a recap of clinic performance to the owner's WhatsApp.</p>

              <div className="field">
                <label className="field-label">Doctor's Personal WhatsApp</label>
                <span className="field-hint">Private number — never shared with patients.</span>
                <div className="input-prefix" style={{ marginTop: 6 }}>
                  <span className="prefix"><I.wa size={16} fill="currentColor" sw="0"/></span>
                  <input defaultValue="+91 99000 11223" />
                </div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <div className="field">
                  <label className="field-label">Send every</label>
                  <select className="input">
                    <option>Monday</option><option>Tuesday</option><option>Wednesday</option>
                    <option>Thursday</option><option>Friday</option><option>Saturday</option><option>Sunday</option>
                  </select>
                </div>
                <div className="field">
                  <label className="field-label">At time</label>
                  <input className="input" type="time" defaultValue="08:00" />
                </div>
              </div>

              <div className="field">
                <label className="field-label">Include</label>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {['Appointment counts', 'New patients onboarded', 'AI follow-up performance', 'Missed appointments', 'Retention KPIs'].map((k, i) => (
                    <label key={k} className="flex items-center gap-2" style={{ fontSize: 13, color: 'var(--gray-700)' }}>
                      <input type="checkbox" defaultChecked={i < 5} style={{ accentColor: 'var(--purple-600)' }} />
                      {k}
                    </label>
                  ))}
                </div>
              </div>

              <div className="flex items-center gap-2" style={{ marginTop: 8 }}>
                <button className="btn btn-primary" onClick={() => window.toast('Schedule saved', { sub: 'Next summary: Monday 8:00 AM', type: 'success' })}>Save Schedule</button>
                <button className="btn btn-ghost" onClick={() => window.toast('Last summary preview opened (demo)', { type: 'info' })}>Preview last summary</button>
              </div>
            </div>
          )}

          {section === 'Clinic Profile' && (
            <div className="card">
              <div className="card-title" style={{ marginBottom: 14 }}>Clinic Profile</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <div className="field"><label className="field-label">Clinic Name</label><input className="input" defaultValue="Apollo Family Clinic"/></div>
                <div className="field"><label className="field-label">Registration ID</label><input className="input" defaultValue="CG/CL/2019/00482"/></div>
                <div className="field"><label className="field-label">Owner</label><input className="input" defaultValue="Dr. Vimal Rao"/></div>
                <div className="field"><label className="field-label">Contact Phone</label><input className="input" defaultValue="+91 771 4988 220"/></div>
                <div className="field" style={{ gridColumn: '1 / -1' }}><label className="field-label">Address</label><input className="input" defaultValue="Civil Lines, Raipur, Chhattisgarh 492001"/></div>
              </div>
              <div className="flex items-center gap-2" style={{ marginTop: 8 }}><button className="btn btn-primary" onClick={() => window.toast('Clinic profile saved', { type: 'success' })}>Save changes</button></div>
            </div>
          )}

          {section === 'Staff' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div className="card">
                <div className="card-header">
                  <div>
                    <div className="card-title">Staff members</div>
                    <div className="text-xs text-muted" style={{ marginTop: 2 }}>4 active · 6 seats remaining on Pro plan</div>
                  </div>
                  <button className="btn btn-primary" onClick={() => window.toast('Invite dialog (demo)', { type: 'info' })}>
                    <I.plus size={13}/>Invite member
                  </button>
                </div>

                <div className="staff-grid">
                  {[
                    { name: 'Dr. Aditi Verma',   role: 'General Physician',  status: 'online', patients: 421, msgs: 1240, joined: 'Aug 2023' },
                    { name: 'Dr. Ravi Iyer',     role: 'Cardiologist',       status: 'online', patients: 198, msgs: 480,  joined: 'Mar 2024' },
                    { name: 'Dr. Ahmed Khan',    role: 'Endocrinologist',    status: 'away',   patients: 312, msgs: 904,  joined: 'Jan 2023' },
                    { name: 'Riya Sen',          role: 'Front desk',         status: 'online', patients: 0,   msgs: 2156, joined: 'Oct 2024' },
                  ].map(s => (
                    <div key={s.name} className="staff-card">
                      <div className="staff-head">
                        <div style={{ position: 'relative' }}>
                          <PatientAvatar name={s.name} size="lg"/>
                          <span style={{
                            position: 'absolute', bottom: 2, right: 2,
                            width: 10, height: 10, borderRadius: 999,
                            border: '2px solid white',
                            background: s.status === 'online' ? 'var(--success)' : 'var(--warning)',
                          }}/>
                        </div>
                        <div style={{ flex: 1 }}>
                          <div className="font-semi text-ink" style={{ fontSize: 14 }}>{s.name}</div>
                          <div className="text-xs text-muted">{s.role}</div>
                        </div>
                        <button className="btn-icon" onClick={() => window.toast(`Manage ${s.name.split(' ')[0]} (demo)`, { type: 'info' })}><I.more size={14}/></button>
                      </div>
                      <div className="staff-stats">
                        <div><span className="staff-stat-v">{s.patients}</span>Patients</div>
                        <div><span className="staff-stat-v">{s.msgs}</span>Msgs sent</div>
                        <div><span className="staff-stat-v">{s.joined}</span>Joined</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="card">
                <div className="card-title" style={{ marginBottom: 12 }}>Pending invitations</div>
                <div className="row-list">
                  <div className="row" style={{ padding: '12px 0' }}>
                    <PatientAvatar name="Dr Sneha Patel" size="sm"/>
                    <div className="row-main">
                      <div className="row-name">dr.sneha.patel@email.in</div>
                      <div className="row-sub">Role: Doctor · Sent 2 days ago</div>
                    </div>
                    <span className="badge badge-amber">Pending</span>
                    <button className="btn btn-ghost btn-sm" onClick={() => window.toast('Invite resent', { type: 'success' })}>Resend</button>
                    <button className="btn btn-link" onClick={() => window.toast('Invite revoked', { type: 'info' })}>Revoke</button>
                  </div>
                </div>
              </div>
            </div>
          )}

          {section === 'Billing' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div className="plan-banner">
                <span className="plan-mark">CF</span>
                <div className="plan-meta">
                  <div className="plan-title">ClinicFlow Pro</div>
                  <div className="plan-price">₹4,999 / month · billed monthly · renews June 12, 2026</div>
                </div>
                <button className="btn btn-primary" onClick={() => window.toast('Upgrade flow (demo)', { type: 'info' })}>Upgrade</button>
                <button className="btn btn-ghost" onClick={() => window.toast('Plan details (demo)', { type: 'info' })}>Compare plans</button>
              </div>

              <div className="card">
                <div className="card-header">
                  <div className="card-title">Usage this cycle</div>
                  <span className="mono">May 12 – Jun 12</span>
                </div>

                {[
                  { label: 'Patients', value: 1284, max: 5000, color: 'var(--purple-600)' },
                  { label: 'WhatsApp sends', value: 2486, max: 5000, color: 'var(--purple-600)' },
                  { label: 'AI Follow-ups', value: 412, max: 500, color: 'var(--purple-600)', warn: true },
                  { label: 'Staff seats', value: 4, max: 10, color: 'var(--purple-600)' },
                ].map(u => {
                  const pct = Math.min(100, (u.value / u.max) * 100);
                  return (
                    <div key={u.label} className="usage-meter" style={{ marginBottom: 14 }}>
                      <div className="usage-row">
                        <span style={{ fontWeight: 600, color: 'var(--ink)' }}>{u.label}</span>
                        <span className="mono" style={{ color: 'var(--gray-500)' }}>
                          <strong style={{ color: 'var(--ink)' }}>{u.value.toLocaleString()}</strong> / {u.max.toLocaleString()}
                          <span style={{ marginLeft: 6, color: pct > 80 ? 'var(--warning)' : 'var(--gray-500)' }}>
                            {pct.toFixed(0)}%
                          </span>
                        </span>
                      </div>
                      <div className="usage-bar">
                        <div className={`usage-fill ${pct > 80 ? 'warn' : ''}`} style={{ width: `${pct}%` }}/>
                      </div>
                    </div>
                  );
                })}
              </div>

              <div className="card">
                <div className="card-header">
                  <div className="card-title">Payment method</div>
                  <button className="btn btn-ghost btn-sm" onClick={() => window.toast('Edit card form (demo)', { type: 'info' })}>Edit</button>
                </div>
                <div className="flex items-center gap-3" style={{ padding: '8px 0' }}>
                  <div style={{
                    width: 48, height: 32, borderRadius: 6,
                    background: 'linear-gradient(135deg, #1A1F71, #4F46E5)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    color: 'white', fontWeight: 700, fontSize: 10, letterSpacing: '0.1em',
                  }}>VISA</div>
                  <div className="flex-1">
                    <div style={{ fontWeight: 600, color: 'var(--ink)', fontSize: 13 }} className="mono">•••• •••• •••• 4242</div>
                    <div className="text-xs text-muted">Expires 09 / 2028 · Vimal Rao</div>
                  </div>
                  <span className="badge badge-success">Active</span>
                </div>
              </div>

              <div className="card">
                <div className="card-header">
                  <div className="card-title">Recent invoices</div>
                  <button className="btn btn-ghost btn-sm" onClick={() => window.toast('All invoices (demo)', { type: 'info' })}>View all</button>
                </div>
                <table className="table" style={{ margin: '-12px -8px' }}>
                  <thead>
                    <tr><th>Invoice</th><th>Period</th><th>Amount</th><th>Status</th><th></th></tr>
                  </thead>
                  <tbody>
                    {[
                      { id: 'INV-2026-05', period: 'May 2026', amt: '₹4,999', status: 'paid' },
                      { id: 'INV-2026-04', period: 'Apr 2026', amt: '₹4,999', status: 'paid' },
                      { id: 'INV-2026-03', period: 'Mar 2026', amt: '₹4,999', status: 'paid' },
                      { id: 'INV-2026-02', period: 'Feb 2026', amt: '₹4,999', status: 'paid' },
                    ].map(inv => (
                      <tr key={inv.id}>
                        <td className="mono" style={{ fontWeight: 600, color: 'var(--ink)' }}>{inv.id}</td>
                        <td>{inv.period}</td>
                        <td className="mono">{inv.amt}</td>
                        <td><span className="badge badge-success"><I.check size={10} sw={3}/>Paid</span></td>
                        <td style={{ textAlign: 'right' }}>
                          <button className="btn btn-link" onClick={() => window.toast(`Downloading ${inv.id}.pdf`, { type: 'success' })}>Download</button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { FollowUpsPage, AnalyticsPage, CommunicationsPage, SettingsPage });