import { useState, useEffect, useMemo, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import Layout from '../../components/Layout';
import SortTh from '../../components/SortTh';
import { supabase } from '../../lib/supabase';
import { useAuth } from '../../context/AuthContext';
import { readPageCache, writePageCache } from '../../lib/pageCache';
import { withTimeout } from '../../lib/withTimeout';
import { getDeadlineSourceSubmission } from '../../lib/taskDeadlines';
import { useSortable } from '../../hooks/useSortable';

// ─── Helpers ──────────────────────────────────────────────────────────────

const ICON_TONES = [
  { bg: 'rgba(245,165,35,0.15)', color: '#F5A523' },
  { bg: 'rgba(74,222,128,0.15)', color: '#4ade80' },
  { bg: 'rgba(96,165,250,0.15)', color: '#60a5fa' },
  { bg: 'rgba(167,139,250,0.15)', color: '#a78bfa' },
];

function iconTone(key) {
  let h = 0;
  for (let i = 0; i < (key || '').length; i++) h = (h * 31 + key.charCodeAt(i)) % ICON_TONES.length;
  return ICON_TONES[h];
}

function fmtMoney(n) {
  if (Math.abs(n) >= 1000000) return `$${(n / 1000000).toFixed(2)}M`;
  if (Math.abs(n) >= 10000) return `$${(n / 1000).toFixed(1)}k`;
  return `$${Number(n).toFixed(2)}`;
}

function buildClientHighlights(companies, projects, tasks, clientProfiles, companyMemberships = [], invoices = []) {
  const doneStatuses = ['client_approved', 'invoiced', 'paid'];
  return (companies || []).map(company => {
    const companyProjects = (projects || []).filter(p => p.company_id === company.id);
    const primaryContact = (clientProfiles || []).find(p =>
      p.company_id === company.id ||
      (companyMemberships || []).some(m => m.company_id === company.id && m.profile_id === p.id)
    );
    const openTasks = (tasks || []).filter(t => companyProjects.some(p => p.id === t.project_id) && !doneStatuses.includes(t.status));
    const companyInvoices = (invoices || []).filter(i => i.company_id === company.id);
    const outstandingTotal = companyInvoices.filter(i => i.status === 'sent').reduce((s, i) => s + Number(i.total || 0), 0);
    const paidTotal = companyInvoices.filter(i => i.status === 'paid').reduce((s, i) => s + Number(i.total || 0), 0);
    return { company, primaryContact, projectCount: companyProjects.length, openTaskCount: openTasks.length, outstandingTotal, paidTotal };
  });
}

const ACTION_ICON = {
  task_started:       { bg: 'rgba(96,165,250,0.15)',  color: '#60a5fa', path: <polygon points="6,4 20,12 6,20" fill="currentColor"/> },
  task_resumed:       { bg: 'rgba(96,165,250,0.15)',  color: '#60a5fa', path: <polygon points="6,4 20,12 6,20" fill="currentColor"/> },
  task_submitted:     { bg: 'rgba(74,222,128,0.15)',  color: '#4ade80', path: <><line x1="12" y1="19" x2="12" y2="5" strokeWidth="2" strokeLinecap="round"/><polyline points="5,12 12,5 19,12" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/></> },
  task_approved:      { bg: 'rgba(74,222,128,0.15)',  color: '#4ade80', path: <polyline points="4,13 9,18 20,7" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/> },
  task_on_hold:       { bg: 'rgba(239,68,68,0.15)',   color: '#ef4444', path: <><rect x="6" y="4" width="4" height="16" rx="1" fill="currentColor"/><rect x="14" y="4" width="4" height="16" rx="1" fill="currentColor"/></> },
  task_created:       { bg: 'rgba(167,139,250,0.15)', color: '#a78bfa', path: <><line x1="12" y1="5" x2="12" y2="19" strokeWidth="2" strokeLinecap="round"/><line x1="5" y1="12" x2="19" y2="12" strokeWidth="2" strokeLinecap="round"/></> },
  project_created:    { bg: 'rgba(245,165,35,0.15)',  color: '#F5A523', path: <><path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" fill="none" strokeWidth="1.5"/></> },
  request_submitted:  { bg: 'rgba(167,139,250,0.15)', color: '#a78bfa', path: <><rect x="5" y="3" width="14" height="18" rx="2" fill="none" strokeWidth="1.5"/><line x1="9" y1="8" x2="15" y2="8" strokeWidth="1.5" strokeLinecap="round"/><line x1="9" y1="12" x2="15" y2="12" strokeWidth="1.5" strokeLinecap="round"/><line x1="9" y1="16" x2="12" y2="16" strokeWidth="1.5" strokeLinecap="round"/></> },
  revision_requested: { bg: 'rgba(245,158,11,0.15)',  color: '#f59e0b', path: <><path d="M4 12a8 8 0 018-8v0a8 8 0 018 8" fill="none" strokeWidth="1.5" strokeLinecap="round"/><polyline points="18,8 20,12 16,12" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/></> },
};

const ACTION_LABEL = {
  task_created: 'created', task_started: 'started', task_on_hold: 'put on hold',
  task_resumed: 'resumed', task_submitted: 'submitted', task_approved: 'approved',
  project_created: 'created project', request_submitted: 'submitted', revision_requested: 'requested revision on',
};

function ActionIcon({ actionKey, size = 27 }) {
  const cfg = ACTION_ICON[actionKey] || { bg: 'rgba(255,255,255,0.08)', color: 'var(--text-muted)', path: <circle cx="12" cy="12" r="3" fill="currentColor"/> };
  return (
    <div style={{ width: size, height: size, borderRadius: '50%', background: cfg.bg, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <svg width="13" height="13" viewBox="0 0 24 24" stroke={cfg.color} fill="none" style={{ color: cfg.color }}>{cfg.path}</svg>
    </div>
  );
}

function Avatar({ name, size = 27 }) {
  const tone = iconTone(name);
  return (
    <div style={{ width: size, height: size, borderRadius: '50%', background: tone.bg, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <svg width="13" height="13" viewBox="0 0 24 24" fill={tone.color}>
        <circle cx="12" cy="8" r="4" />
        <path d="M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7" />
      </svg>
    </div>
  );
}

function InitialPortrait({ name }) {
  const tone = iconTone(name);
  return (
    <div style={{ width: 27, height: 27, borderRadius: '50%', background: tone.bg, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
      <span style={{ fontSize: 12, fontWeight: 500, color: tone.color, lineHeight: 1 }}>{(name || '?')[0].toUpperCase()}</span>
    </div>
  );
}

function smoothCurve(pts) {
  if (pts.length < 2) return '';
  let d = `M${pts[0][0].toFixed(1)},${pts[0][1].toFixed(1)}`;
  for (let i = 1; i < pts.length; i++) {
    const [x0, y0] = pts[i - 1];
    const [x1, y1] = pts[i];
    const cpX = (x0 + x1) / 2;
    d += ` C${cpX.toFixed(1)},${y0.toFixed(1)} ${cpX.toFixed(1)},${y1.toFixed(1)} ${x1.toFixed(1)},${y1.toFixed(1)}`;
  }
  return d;
}

function MiniAreaChart({ data }) {
  const W = 90, H = 42;
  if (!data || data.length < 2) return null;
  const max = Math.max(...data, 1);
  const pts = data.map((v, i) => [(i / (data.length - 1)) * W, 4 + (1 - v / max) * (H - 8)]);
  const line = smoothCurve(pts);
  const lastPt = pts[pts.length - 1];
  const firstPt = pts[0];
  const area = `${line} L${lastPt[0].toFixed(1)},${H} L${firstPt[0].toFixed(1)},${H} Z`;
  return (
    <svg width="100%" height={H} viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" style={{ display: 'block', overflow: 'hidden' }}>
      <defs>
        <linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="5%" stopColor="#F5A523" stopOpacity="0.3" />
          <stop offset="95%" stopColor="#F5A523" stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={area} fill="url(#areaGrad)" />
      <path d={line} fill="none" stroke="#F5A523" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

const DASH_ICONS = {
  revenue:  '<line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/>',
  projects: '<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>',
  tasks:    '<path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/>',
  profit:   '<line x1="12" y1="20" x2="12" y2="4"/><polyline points="5 11 12 4 19 11"/>',
};

function DashStatCard({ label, value, sub, iconBg, iconColor, iconPath, chartData }) {
  return (
    <div style={{ background: 'var(--card-bg)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 21px', display: 'flex', alignItems: 'stretch', gap: 21, minHeight: 120 }}>
      <div style={{ flexShrink: 0, display: 'flex', flexDirection: 'column', ...(chartData ? {} : { flex: 1 }) }}>
        <div style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 5 }}>{label}</div>
        <div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
          <div style={{ fontSize: 30, fontWeight: 400, color: 'var(--text-primary)', letterSpacing: -0.5, lineHeight: 1.1 }}>{value}</div>
        </div>
        {sub && <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 5 }}>{sub}</div>}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', justifyContent: 'space-between', ...(chartData ? { flex: 1, minWidth: 0 } : { flexShrink: 0 }) }}>
        <div style={{ width: 27, height: 27, borderRadius: '50%', background: iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={iconColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" dangerouslySetInnerHTML={{ __html: iconPath }} />
        </div>
        {chartData && <MiniAreaChart data={chartData} />}
      </div>
    </div>
  );
}

function ActivityFeed({ events }) {
  const navigate = useNavigate();
  const visible = events.slice(0, 5);
  return (
    <div style={{ background: 'var(--card-bg)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 21px', flexShrink: 0 }}>
      <div style={{ marginBottom: visible.length > 0 ? 14 : 0 }}>
        <span style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase' }}>Recent Activity</span>
      </div>
      {visible.length === 0 ? (
        <div style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 14 }}>No recent activity</div>
      ) : visible.map((e, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: i > 0 ? 10 : 0 }}>
          <ActionIcon actionKey={e.actionKey} />
          <div style={{ flex: 1, minWidth: 0, fontSize: 13, lineHeight: 1.4 }}>
            {e.actorId
              ? <button type="button" className="dashboard-inline-link" onClick={() => navigate(`/profile/${e.actorId}`)}>{e.name}</button>
              : <span style={{ color: 'var(--text-primary)' }}>{e.name}</span>
            }
            {e.action && <span style={{ color: 'var(--text-muted)' }}> {e.action}</span>}
            {e.task && e.taskId
              ? <><span style={{ color: 'var(--text-muted)' }}> </span><button type="button" className="dashboard-inline-link" onClick={() => navigate(`/requests/${e.taskId}`)}>{e.task}</button></>
              : e.task && <span style={{ color: 'var(--text-primary)' }}> {e.task}</span>
            }
          </div>
          <span style={{ fontSize: 11, color: 'var(--text-muted)', whiteSpace: 'nowrap', flexShrink: 0 }}>{e.time.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</span>
        </div>
      ))}
    </div>
  );
}

function getDateKey(date) {
  const d = new Date(date);
  if (Number.isNaN(d.getTime())) return null;
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
}

function profilePath(id) {
  return `/profile/${id}`;
}

function MiniCalendar({ items = [] }) {
  const navigate = useNavigate();
  const today = new Date();
  const [view, setView] = useState({ year: today.getFullYear(), month: today.getMonth() });
  const [hoveredKey, setHoveredKey] = useState(null);
  const hoverTimeout = useRef(null);
  const clearHover = () => { hoverTimeout.current = setTimeout(() => setHoveredKey(null), 120); };
  const keepHover = (k) => { clearTimeout(hoverTimeout.current); if (k) setHoveredKey(k); };
  const { year, month } = view;
  const firstDay = new Date(year, month, 1).getDay();
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const cells = [];
  for (let i = 0; i < firstDay; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(d);
  const isToday = (d) => d === today.getDate() && month === today.getMonth() && year === today.getFullYear();
  const dayKey = (d) => `${year}-${String(month + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
  const itemsByDay = useMemo(() => {
    const map = new Map();
    (items || []).forEach(item => {
      const key = getDateKey(item.deadline);
      if (!key) return;
      const list = map.get(key) || [];
      list.push(item);
      map.set(key, list);
    });
    return map;
  }, [items]);
  const activeKey = hoveredKey;
  const activeItems = (itemsByDay.get(activeKey) || []).slice().sort((a, b) => {
    if (a.isOverdue !== b.isOverdue) return a.isOverdue ? -1 : 1;
    if (a.isHot !== b.isHot) return a.isHot ? -1 : 1;
    return (a.title || '').localeCompare(b.title || '');
  });
  const monthLabel = new Date(year, month, 1).toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
  const prev = () => setView(v => v.month === 0 ? { year: v.year - 1, month: 11 } : { year: v.year, month: v.month - 1 });
  const next = () => setView(v => v.month === 11 ? { year: v.year + 1, month: 0 } : { year: v.year, month: v.month + 1 });
  const dotColor = (item) => {
    if (item.isOverdue) return '#ef4444';
    if (item.isHot) return '#F5A523';
    if (item.isDone) return '#4ade80';
    return '#60a5fa';
  };
  const activeLabel = activeKey
    ? new Date(`${activeKey}T12:00:00`).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
    : 'Selected day';
  return (
    <div style={{ position: 'relative', zIndex: activeKey ? 1001 : 0, overflow: 'visible', background: 'var(--card-bg)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 21px', flexShrink: 0 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
        <span style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase' }}>{monthLabel}</span>
        <div style={{ display: 'flex', gap: 6 }}>
          <button onClick={prev} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '2px 4px', color: 'var(--text-muted)', display: 'flex', alignItems: 'center' }}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><polyline points="15,18 9,12 15,6"/></svg>
          </button>
          <button onClick={next} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '2px 4px', color: 'var(--text-muted)', display: 'flex', alignItems: 'center' }}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><polyline points="9,18 15,12 9,6"/></svg>
          </button>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 2, textAlign: 'center' }}>
        {['S','M','T','W','T','F','S'].map((d, i) => (
          <div key={i} style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-muted)', letterSpacing: 0.5, paddingBottom: 6 }}>{d}</div>
        ))}
        {cells.map((d, i) => {
          const key = d ? dayKey(d) : null;
          const dayItems = key ? itemsByDay.get(key) || [] : [];
          const active = key && key === activeKey;
          const hasItems = dayItems.length > 0;
          return (
            <div key={i} style={{ position: 'relative' }} onMouseEnter={() => keepHover(key)} onMouseLeave={clearHover}>
              <button
                type="button"
                onClick={() => {
                  if (dayItems.length === 1) navigate(`/requests/${dayItems[0].id}`);
                }}
                disabled={!d}
                style={{
                  position: 'relative',
                  width: 28,
                  height: 28,
                  borderRadius: '50%',
                  border: active && !isToday(d) && hasItems ? '1px solid rgba(245,165,35,0.5)' : '1px solid transparent',
                  color: d ? (isToday(d) ? '#0d0d0d' : 'var(--text-secondary)') : 'transparent',
                  background: d && isToday(d) ? '#F5A523' : hasItems ? 'rgba(255,255,255,0.035)' : 'transparent',
                  fontSize: 12,
                  lineHeight: 1,
                  fontWeight: isToday(d) ? 700 : 400,
                  cursor: d && hasItems ? 'pointer' : 'default',
                  fontFamily: 'inherit',
                  padding: 0,
                }}
              >
                {d || ''}
                {hasItems && (
                  <span style={{ position: 'absolute', left: '50%', bottom: 3, transform: 'translateX(-50%)', display: 'flex', gap: 2 }}>
                    {dayItems.slice(0, 3).map((item, idx) => (
                      <span key={`${item.id}-${idx}`} style={{ width: 3, height: 3, borderRadius: '50%', background: isToday(d) ? '#0d0d0d' : dotColor(item), display: 'block' }} />
                    ))}
                  </span>
                )}
              </button>
              {active && hasItems && (
                <div onMouseEnter={() => keepHover(key)} onMouseLeave={clearHover} style={{ position: 'absolute', zIndex: 1002, right: 'calc(100% + 8px)', top: '50%', transform: 'translateY(-50%)', width: 210, padding: '10px 12px', background: 'var(--sidebar-bg)', border: '1px solid var(--border)', borderRadius: 8, boxShadow: '0 12px 32px rgba(0,0,0,0.45)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', pointerEvents: 'auto' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
                    <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{activeLabel}</span>
                    <span style={{ fontSize: 11, color: '#F5A523' }}>{activeItems.length} due</span>
                  </div>
                  {activeItems.slice(0, 4).map(item => (
                    <button key={item.id} type="button" onClick={() => navigate(`/requests/${item.id}`)} style={{ display: 'flex', alignItems: 'center', gap: 7, width: '100%', padding: '5px 0', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit' }}>
                      <span style={{ width: 6, height: 6, borderRadius: '50%', background: dotColor(item), flexShrink: 0 }} />
                      <span style={{ flex: 1, minWidth: 0, fontSize: 12, color: 'var(--text-primary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{item.title}</span>
                    </button>
                  ))}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

function TasksInProgressCard({ tasks = [] }) {
  const navigate = useNavigate();
  const { sortKey, sortDir, toggle, sort } = useSortable('task');
  const [showAll, setShowAll] = useState(false);
  const rows = sort(tasks.slice(0, 10), (t, key) => {
    if (key === 'task') return t.title || '';
    if (key === 'assigned_to') return t.assigned_name || '';
    return '';
  });
  const visibleRows = showAll ? rows : rows.slice(0, 5);
  return (
    <div style={{ background: 'var(--card-bg)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 21px', display: 'flex', flexDirection: 'column' }}>
      <div style={{ marginBottom: rows.length > 0 ? 14 : 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <span style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase' }}>Tasks In Progress</span>
        {rows.length > 5 && (
          <button type="button" className="dashboard-inline-link" style={{ fontSize: 11, fontWeight: 500, letterSpacing: 0.4, textTransform: 'uppercase' }} onClick={() => setShowAll((v) => !v)}>
            {showAll ? 'Show less' : 'Show all'}
          </button>
        )}
      </div>
      {rows.length === 0 ? (
        <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>No tasks in progress</div>
      ) : (
        <table style={{ width: '100%', borderCollapse: 'collapse', tableLayout: 'fixed' }}>
          <colgroup>
            <col style={{ width: '55%' }} />
            <col style={{ width: '45%' }} />
          </colgroup>
          <thead style={{ background: 'transparent' }}>
            <tr style={{ background: 'transparent' }}>
              <SortTh col="task" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-muted)', textAlign: 'left', letterSpacing: 0.6, textTransform: 'uppercase', padding: '0 0 12px 5px', border: 'none', background: 'transparent', verticalAlign: 'top' }}>Task</SortTh>
              <SortTh col="assigned_to" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-muted)', textAlign: 'right', letterSpacing: 0.6, textTransform: 'uppercase', padding: '0 5px 12px 0', border: 'none', background: 'transparent', verticalAlign: 'top' }}>Assigned To</SortTh>
            </tr>
          </thead>
          <tbody>
            {visibleRows.map((t) => (
              <tr key={t.id} style={{ background: 'transparent' }}>
                <td style={{ fontSize: 13, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', padding: '5px', border: 'none', background: 'transparent', textAlign: 'left' }}>
                  <button type="button" className="dashboard-inline-link" onClick={() => navigate('/requests/' + t.id)}>{t.title}</button>
                </td>
                <td style={{ fontSize: 12, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', padding: '5px', border: 'none', background: 'transparent', textAlign: 'right' }}>
                  {t.assigned_to
                    ? <button type="button" className="dashboard-inline-link" onClick={() => navigate(profilePath(t.assigned_to, t.assignee_role))}>{t.assigned_name || 'Profile'}</button>
                    : (t.assigned_name || '—')}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}

function HotItemsCard({ submissions, tasks }) {
  const navigate = useNavigate();
  const { sortKey, sortDir, toggle, sort } = useSortable('deadline');
  const taskMap = new Map((tasks || []).map(t => [t.id, t]));
  const seen = new Set();
  const hotItems = (submissions || [])
    .filter(s => s.is_hot && !seen.has(s.task_id) && seen.add(s.task_id))
    .map(s => ({ ...s, task: taskMap.get(s.task_id) }))
    .filter(s => s.task)
    .sort((a, b) => {
      if (!a.deadline && !b.deadline) return 0;
      if (!a.deadline) return 1;
      if (!b.deadline) return -1;
      return new Date(a.deadline) - new Date(b.deadline);
    })
    .slice(0, 7);
  const sortedHotItems = sort(hotItems, (s, key) => {
    if (key === 'task') return s.task?.title || '';
    if (key === 'requested_by') return s.submitted_by_name || '';
    if (key === 'deadline') return s.deadline || '';
    return '';
  });
  return (
    <div style={{ background: 'var(--card-bg)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 21px', display: 'flex', flexDirection: 'column' }}>
      <div style={{ marginBottom: hotItems.length > 0 ? 14 : 0, flexShrink: 0 }}>
        <span style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase' }}>Hot Tasks</span>
      </div>
      {hotItems.length === 0 ? (
        <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>No hot tasks</div>
      ) : (
        <table style={{ width: '100%', borderCollapse: 'collapse', tableLayout: 'fixed' }}>
          <colgroup>
            <col style={{ width: '10%' }} />
            <col style={{ width: '40%' }} />
            <col style={{ width: '35%' }} />
            <col style={{ width: '15%' }} />
          </colgroup>
          <thead style={{ background: 'transparent' }}>
            <tr style={{ background: 'transparent' }}>
              <th style={{ padding: '0 0 12px 0', border: 'none', background: 'transparent', verticalAlign: 'top', textAlign: 'center' }} />
              <SortTh col="task" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-muted)', textAlign: 'left', letterSpacing: 0.6, textTransform: 'uppercase', padding: '0 0 12px 5px', border: 'none', background: 'transparent', verticalAlign: 'top' }}>Task</SortTh>
              <SortTh col="requested_by" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-muted)', textAlign: 'center', letterSpacing: 0.6, textTransform: 'uppercase', padding: '0 0 12px 0', border: 'none', background: 'transparent', verticalAlign: 'top' }}>Requested By</SortTh>
              <SortTh col="deadline" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-muted)', textAlign: 'center', letterSpacing: 0.6, textTransform: 'uppercase', padding: '0 0 12px 0', border: 'none', background: 'transparent', verticalAlign: 'top' }}>Due By</SortTh>
            </tr>
          </thead>
          <tbody>
            {sortedHotItems.map(s => (
              <tr key={s.task_id} style={{ verticalAlign: 'middle', background: 'transparent' }}>
                <td style={{ padding: '3px 5px 7px', border: 'none', background: 'transparent', textAlign: 'center', verticalAlign: 'middle' }}>
                  {s.task.status === 'client_approved' ? (
                    <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="rgba(74,222,128,0.8)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ display: 'block', margin: '0 auto' }}>
                      <rect x="1.5" y="1.5" width="13" height="13" rx="2"/><polyline points="4,8 6.5,10.5 12,5.5"/>
                    </svg>
                  ) : (
                    <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="var(--text-muted)" strokeWidth="1.5" strokeLinecap="round" style={{ display: 'block', margin: '0 auto' }}>
                      <rect x="1.5" y="1.5" width="13" height="13" rx="2"/>
                    </svg>
                  )}
                </td>
                <td style={{ fontSize: 13, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', padding: '5px', border: 'none', background: 'transparent', textAlign: 'left' }}>
                  <button type="button" className="dashboard-inline-link" onClick={() => navigate('/requests/' + s.task_id)}>{s.task.title}</button>
                </td>
                <td style={{ fontSize: 12, color: 'var(--text-primary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px', border: 'none', background: 'transparent', textAlign: 'center' }}>
                  {s.submitted_by ? (
                    <button type="button" className="dashboard-inline-link" onClick={() => navigate(profilePath(s.submitted_by, s.submitter_role))}>{s.submitted_by_name || 'Profile'}</button>
                  ) : (s.submitted_by_name || '—')}
                </td>
                <td style={{ fontSize: 12, color: 'var(--text-primary)', whiteSpace: 'nowrap', textAlign: 'center', padding: '5px', border: 'none', background: 'transparent' }}>{s.deadline ? new Date(s.deadline).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : '—'}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}

function ClientHighlightCard({ highlights }) {
  const navigate = useNavigate();
  const { sortKey, sortDir, toggle, sort } = useSortable('company');
  const fmt = (n) => `$${Number(n || 0).toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`;
  const thStyle = { fontSize: 10, fontWeight: 500, color: 'var(--text-muted)', textAlign: 'center', letterSpacing: 0.6, textTransform: 'uppercase', padding: '0 0 12px 0', border: 'none', background: 'transparent', verticalAlign: 'top' };
  const td = () => ({ padding: '5px', border: 'none', background: 'transparent', textAlign: 'center', verticalAlign: 'middle' });
  const sortedHighlights = sort(highlights || [], (row, key) => {
    if (key === 'company') return row.company?.name || '';
    if (key === 'contact') return row.primaryContact?.name || '';
    if (key === 'projects') return row.projectCount || 0;
    if (key === 'open_tasks') return row.openTaskCount || 0;
    if (key === 'outstanding') return Number(row.outstandingTotal || 0);
    if (key === 'paid') return Number(row.paidTotal || 0);
    return '';
  });
  return (
    <div style={{ background: 'var(--card-bg)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 21px', display: 'flex', flexDirection: 'column' }}>
      <div style={{ marginBottom: highlights && highlights.length > 0 ? 14 : 0, flexShrink: 0 }}>
        <span style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase' }}>Client Highlight</span>
      </div>
      {!highlights || highlights.length === 0 ? (
        <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>No data</div>
      ) : (
        <table style={{ width: '100%', borderCollapse: 'collapse', tableLayout: 'fixed' }}>
          <colgroup>
            <col style={{ width: '5%' }} />
            <col style={{ width: '22%' }} />
            <col style={{ width: '23%' }} />
            <col style={{ width: '13%' }} />
            <col style={{ width: '13%' }} />
            <col style={{ width: '12%' }} />
            <col style={{ width: '12%' }} />
          </colgroup>
          <thead style={{ background: 'transparent' }}>
            <tr style={{ background: 'transparent' }}>
              <th style={{ ...thStyle, padding: '0 0 12px 5px' }} />
              <SortTh col="company" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ ...thStyle, textAlign: 'left', paddingLeft: 5 }}>Company</SortTh>
              <SortTh col="contact" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={thStyle}>Contact</SortTh>
              <SortTh col="projects" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={thStyle}>Projects</SortTh>
              <SortTh col="open_tasks" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={thStyle}>Open Tasks</SortTh>
              <SortTh col="outstanding" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={thStyle}>Outstanding</SortTh>
              <SortTh col="paid" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={thStyle}>Paid</SortTh>
            </tr>
          </thead>
          <tbody>
            {sortedHighlights.map(({ company, primaryContact, projectCount, openTaskCount, outstandingTotal = 0, paidTotal = 0 }) => (
              <tr key={company.id} style={{ background: 'transparent' }}>
                <td style={{ ...td(), padding: '3px 5px 7px' }}>
                  <InitialPortrait name={company.name} />
                </td>
                <td style={{ ...td(), fontSize: 13, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'left' }}>
                  <button type="button" className="dashboard-inline-link" onClick={() => navigate(`/company/${company.id}`)}>{company.name}</button>
                </td>
                <td style={{ ...td(), fontSize: 12, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {primaryContact?.id ? (
                    <button type="button" className="dashboard-inline-link" onClick={() => navigate(profilePath(primaryContact.id, primaryContact.role))}>{primaryContact.name || 'Profile'}</button>
                  ) : (primaryContact?.name || '—')}
                </td>
                <td style={{ ...td(), fontSize: 12, color: 'var(--text-primary)' }}>{projectCount}</td>
                <td style={{ ...td(), fontSize: 12, color: 'var(--text-primary)' }}>{openTaskCount || 0}</td>
                <td style={{ ...td(), fontSize: 12, color: '#F5A523' }}>{fmt(outstandingTotal)}</td>
                <td style={{ ...td(), fontSize: 12, color: '#4ade80' }}>{fmt(paidTotal)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}

function TeamPerformanceCard({ tasks, profiles }) {
  const navigate = useNavigate();
  const profileMap = useMemo(() => {
    const m = new Map();
    (profiles || []).forEach(p => m.set(p.id, p));
    return m;
  }, [profiles]);
  const doneStatuses = ['client_approved', 'invoiced', 'paid'];
  const allMonthOpts = useMemo(() => {
    const opts = [];
    const now = new Date();
    for (let i = 0; i < 6; i++) {
      const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
      opts.push({ value: `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`, label: i === 0 ? 'This Month' : d.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }) });
    }
    return opts;
  }, []);
  const monthsWithData = useMemo(() => new Set(
    (tasks || []).filter(t => doneStatuses.includes(t.status) && t.completed_at).map(t => {
      const d = new Date(t.completed_at);
      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
    })
  ), [tasks]); // eslint-disable-line react-hooks/exhaustive-deps
  const monthOpts = allMonthOpts.filter(o => monthsWithData.has(o.value));
  const [monthKey, setMonthKey] = useState(() => monthOpts[0]?.value || allMonthOpts[0].value);

  const { people, totalDone } = useMemo(() => {
    const [year, month] = monthKey.split('-').map(Number);
    const map = new Map();
    (tasks || []).forEach(t => {
      if (!doneStatuses.includes(t.status) || !t.completed_at) return;
      const d = new Date(t.completed_at);
      if (d.getFullYear() !== year || d.getMonth() + 1 !== month) return;
      if (!t.assigned_name) return;
      const entry = map.get(t.assigned_name) || { name: t.assigned_name, id: t.assigned_to || null, newCount: 0, revCount: 0 };
      if ((t.current_version || 0) === 0) entry.newCount += 1;
      else entry.revCount += 1;
      map.set(t.assigned_name, entry);
    });
    const people = [...map.values()].map(p => ({ ...p, done: p.newCount + p.revCount })).sort((a, b) => b.done - a.done);
    return { people, totalDone: people.reduce((s, p) => s + p.done, 0) };
  }, [tasks, monthKey]); // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <div style={{ background: 'var(--card-bg)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 21px', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14, flexShrink: 0 }}>
        <span style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase' }}>Team Performance</span>
        <div style={{ position: 'relative', display: 'inline-flex', alignItems: 'center' }}>
          <select value={monthKey} onChange={e => setMonthKey(e.target.value)} style={{ fontSize: 11, color: 'var(--text-muted)', background: 'transparent', border: 'none', boxShadow: 'none', cursor: 'pointer', outline: 'none', fontFamily: 'inherit', appearance: 'none', WebkitAppearance: 'none', MozAppearance: 'none', paddingRight: 14 }}>
            {monthOpts.map(o => <option key={o.value} value={o.value} style={{ background: '#1a1a1a' }}>{o.label}</option>)}
          </select>
          <svg width="8" height="8" viewBox="0 0 8 8" fill="none" style={{ position: 'absolute', right: 0, pointerEvents: 'none' }} stroke="rgba(255,255,255,0.5)" strokeWidth="1.5" strokeLinecap="round"><polyline points="1,2 4,6 7,2"/></svg>
        </div>
      </div>
      {people.slice(0, 5).length === 0 ? (
        <div style={{ fontSize: 13, color: 'var(--text-muted)', flex: 1 }}>No completed tasks this month</div>
      ) : (
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
          {people.slice(0, 5).map((p, i) => {
            const pct = totalDone > 0 ? Math.round((p.done / totalDone) * 100) : 0;
            const tone = iconTone(p.name);
            return (
              <div key={p.name} style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: i > 0 ? 10 : 0 }}>
                {(() => { const prof = p.id ? profileMap.get(p.id) : null; const tone = iconTone(p.name); return prof?.avatar_url ? <div style={{ width: 27, height: 27, borderRadius: '50%', flexShrink: 0, overflow: 'hidden' }}><img src={prof.avatar_url} alt={p.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /></div> : <Avatar name={p.name} />; })()}
                <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 4 }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    {p.id ? <button type="button" className="dashboard-inline-link" style={{ fontSize: 13, fontWeight: 400, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} onClick={() => navigate(`/profile/${p.id}`)}>{p.name}</button> : <span style={{ fontSize: 13, color: 'var(--text-primary)', fontWeight: 400, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</span>}
                    <span style={{ fontSize: 11, color: 'var(--text-muted)', flexShrink: 0, marginLeft: 8 }}>{p.newCount} new · {p.revCount} revision</span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <div style={{ flex: 1, height: 4, borderRadius: 2, background: tone.bg, overflow: 'hidden' }}>
                      <div style={{ height: '100%', borderRadius: 2, background: tone.color, width: `${pct}%`, transition: 'width 0.3s ease' }} />
                    </div>
                    <span style={{ fontSize: 11, color: 'var(--text-muted)', minWidth: 28, textAlign: 'right' }}>{pct}%</span>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

// ─── Page ──────────────────────────────────────────────────────────────────

const CACHE_KEY = 'team_dashboard_v2';
const CUTOFF_MONTHS = 6;

export default function TeamDashboard() {
  const { currentUser } = useAuth();
  const isTeam     = currentUser?.role === 'team';
  const isClient   = currentUser?.role === 'client';
  const isExternal = currentUser?.role === 'external';
  const cached = isTeam ? readPageCache(CACHE_KEY, 5 * 60_000) : null;

  const [tasks, setTasks] = useState(() => cached?.tasks || []);
  const [projects, setProjects] = useState(() => cached?.projects || []);
  const [submissions, setSubmissions] = useState(() => cached?.submissions || []);
  const [allCompanies, setAllCompanies] = useState(() => cached?.companies || []);
  const [clientProfiles, setClientProfiles] = useState(() => cached?.clientProfiles || []);
  const [companyMemberships, setCompanyMemberships] = useState(() => cached?.companyMemberships || []);
  const [activityLog, setActivityLog] = useState(() => cached?.activityLog || []);
  const [allProfiles, setAllProfiles] = useState(() => cached?.allProfiles || []);
  const [teamInvoices, setTeamInvoices] = useState(() => cached?.teamInvoices || []);
  const [teamExpenses, setTeamExpenses] = useState([]);
  const [myInvoices, setMyInvoices]     = useState([]);
  const [loading, setLoading]           = useState(!cached);

  useEffect(() => {
    let cancelled = false;

    async function loadTeam() {
      try {
        const cutoff = new Date();
        cutoff.setMonth(cutoff.getMonth() - CUTOFF_MONTHS);
        const cutoffStr = cutoff.toISOString();
        const [{ data: t }, { data: p }, { data: subs }, { data: profiles }, { data: activity }, { data: cos }, { data: memRows }] = await withTimeout(Promise.all([
          supabase.from('tasks').select('id, title, status, current_version, project_id, assigned_name, assigned_to, completed_at').gte('submitted_at', cutoffStr).order('submitted_at', { ascending: false }),
          supabase.from('projects').select('id, name, status, company_id'),
          supabase.from('submissions').select('task_id, version_number, deadline, type, submitted_by, submitted_by_name, is_hot, delivery:deliveries(sent_by, sent_at)').gte('submitted_at', cutoffStr).order('version_number', { ascending: false }),
          supabase.from('profiles').select('id, role, name, email, company_id, brand_book_rate, avatar_url'),
          supabase.from('activity_log').select('id, created_at, actor_id, actor_name, action, task_id, task_title, project_name, project_id').order('created_at', { ascending: false }).limit(20),
          supabase.from('companies').select('id, name').order('name'),
          supabase.from('company_members').select('company_id, profile_id'),
        ]), 30000, 'TeamDashboard load');
        if (cancelled) return;
        const roleById = new Map((profiles || []).map(pr => [pr.id, pr.role]));
        const roleByName = new Map((profiles || []).map(pr => [pr.name, pr.role]));
        const tasksWithDeadlines = (t || []).map(task => ({ ...task, deadline: getDeadlineSourceSubmission(task, subs)?.deadline || null, assignee_role: roleById.get(task.assigned_to) || null }));
        const subsWithRole = (subs || []).map(sub => ({ ...sub, submitter_role: roleById.get(sub.submitted_by) || null, delivery_sender_role: roleByName.get(sub.delivery?.sent_by) || null }));
        setTasks(tasksWithDeadlines); setProjects(p || []); setSubmissions(subsWithRole);
        setClientProfiles((profiles || []).filter(pr => pr.role === 'client'));
        setAllProfiles(profiles || []); setAllCompanies(cos || []); setCompanyMemberships(memRows || []); setActivityLog(activity || []);
        writePageCache(CACHE_KEY, { tasks: tasksWithDeadlines, projects: p || [], submissions: subsWithRole, clientProfiles: (profiles || []).filter(pr => pr.role === 'client'), companies: cos || [], companyMemberships: memRows || [], activityLog: activity || [], teamInvoices: [] });
        supabase.from('invoices').select('total, status, company_id, created_at').in('status', ['sent', 'paid']).then(({ data: invs }) => { if (invs && !cancelled) setTeamInvoices(invs); });
        supabase.from('expenses').select('amount').then(({ data: exps }) => { if (exps && !cancelled) setTeamExpenses(exps); });
      } catch (err) { console.error('TeamDashboard load failed:', err); }
      finally { if (!cancelled) setLoading(false); }
    }

    async function loadClient() {
      const uid = currentUser?.id;
      const companyIds = [...new Set([...(currentUser?.companies?.map(c => c.company?.id || c.id) || []), ...(currentUser?.company_id ? [currentUser.company_id] : [])])].filter(Boolean);
      try {
        const { data: mySubData } = await supabase.from('submissions').select('task_id').eq('submitted_by', uid).eq('type', 'initial');
        const myTaskIds = (mySubData || []).map(s => s.task_id);
        const [{ data: t }, { data: p }, { data: subs }, { data: activity }, { data: invs }, { data: profiles }] = await withTimeout(Promise.all([
          myTaskIds.length ? supabase.from('tasks').select('id, title, status, current_version, project_id, assigned_name, assigned_to, completed_at').in('id', myTaskIds) : Promise.resolve({ data: [] }),
          companyIds.length ? supabase.from('projects').select('id, name, status, company_id').in('company_id', companyIds) : Promise.resolve({ data: [] }),
          myTaskIds.length ? supabase.from('submissions').select('task_id, version_number, deadline, type, submitted_by, submitted_by_name, is_hot').in('task_id', myTaskIds) : Promise.resolve({ data: [] }),
          supabase.from('activity_log').select('id, created_at, actor_id, actor_name, action, task_id, task_title, project_name, project_id').order('created_at', { ascending: false }).limit(50),
          companyIds.length ? supabase.from('invoices').select('total, status').in('company_id', companyIds).in('status', ['sent', 'paid']) : Promise.resolve({ data: [] }),
          supabase.from('profiles').select('id, name, avatar_url'),
        ]), 20000, 'ClientDashboard load');
        if (cancelled) return;
        const projectIds = new Set((p || []).map(proj => proj.id));
        setTasks((t || []).map(task => ({ ...task, deadline: getDeadlineSourceSubmission(task, subs)?.deadline || null })));
        setProjects(p || []); setSubmissions(subs || []); setAllProfiles(profiles || []);
        setActivityLog((activity || []).filter(e => !e.project_id || projectIds.has(e.project_id)).slice(0, 20));
        setMyInvoices(invs || []);
      } catch (err) { console.error('ClientDashboard load failed:', err); }
      finally { if (!cancelled) setLoading(false); }
    }

    async function loadExternal() {
      const uid = currentUser?.id;
      try {
        const { data: memberData } = await supabase.from('project_members').select('project_id').eq('profile_id', uid);
        const myProjectIds = (memberData || []).map(m => m.project_id);
        const [{ data: t }, { data: p }, { data: subs }, { data: activity }, { data: subInvs }, { data: profiles }] = await withTimeout(Promise.all([
          supabase.from('tasks').select('id, title, status, current_version, project_id, assigned_name, assigned_to, completed_at').eq('assigned_to', uid),
          myProjectIds.length ? supabase.from('projects').select('id, name, status, company_id').in('id', myProjectIds) : Promise.resolve({ data: [] }),
          supabase.from('submissions').select('task_id, version_number, deadline, type, submitted_by, submitted_by_name, is_hot').eq('submitted_by', uid),
          supabase.from('activity_log').select('id, created_at, actor_id, actor_name, action, task_id, task_title, project_name, project_id').order('created_at', { ascending: false }).limit(50),
          supabase.from('subcontractor_invoices').select('total, status').eq('profile_id', uid).in('status', ['submitted', 'approved', 'paid']),
          supabase.from('profiles').select('id, name, avatar_url'),
        ]), 20000, 'ExternalDashboard load');
        if (cancelled) return;
        const projectIdSet = new Set(myProjectIds);
        setTasks((t || []).map(task => ({ ...task, deadline: getDeadlineSourceSubmission(task, subs)?.deadline || null })));
        setProjects(p || []); setSubmissions(subs || []); setAllProfiles(profiles || []);
        setActivityLog((activity || []).filter(e => !e.project_id || projectIdSet.has(e.project_id)).slice(0, 20));
        setMyInvoices(subInvs || []);
      } catch (err) { console.error('ExternalDashboard load failed:', err); }
      finally { if (!cancelled) setLoading(false); }
    }

    if (isTeam) loadTeam();
    else if (isClient) loadClient();
    else if (isExternal) loadExternal();

    return () => { cancelled = true; };
  }, [isTeam, isClient, isExternal, currentUser?.id]); // eslint-disable-line react-hooks/exhaustive-deps

  const teamHighlights = useMemo(() =>
    isTeam ? buildClientHighlights(allCompanies, projects, tasks, clientProfiles, companyMemberships, teamInvoices)
      .sort((a, b) => b.openTaskCount - a.openTaskCount || b.projectCount - a.projectCount || a.company.name.localeCompare(b.company.name))
      .slice(0, 5) : [],
  [isTeam, allCompanies, projects, tasks, clientProfiles, companyMemberships, teamInvoices]);

  const activityEvents = useMemo(() =>
    (activityLog || []).map(e => ({
      time: new Date(e.created_at),
      name: e.actor_name || 'Fourge',
      actorId: e.actor_id || null,
      actionKey: e.action,
      action: ACTION_LABEL[e.action] || e.action,
      task: e.task_title || null,
      taskId: e.task_id || null,
      project: e.project_name || null,
      projectId: e.project_id || null,
    })).filter(e => !isNaN(e.time)).slice(0, 10),
  [activityLog]);

  if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;

  const doneStatuses = ['client_approved', 'invoiced', 'paid'];
  const inProgressTasks = tasks.filter(t => t.status === 'in_progress');
  const activeTasks = tasks.filter(t => !doneStatuses.includes(t.status));
  const activeProjects = projects.filter(p => p.status !== 'completed' && p.status !== 'cancelled');
  const hotTaskIds = new Set((submissions || []).filter(s => s.is_hot).map(s => s.task_id));
  const calendarItems = tasks
    .filter(t => t.deadline)
    .map(t => {
      const deadlineKey = getDateKey(t.deadline);
      return {
        id: t.id,
        title: t.title,
        deadline: t.deadline,
        isHot: hotTaskIds.has(t.id),
        isDone: doneStatuses.includes(t.status),
        isOverdue: deadlineKey && deadlineKey < getDateKey(new Date()) && !doneStatuses.includes(t.status),
      };
    });
  const dashRevenue       = teamInvoices.filter(i => i.status === 'paid').reduce((s, i) => s + Number(i.total || 0), 0);
  const dashOutstanding   = teamInvoices.filter(i => i.status === 'sent').reduce((s, i) => s + Number(i.total || 0), 0);
  const dashExpensesTotal = teamExpenses.reduce((s, e) => s + Number(e.amount || 0), 0);
  const revenueByMonth    = Array.from({ length: 4 }, (_, i) => {
    const now = new Date();
    const start = new Date(now.getFullYear(), now.getMonth() - (3 - i), 1);
    const end   = new Date(now.getFullYear(), now.getMonth() - (3 - i) + 1, 1);
    return teamInvoices.filter(inv => inv.status === 'paid' && inv.created_at && new Date(inv.created_at) >= start && new Date(inv.created_at) < end).reduce((s, inv) => s + Number(inv.total || 0), 0);
  });

  const myPaid        = myInvoices.filter(i => i.status === 'paid').reduce((s, i) => s + Number(i.total || 0), 0);
  const myOutstanding = myInvoices.filter(i => i.status !== 'paid').reduce((s, i) => s + Number(i.total || 0), 0);

  const card3 = isTeam
    ? { label: 'Net Profit',   value: fmtMoney(dashRevenue - dashExpensesTotal), sub: `${fmtMoney(dashExpensesTotal)} expenses`, iconBg: 'rgba(74,222,128,0.15)',  iconColor: '#4ade80', iconPath: DASH_ICONS.profit }
    : isClient
      ? { label: 'Outstanding', value: fmtMoney(myOutstanding), sub: 'invoices due',        iconBg: 'rgba(245,165,35,0.15)', iconColor: '#F5A523', iconPath: DASH_ICONS.revenue }
      : { label: 'Pending',     value: fmtMoney(myOutstanding), sub: 'awaiting payment',    iconBg: 'rgba(245,165,35,0.15)', iconColor: '#F5A523', iconPath: DASH_ICONS.revenue };

  const card4 = isTeam
    ? { label: 'Revenue', value: fmtMoney(dashRevenue), sub: `${fmtMoney(dashOutstanding)} outstanding`, iconBg: 'rgba(245,165,35,0.15)', iconColor: '#F5A523', iconPath: DASH_ICONS.revenue, chartData: revenueByMonth }
    : isClient
      ? { label: 'Paid', value: fmtMoney(myPaid), sub: 'total paid to Fourge',  iconBg: 'rgba(74,222,128,0.15)', iconColor: '#4ade80', iconPath: DASH_ICONS.profit }
      : { label: 'Paid', value: fmtMoney(myPaid), sub: 'total paid by Fourge',  iconBg: 'rgba(74,222,128,0.15)', iconColor: '#4ade80', iconPath: DASH_ICONS.profit };

  return (
    <Layout>
      <div className="dash-stat-grid" style={{ gridTemplateColumns: '1fr 1fr 1fr 1.5fr', marginBottom: 0 }}>
        <DashStatCard label="Open Tasks"      value={activeTasks.length}    sub="not complete"              iconBg="rgba(167,139,250,0.15)" iconColor="#a78bfa" iconPath={DASH_ICONS.tasks} />
        <DashStatCard label="Active Projects" value={activeProjects.length} sub={`${projects.length} total`} iconBg="rgba(96,165,250,0.15)"  iconColor="#60a5fa" iconPath={DASH_ICONS.projects} />
        <DashStatCard label={card3.label} value={card3.value} sub={card3.sub} iconBg={card3.iconBg} iconColor={card3.iconColor} iconPath={card3.iconPath} />
        <DashStatCard label={card4.label} value={card4.value} sub={card4.sub} iconBg={card4.iconBg} iconColor={card4.iconColor} iconPath={card4.iconPath} chartData={card4.chartData} />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 280px', gap: 24, marginTop: 24 }}>
        <ActivityFeed events={activityEvents} />
        <TasksInProgressCard tasks={inProgressTasks} />
        <MiniCalendar items={calendarItems} />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 24 }}>
        <HotItemsCard submissions={submissions} tasks={tasks} />
        <TeamPerformanceCard tasks={tasks} profiles={allProfiles} />
      </div>
      {isTeam && (
        <div style={{ marginTop: 24 }}>
          <ClientHighlightCard highlights={teamHighlights} />
        </div>
      )}
    </Layout>
  );
}
