/** @jsxRuntime classic */
/** @jsx React.createElement */

// ============================================================================
// 216 AI Business Co-Pilot — React SPA
// ============================================================================

const { useState, useEffect, useCallback } = React;

// ---------------------------------------------------------------------------
// Utilities
// ---------------------------------------------------------------------------

async function api(path, options = {}) {
  const res = await fetch(path, {
    headers: { 'Content-Type': 'application/json' },
    credentials: 'include',
    ...options,
  });
  const data = await res.json().catch(() => ({}));
  if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
  return data;
}

function toast(message, type = 'success') {
  const wrap = document.getElementById('toasts');
  const el = document.createElement('div');
  el.className = `toast ${type}`;
  el.textContent = message;
  wrap.appendChild(el);
  setTimeout(() => el.remove(), 3500);
}

function getMondayOf(dateStr) {
  const d = dateStr ? new Date(dateStr) : new Date();
  const day = d.getDay();
  const diff = (day === 0) ? -6 : 1 - day;
  d.setDate(d.getDate() + diff);
  return d.toISOString().slice(0, 10);
}

function formatWeek(dateStr) {
  const d = new Date(dateStr + 'T00:00:00');
  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
}

function initials(name) {
  return name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
}

function num(val) {
  return val != null ? Number(val) : '—';
}

function money(val) {
  if (val == null) return '—';
  return '$' + Number(val).toLocaleString('en-US', { minimumFractionDigits: 0 });
}

function pct(num, den) { // eslint-disable-line no-unused-vars
  if (!num || !den) return '—';
  return (num / den * 100).toFixed(1) + '%';
}

// ---------------------------------------------------------------------------
// Micro-components (shared between member views and admin)
// ---------------------------------------------------------------------------

/** SVG engagement score ring — wraps an initials avatar */
function ScoreRing({ score, name, size = 54 }) {
  const sw = 4;
  const r = (size - sw * 2) / 2;
  const circ = 2 * Math.PI * r;
  const offset = circ - (Math.max(0, Math.min(100, score)) / 100) * circ;
  const color = score >= 65 ? 'var(--green)' : score >= 35 ? '#F59E0B' : 'var(--red)';
  return (
    <div style={{ position: 'relative', width: size, height: size, flexShrink: 0 }}>
      <svg width={size} height={size} style={{ position: 'absolute', top: 0, left: 0, transform: 'rotate(-90deg)' }}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="var(--border)" strokeWidth={sw} />
        <circle
          cx={size/2} cy={size/2} r={r}
          fill="none" stroke={color} strokeWidth={sw}
          strokeDasharray={circ} strokeDashoffset={offset}
          strokeLinecap="round"
        />
      </svg>
      <div style={{
        position: 'absolute', top: sw, left: sw,
        width: size - sw * 2, height: size - sw * 2,
        borderRadius: '50%', background: 'var(--orange)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 14, fontWeight: 700, color: 'var(--navy)',
      }}>
        {initials(name)}
      </div>
    </div>
  );
}

/** 4-week activity squares — newest on right */
function ActivityDots({ weeks }) {
  // weeks sorted newest-first from API; display oldest→newest (left→right)
  const dots = [...Array(4)].map((_, i) => weeks[3 - i] || null);
  return (
    <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
      {dots.map((w, i) => {
        let bg, title;
        if (!w) {
          bg = 'var(--border)'; title = 'No data';
        } else if (w.is_current) {
          bg = 'rgba(252,166,61,0.45)'; title = `${w.week_of} — in progress`;
        } else if (w.submitted && w.hit_red) {
          bg = 'var(--green)'; title = `${w.week_of} — submitted + targets hit`;
        } else if (w.submitted) {
          bg = '#F59E0B'; title = `${w.week_of} — submitted`;
        } else {
          bg = 'var(--red-bg)'; title = `${w.week_of} — not submitted`;
        }
        return (
          <div key={i} title={title} style={{
            width: 10, height: 10, borderRadius: 3,
            background: bg,
            border: `1px solid ${w && !w.is_current ? 'transparent' : 'var(--border)'}`,
          }} />
        );
      })}
    </div>
  );
}

// Conversion rate color
function rateColor(rate, target = 0.30) {
  if (rate == null) return '';
  return rate >= target ? 'green' : rate >= target * 0.7 ? 'amber' : 'red';
}

function metricColor(val, target) {
  if (val == null || !target) return '';
  const r = val / target;
  return r >= 1 ? 'green' : r >= 0.7 ? 'amber' : 'red';
}

// ---------------------------------------------------------------------------
// Login Screen
// ---------------------------------------------------------------------------

function LoginScreen({ onLogin }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);

  async function handleLogin(e) {
    e.preventDefault();
    if (!email || !password) return;
    setLoading(true);
    try {
      const { member } = await api('/api/auth/login', {
        method: 'POST',
        body: JSON.stringify({ email, password }),
      });
      onLogin(member);
    } catch (err) {
      toast(err.message, 'error');
    } finally {
      setLoading(false);
    }
  }


  return (
    <div className="login-screen">
      <div className="login-card fade-in">
        <div className="login-brand">
          <span className="title">216 Co-Pilot</span>
          <span className="sub">AI Business Co-Pilot</span>
        </div>

        <form onSubmit={handleLogin}>
          <div className="form-group">
            <label>Email</label>
            <input
              type="email"
              placeholder="you@example.com"
              value={email}
              onChange={e => setEmail(e.target.value)}
              required
            />
          </div>
          <div className="form-group">
            <label>Password</label>
            <input
              type="password"
              placeholder="••••••••"
              value={password}
              onChange={e => setPassword(e.target.value)}
              required
            />
          </div>
          <button
            type="submit"
            className="btn btn-primary"
            style={{ width: '100%', justifyContent: 'center' }}
            disabled={loading}
          >
            {loading ? 'Signing in…' : 'Sign In'}
          </button>
        </form>

        {/* Dev mode hidden in production — enable DEV_MODE env var locally */}
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Co-Pilot UI components (shared)
// ---------------------------------------------------------------------------

/** Signal-coloured badge */
function SignalBadge({ signal }) {
  const cfg = {
    positive: { color: 'var(--green)',  label: 'On Track' },
    warning:  { color: '#F59E0B',        label: 'Warning' },
    critical: { color: 'var(--red)',     label: 'Needs Attention' },
    on_track: { color: 'var(--green)',  label: 'On Track' },
    behind:   { color: '#F59E0B',        label: 'Behind' },
  };
  const c = cfg[signal] || cfg.warning;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      fontSize: 11, fontWeight: 700, color: c.color,
      background: c.color + '18', borderRadius: 4, padding: '2px 8px',
    }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: c.color, display: 'inline-block' }} />
      {c.label}
    </span>
  );
}

/** Spinner for loading states */
function Spinner() {
  return (
    <span style={{
      display: 'inline-block', width: 14, height: 14,
      border: '2px solid var(--border)', borderTopColor: 'var(--navy-light)',
      borderRadius: '50%', animation: 'spin 0.8s linear infinite',
    }} />
  );
}

