// Client Portal screen — the client-facing view (previewed inside the agency app).
(() => {
const { Card, Badge, Avatar } = window.TechyFuelOSDesignSystem_be0222;

function mimeIcon(mime) {
  if (!mime) return { icon: 'file', tone: 'var(--slate-400)' };
  if (mime.includes('pdf'))   return { icon: 'file-text',      tone: 'var(--red-500)' };
  if (mime.includes('image')) return { icon: 'image',          tone: 'var(--violet-500)' };
  if (mime.includes('video')) return { icon: 'video',          tone: 'var(--blue-500)' };
  if (mime.includes('zip'))   return { icon: 'folder-archive', tone: 'var(--amber-500)' };
  if (mime.includes('sheet') || mime.includes('excel') || mime.includes('csv')) return { icon: 'table', tone: 'var(--green-600)' };
  if (mime.includes('word') || mime.includes('doc')) return { icon: 'file-text', tone: 'var(--blue-600)' };
  return { icon: 'file', tone: 'var(--slate-400)' };
}
function fmtSize(bytes) {
  if (!bytes) return '—';
  if (bytes >= 1073741824) return (bytes / 1073741824).toFixed(1) + ' GB';
  if (bytes >= 1048576)    return Math.round(bytes / 1048576) + ' MB';
  if (bytes >= 1024)       return Math.round(bytes / 1024) + ' KB';
  return bytes + ' B';
}
function fmtDate(ds) {
  if (!ds) return '—';
  return new Date(ds).toLocaleDateString('en', { month: 'short', day: 'numeric', year: 'numeric' });
}
function fmtWhen(ds) {
  if (!ds) return '';
  const diff = Math.round((Date.now() - new Date(ds)) / 3600000);
  if (diff < 1) return 'Just now';
  if (diff < 24) return diff + 'h ago';
  if (diff < 48) return 'Yesterday';
  return fmtDate(ds);
}
function fmtAmt(n, currency) {
  if (!n && n !== 0) return '—';
  const symbols = { USD: '$', EUR: '€', GBP: '£', AED: 'AED ', SAR: 'SAR ', PKR: '₨', CAD: 'CA$', AUD: 'A$' };
  return (symbols[currency] || '$') + Number(n).toLocaleString();
}

function getProjectHealth(tasks) {
  if (!tasks || tasks.length === 0) return { label: 'No tasks', color: 'var(--slate-400)' };
  const total    = tasks.length;
  const done     = tasks.filter(t => t.status === 'done' || t.status === 'completed').length;
  const overdue  = tasks.filter(t => t.due_date && new Date(t.due_date) < new Date() && t.status !== 'done' && t.status !== 'completed').length;
  if (overdue > 0) return { label: 'At risk', color: 'var(--red-500)' };
  if (done / total >= 0.8) return { label: 'On track', color: 'var(--green-600)' };
  return { label: 'In progress', color: 'var(--amber-500)' };
}

function taskToMilestone(task) {
  if (task.status === 'done' || task.status === 'completed') return 'done';
  if (task.status === 'in_progress') return 'active';
  return 'todo';
}

// Shares Finance.jsx's buildInvoiceHtml so the client portal's own PDF
// download always matches the branded template staff see in Finance —
// not a second, separately-maintained template that drifts out of sync.
function downloadInvoicePDF(inv, clients) {
  if (!window.buildInvoiceHtml) return;
  const printScript = '<script>window.onload = function() { window.print(); };<\/script>';
  const html = window.buildInvoiceHtml(inv, clients).replace('</body>', printScript + '</body>');
  const win = window.open('', '_blank', 'width=900,height=700');
  if (win) { win.document.write(html); win.document.close(); }
}

function ClientPortal() {
  useLucide();
  const [clients,    setClients]    = React.useState([]);
  const [clientId,   setClientId]   = React.useState(null);
  const [client,     setClient]     = React.useState(null);
  const [project,    setProject]    = React.useState(null);
  const [tasks,      setTasks]      = React.useState([]);
  const [invoice,    setInvoice]    = React.useState(null);
  const [files,      setFiles]      = React.useState([]);
  const [approvals,   setApprovals]   = React.useState([]);
  const [manager,     setManager]     = React.useState('');
  const [loading,     setLoading]     = React.useState(true);
  const [clientDrop,  setClientDrop]  = React.useState(false);
  const [notes,       setNotes]       = React.useState([]);
  const [noteText,    setNoteText]    = React.useState('');
  const [inviteLink,  setInviteLink]  = React.useState('');
  const [inviteCopied, setInviteCopied] = React.useState(false);
  const [showNotes,   setShowNotes]   = React.useState(false);

  // Load clients list
  React.useEffect(() => {
    if (!window.API) return;
    (async () => {
      try {
        const { data } = await window.API.getClients();
        if (Array.isArray(data) && data.length > 0) {
          setClients(data);
          const first = data.find(c => c.status === 'active') || data[0];
          setClientId(first.id);
        }
      } catch {}
    })();
  }, []);

  // Load data for selected client
  React.useEffect(() => {
    if (!clientId || !window.API) { setLoading(false); return; }
    setLoading(true);

    (async () => {
      try {
        const selected = clients.find(c => c.id === clientId);
        setClient(selected || null);

        const [pRes, iRes, fRes, cRes, tRes] = await Promise.all([
          window.API.getProjects().catch(() => ({})),
          window.API.getInvoices().catch(() => ({})),
          window.API.getFiles({ clientId }).catch(() => ({})),
          window.API.getContent({ clientId }).catch(() => ({})),
          window.API.getTeam().catch(() => ({})),
        ]);

        let proj = null;
        if (pRes.data) {
          proj = pRes.data.find(x => x.client_id === clientId) || pRes.data[0] || null;
          setProject(proj);
        }

        // Load tasks for this project
        if (proj) {
          try {
            const { data: taskData } = await window.API.getTasks({ projectId: proj.id });
            setTasks(taskData || []);
          } catch { setTasks([]); }
        } else {
          setTasks([]);
        }

        if (iRes.data) {
          const unpaid = iRes.data.find(x => x.client_id === clientId && x.status !== 'paid');
          const latest = iRes.data.find(x => x.client_id === clientId) || iRes.data[0];
          setInvoice(unpaid || latest || null);
        }

        if (fRes.data) setFiles(fRes.data);

        if (cRes.data) {
          const pending = cRes.data.filter(p => ['draft', 'approval', 'scheduled'].includes(p.status));
          setApprovals(pending.slice(0, 6));
        }

        if (tRes.data && tRes.data.length > 0) {
          const m = tRes.data[0];
          setManager(m.name);
        }

        // Load private notes
        if (window.API.getClientNotes) {
          try { const { data: notesData } = await window.API.getClientNotes(clientId); setNotes(notesData || []); } catch {}
        }

        // Load or generate invite link
        if (window.API.getClientInvite) {
          try {
            const { data: inv } = await window.API.getClientInvite(clientId);
            if (inv?.token) setInviteLink(`${window.location.origin}/portal?token=${inv.token}`);
          } catch {}
        }
      } catch (_) {}
      setLoading(false);
    })();
  }, [clientId, clients]);

  async function addNote() {
    if (!noteText.trim() || !clientId || !window.API?.createClientNote) return;
    try {
      const { data } = await window.API.createClientNote({ client_id: clientId, project_id: project?.id, content: noteText.trim(), created_by: window.TFMyMemberId || undefined });
      if (data) setNotes(prev => [data, ...prev]);
      setNoteText('');
    } catch {}
  }

  async function deleteNote(id) {
    if (!window.API?.deleteClientNote) return;
    try { await window.API.deleteClientNote(id); setNotes(prev => prev.filter(n => n.id !== id)); } catch {}
  }

  async function generateInvite() {
    if (!clientId || !window.API?.createClientInvite) return;
    try {
      const { data } = await window.API.createClientInvite({ client_id: clientId });
      if (data?.token) {
        const link = `${window.location.origin}/portal?token=${data.token}`;
        setInviteLink(link);
        navigator.clipboard.writeText(link).catch(() => {});
        setInviteCopied(true);
        setTimeout(() => setInviteCopied(false), 2000);
      }
    } catch {
      // Demo fallback
      const token = Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);
      const link = `${window.location.origin}/portal?token=${token}`;
      setInviteLink(link);
      navigator.clipboard.writeText(link).catch(() => {});
      setInviteCopied(true);
      setTimeout(() => setInviteCopied(false), 2000);
    }
  }

  async function handleApprove(post) {
    if (!window.API) return;
    try { await window.API.updatePost(post.id, { status: 'published' }); } catch {}
    setApprovals(prev => prev.map(p => p.id === post.id ? { ...p, status: 'published' } : p));
  }

  async function handleReject(post) {
    if (!window.API) return;
    try { await window.API.updatePost(post.id, { status: 'draft' }); } catch {}
    setApprovals(prev => prev.filter(p => p.id !== post.id));
  }

  function handleFileDownload(f) {
    if (f.url) {
      const a = document.createElement('a');
      a.href = f.url;
      a.download = f.name || 'file';
      a.target = '_blank';
      a.click();
    }
  }

  const displayName = client ? (client.company || client.name) : '—';
  const health = getProjectHealth(tasks);

  const doneTasks    = tasks.filter(t => t.status === 'done' || t.status === 'completed').length;
  const progressPct  = tasks.length > 0 ? Math.round((doneTasks / tasks.length) * 100) : (project?.progress || 0);
  const milestones   = tasks.slice(0, 6).map(t => ({ label: t.title, state: taskToMilestone(t), due: t.due_date }));

  const nextDue      = tasks.filter(t => t.due_date && t.status !== 'done' && t.status !== 'completed').sort((a, b) => new Date(a.due_date) - new Date(b.due_date))[0];
  const nextMilestone = nextDue ? fmtDate(nextDue.due_date) : (project?.due_date ? fmtDate(project.due_date) : 'On track');
  const pendingCount  = approvals.filter(a => a.status !== 'published').length;

  if (loading) {
    return (
      <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>
        Loading…
      </div>
    );
  }

  if (clients.length === 0) {
    return (
      <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 12, color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>
        <Icon name="users" size={36} style={{ opacity: 0.3 }} />
        No clients found. Add a client in CRM first.
      </div>
    );
  }

  return (
    <div>
      {/* Hero header */}
      <div style={{ background: 'var(--grad-brand)', padding: '26px 24px', color: '#fff' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            {/* Client selector */}
            <div style={{ position: 'relative' }}>
              <button onClick={() => setClientDrop(d => !d)} style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'rgba(255,255,255,0.16)', border: '1px solid rgba(255,255,255,0.25)', borderRadius: 'var(--radius-xl)', padding: '8px 14px', cursor: 'pointer', color: '#fff' }}>
                <span style={{ width: 32, height: 32, borderRadius: '50%', background: 'rgba(255,255,255,0.2)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 14 }}>
                  {displayName.charAt(0).toUpperCase()}
                </span>
                <div style={{ textAlign: 'left' }}>
                  <div style={{ fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', opacity: 0.8 }}>Client portal · preview</div>
                  <div style={{ fontSize: 'var(--text-xl)', fontWeight: 'var(--fw-extrabold)', letterSpacing: '-0.02em' }}>{displayName}</div>
                </div>
                <Icon name="chevrons-up-down" size={16} style={{ opacity: 0.7, marginLeft: 4 }} />
              </button>
              {clientDrop && (
                <div style={{ position: 'absolute', top: 'calc(100% + 8px)', left: 0, zIndex: 200, background: 'var(--slate-0)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-xl)', minWidth: 220, overflow: 'hidden' }}
                  onClick={() => setClientDrop(false)}>
                  {clients.map(c => (
                    <div key={c.id} onClick={() => setClientId(c.id)}
                      style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', cursor: 'pointer', background: c.id === clientId ? 'var(--blue-50)' : 'transparent', color: c.id === clientId ? 'var(--blue-700)' : 'var(--text-body)', fontSize: 'var(--text-sm)', fontWeight: c.id === clientId ? 'var(--fw-semibold)' : 'var(--fw-medium)' }}
                      onMouseEnter={e => { if (c.id !== clientId) e.currentTarget.style.background = 'var(--slate-50)'; }}
                      onMouseLeave={e => { if (c.id !== clientId) e.currentTarget.style.background = 'transparent'; }}>
                      <Avatar name={c.company || c.name} size="xs" />
                      <div>
                        <div>{c.company || c.name}</div>
                        {c.email && <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>{c.email}</div>}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', gap: 28 }}>
              {[
                ['Project health', health.label],
                ['Next deadline', nextMilestone],
                manager ? ['Account manager', manager.split(' ')[0]] : null,
              ].filter(Boolean).map(([k, v]) => (
                <div key={k}>
                  <div style={{ fontSize: 'var(--text-2xs)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-wide)', opacity: 0.8 }}>{k}</div>
                  <div style={{ fontSize: 'var(--text-md)', fontWeight: 'var(--fw-bold)' }}>{v}</div>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button onClick={() => setShowNotes(n => !n)}
                style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '7px 14px', background: 'rgba(255,255,255,0.15)', border: '1px solid rgba(255,255,255,0.3)', borderRadius: 8, color: 'white', cursor: 'pointer', fontSize: 13, fontWeight: 600, fontFamily: 'var(--font-sans)' }}>
                <Icon name="lock" size={13} /> Private Notes {notes.length > 0 && `(${notes.length})`}
              </button>
              <button onClick={inviteLink ? () => { navigator.clipboard.writeText(inviteLink).catch(() => {}); setInviteCopied(true); setTimeout(() => setInviteCopied(false), 2000); } : generateInvite}
                style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '7px 14px', background: 'rgba(255,255,255,0.95)', border: 'none', borderRadius: 8, color: '#1d4ed8', cursor: 'pointer', fontSize: 13, fontWeight: 700, fontFamily: 'var(--font-sans)' }}>
                <Icon name={inviteCopied ? 'check' : 'link'} size={13} />
                {inviteCopied ? 'Link copied!' : inviteLink ? 'Copy invite link' : 'Invite client'}
              </button>
            </div>
          </div>
        </div>
      </div>

      <div style={{ maxWidth: 1100, margin: '0 auto', padding: 24, display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 16 }}>

        {/* Milestone / task tracker */}
        <Card padding="lg" style={{ gridColumn: '1 / -1' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
            <h3 style={{ fontSize: 'var(--text-lg)', fontWeight: 'var(--fw-bold)' }}>
              Project progress{project?.name ? ` · ${project.name}` : ''}
            </h3>
            <Badge tone={progressPct >= 80 ? 'success' : 'brand'} dot>{progressPct}% complete</Badge>
          </div>

          {milestones.length === 0 ? (
            <div style={{ padding: '24px 0', textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>No tasks assigned to this project yet.</div>
          ) : (
            <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8 }}>
              {milestones.map((m, i) => (
                <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 9, position: 'relative' }}>
                  {i < milestones.length - 1 && (
                    <div style={{ position: 'absolute', top: 15, left: '50%', width: '100%', height: 2, background: m.state === 'done' ? 'var(--blue-500)' : 'var(--border-default)' }} />
                  )}
                  <span style={{ position: 'relative', zIndex: 1, width: 32, height: 32, borderRadius: '50%', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    background: m.state === 'done' ? 'var(--blue-600)' : m.state === 'active' ? 'var(--slate-0)' : 'var(--slate-100)',
                    border: m.state === 'active' ? '2px solid var(--blue-600)' : '2px solid transparent',
                    color: m.state === 'done' ? '#fff' : m.state === 'active' ? 'var(--blue-600)' : 'var(--text-subtle)' }}>
                    {m.state === 'done'
                      ? <Icon name="check" size={16} />
                      : m.state === 'active'
                        ? <span style={{ width: 9, height: 9, borderRadius: '50%', background: 'var(--blue-600)' }} />
                        : <span style={{ fontSize: 11, fontWeight: 700 }}>{i + 1}</span>}
                  </span>
                  <span style={{ fontSize: 'var(--text-xs)', fontWeight: m.state === 'active' ? 'var(--fw-bold)' : 'var(--fw-medium)', color: m.state === 'todo' ? 'var(--text-subtle)' : 'var(--text-strong)', textAlign: 'center', lineHeight: 1.3 }}>{m.label}</span>
                  {m.due && <span style={{ fontSize: 10, color: 'var(--text-subtle)' }}>{fmtDate(m.due)}</span>}
                </div>
              ))}
            </div>
          )}

          {/* Overall progress bar */}
          {milestones.length > 0 && (
            <div style={{ marginTop: 20, height: 6, background: 'var(--slate-100)', borderRadius: 99, overflow: 'hidden' }}>
              <div style={{ height: '100%', width: progressPct + '%', background: 'var(--blue-600)', borderRadius: 99, transition: 'width 0.4s ease' }} />
            </div>
          )}
        </Card>

        {/* Approvals */}
        <Card padding="lg">
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
            <h3 style={{ fontSize: 'var(--text-lg)', fontWeight: 'var(--fw-bold)' }}>Awaiting your approval</h3>
            {pendingCount > 0 && <Badge tone="warning">{pendingCount} pending</Badge>}
          </div>
          {approvals.length === 0 ? (
            <div style={{ padding: '32px 0', textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>
              No content awaiting approval
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {approvals.map((a, i) => {
                const platIcons = { instagram: 'instagram', facebook: 'facebook', linkedin: 'linkedin', youtube: 'youtube', twitter: 'twitter' };
                const icon = platIcons[a.platform] || 'file-text';
                const isPublished = a.status === 'published';
                const assigneeName = a.team_members?.name || '';
                return (
                  <div key={a.id || i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 12, background: 'var(--slate-50)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-subtle)' }}>
                    <span style={{ width: 38, height: 38, flex: 'none', borderRadius: 'var(--radius-md)', background: 'var(--slate-0)', border: '1px solid var(--border-subtle)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-muted)' }}>
                      <Icon name={icon} size={18} />
                    </span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{a.title}</div>
                      <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>
                        {assigneeName ? assigneeName + ' · ' : ''}{fmtWhen(a.created_at)}
                      </div>
                    </div>
                    {isPublished
                      ? <Badge tone="success" dot>Approved</Badge>
                      : (
                        <div style={{ display: 'flex', gap: 6 }}>
                          <button onClick={() => handleApprove(a)} title="Approve" style={{ width: 32, height: 32, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'var(--green-600)', color: '#fff', border: 'none', borderRadius: 'var(--radius-md)', cursor: 'pointer' }}>
                            <Icon name="check" size={16} />
                          </button>
                          <button onClick={() => handleReject(a)} title="Send back for revision" style={{ width: 32, height: 32, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'var(--slate-0)', color: 'var(--text-muted)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', cursor: 'pointer' }}>
                            <Icon name="rotate-ccw" size={15} />
                          </button>
                        </div>
                      )}
                  </div>
                );
              })}
            </div>
          )}
        </Card>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Shared files */}
          <Card padding="lg">
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
              <h3 style={{ fontSize: 'var(--text-lg)', fontWeight: 'var(--fw-bold)' }}>Shared files</h3>
              <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>{files.length} file{files.length !== 1 ? 's' : ''}</span>
            </div>
            {files.length === 0 ? (
              <div style={{ padding: '20px 0', textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>No files shared yet</div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                {files.slice(0, 5).map((f, i) => {
                  const { icon, tone } = mimeIcon(f.mime_type);
                  return (
                    <div key={f.id || i} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '8px 6px', borderRadius: 'var(--radius-md)' }}
                      onMouseEnter={e => e.currentTarget.style.background = 'var(--slate-50)'}
                      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                      <Icon name={icon} size={18} style={{ color: tone, flex: 'none' }} />
                      <span style={{ flex: 1, fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-medium)', color: 'var(--text-strong)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.name}</span>
                      <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-subtle)' }}>{fmtSize(f.file_size)}</span>
                      <button onClick={() => handleFileDownload(f)} title={f.url ? 'Download' : 'No URL available'}
                        style={{ background: 'none', border: 'none', cursor: f.url ? 'pointer' : 'default', padding: 4, color: f.url ? 'var(--blue-600)' : 'var(--text-subtle)', display: 'inline-flex' }}>
                        <Icon name="download" size={16} />
                      </button>
                    </div>
                  );
                })}
                {files.length > 5 && (
                  <div style={{ textAlign: 'center', paddingTop: 6, fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>+{files.length - 5} more files</div>
                )}
              </div>
            )}
          </Card>

          {/* Latest invoice */}
          {invoice && (
            <Card padding="lg" style={{ background: 'var(--slate-900)' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div>
                  <div style={{ fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--slate-400)', marginBottom: 4 }}>
                    {invoice.status === 'paid' ? 'Latest invoice (paid)' : 'Invoice due'}
                  </div>
                  <div style={{ fontSize: 'var(--text-2xl)', fontWeight: 'var(--fw-extrabold)', color: '#fff', fontVariantNumeric: 'tabular-nums' }}>{fmtAmt(invoice.amount, invoice.currency)}</div>
                  <div style={{ fontSize: 'var(--text-xs)', color: 'var(--slate-400)', marginTop: 4 }}>{invoice.invoice_no} · due {fmtDate(invoice.due_date)}</div>
                </div>
                <button onClick={() => downloadInvoicePDF(invoice, clients)} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, height: 38, padding: '0 16px', background: '#fff', color: 'var(--slate-900)', border: 'none', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-bold)', cursor: 'pointer' }}>
                  <Icon name="download" size={16} /> Download PDF
                </button>
              </div>
            </Card>
          )}
        </div>
      </div>

      {/* Private Notes Panel — team only, never shown to client */}
      {showNotes && (
        <div style={{ position: 'fixed', top: 0, right: 0, bottom: 0, width: 380, background: 'white', borderLeft: '1px solid var(--slate-200)', boxShadow: '-4px 0 24px rgba(0,0,0,0.1)', zIndex: 500, display: 'flex', flexDirection: 'column' }}>
          <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--slate-200)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: '#fffbeb' }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 15, fontWeight: 700 }}>
                <Icon name="lock" size={15} style={{ color: '#92400e' }} />
                Private Notes
              </div>
              <p style={{ fontSize: 12, color: '#92400e', margin: '2px 0 0', fontWeight: 500 }}>Hidden from client · visible to team only</p>
            </div>
            <button onClick={() => setShowNotes(false)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-muted)', padding: 4 }}><Icon name="x" size={18} /></button>
          </div>
          <div style={{ flex: 1, overflowY: 'auto', padding: 16 }}>
            {notes.length === 0 && <p style={{ color: 'var(--text-muted)', fontSize: 14, textAlign: 'center', marginTop: 32 }}>No private notes yet.<br/>Add internal context, warnings, or strategy notes here.</p>}
            {notes.map(n => (
              <div key={n.id} style={{ padding: '12px 14px', background: '#fffbeb', border: '1px solid #fde68a', borderRadius: 10, marginBottom: 10 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
                  <p style={{ fontSize: 14, margin: 0, lineHeight: 1.6, color: '#1c1917', flex: 1 }}>{n.content}</p>
                  <button onClick={() => deleteNote(n.id)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-muted)', padding: '0 2px', flexShrink: 0 }}><Icon name="trash-2" size={13} /></button>
                </div>
                <p style={{ fontSize: 11, color: '#92400e', margin: '6px 0 0', fontWeight: 500 }}>
                  {n.team_members?.name || 'Team'} · {new Date(n.created_at).toLocaleDateString()}
                </p>
              </div>
            ))}
          </div>
          <div style={{ padding: '14px 16px', borderTop: '1px solid var(--slate-200)' }}>
            <textarea value={noteText} onChange={e => setNoteText(e.target.value)} placeholder="Write a private note for your team..."
              rows={3} style={{ width: '100%', padding: '10px 12px', border: '1px solid var(--slate-200)', borderRadius: 9, fontSize: 14, fontFamily: 'var(--font-sans)', outline: 'none', resize: 'none', boxSizing: 'border-box', marginBottom: 8 }}
              onKeyDown={e => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) addNote(); }} />
            <button onClick={addNote} style={{ width: '100%', padding: '9px 0', background: '#d97706', color: 'white', border: 'none', borderRadius: 8, cursor: 'pointer', fontSize: 14, fontWeight: 700, fontFamily: 'var(--font-sans)' }}>
              Add Note
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ClientPortal });
})();