/** Wrapper card for all Co-Pilot AI insights */
function CoPilotCard({ children, loading, error, style }) {
  return (
    <div className="card" style={{
      borderLeft: '3px solid var(--navy-light)',
      background: 'rgba(10,74,122,0.04)',
      ...style,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 10, fontSize: 11, fontWeight: 700, color: 'var(--navy-light)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
        <span>✦</span> Co-Pilot
      </div>
      {loading && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--subtext)', fontSize: 13 }}>
          <Spinner /> Analysing your data…
        </div>
      )}
      {error && !loading && (
        <div style={{ fontSize: 13, color: 'var(--muted)' }}>{error}</div>
      )}
      {!loading && !error && children}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Sidebar
// ---------------------------------------------------------------------------

const NAV = [
  { id: 'dashboard',    label: 'Dashboard',       icon: '◎' },
  { id: 'chat',         label: 'Co-Pilot Chat',   icon: '💬' },
  { id: 'lessons',      label: 'Lessons',         icon: '📚' },
  { id: 'milestones',   label: 'My Milestones',   icon: '🏁' },
  { id: 'metrics',      label: 'Weekly Metrics',  icon: '📊' },
  { id: 'audit',        label: 'Framework Audit', icon: '✅' },
  { id: 'plan',         label: 'Monthly Plan',    icon: '📅' },
  { id: 'revenue',      label: 'Revenue',         icon: '💰' },
  { id: 'message-lab',  label: 'Message Lab',     icon: '✍️' },
];

const PHASES = ['groundwork', 'framework', 'position', 'offer', 'outreach', 'sales', 'content'];

function Sidebar({ member, view, onNavigate, onLogout }) {
  const phaseIndex = PHASES.indexOf(member.phase);

  return (
    <div className="sidebar">
      <div className="sidebar-logo">
        <span className="wordmark">216 Co-Pilot</span>
        <span className="tagline">AI Business Co-Pilot</span>
      </div>

      <div className="sidebar-member">
        <div className="member-avatar">{initials(member.name)}</div>
        <div className="member-info">
          <div className="name">{member.name}</div>
          <div className="phase">{member.phase}</div>
        </div>
      </div>

      {/* Phase progress strip */}
      <div className="phase-progress">
        <div className="phase-progress-label">Program Phase</div>
        <div className="phase-progress-track">
          {PHASES.map((p, i) => (
            <div
              key={p}
              className={`phase-segment ${i < phaseIndex ? 'done' : i === phaseIndex ? 'active' : ''}`}
              title={p}
            />
          ))}
        </div>
        <div className="phase-progress-name">{member.phase}</div>
      </div>

      <nav className="sidebar-nav">
        <div className="nav-section-label">Co-Pilot</div>
        {NAV.map(item => (
          <div
            key={item.id}
            className={`nav-item${view === item.id ? ' active' : ''}`}
            onClick={() => onNavigate(item.id)}
          >
            <span className="icon">{item.icon}</span>
            {item.label}
          </div>
        ))}

        {member.role === 'admin' && (
          <>
            <div className="nav-section-label" style={{ marginTop: 8 }}>Admin</div>
            <div
              className={`nav-item${view === 'admin' ? ' active' : ''}`}
              onClick={() => onNavigate('admin')}
            >
              <span className="icon">👥</span>
              Community
            </div>
          </>
        )}
      </nav>

      <div className="sidebar-footer">
        <button className="logout-btn" onClick={onLogout}>Sign out</button>
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Dashboard — weekly command center
// ---------------------------------------------------------------------------

function DashboardView({ member, onNavigate }) {
  const [metrics, setMetrics] = useState(null);
  const [brief, setBrief] = useState({ loading: true, data: null, error: null });

  useEffect(() => {
    api('/api/metrics')
      .then(({ weeks, targets }) => setMetrics({ weeks: weeks || [], targets }))
      .catch(() => setMetrics({ weeks: [], targets: null }));

    api('/api/ai/dashboard-brief')
      .then(({ insight }) => setBrief({ loading: false, data: insight, error: null }))
      .catch(() => setBrief({ loading: false, data: null, error: 'Co-Pilot brief unavailable right now.' }));
  }, []);

  const currentWeek = getMondayOf();

  // Streak: consecutive submitted completed weeks (before this Monday)
  let streak = 0;
  let thisWeek = null;
  let lastWeek = null;
  if (metrics) {
    thisWeek = metrics.weeks.find(w => w.week_of === currentWeek);
    const completed = metrics.weeks
      .filter(w => w.week_of < currentWeek)
      .sort((a, b) => b.week_of.localeCompare(a.week_of));
    lastWeek = completed[0] || null;
    for (const w of completed) {
      if (w.weekly_reflections_submitted) streak++;
      else break;
    }
  }

  const submitted = !!thisWeek?.weekly_reflections_submitted;
  const firstName = member.name.split(' ')[0];

  return (
    <div className="page fade-in">
      {/* Command center card */}
      <div className="week-command-card">
        <div className="week-command-meta">
          <span className="week-label-small">Week of {formatWeek(currentWeek)}</span>
          {streak > 0 && (
            <span className="streak-badge">🔥 {streak}-week streak</span>
          )}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
          <div>
            <div className="page-title">
              {submitted ? `You're all caught up, ${firstName}.` : `Good morning, ${firstName}.`}
            </div>
            <div className="page-subtitle" style={{ marginTop: 6 }}>
              {submitted
                ? 'Weekly metrics submitted. Keep pushing.'
                : "It's Monday — time to log your week."}
            </div>
          </div>
          {submitted ? (
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--green)', fontWeight: 700, fontSize: 14 }}>
              <span style={{ fontSize: 22 }}>✓</span> Submitted
            </div>
          ) : (
            <button className="btn btn-primary" style={{ flexShrink: 0 }} onClick={() => onNavigate('metrics')}>
              Log This Week →
            </button>
          )}
        </div>
      </div>

      {/* Last week hero stats */}
      {lastWeek && (
        <>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--subtext)', marginBottom: 10, fontFamily: 'var(--font)' }}>
            Last week — {formatWeek(lastWeek.week_of)}
          </div>
          <div className="hero-stat-row">
            {[
              [money(lastWeek.weekly_income || 0), 'Income', lastWeek.weekly_income > 0 ? 'var(--green)' : null],
              [lastWeek.new_clients ?? '—', 'New Clients', null],
              [lastWeek.total_messages_sent ?? '—', 'Messages Sent', null],
              [lastWeek.new_compliment ?? '—', 'Compliments', null],
            ].map(([val, label, color], i, arr) => (
              <React.Fragment key={label}>
                <div className="hero-stat">
                  <div className="hero-stat-number" style={color ? { color } : {}}>
                    {val}
                  </div>
                  <div className="hero-stat-label">{label}</div>
                </div>
                {i < arr.length - 1 && <div className="hero-stat-divider" />}
              </React.Fragment>
            ))}
          </div>
        </>
      )}

      {!metrics && (
        <div style={{ padding: '20px 0', color: 'var(--muted)', fontSize: 14 }}>Loading…</div>
      )}

      {/* Quick Access */}
      <div className="qa-bar">
        {QUICK_ACCESS.map(qa => (
          <a key={qa.label} className="qa-btn" href={qa.url} target="_blank" rel="noopener noreferrer" title={qa.desc}>
            <span className="qa-icon">{qa.icon}</span>
            <span className="qa-label">{qa.label}</span>
          </a>
        ))}
      </div>

      {/* Co-Pilot North Star Brief */}
      {brief.loading ? (
        <div className="card" style={{ background: 'var(--navy)', color: 'white' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, opacity: 0.6 }}>
            <Spinner /> Generating your brief…
          </div>
        </div>
      ) : brief.data?.brief ? (
        <div className="card" style={{ background: 'var(--navy)', color: 'white' }}>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', opacity: 0.4, marginBottom: 10 }}>
            ✦ Co-Pilot · This week
          </div>
          <div style={{ fontSize: 14, lineHeight: 1.75, opacity: 0.9 }}>
            {brief.data.brief}
          </div>
          <div style={{ marginTop: 12, fontSize: 11, opacity: 0.35 }}>Generated for you · {member.name.split(' ')[0]}</div>
        </div>
      ) : (
        <div className="card" style={{ background: 'var(--navy)', color: 'white' }}>
          <div style={{ fontFamily: 'var(--font-heading)', fontSize: '1.1rem', marginBottom: 8 }}>
            The fastest way to living life on your own terms...
          </div>
          <div style={{ fontSize: 14, opacity: 0.8, lineHeight: 1.7 }}>
            is to help other people do the same. Track your numbers every Monday.
            Review your progress every month. The proof you need is the proof you create.
          </div>
          <div style={{ marginTop: 12, fontSize: 13, opacity: 0.5 }}>— Moe Choice</div>
        </div>
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Metrics View — Tab 16 replacement
// ---------------------------------------------------------------------------

const METRIC_FIELDS = [
  // [key, label, group]
  ['total_connections', 'Total connections (LinkedIn)', 'connections'],
  ['new_connections', 'New connections this week', 'connections'],
  ['linked_helper_profiles', 'Total profiles in leads list', 'linked_helper'],
  ['new_cold_invites', 'New cold invites sent', 'linked_helper'],
  ['new_cold_connections', 'New cold connections', 'linked_helper'],
  ['new_warm_connections', 'New warm connections', 'linked_helper'],
  ['total_disqualified', 'Total disqualified (all time)', 'kondo'],
  ['new_disqualified', 'New disqualified this week', 'kondo'],
  ['total_qualified_leads', 'Total qualified leads', 'kondo'],
  ['new_compliment', 'New compliments sent', 'kondo'],
  ['new_advance', 'New advance messages', 'kondo'],
  ['total_prospecting', 'Total in prospecting (current)', 'kondo'],
  ['total_messages_sent', 'Total messages sent this week', 'kondo'],
  ['completed_discovery_calls', 'Discovery calls completed', 'calls'],
  ['confirmed_discovery_calls', 'Discovery calls confirmed (upcoming)', 'calls'],
  ['completed_deep_dives', 'Deep dives completed', 'calls'],
  ['confirmed_deep_dives', 'Deep dives confirmed (upcoming)', 'calls'],
  ['new_clients', 'New clients this week', 'results'],
  ['weekly_income', 'Weekly income ($)', 'results'],
];

const GROUPS = {
  connections: 'LinkedIn Connections',
  linked_helper: 'Linked Helper (Cold Outreach)',
  kondo: 'Kondo Pipeline',
  calls: 'Sales Calls',
  results: 'Results',
};

function MetricsView({ member: _member }) { // eslint-disable-line no-unused-vars
  const [weekOf, setWeekOf] = useState(getMondayOf());
  const [form, setForm] = useState({});
  const [checks, setChecks] = useState({ headline_unchanged: false, leads_list_unchanged: false, advance_question_unchanged: false });
  const [status, setStatus] = useState({ hit_red_targets: false, hit_blue_targets: false, weekly_reflections_submitted: false });
  const [notes, setNotes] = useState('');
  const [saving, setSaving] = useState(false);
  const [history, setHistory] = useState([]);
  const [targets, setTargets] = useState(null);
  const [loading, setLoading] = useState(true);
  const [kondoStatus, setKondoStatus] = useState(null); // null=loading, {connected, connectedAt}
  const [syncing, setSyncing] = useState(false);
  const [syncedFields, setSyncedFields] = useState(new Set());
  const [missingLabels, setMissingLabels] = useState([]);
  const [lhSetup, setLhSetup] = useState(null); // { webhookUrls: {...} }
  const [lhAutoFilled, setLhAutoFilled] = useState(new Set()); // fields auto-populated from LH
  const [showLhSetup, setShowLhSetup] = useState(false); // toggle setup panel
  const [debrief, setDebrief] = useState({ loading: false, data: null, error: null });

  const loadData = useCallback(async () => {
    setLoading(true);
    try {
      const { weeks, targets: t } = await api('/api/metrics');
      setHistory(weeks || []);
      setTargets(t);

      // Pre-fill form with current week data if it exists
      const currentWeek = (weeks || []).find(w => w.week_of === weekOf);
      if (currentWeek) {
        const f = {};
        METRIC_FIELDS.forEach(([key]) => { if (currentWeek[key] != null) f[key] = currentWeek[key]; });
        setForm(f);
        setChecks({
          headline_unchanged: !!currentWeek.headline_unchanged,
          leads_list_unchanged: !!currentWeek.leads_list_unchanged,
          advance_question_unchanged: !!currentWeek.advance_question_unchanged,
        });
        setStatus({
          hit_red_targets: !!currentWeek.hit_red_targets,
          hit_blue_targets: !!currentWeek.hit_blue_targets,
          weekly_reflections_submitted: !!currentWeek.weekly_reflections_submitted,
        });
        setNotes(currentWeek.notes || '');
      }
    } catch (err) {
      toast('Could not load metrics', 'error');
    } finally {
      setLoading(false);
    }
  }, [weekOf]);

  useEffect(() => { loadData(); }, [loadData]);

  useEffect(() => {
    api('/api/kondo/status')
      .then(setKondoStatus)
      .catch(() => setKondoStatus({ connected: false, connectedAt: null }));
  }, []);

  // Load LH setup (webhook URLs) and auto-populate LH stats for the current week
  useEffect(() => {
    api('/api/linkedhelper/setup').then(setLhSetup).catch(() => {});

    api(`/api/linkedhelper/stats?week_of=${weekOf}`)
      .then(stats => {
        const fields = {};
        if (stats.new_cold_invites > 0) fields.new_cold_invites = stats.new_cold_invites;
        if (stats.new_cold_connections > 0) fields.new_cold_connections = stats.new_cold_connections;
        if (stats.linked_helper_profiles > 0) fields.linked_helper_profiles = stats.linked_helper_profiles;
        if (Object.keys(fields).length > 0) {
          setForm(f => ({ ...fields, ...f })); // LH data as default; don't overwrite if member already typed something
          setLhAutoFilled(new Set(Object.keys(fields)));
        }
      })
      .catch(() => {});
  }, [weekOf]);

  async function handleKondoSync() {
    setSyncing(true);
    setSyncedFields(new Set());
    try {
      const { synced, missingLabels: missing } = await api(`/api/kondo/sync?week_of=${weekOf}`, { method: 'POST' });
      const count = Object.keys(synced).length;
      if (count > 0) {
        setForm(f => ({ ...f, ...synced }));
        setSyncedFields(new Set(Object.keys(synced)));
        toast(`Synced ${count} field${count !== 1 ? 's' : ''} from Kondo`);
      } else {
        toast('No data synced — check your Kondo labels', 'error');
      }
      setMissingLabels(missing || []);
    } catch (err) {
      const msg = err.message || '';
      if (msg.toLowerCase().includes('extension not detected')) {
        toast('Kondo extension not detected — open Kondo in your browser and try again', 'error');
      } else if (msg.toLowerCase().includes('reconnect')) {
        toast('Kondo token expired — please reconnect', 'error');
      } else {
        toast(msg || 'Kondo sync failed', 'error');
      }
    } finally {
      setSyncing(false);
    }
  }

  async function handleSave(e) {
    e.preventDefault();
    setSaving(true);
    try {
      const payload = {
        week_of: weekOf,
        ...checks,
        ...status,
        notes,
      };
      METRIC_FIELDS.forEach(([key]) => {
        const v = form[key];
        if (v !== undefined && v !== '') payload[key] = Number(v);
      });

      await api('/api/metrics', { method: 'POST', body: JSON.stringify(payload) });
      toast('Metrics saved');
      loadData();

      // Trigger weekly debrief if reflections submitted
      if (status.weekly_reflections_submitted) {
        setDebrief({ loading: true, data: null, error: null });
        api('/api/ai/weekly-debrief', { method: 'POST', body: JSON.stringify({ week_of: weekOf }) })
          .then(({ insight }) => setDebrief({ loading: false, data: insight, error: null }))
          .catch(() => setDebrief({ loading: false, data: null, error: 'Co-Pilot debrief unavailable right now.' }));
      }
    } catch (err) {
      toast(err.message, 'error');
    } finally {
      setSaving(false);
    }
  }

  function setField(key, val) {
    setForm(f => ({ ...f, [key]: val }));
  }

  // Derived calculations
  const coldConvRate = form.new_cold_invites > 0
    ? (form.new_cold_connections / form.new_cold_invites)
    : null;

  // Group fields by section
  const grouped = {};
  METRIC_FIELDS.forEach(([key, label, group]) => {
    if (!grouped[group]) grouped[group] = [];
    grouped[group].push([key, label]);
  });

  return (
    <div className="page fade-in">
      <div className="page-header">
        <div className="page-title">Weekly Metrics</div>
        <div className="page-subtitle">Track every Monday. Use a 4-week lens to analyse your progress.</div>
      </div>

      {/* Week selector */}
      <div className="week-selector">
        <label>Week of</label>
        <input
          type="date"
          value={weekOf}
          onChange={e => setWeekOf(getMondayOf(e.target.value))}
        />
        <button className="btn btn-ghost" onClick={() => setWeekOf(getMondayOf())}>
          This week
        </button>
      </div>

      {loading ? (
        <div style={{ padding: 40, textAlign: 'center', color: 'var(--subtext)' }}>Loading…</div>
      ) : (
        <form onSubmit={handleSave}>
          {/* Consistency checks */}
          <div className="card">
            <div className="card-title">Consistency Checks</div>
            <p style={{ fontSize: 13, color: 'var(--subtext)', marginBottom: 14 }}>
              These must stay the same week over week while you're in the test phase.
            </p>
            {[
              ['headline_unchanged', 'My LinkedIn headline is unchanged'],
              ['leads_list_unchanged', 'My Leads List criteria is unchanged'],
              ['advance_question_unchanged', 'My Advance question is unchanged'],
            ].map(([key, label]) => (
              <label
                key={key}
                className={`check-row${checks[key] ? ' checked' : ''}`}
                onClick={() => setChecks(c => ({ ...c, [key]: !c[key] }))}
              >
                <input type="checkbox" checked={checks[key]} onChange={() => {}} />
                <span>{label}</span>
              </label>
            ))}
          </div>

          {/* Metric input groups */}
          {Object.entries(grouped).map(([group, fields]) => (
            <div className="card" key={group}>
              <div className="card-title" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span>{GROUPS[group]}</span>

                {/* Kondo sync controls */}
                {group === 'kondo' && kondoStatus !== null && (
                  kondoStatus.connected ? (
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span style={{ fontSize: 11, color: 'var(--green)', display: 'flex', alignItems: 'center', gap: 4 }}>
                        <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--green)', display: 'inline-block', flexShrink: 0 }} />
                        Kondo
                      </span>
                      <button
                        type="button"
                        className="btn btn-ghost"
                        style={{ fontSize: 11, padding: '3px 10px' }}
                        onClick={handleKondoSync}
                        disabled={syncing}
                      >
                        {syncing ? 'Syncing…' : 'Sync'}
                      </button>
                    </div>
                  ) : null /* Kondo connect hidden until OAuth redirect URI is registered — contact Mitchell */
                )}
              </div>

              <div className="metrics-grid">
                {fields.map(([key, label]) => (
                  <div className="metric-input-group" key={key}>
                    <label>{label}</label>
                    <input
                      type="number"
                      min="0"
                      step={key === 'weekly_income' ? '0.01' : '1'}
                      placeholder="0"
                      value={form[key] ?? ''}
                      onChange={e => setField(key, e.target.value)}
                      style={
                        syncedFields.has(key)
                          ? { borderColor: 'var(--navy-light)', background: 'rgba(10,74,122,0.05)' }
                          : lhAutoFilled.has(key)
                          ? { borderColor: 'var(--green)', background: 'var(--green-bg)' }
                          : undefined
                      }
                    />
                  </div>
                ))}
              </div>

              {/* Show auto-calculated cold conversion rate under Linked Helper */}
              {group === 'linked_helper' && (
                <div style={{ fontSize: 13, color: 'var(--subtext)', paddingTop: 8, borderTop: '1px solid var(--border-subtle)', marginTop: 8 }}>
                  Cold conversion rate:{' '}
                  <strong style={{ color: coldConvRate != null ? (coldConvRate >= 0.30 ? 'var(--green)' : 'var(--red)') : 'var(--muted)' }}>
                    {coldConvRate != null ? (coldConvRate * 100).toFixed(1) + '%' : '—'}
                  </strong>
                  {targets && <span style={{ marginLeft: 8, opacity: 0.6 }}>target: {(targets.cold_conversion_rate * 100).toFixed(0)}%</span>}
                </div>
              )}

              {/* LinkedHelper webhook setup panel */}
              {group === 'linked_helper' && lhSetup && (
                <div style={{ marginTop: 10, paddingTop: 8, borderTop: '1px solid var(--border-subtle)' }}>
                  <button
                    type="button"
                    className="btn btn-ghost"
                    style={{ fontSize: 11, padding: '3px 10px' }}
                    onClick={() => setShowLhSetup(s => !s)}
                  >
                    {showLhSetup ? 'Hide setup' : 'Webhook setup'}
                  </button>
                  {lhAutoFilled.size > 0 && (
                    <span style={{ marginLeft: 10, fontSize: 11, color: 'var(--green)' }}>
                      ✓ {lhAutoFilled.size} field{lhAutoFilled.size !== 1 ? 's' : ''} auto-filled from your campaigns
                    </span>
                  )}

                  {showLhSetup && (
                    <div style={{ marginTop: 12, fontSize: 12, lineHeight: 1.8 }}>
                      <p style={{ color: 'var(--subtext)', marginBottom: 10 }}>
                        Add a "Send person to webhook" action in each LinkedHelper campaign and paste the matching URL below.
                        Data arrives automatically — no button to click.
                      </p>
                      {[
                        ['invite_sent', 'Invite sent campaign', 'Paste in your cold invite campaign'],
                        ['new_connection', 'New connection campaign', 'Paste in your post-connect follow-up campaign'],
                        ['profile_extracted', 'Profile extraction campaign', 'Paste in your "Visit & extract" campaign'],
                      ].map(([key, label, hint]) => (
                        <div key={key} style={{ marginBottom: 10 }}>
                          <div style={{ fontWeight: 600, color: 'var(--text)', marginBottom: 3 }}>{label}</div>
                          <div style={{ color: 'var(--muted)', fontSize: 11, marginBottom: 4 }}>{hint}</div>
                          <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                            <input
                              readOnly
                              value={lhSetup.webhookUrls[key]}
                              style={{ fontSize: 10, fontFamily: 'monospace', flex: 1, background: 'var(--surface)', cursor: 'text', color: 'var(--subtext)' }}
                              onFocus={e => e.target.select()}
                            />
                            <button
                              type="button"
                              className="btn btn-ghost"
                              style={{ fontSize: 11, padding: '3px 10px', whiteSpace: 'nowrap', flexShrink: 0 }}
                              onClick={() => {
                                navigator.clipboard.writeText(lhSetup.webhookUrls[key]);
                                toast('Copied!');
                              }}
                            >
                              Copy
                            </button>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )}

              {/* Kondo section footer */}
              {group === 'kondo' && kondoStatus?.connected && (
                <div style={{ marginTop: 10, paddingTop: 8, borderTop: '1px solid var(--border-subtle)', fontSize: 11, color: 'var(--muted)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 6 }}>
                  <span>Requires Kondo browser extension to be open</span>
                  {missingLabels.length > 0 && (
                    <span style={{ color: 'var(--amber)' }}>
                      Labels not found: {missingLabels.join(', ')}
                    </span>
                  )}
                  <button
                    type="button"
                    className="btn btn-ghost"
                    style={{ fontSize: 10, padding: '2px 8px', color: 'var(--muted)' }}
                    onClick={() => {
                      if (confirm('Disconnect Kondo?')) {
                        api('/api/kondo/disconnect', { method: 'DELETE' })
                          .then(() => { setKondoStatus({ connected: false, connectedAt: null }); toast('Kondo disconnected'); })
                          .catch(err => toast(err.message, 'error'));
                      }
                    }}
                  >
                    Disconnect
                  </button>
                </div>
              )}
            </div>
          ))}

          {/* Weekly status */}
          <div className="card">
            <div className="card-title">Weekly Status</div>
            {[
              ['hit_red_targets', 'I hit my Red (minimum) targets this week'],
              ['hit_blue_targets', 'I hit my Blue (stretch) targets this week'],
              ['weekly_reflections_submitted', 'I submitted my weekly reflections'],
            ].map(([key, label]) => (
              <label
                key={key}
                className={`check-row${status[key] ? ' checked' : ''}`}
                onClick={() => setStatus(s => ({ ...s, [key]: !s[key] }))}
              >
                <input type="checkbox" checked={status[key]} onChange={() => {}} />
                <span>{label}</span>
              </label>
            ))}

            <div style={{ marginTop: 16 }}>
              <label>Notes / Reflections</label>
              <textarea
                placeholder="What went well? What do you want to improve next week?"
                value={notes}
                onChange={e => setNotes(e.target.value)}
                rows={3}
              />
            </div>
          </div>

          <button type="submit" className="btn btn-primary" disabled={saving}>
            {saving ? 'Saving…' : 'Save Metrics'}
          </button>
        </form>
      )}

      {/* Weekly Debrief */}
      {(debrief.loading || debrief.data || debrief.error) && (
        <CoPilotCard loading={debrief.loading} error={debrief.error} style={{ marginTop: 16 }}>
          {debrief.data && (
            <>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                <SignalBadge signal={debrief.data.signal} />
              </div>
              <div style={{ marginBottom: 12 }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--subtext)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 5 }}>Diagnosis</div>
                <div style={{ fontSize: 14, lineHeight: 1.7, color: 'var(--text)' }}>{debrief.data.diagnosis}</div>
              </div>
              <div style={{ marginBottom: 12, padding: '10px 14px', background: 'var(--navy)', borderRadius: 6 }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 5 }}>Your #1 focus this week</div>
                <div style={{ fontSize: 14, fontWeight: 600, color: 'white', lineHeight: 1.6 }}>{debrief.data.focus}</div>
              </div>
              <div>
                <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--subtext)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 5 }}>Playbook guidance</div>
                <div style={{ fontSize: 13, lineHeight: 1.7, color: 'var(--subtext)', fontStyle: 'italic' }}>{debrief.data.playbook_guidance}</div>
              </div>
            </>
          )}
        </CoPilotCard>
      )}

      {/* 4-week summary */}
      {history.length > 0 && (
        <div className="card" style={{ marginTop: 32 }}>
          <div className="card-title">4-Week Overview</div>
          <div style={{ overflowX: 'auto' }}>
            <table className="weeks-table">
              <thead>
                <tr>
                  <th>Week</th>
                  <th>Messages</th>
                  <th>Compliments</th>
                  <th>Advance</th>
                  <th>Prospecting</th>
                  <th>Cold Conv.</th>
                  <th>Disc. Calls</th>
                  <th>Clients</th>
                  <th>Income</th>
                </tr>
              </thead>
              <tbody>
                {history.map(w => {
                  const conv = w.new_cold_invites ? w.new_cold_connections / w.new_cold_invites : null;
                  const isCurrentWeek = w.week_of === weekOf;
                  return (
                    <tr key={w.week_of} className={isCurrentWeek ? 'current-week' : ''}>
                      <td className="week-label">{formatWeek(w.week_of)}</td>
                      <td>
                        <div className="target-cell">
                          {targets && <span className={`target-dot ${metricColor(w.total_messages_sent, targets.total_messages_sent)}`} />}
                          {num(w.total_messages_sent)}
                        </div>
                      </td>
                      <td>
                        <div className="target-cell">
                          {targets && <span className={`target-dot ${metricColor(w.new_compliment, targets.new_compliment)}`} />}
                          {num(w.new_compliment)}
                        </div>
                      </td>
                      <td>
                        <div className="target-cell">
                          {targets && <span className={`target-dot ${metricColor(w.new_advance, targets.new_advance)}`} />}
                          {num(w.new_advance)}
                        </div>
                      </td>
                      <td>
                        <div className="target-cell">
                          {targets && <span className={`target-dot ${metricColor(w.total_prospecting, targets.total_prospecting)}`} />}
                          {num(w.total_prospecting)}
                        </div>
                      </td>
                      <td>
                        <div className="target-cell">
                          {conv != null && <span className={`target-dot ${rateColor(conv, targets?.cold_conversion_rate)}`} />}
                          {conv != null ? (conv * 100).toFixed(1) + '%' : '—'}
                        </div>
                      </td>
                      <td>{num(w.completed_discovery_calls)}</td>
                      <td>{num(w.new_clients)}</td>
                      <td>{money(w.weekly_income)}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
          <div style={{ marginTop: 12, fontSize: 12, color: 'var(--subtext)' }}>
            ● Green = at/above target &nbsp; ● Amber = within 70% &nbsp; ● Red = below 70%
          </div>
        </div>
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Framework Audit — Tab 18
// ---------------------------------------------------------------------------

const AUDIT_SECTIONS = [
  {
    label: 'Position & Offer',
    items: [
      [1,  'I reflect on my personal philosophy at least once a month'],
      [2,  'I know my Dream Client and they will recognise my position as standout'],
      [3,  'I am able to convey both their pain and desires, in their language'],
      [4,  'I have ONE outcome-based offer that gets them to their dream outcome'],
      [5,  'I have a saved Leads List with profiles that fit my Chosen Niche'],
      [6,  'I direct any attention I get to ONE place (e.g. my LinkedIn profile)'],
    ],
  },
  {
    label: 'Outreach',
    items: [
      [7,  'I track my metrics weekly, first thing every Monday Morning'],
      [8,  'I automate my cold outreach with a conversion rate of > 30%'],
      [9,  'I send highly personalised messages to 50+ profiles every Monday'],
      [10, 'I protect 2 hours of my schedule for outreach, Tuesday to Friday'],
      [11, 'I use proven frameworks to engage prospects (e.g. CACA, AAA)'],
      [12, 'I spend a disproportionate amount of time on those who engage back'],
    ],
  },
  {
    label: 'Persuasion',
    items: [
      [13, 'I chase the explicit "no", without any sense of entitlement'],
      [14, "I mirror and match the prospect's pace, style, and activity"],
      [15, 'I have a 2-call sales process that ends with a 90-second pitch'],
      [16, 'I use the principles of persuasion PLUS persistence to book calls'],
      [17, 'I have 3x actual social proof of me getting the outcome for my niche'],
      [18, 'I post weekly content to attract prospects, NOT impressions'],
    ],
  },
  {
    label: 'Sales',
    items: [
      [19, 'I earn $15,000+ a month'],
      [20, 'I work less than 30 hours a week'],
      [21, 'I only work with my Dream Clients'],
    ],
  },
];

function getCurrentMonth() {
  const d = new Date();
  return `${d.getUTCFullYear()}-${String(d.getUTCMonth() + 1).padStart(2, '0')}`;
}

function formatMonth(yyyyMm) {
  const [y, m] = yyyyMm.split('-');
  return new Date(parseInt(y), parseInt(m) - 1, 1)
    .toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
}

function formatMonthShort(yyyyMm) {
  const [y, m] = yyyyMm.split('-');
  return new Date(parseInt(y), parseInt(m) - 1, 1)
    .toLocaleDateString('en-US', { month: 'short', year: '2-digit' });
}

function shiftMonth(yyyyMm, delta) {
  const [y, m] = yyyyMm.split('-').map(Number);
  const d = new Date(y, m - 1 + delta, 1);
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
}

function defaultItems() {
  const d = {};
  for (let i = 1; i <= 21; i++) d[`item_${i}`] = 'amber';
  return d;
}

function RagToggle({ value, onChange }) {
  return (
    <div className="rag-toggle">
      {[['red', 'R'], ['amber', 'A'], ['green', 'G']].map(([v, label]) => (
        <button
          key={v}
          type="button"
          className={`rag-btn rag-btn-${v}${value === v ? ' selected' : ''}`}
          onClick={() => onChange(v)}
        >
          {label}
        </button>
      ))}
    </div>
  );
}

function AuditView() {
  const [month, setMonth] = useState(getCurrentMonth());
  const [items, setItems] = useState(defaultItems);
  const [notes, setNotes] = useState('');
  const [saving, setSaving] = useState(false);
  const [history, setHistory] = useState([]);
  const [loading, setLoading] = useState(true);
  const [auditCoach, setAuditCoach] = useState({ loading: false, data: null, error: null });

  useEffect(() => {
    setLoading(true);
    api(`/api/audit?month=${month}`)
      .then(({ audit, history: h }) => {
        if (audit) {
          const f = {};
          for (let i = 1; i <= 21; i++) f[`item_${i}`] = audit[`item_${i}`] || 'amber';
          setItems(f);
          setNotes(audit.review_notes || '');
        } else {
          setItems(defaultItems());
          setNotes('');
        }
        setHistory(h || []);
      })
      .catch(err => toast(err.message, 'error'))
      .finally(() => setLoading(false));
  }, [month]);

  function fetchAuditCoach(auditMonth) {
    setAuditCoach({ loading: true, data: null, error: null });
    api('/api/ai/audit-coach', { method: 'POST', body: JSON.stringify({ audit_month: auditMonth }) })
      .then(({ insight }) => setAuditCoach({ loading: false, data: insight, error: null }))
      .catch(() => setAuditCoach({ loading: false, data: null, error: 'Co-Pilot coaching unavailable right now.' }));
  }

  async function handleSave(e) {
    e.preventDefault();
    setSaving(true);
    try {
      await api('/api/audit', {
        method: 'POST',
        body: JSON.stringify({ audit_month: month, ...items, review_notes: notes }),
      });
      // Refresh history after save
      const { history: h } = await api(`/api/audit?month=${month}`);
      setHistory(h || []);
      toast('Audit saved');

      // Trigger audit coach if red items exist
      const hasRed = Object.values(items).some(v => v === 'red');
      if (hasRed) fetchAuditCoach(month);
    } catch (err) {
      toast(err.message, 'error');
    } finally {
      setSaving(false);
    }
  }

  // Derived scores
  const greenCount = Object.values(items).filter(v => v === 'green').length;
  const redCount   = Object.values(items).filter(v => v === 'red').length;
  const amberCount = 21 - greenCount - redCount;
  const pctGreen   = Math.round((greenCount / 21) * 100);
  const scoreColor = greenCount >= 16 ? 'var(--green)' : greenCount >= 11 ? '#F59E0B' : 'var(--red)';

  const currentMonthStr = getCurrentMonth();

  return (
    <div className="page fade-in">
      <div className="page-header">
        <div className="page-title">Framework Audit</div>
        <div className="page-subtitle">Rate yourself honestly. Green = you own it. Red = not yet. Review monthly.</div>
      </div>

      {/* Month selector */}
      <div className="month-selector">
        <button className="btn btn-ghost" style={{ padding: '8px 14px' }} onClick={() => setMonth(m => shiftMonth(m, -1))}>‹</button>
        <span className="month-display">{formatMonth(month)}</span>
        <button
          className="btn btn-ghost"
          style={{ padding: '8px 14px' }}
          onClick={() => setMonth(m => shiftMonth(m, 1))}
          disabled={month >= currentMonthStr}
        >›</button>
        {month !== currentMonthStr && (
          <button className="btn btn-ghost" style={{ fontSize: 12, padding: '6px 12px' }} onClick={() => setMonth(currentMonthStr)}>
            This month
          </button>
        )}
      </div>

      {/* History strip */}
      {history.length > 0 && (
        <div className="audit-history-strip">
          {[...history].reverse().map(h => {
            const chipColor = h.green_count >= 16 ? 'var(--green)' : h.green_count >= 11 ? '#F59E0B' : 'var(--red)';
            return (
              <div
                key={h.audit_month}
                className={`audit-month-chip${month === h.audit_month ? ' active' : ''}`}
                onClick={() => setMonth(h.audit_month)}
              >
                <div className="chip-month">{formatMonthShort(h.audit_month)}</div>
                <div className="chip-score" style={month !== h.audit_month ? { color: chipColor } : {}}>
                  {h.green_count}/21
                </div>
              </div>
            );
          })}
        </div>
      )}

      {loading ? (
        <div style={{ padding: 40, textAlign: 'center', color: 'var(--subtext)' }}>Loading…</div>
      ) : (
        <form onSubmit={handleSave}>
          {/* Overall score */}
          <div className="audit-score-card">
            <div className="audit-score-left">
              <div className="audit-score-number" style={{ color: scoreColor }}>
                {greenCount}<span className="audit-score-denom">/21</span>
              </div>
              <div className="audit-score-label">Green this month</div>
            </div>
            <div className="audit-score-bar-wrap">
              <div className="audit-score-bar-track">
                <div
                  className="audit-score-bar-fill"
                  style={{ width: `${pctGreen}%`, background: scoreColor }}
                />
              </div>
              <div className="audit-score-breakdown">
                <span style={{ color: 'var(--green)' }}>{greenCount} green</span>
                <span style={{ color: '#F59E0B' }}>{amberCount} amber</span>
                <span style={{ color: 'var(--red)' }}>{redCount} red</span>
              </div>
            </div>
          </div>

          {/* Section cards */}
          {AUDIT_SECTIONS.map(section => {
            const sGreen = section.items.filter(([n]) => items[`item_${n}`] === 'green').length;
            const sRed   = section.items.filter(([n]) => items[`item_${n}`] === 'red').length;
            const sColor = sRed > 0 ? 'red' : sGreen === section.items.length ? 'green' : 'amber';
            return (
              <div className="card" key={section.label}>
                <div className="audit-section-header">
                  <div className="card-title" style={{ margin: 0 }}>{section.label}</div>
                  <div
                    className={`audit-section-score rag ${sColor}`}
                    style={{ fontSize: 11 }}
                  >
                    {sGreen}/{section.items.length}
                  </div>
                </div>
                {section.items.map(([n, text]) => (
                  <div className="audit-item-row" key={n}>
                    <div className="audit-item-number">{n}</div>
                    <div className="audit-item-text">{text}</div>
                    <RagToggle
                      value={items[`item_${n}`]}
                      onChange={v => setItems(it => ({ ...it, [`item_${n}`]: v }))}
                    />
                  </div>
                ))}
              </div>
            );
          })}

          {/* Notes + save */}
          <div className="card">
            <div className="card-title">Monthly Review Notes</div>
            <textarea
              placeholder="What's your biggest gap this month? What are you working on to move items to green?"
              value={notes}
              onChange={e => setNotes(e.target.value)}
              rows={4}
            />
          </div>

          <button type="submit" className="btn btn-primary" disabled={saving}>
            {saving ? 'Saving…' : 'Save Audit'}
          </button>

          {/* Audit Coach — get guidance on red items */}
          {redCount > 0 && !auditCoach.data && !auditCoach.loading && (
            <button
              type="button"
              className="btn btn-ghost"
              style={{ marginTop: 10, display: 'flex', alignItems: 'center', gap: 6 }}
              onClick={() => fetchAuditCoach(month)}
            >
              ✦ Get Co-Pilot Guidance on {redCount} red item{redCount !== 1 ? 's' : ''}
            </button>
          )}
        </form>
      )}

      {/* Audit Coach Panel */}
      {(auditCoach.loading || auditCoach.data || auditCoach.error) && (
        <CoPilotCard loading={auditCoach.loading} error={auditCoach.error} style={{ marginTop: 16 }}>
          {auditCoach.data?.items && (
            <>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--navy)', marginBottom: 14 }}>
                Focus on item #{auditCoach.data.priority_item} first — it has the highest impact on your revenue path.
              </div>
              {auditCoach.data.items.map(item => (
                <div key={item.number} style={{ marginBottom: 16, paddingBottom: 16, borderBottom: '1px solid var(--border-subtle)' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                    <span className="rag red" style={{ fontSize: 10, padding: '2px 6px' }}>#{item.number}</span>
                    <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--navy)' }}>{item.section}</span>
                    {item.tab_reference && <span style={{ fontSize: 11, color: 'var(--muted)' }}>{item.tab_reference}</span>}
                  </div>
                  <div style={{ fontSize: 13, color: 'var(--subtext)', marginBottom: 4, fontStyle: 'italic' }}>{item.statement}</div>
                  <div style={{ fontSize: 13, lineHeight: 1.7, color: 'var(--text)', marginBottom: 6 }}>{item.diagnosis}</div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--navy)', padding: '6px 10px', background: 'rgba(10,74,122,0.06)', borderRadius: 4 }}>
                    Action: {item.action}
                  </div>
                </div>
              ))}
            </>
          )}
        </CoPilotCard>
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Milestones (Tab 01)
// ---------------------------------------------------------------------------

// Circle base URL — update slugs as needed (course/lesson)
const CIRCLE = 'https://teamofone.circle.so';

const QUICK_ACCESS = [
  { label: 'Kondo',        icon: '💬', url: 'https://app.trykondo.com',          desc: 'LinkedIn DM inbox' },
  { label: 'Community',    icon: '👥', url: CIRCLE,                               desc: 'Circle community' },
  { label: 'Calendar',     icon: '📅', url: `${CIRCLE}/events`,                   desc: 'Sessions & events' },
  { label: 'Discussions',  icon: '💬', url: `${CIRCLE}/c/discussion`,             desc: 'Community posts' },
  { label: 'Linked Helper',icon: '🔗', url: 'https://www.linkedhelper.com/main',  desc: 'Outreach automation' },
  { label: 'Playbook',     icon: '📋', url: `${CIRCLE}/c/framework/how-to-access-playbook`, desc: 'Google Sheets 216 Playbook' },
];

const MILESTONE_PHASES = [
  {
    phase: 'groundwork',
    label: 'Groundwork',
    subtitle: '7 days · Foundation',
    milestones: [
      { key: 'groundwork_one_page_plan',       label: 'One Page Plan workbook completed (TOPP)',         circle: `${CIRCLE}/c/groundwork` },
      { key: 'groundwork_standout_position',   label: 'Standout Position Mission workbook completed',   circle: `${CIRCLE}/c/groundwork` },
      { key: 'groundwork_workbooks_submitted', label: 'Both workbooks submitted to Moe for review',     circle: `${CIRCLE}/c/groundwork` },
    ],
  },
  {
    phase: 'framework',
    label: 'Phase 1 — Philosophy',
    subtitle: 'Week 1–2 · Identity',
    milestones: [
      { key: 'framework_personal_philosophy', label: 'My Personal Philosophy defined',     circle: `${CIRCLE}/c/framework` },
      { key: 'framework_dream_outcome',       label: 'My Dream Outcome statement written', circle: `${CIRCLE}/c/position` },
      { key: 'framework_dream_client',        label: 'My Dream Client statement written',  circle: `${CIRCLE}/c/position` },
    ],
  },
  {
    phase: 'position',
    label: 'Phase 2 — Position',
    subtitle: 'Week 1–2 · Market clarity',
    milestones: [
      { key: 'position_their_problems',   label: "Their Problems identified (99+ problem statements)", circle: `${CIRCLE}/c/position` },
      { key: 'position_my_solutions',     label: 'My Solutions mapped to their problems',              circle: `${CIRCLE}/c/position` },
      { key: 'position_delivery_matrix',  label: 'My Delivery Matrix completed',                       circle: `${CIRCLE}/c/offer` },
    ],
  },
  {
    phase: 'offer',
    label: 'Phase 3 — Offer',
    subtitle: 'Week 1–2 · Your offer',
    milestones: [
      { key: 'offer_dream_offer',          label: 'My Dream Offer defined',                circle: `${CIRCLE}/c/offer` },
      { key: 'offer_linkedin_profile',     label: 'My LinkedIn Profile fully optimised',   circle: `${CIRCLE}/c/profile` },
      { key: 'offer_big_domino_statement', label: 'My Big Domino Statement written',       circle: `${CIRCLE}/c/offer` },
    ],
  },
  {
    phase: 'outreach',
    label: 'Phase 4 — Outreach',
    subtitle: 'Week 3–4 · Pipeline',
    milestones: [
      { key: 'outreach_perception_success',  label: 'Their Perception of Success documented',                     circle: `${CIRCLE}/c/outreach` },
      { key: 'outreach_process',             label: 'My Outreach Process documented',                             circle: `${CIRCLE}/c/outreach` },
      { key: 'outreach_framework_complete',  label: 'My Completed 216 Framework (all checklist items green)',     circle: `${CIRCLE}/c/framework` },
    ],
  },
  {
    phase: 'sales',
    label: 'Phases 5–6 — Implement & Elevate',
    subtitle: 'Week 5–12 · Revenue',
    milestones: [
      { key: 'sales_weekly_metrics',    label: 'My Weekly Metrics tracked consistently',  view: 'metrics',  circle: `${CIRCLE}/c/framework` },
      { key: 'sales_monthly_review',    label: 'My Monthly Review completed',             view: 'audit',    circle: `${CIRCLE}/c/framework` },
      { key: 'sales_monthly_plan',      label: 'My Monthly Plan in place',                view: 'plan',     circle: `${CIRCLE}/c/framework` },
      { key: 'sales_content_framework', label: 'My Content Framework defined',                              circle: `${CIRCLE}/c/content` },
      { key: 'sales_content_calendar',  label: 'My Content Calendar live',                                  circle: `${CIRCLE}/c/content` },
      { key: 'sales_first_call',        label: 'First sales call booked' },
      { key: 'sales_first_close',       label: 'First sale closed' },
    ],
  },
  {
    phase: 'content',
    label: 'Phase 7 — Master',
    subtitle: 'Ongoing · Scale',
    milestones: [
      { key: 'content_sales_system',  label: 'My Sales System documented',      circle: `${CIRCLE}/c/sales` },
      { key: 'content_social_proof',  label: 'My Social Proof collected',       circle: `${CIRCLE}/c/content` },
      { key: 'content_cash_flow',     label: 'My Cash Flow tracked monthly',    view: 'revenue' },
    ],
  },
];

function MilestonesView({ member, onNavigate }) {
  const [completed, setCompleted] = useState(new Set());
  const [loading, setLoading]     = useState(true);
  const [toggling, setToggling]   = useState(null); // key being toggled

  const phaseIndex    = PHASES.indexOf(member.phase);
  const currentPhase  = member.phase;

  useEffect(() => {
    api('/api/milestones')
      .then(({ completed: rows }) => {
        setCompleted(new Set(rows.map(r => r.milestone_key)));
      })
      .catch(err => toast(err.message, 'error'))
      .finally(() => setLoading(false));
  }, []);

  async function toggle(key, isComplete) {
    setToggling(key);
    try {
      await api('/api/milestones', {
        method: 'POST',
        body: JSON.stringify({ key, action: isComplete ? 'uncomplete' : 'complete' }),
      });
      setCompleted(prev => {
        const next = new Set(prev);
        isComplete ? next.delete(key) : next.add(key);
        return next;
      });
    } catch (err) {
      toast(err.message, 'error');
    } finally {
      setToggling(null);
    }
  }

  // Overall progress
  const totalMilestones     = MILESTONE_PHASES.reduce((a, p) => a + p.milestones.length, 0);
  const completedCount      = completed.size;
  const progressPct         = Math.round((completedCount / totalMilestones) * 100);

  return (
    <div className="page fade-in">
      <div className="page-header">
        <div className="page-title">My 216 Milestones</div>
        <div className="page-subtitle">
          "Success comes from not letting your eyes stray from that target." — Estée Lauder
        </div>
      </div>

      {/* Quick Access toolbar */}
      <div className="qa-bar">
        {QUICK_ACCESS.map(qa => (
          <a key={qa.label} className="qa-btn" href={qa.url} target="_blank" rel="noopener noreferrer" title={qa.desc}>
            <span className="qa-icon">{qa.icon}</span>
            <span className="qa-label">{qa.label}</span>
          </a>
        ))}
      </div>

      {/* Overall progress bar */}
      <div className="card ms-progress-card">
        <div className="ms-progress-header">
          <span className="ms-progress-label">Overall Progress</span>
          <span className="ms-progress-count">{completedCount} / {totalMilestones} milestones</span>
        </div>
        <div className="ms-progress-track">
          <div className="ms-progress-fill" style={{ width: `${progressPct}%` }} />
        </div>
      </div>

      {loading ? (
        <div style={{ padding: 40, textAlign: 'center', color: 'var(--subtext)' }}>Loading…</div>
      ) : (
        <div className="ms-timeline">
          {MILESTONE_PHASES.map((mp, idx) => {
            const mpPhaseIdx    = PHASES.indexOf(mp.phase);
            const isCurrent     = mp.phase === currentPhase;
            const isFuture      = mpPhaseIdx > phaseIndex;
            const doneCount     = mp.milestones.filter(m => completed.has(m.key)).length;
            const allDone       = doneCount === mp.milestones.length;

            return (
              <div key={mp.phase} className={`ms-phase${isCurrent ? ' ms-phase-current' : ''}${isFuture ? ' ms-phase-future' : ''}`}>

                {/* Phase header */}
                <div className="ms-phase-header">
                  <div className="ms-phase-dot-wrap">
                    <div className={`ms-phase-dot${allDone ? ' done' : isCurrent ? ' current' : ''}`}>
                      {allDone ? '✓' : idx + 1}
                    </div>
                    {idx < MILESTONE_PHASES.length - 1 && <div className="ms-phase-line" />}
                  </div>
                  <div className="ms-phase-meta">
                    <div className="ms-phase-label">{mp.label}</div>
                    <div className="ms-phase-subtitle">{mp.subtitle}</div>
                  </div>
                  <div className={`ms-phase-count${allDone ? ' done' : ''}`}>
                    {doneCount}/{mp.milestones.length}
                  </div>
                </div>

                {/* Milestone items */}
                <div className="ms-items">
                  {mp.milestones.map(m => {
                    const isDone    = completed.has(m.key);
                    const isBusy    = toggling === m.key;
                    return (
                      <div key={m.key} className={`ms-item${isDone ? ' ms-item-done' : ''}`}>
                        <button
                          className={`ms-checkbox${isDone ? ' checked' : ''}`}
                          onClick={() => toggle(m.key, isDone)}
                          disabled={isBusy}
                          aria-label={isDone ? 'Mark incomplete' : 'Mark complete'}
                        >
                          {isDone && '✓'}
                        </button>
                        <span className="ms-item-label">{m.label}</span>
                        <div className="ms-item-actions">
                          {m.circle && (
                            <a
                              className="ms-item-link ms-circle-link"
                              href={m.circle}
                              target="_blank"
                              rel="noopener noreferrer"
                              title="Open lesson in Circle"
                            >
                              Lesson
                            </a>
                          )}
                          {m.view && onNavigate && (
                            <button
                              className="ms-item-link"
                              onClick={() => onNavigate(m.view)}
                              title="Open in co-pilot"
                            >
                              Open →
                            </button>
                          )}
                        </div>
                      </div>
                    );
                  })}
                </div>

              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Monthly Plan (Tab 19)
// ---------------------------------------------------------------------------

const PLAN_FIELDS = [
  { key: 'main_celebration', emoji: '🥳', label: 'Main Celebration', placeholder: 'What are you committed to celebrating this month? e.g. "I am committed to living life on my own terms"', rows: 2 },
  { key: 'monthly_lesson',   emoji: '🎓', label: 'Monthly Lesson',   placeholder: 'What is the single most important lesson you are carrying into this month?', rows: 2 },
  { key: 'monthly_priority', emoji: '🚨', label: 'Monthly Priority', placeholder: 'This is your SINGLE priority for the month. Everything else is secondary.', rows: 2 },
];

const GOAL_FIELDS = [
  { key: 'monthly_goal_1', emoji: '🥅', label: 'Monthly Goal 1', placeholder: 'Stated as an outcome already achieved. e.g. "I have a Standout Position"' },
  { key: 'monthly_goal_2', emoji: '🥅', label: 'Monthly Goal 2', placeholder: 'Stated as an outcome already achieved. e.g. "I have a Dream Offer"' },
  { key: 'monthly_goal_3', emoji: '🥅', label: 'Monthly Goal 3', placeholder: 'Stated as an outcome already achieved. e.g. "I have a proven Outreach Process"' },
];

const DAILY_FIELDS = [
  { key: 'daily_goal_1', emoji: '✅', label: 'Daily Goal 1', placeholder: 'NOT a daily task. A habit or behaviour you commit to every day.' },
  { key: 'daily_goal_2', emoji: '✅', label: 'Daily Goal 2', placeholder: 'NOT a daily task. A habit or behaviour you commit to every day.' },
  { key: 'daily_goal_3', emoji: '✅', label: 'Daily Goal 3', placeholder: 'NOT a daily task. A habit or behaviour you commit to every day.' },
  { key: 'daily_goal_impact', emoji: '🔎', label: 'Daily Goal Impact', placeholder: 'How will achieving these daily goals move you towards your monthly goals?', rows: 3 },
];

function PlanView() {
  const [month, setMonth] = useState(getCurrentMonth());
  const [fields, setFields] = useState({});
  const [reflection, setReflection] = useState('');
  const [saving, setSaving] = useState(false);
  const [history, setHistory] = useState([]);
  const [loading, setLoading] = useState(true);
  const [planStarter, setPlanStarter] = useState({ loading: false, data: null, error: null });

  useEffect(() => {
    setLoading(true);
    api(`/api/plan?month=${month}`)
      .then(({ plan, history: h }) => {
        if (plan) {
          const f = {};
          [...PLAN_FIELDS, ...GOAL_FIELDS, ...DAILY_FIELDS].forEach(({ key }) => {
            f[key] = plan[key] || '';
          });
          setFields(f);
          setReflection(plan.reflection || '');
        } else {
          setFields({});
          setReflection('');
        }
        setHistory(h || []);
      })
      .catch(err => toast(err.message, 'error'))
      .finally(() => setLoading(false));
  }, [month]);

  function setField(key, val) {
    setFields(f => ({ ...f, [key]: val }));
  }

  function fetchPlanStarter() {
    setPlanStarter({ loading: true, data: null, error: null });
    api('/api/ai/plan-starter', { method: 'POST', body: JSON.stringify({ plan_month: month }) })
      .then(({ insight }) => setPlanStarter({ loading: false, data: insight, error: null }))
      .catch(() => setPlanStarter({ loading: false, data: null, error: 'Co-Pilot plan starter unavailable right now.' }));
  }

  function applyPlanSuggestions() {
    if (!planStarter.data) return;
    const d = planStarter.data;
    setFields(f => ({
      ...f,
      monthly_priority: f.monthly_priority || d.monthly_priority || '',
      monthly_goal_1: f.monthly_goal_1 || d.monthly_goal_1 || '',
      monthly_goal_2: f.monthly_goal_2 || d.monthly_goal_2 || '',
      monthly_goal_3: f.monthly_goal_3 || d.monthly_goal_3 || '',
      daily_goal_1: f.daily_goal_1 || d.daily_goal_1 || '',
      daily_goal_2: f.daily_goal_2 || d.daily_goal_2 || '',
      daily_goal_3: f.daily_goal_3 || d.daily_goal_3 || '',
    }));
    toast('Suggestions applied — edit them to make them yours');
  }

  async function handleSave(e) {
    e.preventDefault();
    setSaving(true);
    try {
      await api('/api/plan', {
        method: 'POST',
        body: JSON.stringify({ plan_month: month, ...fields, reflection }),
      });
      const { history: h } = await api(`/api/plan?month=${month}`);
      setHistory(h || []);
      toast('Monthly plan saved');
    } catch (err) {
      toast(err.message, 'error');
    } finally {
      setSaving(false);
    }
  }

  const currentMonthStr = getCurrentMonth();
  const hasContent = Object.values(fields).some(v => v && v.trim());

  return (
    <div className="page fade-in">
      <div className="page-header">
        <div className="page-title">Monthly Plan</div>
        <div className="page-subtitle">The only thing standing between you and your goals are: Discipline &amp; Consistency</div>
      </div>

      {/* Month selector */}
      <div className="month-selector">
        <button className="btn btn-ghost" style={{ padding: '8px 14px' }} onClick={() => setMonth(m => shiftMonth(m, -1))}>‹</button>
        <span className="month-display">{formatMonth(month)}</span>
        <button
          className="btn btn-ghost"
          style={{ padding: '8px 14px' }}
          onClick={() => setMonth(m => shiftMonth(m, 1))}
          disabled={month >= currentMonthStr}
        >›</button>
        {month !== currentMonthStr && (
          <button className="btn btn-ghost" style={{ fontSize: 12, padding: '6px 12px' }} onClick={() => setMonth(currentMonthStr)}>
            This month
          </button>
        )}
      </div>

      {/* History strip */}
      {history.length > 0 && (
        <div className="audit-history-strip">
          {[...history].reverse().map(h => (
            <div
              key={h.plan_month}
              className={`audit-month-chip${month === h.plan_month ? ' active' : ''}`}
              onClick={() => setMonth(h.plan_month)}
            >
              <div className="chip-month">{formatMonthShort(h.plan_month)}</div>
              <div className="chip-score" style={{ fontSize: 9, maxWidth: 64, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                {h.monthly_priority ? h.monthly_priority.substring(0, 20) + (h.monthly_priority.length > 20 ? '…' : '') : '—'}
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Plan Starter — when plan is blank */}
      {!loading && !hasContent && month === currentMonthStr && (
        planStarter.data ? (
          <CoPilotCard style={{ marginBottom: 16 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--navy)', marginBottom: 8 }}>
              Suggested plan based on your phase, metrics, and audit
            </div>
            <div style={{ fontSize: 13, color: 'var(--subtext)', lineHeight: 1.7, marginBottom: 12 }}>
              {planStarter.data.rationale}
            </div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <button type="button" className="btn btn-primary" style={{ fontSize: 12 }} onClick={applyPlanSuggestions}>
                Apply Suggestions
              </button>
              <button type="button" className="btn btn-ghost" style={{ fontSize: 12 }} onClick={() => setPlanStarter({ loading: false, data: null, error: null })}>
                Dismiss
              </button>
            </div>
          </CoPilotCard>
        ) : (
          <div style={{ marginBottom: 16 }}>
            <button
              type="button"
              className="btn btn-ghost"
              style={{ display: 'flex', alignItems: 'center', gap: 6 }}
              onClick={fetchPlanStarter}
              disabled={planStarter.loading}
            >
              {planStarter.loading ? <><Spinner /> Generating suggestions…</> : '✦ Co-Pilot: Generate plan suggestions'}
            </button>
            {planStarter.error && <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 6 }}>{planStarter.error}</div>}
          </div>
        )
      )}

      {loading ? (
        <div style={{ padding: 40, textAlign: 'center', color: 'var(--subtext)' }}>Loading…</div>
      ) : (
        <form onSubmit={handleSave}>

          {/* Context card — celebration + lesson */}
          <div className="card">
            <div className="card-title">Monthly Context</div>
            <div className="plan-hint">Start by anchoring to what you're celebrating and what you've learned. This sets the tone for everything that follows.</div>
            {PLAN_FIELDS.slice(0, 2).map(({ key, emoji, label, placeholder, rows }) => (
              <div className="plan-field" key={key}>
                <label className="plan-label">{emoji} {label}</label>
                <textarea
                  rows={rows || 2}
                  placeholder={placeholder}
                  value={fields[key] || ''}
                  onChange={e => setField(key, e.target.value)}
                />
              </div>
            ))}
          </div>

          {/* Priority card */}
          <div className="card plan-priority-card">
            <div className="plan-priority-eyebrow">🚨 Monthly Priority</div>
            <div className="plan-priority-hint">This is your SINGLE priority for the month. The 216 Framework is your priority until you've completed it.</div>
            <textarea
              className="plan-priority-input"
              rows={2}
              placeholder="e.g. 216 Framework — THIS IS YOUR SINGLE PRIORITY FOR THE MONTH"
              value={fields['monthly_priority'] || ''}
              onChange={e => setField('monthly_priority', e.target.value)}
            />
          </div>

          {/* Monthly goals card */}
          <div className="card">
            <div className="card-title">Monthly Goals</div>
            <div className="plan-hint">State each goal as an outcome already achieved. These should be directly related to your monthly priority.</div>
            {GOAL_FIELDS.map(({ key, emoji, label, placeholder }) => (
              <div className="plan-field" key={key}>
                <label className="plan-label">{emoji} {label}</label>
                <input
                  type="text"
                  placeholder={placeholder}
                  value={fields[key] || ''}
                  onChange={e => setField(key, e.target.value)}
                />
              </div>
            ))}
          </div>

          {/* Daily discipline card */}
          <div className="card">
            <div className="card-title">Daily Discipline</div>
            <div className="plan-hint">These are NOT daily tasks. They are habits and behaviours you commit to every single day. They do not have to be directly related to your monthly goals.</div>
            {DAILY_FIELDS.map(({ key, emoji, label, placeholder, rows }) => (
              <div className="plan-field" key={key}>
                <label className="plan-label">{emoji} {label}</label>
                {rows ? (
                  <textarea
                    rows={rows}
                    placeholder={placeholder}
                    value={fields[key] || ''}
                    onChange={e => setField(key, e.target.value)}
                  />
                ) : (
                  <input
                    type="text"
                    placeholder={placeholder}
                    value={fields[key] || ''}
                    onChange={e => setField(key, e.target.value)}
                  />
                )}
              </div>
            ))}
          </div>

          {/* Reflection card */}
          <div className="card">
            <div className="card-title">🪞 Reflection</div>
            <div className="plan-hint">Go back and review your Philosophy tab — your One Page Plan. How does this month's plan connect to your vision, purpose, and principles?</div>
            <textarea
              rows={5}
              placeholder="What patterns are you noticing? What are you learning about yourself? How does this month connect to your bigger picture?"
              value={reflection}
              onChange={e => setReflection(e.target.value)}
            />
          </div>

          <div className="plan-footer">
            {hasContent && month < currentMonthStr && (
              <div className="plan-footer-note">Viewing a past month — changes will update that month's plan.</div>
            )}
            <button type="submit" className="btn btn-primary" disabled={saving}>
              {saving ? 'Saving…' : 'Save Plan'}
            </button>
          </div>

        </form>
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Placeholder views
// ---------------------------------------------------------------------------

// ---------------------------------------------------------------------------
// Revenue / P&L (Tab 21)
// ---------------------------------------------------------------------------

const REVENUE_SECTIONS = [
  {
    key: 'revenue',
    label: 'Revenue',
    color: 'var(--green)',
    fields: [
      { key: 'revenue_121_work',       label: '1-2-1 Work' },
      { key: 'revenue_workshops',      label: 'Workshops' },
      { key: 'revenue_group_programs', label: 'Group Programs' },
    ],
  },
  {
    key: 'cost',
    label: 'Cost of Sale',
    color: '#F59E0B',
    fields: [
      { key: 'cost_payment_fees',      label: 'Payment Fees (e.g. Stripe)' },
      { key: 'cost_sales_commission',  label: 'Sales Commission' },
      { key: 'cost_contractors',       label: 'Contractors' },
    ],
  },
  {
    key: 'expense',
    label: 'Expenses',
    color: 'var(--red)',
    fields: [
      { key: 'expense_personal',       label: 'Personal' },
      { key: 'expense_travel',         label: 'Travel' },
      { key: 'expense_admin',          label: 'Administration' },
      { key: 'expense_marketing',      label: 'Marketing' },
      { key: 'expense_tools_software', label: 'Tools & Software' },
      { key: 'expense_other',          label: 'Other' },
    ],
  },
];

function RevenueView() {
  const [month, setMonth] = useState(getCurrentMonth());
  const [fields, setFields] = useState({});
  const [notes, setNotes]   = useState('');
  const [saving, setSaving] = useState(false);
  const [yearData, setYearData] = useState([]);
  const [loading, setLoading]   = useState(true);
  const [revenueInsight, setRevenueInsight] = useState({ loading: false, data: null, error: null });

  useEffect(() => {
    setLoading(true);
    api(`/api/revenue?month=${month}`)
      .then(({ revenue, yearData: yd }) => {
        if (revenue) {
          const f = {};
          REVENUE_SECTIONS.forEach(s => s.fields.forEach(({ key }) => {
            f[key] = revenue[key] ?? 0;
          }));
          setFields(f);
          setNotes(revenue.notes || '');
        } else {
          setFields({});
          setNotes('');
        }
        setYearData(yd || []);
      })
      .catch(err => toast(err.message, 'error'))
      .finally(() => setLoading(false));
  }, [month]);

  function setField(key, raw) {
    // Allow typing decimals: store string while editing, parse on save
    setFields(f => ({ ...f, [key]: raw }));
  }

  async function handleSave(e) {
    e.preventDefault();
    setSaving(true);
    try {
      await api('/api/revenue', {
        method: 'POST',
        body: JSON.stringify({ revenue_month: month, ...fields, notes }),
      });
      const { yearData: yd } = await api(`/api/revenue?month=${month}`);
      setYearData(yd || []);
      toast('Revenue saved');

      // Trigger revenue insight
      setRevenueInsight({ loading: true, data: null, error: null });
      api('/api/ai/revenue-insight', { method: 'POST', body: JSON.stringify({ revenue_month: month }) })
        .then(({ insight }) => setRevenueInsight({ loading: false, data: insight, error: null }))
        .catch(() => setRevenueInsight({ loading: false, data: null, error: 'Co-Pilot insight unavailable right now.' }));
    } catch (err) {
      toast(err.message, 'error');
    } finally {
      setSaving(false);
    }
  }

  // Derived totals from current field state
  function sum(keys) {
    return keys.reduce((acc, k) => acc + (parseFloat(fields[k]) || 0), 0);
  }

  const totalRevenue   = sum(REVENUE_SECTIONS[0].fields.map(f => f.key));
  const totalCost      = sum(REVENUE_SECTIONS[1].fields.map(f => f.key));
  const totalExpenses  = sum(REVENUE_SECTIONS[2].fields.map(f => f.key));
  const grossProfit    = totalRevenue - totalCost;
  const netProfit      = grossProfit - totalExpenses;
  const margin         = totalRevenue > 0 ? Math.round((netProfit / totalRevenue) * 100) : null;

  // YTD totals
  const ytdRevenue = yearData.reduce((a, r) => a + (r.total_revenue || 0), 0);
  const ytdNet     = yearData.reduce((a, r) => a + ((r.total_revenue - r.total_cost - r.total_expenses) || 0), 0);

  const currentMonthStr = getCurrentMonth();

  // All 12 months in the viewed year for the strip
  const yearMonths = Array.from({ length: 12 }, (_, i) => {
    const m = String(i + 1).padStart(2, '0');
    return `${month.substring(0, 4)}-${m}`;
  });

  const yearDataByMonth = Object.fromEntries(yearData.map(r => [r.revenue_month, r]));

  const MONTH_LABELS = ['J','F','M','A','M','J','J','A','S','O','N','D'];

  return (
    <div className="page fade-in">
      <div className="page-header">
        <div className="page-title">Revenue &amp; P&amp;L</div>
        <div className="page-subtitle">Track your income, costs, and profitability every month.</div>
      </div>

      {/* Month selector */}
      <div className="month-selector">
        <button className="btn btn-ghost" style={{ padding: '8px 14px' }} onClick={() => setMonth(m => shiftMonth(m, -1))}>‹</button>
        <span className="month-display">{formatMonth(month)}</span>
        <button
          className="btn btn-ghost"
          style={{ padding: '8px 14px' }}
          onClick={() => setMonth(m => shiftMonth(m, 1))}
          disabled={month >= currentMonthStr}
        >›</button>
        {month !== currentMonthStr && (
          <button className="btn btn-ghost" style={{ fontSize: 12, padding: '6px 12px' }} onClick={() => setMonth(currentMonthStr)}>
            This month
          </button>
        )}
      </div>

      {/* Year strip — 12 month bar chart */}
      <div className="card rev-year-strip">
        <div className="rev-year-header">
          <span className="rev-year-label">{month.substring(0, 4)} Overview</span>
          <span className="rev-year-totals">
            <span style={{ color: 'var(--green)', fontWeight: 700 }}>{money(ytdRevenue)}</span>
            <span style={{ color: 'var(--subtext)', margin: '0 6px' }}>revenue</span>
            <span style={{ color: netProfit >= 0 ? 'var(--green)' : 'var(--red)', fontWeight: 700 }}>{money(ytdNet)}</span>
            <span style={{ color: 'var(--subtext)', marginLeft: 6 }}>net YTD</span>
          </span>
        </div>
        <div className="rev-bar-chart">
          {yearMonths.map((ym, i) => {
            const d = yearDataByMonth[ym];
            const rev = d ? d.total_revenue : 0;
            const net = d ? (d.total_revenue - d.total_cost - d.total_expenses) : 0;
            const isFuture = ym > currentMonthStr;
            const isActive = ym === month;
            const maxRev = Math.max(...yearData.map(r => r.total_revenue || 0), 1);
            const barH = Math.round((rev / maxRev) * 48);
            return (
              <div
                key={ym}
                className={`rev-bar-col${isActive ? ' active' : ''}${isFuture ? ' future' : ''}`}
                onClick={() => !isFuture && setMonth(ym)}
                title={`${formatMonthShort(ym)}: ${money(rev)} revenue, ${money(net)} net`}
              >
                <div className="rev-bar-track">
                  <div
                    className="rev-bar-fill"
                    style={{
                      height: barH || (d ? 2 : 0),
                      background: net >= 0 ? 'var(--green)' : 'var(--red)',
                      opacity: isFuture ? 0.15 : 1,
                    }}
                  />
                </div>
                <div className="rev-bar-label">{MONTH_LABELS[i]}</div>
              </div>
            );
          })}
        </div>
      </div>

      {loading ? (
        <div style={{ padding: 40, textAlign: 'center', color: 'var(--subtext)' }}>Loading…</div>
      ) : (
        <form onSubmit={handleSave}>

          {/* P&L summary row */}
          <div className="rev-summary-row">
            <div className="rev-summary-item">
              <div className="rev-summary-label">Revenue</div>
              <div className="rev-summary-value" style={{ color: 'var(--green)' }}>{money(totalRevenue)}</div>
            </div>
            <div className="rev-summary-divider">−</div>
            <div className="rev-summary-item">
              <div className="rev-summary-label">Cost of Sale</div>
              <div className="rev-summary-value" style={{ color: '#F59E0B' }}>{money(totalCost)}</div>
            </div>
            <div className="rev-summary-divider">=</div>
            <div className="rev-summary-item">
              <div className="rev-summary-label">Gross Profit</div>
              <div className="rev-summary-value" style={{ color: grossProfit >= 0 ? 'var(--green)' : 'var(--red)' }}>{money(grossProfit)}</div>
            </div>
            <div className="rev-summary-divider">−</div>
            <div className="rev-summary-item">
              <div className="rev-summary-label">Expenses</div>
              <div className="rev-summary-value" style={{ color: 'var(--red)' }}>{money(totalExpenses)}</div>
            </div>
            <div className="rev-summary-divider">=</div>
            <div className="rev-summary-item rev-summary-net">
              <div className="rev-summary-label">Net Profit</div>
              <div className="rev-summary-value" style={{ color: netProfit >= 0 ? 'var(--green)' : 'var(--red)', fontWeight: 800 }}>{money(netProfit)}</div>
              {margin !== null && (
                <div className="rev-summary-margin" style={{ color: margin >= 0 ? 'var(--green)' : 'var(--red)' }}>
                  {margin}% margin
                </div>
              )}
            </div>
          </div>

          {/* Section cards */}
          {REVENUE_SECTIONS.map(section => {
            const sectionTotal = sum(section.fields.map(f => f.key));
            return (
              <div className="card" key={section.key}>
                <div className="rev-section-header">
                  <div className="card-title" style={{ margin: 0 }}>{section.label}</div>
                  <div className="rev-section-total" style={{ color: section.color }}>{money(sectionTotal)}</div>
                </div>
                <div className="rev-fields">
                  {section.fields.map(({ key, label }) => (
                    <div className="rev-field-row" key={key}>
                      <label className="rev-field-label">{label}</label>
                      <div className="rev-input-wrap">
                        <span className="rev-currency">£</span>
                        <input
                          type="number"
                          min="0"
                          step="0.01"
                          placeholder="0.00"
                          value={fields[key] ?? ''}
                          onChange={e => setField(key, e.target.value)}
                          className="rev-input"
                        />
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}

          {/* Notes */}
          <div className="card">
            <div className="card-title">Notes</div>
            <textarea
              rows={3}
              placeholder="Any context on this month's numbers — big wins, unusual costs, one-off items…"
              value={notes}
              onChange={e => setNotes(e.target.value)}
            />
          </div>

          <button type="submit" className="btn btn-primary" disabled={saving}>
            {saving ? 'Saving…' : 'Save'}
          </button>

        </form>
      )}

      {/* Revenue Insight */}
      {(revenueInsight.loading || revenueInsight.data || revenueInsight.error) && (
        <CoPilotCard loading={revenueInsight.loading} error={revenueInsight.error} style={{ marginTop: 16 }}>
          {revenueInsight.data && (
            <>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
                <SignalBadge signal={revenueInsight.data.signal} />
              </div>
              <div style={{ marginBottom: 12 }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--subtext)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 5 }}>What your P&L shows</div>
                <div style={{ fontSize: 14, lineHeight: 1.7, color: 'var(--text)' }}>{revenueInsight.data.diagnosis}</div>
              </div>
              <div style={{ padding: '10px 14px', background: 'var(--navy)', borderRadius: 6 }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 5 }}>The lever to pull</div>
                <div style={{ fontSize: 14, fontWeight: 600, color: 'white', lineHeight: 1.6 }}>{revenueInsight.data.lever}</div>
              </div>
            </>
          )}
        </CoPilotCard>
      )}
    </div>
  );
}


// ---------------------------------------------------------------------------
// Co-Pilot Chat — agentic conversation with tool use
// ---------------------------------------------------------------------------

function ChatView({ member }) {
  const [conversations, setConversations] = useState([]);
  const [currentId, setCurrentId] = useState(null);
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [sending, setSending] = useState(false);
  const [thinking, setThinking] = useState(null);
  const [showSidebar, setShowSidebar] = useState(true);
  const messagesEndRef = React.useRef(null);

  // Load conversation list
  useEffect(() => {
    api('/api/chat/conversations')
      .then(({ conversations: c }) => setConversations(c || []))
      .catch(() => {});
  }, []);

  // Load a conversation
  async function loadConversation(id) {
    try {
      const { conversation } = await api(`/api/chat/${id}`);
      setCurrentId(id);
      // Extract only user + assistant text messages for display
      const display = [];
      for (const msg of conversation.messages) {
        if (msg.role === 'user' && typeof msg.content === 'string') {
          display.push({ role: 'user', text: msg.content });
        } else if (msg.role === 'assistant' && Array.isArray(msg.content)) {
          const textBlocks = msg.content.filter(b => b.type === 'text');
          if (textBlocks.length) display.push({ role: 'assistant', text: textBlocks.map(b => b.text).join('\n') });
        }
      }
      setMessages(display);
    } catch { toast('Could not load conversation', 'error'); }
  }

  function startNew() {
    setCurrentId(null);
    setMessages([]);
    setInput('');
  }

  async function deleteConvo(id) {
    await api(`/api/chat/${id}`, { method: 'DELETE' }).catch(() => {});
    setConversations(c => c.filter(x => x.id !== id));
    if (currentId === id) startNew();
  }

  // Scroll to bottom on new messages
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages, thinking]);

  async function handleSend(e) {
    e.preventDefault();
    const text = input.trim();
    if (!text || sending) return;

    setSending(true);
    setInput('');
    setMessages(m => [...m, { role: 'user', text }]);
    setThinking('Connecting to Co-Pilot...');

    try {
      const response = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({ message: text, conversation_id: currentId || undefined }),
      });

      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      let buffer = '';
      let assistantText = '';
      let newConvoId = currentId;

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        buffer += decoder.decode(value, { stream: true });

        // Parse SSE events from buffer
        const lines = buffer.split('\n');
        buffer = lines.pop() || '';

        for (const line of lines) {
          if (!line.startsWith('data: ')) continue;
          try {
            const event = JSON.parse(line.slice(6));
            if (event.type === 'thinking') {
              setThinking(event.message);
            } else if (event.type === 'text') {
              assistantText = event.text;
              setThinking(null);
              setMessages(m => {
                const updated = [...m];
                // Replace or append assistant message
                if (updated.length && updated[updated.length - 1].role === 'assistant') {
                  updated[updated.length - 1] = { role: 'assistant', text: assistantText };
                } else {
                  updated.push({ role: 'assistant', text: assistantText });
                }
                return updated;
              });
            } else if (event.type === 'done') {
              newConvoId = event.conversation_id;
            } else if (event.type === 'error') {
              setMessages(m => [...m, { role: 'assistant', text: event.message, isError: true }]);
            }
          } catch { /* skip malformed SSE */ }
        }
      }

      // Update state
      setCurrentId(newConvoId);
      // Refresh conversation list
      api('/api/chat/conversations')
        .then(({ conversations: c }) => setConversations(c || []))
        .catch(() => {});
    } catch (err) {
      setMessages(m => [...m, { role: 'assistant', text: 'Connection error. Please try again.', isError: true }]);
    } finally {
      setSending(false);
      setThinking(null);
    }
  }

  return (
    <div style={{ display: 'flex', height: 'calc(100vh - 0px)', overflow: 'hidden' }}>
      {/* Conversation sidebar */}
      {showSidebar && (
        <div className="chat-sidebar">
          <button className="btn btn-primary" style={{ width: '100%', marginBottom: 12, fontSize: 13 }} onClick={startNew}>
            + New Conversation
          </button>
          <div className="chat-convo-list">
            {conversations.map(c => (
              <div
                key={c.id}
                className={`chat-convo-item${currentId === c.id ? ' active' : ''}`}
                onClick={() => loadConversation(c.id)}
              >
                <div className="chat-convo-title">{c.title || 'Untitled'}</div>
                <div className="chat-convo-meta">
                  {new Date(c.updated_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
                </div>
                <button
                  className="chat-convo-delete"
                  onClick={(e) => { e.stopPropagation(); deleteConvo(c.id); }}
                  title="Delete"
                >x</button>
              </div>
            ))}
            {!conversations.length && (
              <div style={{ fontSize: 12, color: 'var(--muted)', padding: '12px 0' }}>No conversations yet</div>
            )}
          </div>
        </div>
      )}

      {/* Main chat area */}
      <div className="chat-main">
        <div className="chat-header">
          <button className="btn btn-ghost" style={{ fontSize: 14, padding: '4px 8px' }} onClick={() => setShowSidebar(s => !s)}>
            {showSidebar ? '◁' : '▷'}
          </button>
          <span style={{ fontWeight: 700, fontSize: 14 }}>Co-Pilot Chat</span>
          {currentId && <span style={{ fontSize: 11, color: 'var(--muted)' }}>Conversation active</span>}
        </div>

        {/* Messages */}
        <div className="chat-messages">
          {!messages.length && !sending && (
            <div className="chat-empty">
              <div style={{ fontSize: 28, marginBottom: 12 }}>✦</div>
              <div style={{ fontWeight: 700, fontSize: 16, color: 'var(--navy)', marginBottom: 8 }}>
                216 Co-Pilot
              </div>
              <div style={{ fontSize: 13, color: 'var(--subtext)', lineHeight: 1.7, maxWidth: 400 }}>
                Ask me anything about your business. I can look up your metrics, check your Kondo pipeline, review your audit, find your next lesson, and coach you through the 216 Framework.
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 16, justifyContent: 'center' }}>
                {[
                  'What should I focus on this week?',
                  "How's my pipeline?",
                  'What lesson should I do next?',
                  'Review my last month',
                ].map(q => (
                  <button
                    key={q}
                    className="btn btn-ghost"
                    style={{ fontSize: 12 }}
                    onClick={() => { setInput(q); }}
                  >{q}</button>
                ))}
              </div>
            </div>
          )}

          {messages.map((msg, i) => (
            <div key={i} className={`chat-msg chat-msg-${msg.role}`}>
              {msg.role === 'assistant' && <div className="chat-msg-avatar">✦</div>}
              <div className={`chat-msg-bubble${msg.isError ? ' chat-msg-error' : ''}`}>
                {msg.text}
              </div>
              {msg.role === 'user' && <div className="chat-msg-avatar chat-msg-avatar-user">{initials(member.name)}</div>}
            </div>
          ))}

          {thinking && (
            <div className="chat-msg chat-msg-assistant">
              <div className="chat-msg-avatar">✦</div>
              <div className="chat-msg-bubble chat-msg-thinking">
                <Spinner /> {thinking}
              </div>
            </div>
          )}

          <div ref={messagesEndRef} />
        </div>

        {/* Input */}
        <form className="chat-input-area" onSubmit={handleSend}>
          <textarea
            className="chat-input"
            placeholder="Ask the Co-Pilot anything..."
            value={input}
            onChange={e => setInput(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend(e); } }}
            rows={1}
            disabled={sending}
          />
          <button type="submit" className="btn btn-primary chat-send-btn" disabled={sending || !input.trim()}>
            {sending ? '...' : '→'}
          </button>
        </form>
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Lessons View — course content + completion tracking
// ---------------------------------------------------------------------------

/** Circle course URLs — lessons link back to Circle */
const CIRCLE_COURSES = {
  welcome: `${CIRCLE}/c/welcome`,
  groundwork: `${CIRCLE}/c/groundwork`,
  framework: `${CIRCLE}/c/framework`,
  position: `${CIRCLE}/c/position`,
  offer: `${CIRCLE}/c/offer`,
  outreach: `${CIRCLE}/c/outreach`,
  sales: `${CIRCLE}/c/sales`,
  content: `${CIRCLE}/c/content`,
};

function LessonsView() {
  const [progress, setProgress] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    api('/api/lessons/progress')
      .then(setProgress)
      .catch(err => toast(err.message, 'error'))
      .finally(() => setLoading(false));
  }, []);

  async function toggleComplete(course, number, currentlyCompleted) {
    try {
      await api('/api/lessons/complete', {
        method: 'POST',
        body: JSON.stringify({ course, lesson_number: number, undo: currentlyCompleted }),
      });
      const updated = await api('/api/lessons/progress');
      setProgress(updated);
      toast(currentlyCompleted ? 'Marked incomplete' : 'Lesson completed!');
    } catch (err) {
      toast(err.message, 'error');
    }
  }

  if (loading) return <div className="page fade-in"><div style={{ padding: 40, textAlign: 'center', color: 'var(--subtext)' }}>Loading...</div></div>;

  // Overall progress bar
  const pctComplete = progress?.total_available ? Math.round((progress.total_completed / progress.total_available) * 100) : 0;

  return (
    <div className="page fade-in">
      <div className="page-header">
        <div className="page-title">Lessons</div>
        <div className="page-subtitle">
          {progress?.total_completed || 0} of {progress?.total_available || 0} completed ({pctComplete}%)
        </div>
      </div>

      {/* Overall progress bar */}
      <div style={{ background: 'var(--border)', borderRadius: 6, height: 8, marginBottom: 20, overflow: 'hidden' }}>
        <div style={{ width: `${pctComplete}%`, height: '100%', background: 'var(--green)', borderRadius: 6, transition: 'width 0.3s' }} />
      </div>

      {/* Next up card */}
      {progress?.next_lesson && (
        <div className="card" style={{ borderLeft: '3px solid var(--navy-light)', marginBottom: 20 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--navy-light)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>
            Up Next
          </div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
            <div>
              <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--navy)' }}>{progress.next_lesson.title}</div>
              <div style={{ fontSize: 12, color: 'var(--subtext)', marginTop: 3 }}>
                <span style={{ textTransform: 'capitalize' }}>{progress.next_lesson.course}</span> · {progress.next_lesson.section}
              </div>
            </div>
            <a
              href={CIRCLE_COURSES[progress.next_lesson.course] || CIRCLE}
              target="_blank"
              rel="noopener noreferrer"
              className="btn btn-primary"
              style={{ fontSize: 12, flexShrink: 0, textDecoration: 'none' }}
            >
              Open in Circle →
            </a>
          </div>
        </div>
      )}

      {/* Course cards */}
      {progress?.courses && Object.entries(progress.courses).map(([courseName, courseData]) => {
        const coursePct = courseData.total ? Math.round((courseData.completed / courseData.total) * 100) : 0;
        const allDone = courseData.completed === courseData.total;
        return (
          <div className="card" key={courseName} style={{ marginBottom: 12 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
              <div className="card-title" style={{ margin: 0, textTransform: 'capitalize' }}>{courseName}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ fontSize: 11, color: allDone ? 'var(--green)' : 'var(--subtext)', fontWeight: 600 }}>
                  {courseData.completed}/{courseData.total}
                </span>
                <a
                  href={CIRCLE_COURSES[courseName] || CIRCLE}
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{ fontSize: 11, color: 'var(--navy-light)', textDecoration: 'none', fontWeight: 600 }}
                >
                  Open →
                </a>
              </div>
            </div>
            {/* Course progress bar */}
            <div style={{ background: 'var(--border)', borderRadius: 4, height: 4, marginBottom: 12, overflow: 'hidden' }}>
              <div style={{ width: `${coursePct}%`, height: '100%', background: allDone ? 'var(--green)' : 'var(--navy-light)', borderRadius: 4, transition: 'width 0.3s' }} />
            </div>
            {courseData.lessons.map(lesson => {
              const isNext = progress?.next_lesson?.course === courseName && progress?.next_lesson?.number === lesson.number;
              return (
                <div key={lesson.number} className={`lesson-item${lesson.completed ? ' lesson-done' : ''}${isNext ? ' lesson-next' : ''}`}>
                  <button
                    className="lesson-check"
                    onClick={() => toggleComplete(courseName, lesson.number, lesson.completed)}
                    title={lesson.completed ? 'Mark incomplete' : 'Mark complete'}
                    style={{ cursor: 'pointer', background: 'none', border: lesson.completed ? 'none' : '2px solid var(--border)' }}
                  >
                    {lesson.completed ? '✓' : ''}
                  </button>
                  <div className="lesson-info" style={{ flex: 1 }}>
                    <div className="lesson-title">{lesson.title}</div>
                    <div className="lesson-meta">{lesson.section} · {lesson.duration}</div>
                  </div>
                  <a
                    href={CIRCLE_COURSES[courseName] || CIRCLE}
                    target="_blank"
                    rel="noopener noreferrer"
                    style={{ fontSize: 11, color: 'var(--navy-light)', textDecoration: 'none', flexShrink: 0, padding: '4px 8px' }}
                  >
                    Lesson →
                  </a>
                </div>
              );
            })}
          </div>
        );
      })}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Message Lab — AI-powered outreach message drafting
// ---------------------------------------------------------------------------

const MESSAGE_TYPES = [
  { value: 'compliment', label: 'Compliment (opening message)', hint: 'Personalised first touch — no questions, just genuine recognition.' },
  { value: 'bump',       label: 'Bump (follow-up #1)',          hint: '3 days after compliment — brief, reference their activity.' },
  { value: 'busy',       label: 'Busy (follow-up #2)',          hint: '7 days after bump — acknowledge they may be busy.' },
  { value: 'advance',    label: 'Advance (warm prospect)',      hint: 'Move a warm lead forward with a relevant observation.' },
  { value: 'aaa',        label: 'AAA (engaged prospect)',       hint: 'Acknowledge, Associate, Ask — find their Goal, Challenge, Timeframe.' },
  { value: 'objection',  label: 'Objection handling',           hint: 'Respond to price, timing, or competition objections.' },
];

function MessageLabView({ member }) {
  const [messageType, setMessageType] = useState('compliment');
  const [prospectContext, setProspectContext] = useState('');
  const [result, setResult] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [copied, setCopied] = useState(null);

  const selectedType = MESSAGE_TYPES.find(t => t.value === messageType);

  async function handleGenerate(e) {
    e.preventDefault();
    if (!prospectContext.trim()) return toast('Describe the prospect first', 'error');

    setLoading(true);
    setResult(null);
    setError(null);
    try {
      const { result: r } = await api('/api/ai/message-lab', {
        method: 'POST',
        body: JSON.stringify({ message_type: messageType, prospect_context: prospectContext }),
      });
      setResult(r);
    } catch (err) {
      setError(err.message || 'Message Lab unavailable right now.');
    } finally {
      setLoading(false);
    }
  }

  function copyMessage(text, index) {
    navigator.clipboard.writeText(text);
    setCopied(index);
    setTimeout(() => setCopied(null), 2000);
  }

  return (
    <div className="page fade-in">
      <div className="page-header">
        <div className="page-title">Message Lab</div>
        <div className="page-subtitle">Draft personalised LinkedIn messages using the 216 outreach framework.</div>
      </div>

      <form onSubmit={handleGenerate}>
        {/* Message type */}
        <div className="card">
          <div className="card-title">Message Type</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {MESSAGE_TYPES.map(t => (
              <label
                key={t.value}
                className={`check-row${messageType === t.value ? ' checked' : ''}`}
                onClick={() => setMessageType(t.value)}
                style={{ cursor: 'pointer' }}
              >
                <input type="radio" name="msg_type" checked={messageType === t.value} onChange={() => {}} />
                <div>
                  <div style={{ fontWeight: 600, fontSize: 13 }}>{t.label}</div>
                  <div style={{ fontSize: 11, color: 'var(--subtext)', marginTop: 2 }}>{t.hint}</div>
                </div>
              </label>
            ))}
          </div>
        </div>

        {/* Prospect context */}
        <div className="card">
          <div className="card-title">Prospect Context</div>
          <div className="plan-hint">
            Describe the prospect in 1-3 sentences. What is their role? What caught your eye on their profile? Any connection between your worlds?
          </div>
          <textarea
            rows={4}
            placeholder="e.g. Head of Operations at a mid-size logistics company. Posted recently about scaling challenges with their team. We both lived in Dubai."
            value={prospectContext}
            onChange={e => setProspectContext(e.target.value)}
          />
        </div>

        <button type="submit" className="btn btn-primary" disabled={loading}>
          {loading ? 'Generating…' : `Draft ${selectedType?.label.split(' (')[0]} Messages`}
        </button>
      </form>

      {/* Results */}
      {error && (
        <div style={{ marginTop: 16, color: 'var(--muted)', fontSize: 13 }}>{error}</div>
      )}

      {result && (
        <div style={{ marginTop: 20 }}>
          {result.variations?.map((v, i) => (
            <div key={i} className="card" style={{ borderLeft: '3px solid var(--navy-light)' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
                <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--navy-light)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                  {v.style}
                </span>
                <button
                  type="button"
                  className="btn btn-ghost"
                  style={{ fontSize: 11, padding: '3px 10px' }}
                  onClick={() => copyMessage(v.message, i)}
                >
                  {copied === i ? '✓ Copied' : 'Copy'}
                </button>
              </div>
              <div style={{ fontSize: 14, lineHeight: 1.75, color: 'var(--text)', whiteSpace: 'pre-wrap', marginBottom: 8 }}>
                {v.message}
              </div>
              <div style={{ fontSize: 11, color: 'var(--muted)', fontStyle: 'italic' }}>
                Best for: {v.when_to_use}
              </div>
            </div>
          ))}

          {result.tip && (
            <div style={{ fontSize: 13, color: 'var(--subtext)', padding: '10px 14px', background: 'rgba(10,74,122,0.04)', borderRadius: 6, marginTop: 8, borderLeft: '3px solid var(--navy-light)' }}>
              <strong>216 Tip:</strong> {result.tip}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Admin — Member card
// ---------------------------------------------------------------------------

function MemberCard({ member, aiFlags }) {
  const statusColor = member.status === 'green' ? 'var(--green)'
    : member.status === 'amber' ? '#F59E0B'
    : 'var(--red)';

  const days = member.days_since_submission;
  const pulseColor = days === null ? 'var(--muted)'
    : days <= 3 ? 'var(--green)'
    : days <= 7 ? '#F59E0B'
    : 'var(--red)';
  const pulseLabel = days === null ? 'No data'
    : days === 0 ? 'Today'
    : days === 1 ? 'Yesterday'
    : `${days}d ago`;

  return (
    <div className="member-card" style={{ borderLeft: `4px solid ${statusColor}` }}>
      <div className="member-card-header">
        <ScoreRing score={member.engagement_score} name={member.name} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontWeight: 700, fontSize: 15, color: 'var(--navy)', lineHeight: 1.2, marginBottom: 5 }}>
            {member.name}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7, flexWrap: 'wrap' }}>
            <span className="rag amber" style={{ fontSize: 10, padding: '2px 8px', textTransform: 'capitalize' }}>
              {member.phase}
            </span>
            {member.streak >= 2 && (
              <span style={{ fontSize: 11, color: 'var(--orange)', fontWeight: 700 }}>
                🔥 {member.streak}wk
              </span>
            )}
          </div>
        </div>
        <div style={{ textAlign: 'right', flexShrink: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 5, justifyContent: 'flex-end', marginBottom: 3 }}>
            <div style={{ width: 7, height: 7, borderRadius: '50%', background: pulseColor, flexShrink: 0 }} />
            <span style={{ fontSize: 11, color: pulseColor, fontWeight: 600 }}>{pulseLabel}</span>
          </div>
          <div style={{ fontSize: 11, color: 'var(--muted)' }}>Score: <strong style={{ color: 'var(--text)' }}>{member.engagement_score}</strong></div>
        </div>
      </div>

      <div className="member-key-stats">
        {[
          [money(member.latest_income), 'This week'],
          [member.latest_clients || '—', 'Clients'],
          [member.latest_messages || '—', 'Messages'],
          [member.latest_advance || '—', 'Advance'],
        ].map(([val, label]) => (
          <div className="member-stat" key={label}>
            <div className="member-stat-value">{val}</div>
            <div className="member-stat-label">{label}</div>
          </div>
        ))}
      </div>

      {/* AI Risk Flags */}
      {aiFlags && aiFlags.length > 0 && (
        <div style={{ padding: '8px 0 0', borderTop: '1px solid var(--border-subtle)', marginTop: 8 }}>
          {aiFlags.map((flag, i) => {
            const fColor = flag.severity === 'red' ? 'var(--red)' : flag.severity === 'amber' ? '#F59E0B' : 'var(--green)';
            return (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: fColor, marginBottom: 3 }}>
                <span style={{ width: 5, height: 5, borderRadius: '50%', background: fColor, flexShrink: 0 }} />
                {flag.label}
              </div>
            );
          })}
        </div>
      )}

      <div className="member-card-footer">
        <ActivityDots weeks={member.recent_weeks} />
        <span style={{ fontSize: 11, color: 'var(--muted)' }}>
          {member.weeks_submitted_last_4}/{Math.min(member.total_weeks_tracked, 4) || 4} submitted
        </span>
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Admin — Analytics view
// ---------------------------------------------------------------------------

function AdminView() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [aiAlerts, setAiAlerts] = useState({}); // { member_id: [flags] }

  useEffect(() => {
    api('/api/admin/analytics')
      .then(setData)
      .catch(err => toast(err.message, 'error'))
      .finally(() => setLoading(false));

    // Load AI risk alerts (separate, non-blocking)
    api('/api/ai/admin-alerts')
      .then(({ alerts }) => {
        const byId = {};
        (alerts || []).forEach(a => { byId[a.member_id] = a.flags; });
        setAiAlerts(byId);
      })
      .catch(() => {}); // silent — admin view still works without AI
  }, []);

  if (loading) {
    return (
      <div className="page fade-in">
        <div style={{ padding: 60, textAlign: 'center', color: 'var(--subtext)' }}>Loading…</div>
      </div>
    );
  }

  if (!data) return null;

  const { members, summary } = data;

  const groups = [
    { key: 'green',  label: 'On Fire',             color: 'var(--green)',  members: members.filter(m => m.status === 'green')  },
    { key: 'amber',  label: 'Building Momentum',   color: '#F59E0B',       members: members.filter(m => m.status === 'amber')  },
    { key: 'red',    label: 'Needs Attention',      color: 'var(--red)',    members: members.filter(m => m.status === 'red')    },
  ];

  return (
    <div className="page fade-in" style={{ maxWidth: 1100 }}>
      <div className="page-header">
        <div className="page-title">Community</div>
        <div className="page-subtitle">
          {summary.total_members} members · {summary.submitted_this_week} submitted this week · avg score {summary.avg_engagement}
        </div>
      </div>

      {/* Summary hero */}
      <div className="hero-stat-row" style={{ marginBottom: 32 }}>
        {[
          [summary.total_members, 'Members'],
          [`${summary.submitted_this_week} / ${summary.total_members}`, 'Submitted This Week'],
          [summary.avg_engagement, 'Avg Engagement Score'],
          [money(summary.total_income_this_week), 'Community Income'],
        ].map(([val, label], i, arr) => (
          <React.Fragment key={label}>
            <div className="hero-stat">
              <div className="hero-stat-number" style={label === 'Community Income' && summary.total_income_this_week > 0 ? { color: 'var(--green)' } : {}}>
                {val}
              </div>
              <div className="hero-stat-label">{label}</div>
            </div>
            {i < arr.length - 1 && <div className="hero-stat-divider" />}
          </React.Fragment>
        ))}
      </div>

      {/* Member groups */}
      {groups.map(({ key, label, color, members: gMembers }) => {
        if (gMembers.length === 0) return null;
        return (
          <div key={key} style={{ marginBottom: 36 }}>
            <div className="admin-group-header" style={{ color }}>
              <div style={{ width: 9, height: 9, borderRadius: '50%', background: color, flexShrink: 0 }} />
              {label}
              <span style={{ color: 'var(--muted)', fontWeight: 400 }}>({gMembers.length})</span>
            </div>
            <div className="admin-grid">
              {gMembers.map(m => <MemberCard key={m.id} member={m} aiFlags={aiAlerts[m.id]} />)}
            </div>
          </div>
        );
      })}
    </div>
  );
}

// ---------------------------------------------------------------------------
// App shell
// ---------------------------------------------------------------------------

function App() {
  const [member, setMember] = useState(null);
  const [view, setView] = useState('dashboard');
  const [authChecked, setAuthChecked] = useState(false);

  useEffect(() => {
    // Handle Kondo OAuth redirect result
    const params = new URLSearchParams(window.location.search);
    if (params.get('kondo') === 'connected') {
      toast('Kondo connected successfully!');
      window.history.replaceState({}, '', window.location.pathname);
    } else if (params.get('kondo') === 'error') {
      const reason = (params.get('reason') || 'unknown').replace(/_/g, ' ');
      toast(`Kondo connection failed — ${reason}`, 'error');
      window.history.replaceState({}, '', window.location.pathname);
    }

    api('/api/auth/me')
      .then(({ member }) => { setMember(member); })
      .catch(() => {})
      .finally(() => setAuthChecked(true));
  }, []);

  async function handleLogout() {
    await api('/api/auth/logout', { method: 'POST' }).catch(() => {});
    setMember(null);
    setView('dashboard');
  }

  if (!authChecked) {
    return (
      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--navy)' }}>
        <div style={{ color: 'rgba(255,255,255,0.4)', fontFamily: 'var(--font)', fontSize: 14 }}>Loading…</div>
      </div>
    );
  }

  if (!member) {
    return <LoginScreen onLogin={setMember} />;
  }

  function renderView() {
    switch (view) {
      case 'dashboard':    return <DashboardView member={member} onNavigate={setView} />;
      case 'chat':         return <ChatView member={member} />;
      case 'lessons':      return <LessonsView />;
      case 'milestones':   return <MilestonesView member={member} onNavigate={setView} />;
      case 'metrics':      return <MetricsView member={member} />;
      case 'audit':        return <AuditView />;
      case 'plan':         return <PlanView />;
      case 'revenue':      return <RevenueView />;
      case 'message-lab':  return <MessageLabView member={member} />;
      case 'admin':        return member.role === 'admin' ? <AdminView /> : <DashboardView member={member} onNavigate={setView} />;
      default:             return <DashboardView member={member} onNavigate={setView} />;
    }
  }

  return (
    <div className="app-shell">
      <Sidebar member={member} view={view} onNavigate={setView} onLogout={handleLogout} />
      <main className="main">
        {renderView()}
      </main>
    </div>
  );
}

// Mount
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<App />);