// Projects screen — project cards grid.
(() => {
const { Card, Badge, AvatarGroup, ProgressBar } = window.TechyFuelOSDesignSystem_be0222;

const PS = {
  draft:     ['neutral', 'Draft'],
  active:    ['info',    'Active'],
  on_hold:   ['warning', 'On hold'],
  paused:    ['warning', 'On hold'],   // legacy alias
  completed: ['success', 'Completed'],
  archived:  ['neutral', 'Archived'],
};
// Status options offered in the UI (Zain's set).
const PROJECT_STATUSES = [['draft','Draft'],['active','Active'],['on_hold','On hold'],['completed','Completed'],['cancelled','Cancelled']];
const PRIORITY_TONE = { urgent: 'danger', high: 'danger', medium: 'warning', low: 'neutral' };
const PRIORITIES = [['low','Low'],['medium','Medium'],['high','High'],['urgent','Urgent']];
// Project type drives which task workflow a project's tasks follow (a PM can
// still override it per project).
const PROJECT_TYPES = [
  ['general','General'], ['content','Content / Social Media'], ['design','Design'],
  ['development','Development'], ['marketing','Marketing'], ['other','Other'],
];
const WORKFLOWS = [['general','General (To Do → In Progress → Review → Done)'],
                   ['content','Content (adds Client Review → Changes Requested → Approved)']];
// Content-type projects default to the client-approval workflow.
function defaultWorkflow(type) { return type === 'content' ? 'content' : 'general'; }

const CURRENCIES = [
  { code: 'PKR', symbol: '₨',   name: 'Pakistani Rupee' },
  { code: 'USD', symbol: '$',   name: 'US Dollar' },
  { code: 'EUR', symbol: '€',   name: 'Euro' },
  { code: 'GBP', symbol: '£',   name: 'British Pound' },
  { code: 'AED', symbol: 'AED', name: 'UAE Dirham' },
  { code: 'SAR', symbol: 'SAR', name: 'Saudi Riyal' },
];

function getCurrencySymbol(code) {
  return (CURRENCIES.find(c => c.code === code) || CURRENCIES[0]).symbol;
}

function fxToPKR(amount, currency, rates) {
  const n = Number(amount);
  if (!n) return 0;
  if (!currency || currency === 'PKR') return n;
  if (!rates) return 0;
  const usd = currency === 'USD' ? n : (rates[currency] ? n / rates[currency] : null);
  if (usd === null) return 0;
  return rates.PKR ? usd * rates.PKR : 0;
}

function fmtBudget(n, currency) {
  const sym = getCurrencySymbol(currency || 'PKR');
  if (!n) return sym + '0';
  if (n >= 1000000) return sym + (n / 1000000).toFixed(1) + 'M';
  if (n >= 1000)    return sym + (n / 1000).toFixed(1) + 'K';
  return sym + n;
}
function fmtDue(ds) {
  if (!ds) return '—';
  return new Date(ds).toLocaleDateString('en', { month: 'short', day: 'numeric' });
}
// A milestone created without an explicit status comes back from the API with the
// field absent (MySQL applies the 'pending' default on INSERT but Eloquent does not
// read it back). Reading .status directly crashed the whole project panel on Add.
function msStatus(m) { return (m && m.status) || 'pending'; }

// Activity actions arrive as "<entity>_<verb>" (project_updated) or bare (login).
// Render the verb in plain words rather than showing a raw slug.
const ACT_VERB = { created: 'created this project', updated: 'updated this project', deleted: 'deleted this project' };
function actLabel(action) {
  const a = String(action || '');
  const verb = a.indexOf('_') > 0 ? a.slice(a.indexOf('_') + 1) : a;
  return ACT_VERB[verb] || verb.replace(/_/g, ' ');
}
// Timestamps come back as "YYYY-MM-DD HH:MM:SS" with no zone, and are UTC.
function actWhen(d) {
  if (!d) return '';
  const iso = String(d).replace(' ', 'T');
  const dt = new Date(/[Zz]|[+-]\d{2}:?\d{2}$/.test(iso) ? iso : iso + 'Z');
  return isNaN(dt) ? '' : dt.toLocaleString('en-GB', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' });
}

// Progress is DERIVED, never typed in: completed tasks / total tasks.
// Falls back to the stored p.progress only while a project has no tasks yet.
function projProgress(p, tasks) {
  const mine = (tasks || []).filter(t => t.project_id === p.id);
  if (!mine.length) return Number(p.progress) || 0;
  const done = mine.filter(t => t.status === 'done').length;
  return Math.round(done / mine.length * 100);
}

// Health is a traffic light, not a percentage — a project can be 40% done and
// perfectly on track, or 90% done and overdue. Progress answers "how much";
// health answers "should anyone worry".
//   red   overdue  — due date passed and not completed
//   amber at risk  — deadline close but progress behind where it should be
//   green on track
function projHealth(p, progress) {
  if (p.status === 'completed') return { key: 'done', label: 'Completed', dot: '🟢', color: 'var(--green-600)', tone: 'success' };
  if (!p.due_date) return { key: 'ontrack', label: 'On Track', dot: '🟢', color: 'var(--green-600)', tone: 'success' };

  const today = new Date(); today.setHours(0, 0, 0, 0);
  const due = new Date(String(p.due_date).slice(0, 10) + 'T00:00:00');
  const daysLeft = Math.round((due - today) / 86400000);

  if (daysLeft < 0) return { key: 'overdue', label: 'Overdue', dot: '🔴', color: 'var(--red-600)', tone: 'danger' };

  // Expected progress by now, if work were spread evenly from start to due.
  const start = p.start_date ? new Date(String(p.start_date).slice(0, 10) + 'T00:00:00') : null;
  let expected = null;
  if (start && due > start) {
    expected = Math.min(100, Math.max(0, Math.round((today - start) / (due - start) * 100)));
  }
  const behind = expected != null ? progress < expected - 20 : (daysLeft <= 7 && progress < 70);
  if (behind) return { key: 'risk', label: 'At Risk', dot: '🟡', color: 'var(--amber-600)', tone: 'warning' };
  return { key: 'ontrack', label: 'On Track', dot: '🟢', color: 'var(--green-600)', tone: 'success' };
}

function spentPct(budget, spent) {
  if (!budget || !spent) return 0;
  return Math.round((spent / budget) * 100);
}

function ProjectCard({ p, onEdit, onDelete, onOpen, rates, tasks }) {
  const canSeeBudget = ['owner', 'admin'].includes(window.TFMyRole);
  const hasBudget = Number(p.budget) > 0;
  const progress = projProgress(p, tasks);
  const hp = projHealth(p, progress);
  const [st, sl] = PS[p.status] || ['neutral', p.status];
  const [menuOpen, setMenuOpen] = React.useState(false);
  const menuRef = React.useRef(null);
  const pct = progress;
  const budgetPct = spentPct(p.budget, p.spent);
  const clientName = p.clients ? p.clients.name : '—';
  const due = fmtDue(p.due_date);

  React.useEffect(() => {
    if (!menuOpen) return;
    function onClickOutside(e) { if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false); }
    document.addEventListener('mousedown', onClickOutside);
    return () => document.removeEventListener('mousedown', onClickOutside);
  }, [menuOpen]);

  return (
    <Card interactive padding="md" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8 }}>
        <div onClick={() => onOpen && onOpen(p)} style={{ cursor: onOpen ? 'pointer' : 'default', flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 'var(--text-md)', fontWeight: 'var(--fw-bold)', color: 'var(--text-strong)', letterSpacing: '-0.01em' }}>{p.name}</div>
          <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', marginTop: 2 }}>{clientName}</div>
        </div>
        <div ref={menuRef} style={{ position: 'relative', flex: 'none' }}>
          <button onClick={e => { e.stopPropagation(); setMenuOpen(o => !o); }} style={{ background: 'none', border: 'none', padding: 2, display: 'flex', cursor: 'pointer', color: 'var(--text-subtle)' }}>
            <Icon name="more-horizontal" size={18} />
          </button>
          {menuOpen && (
            <div onClick={e => e.stopPropagation()} style={{ position: 'absolute', top: 'calc(100% + 4px)', right: 0, zIndex: 50,
              background: 'var(--slate-0)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-xl)', minWidth: 140, overflow: 'hidden' }}>
              <div onClick={() => { setMenuOpen(false); onOpen && onOpen(p); }}
                style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '9px 12px', cursor: 'pointer', fontSize: 'var(--text-sm)', color: 'var(--text-body)' }}
                onMouseEnter={e => e.currentTarget.style.background = 'var(--slate-50)'}
                onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                <Icon name="panel-left-open" size={14} style={{ color: 'var(--text-muted)' }} /> View details
              </div>
              <div onClick={() => { setMenuOpen(false); onEdit(p); }}
                style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '9px 12px', cursor: 'pointer', fontSize: 'var(--text-sm)', color: 'var(--text-body)', borderTop: '1px solid var(--border-subtle)' }}
                onMouseEnter={e => e.currentTarget.style.background = 'var(--slate-50)'}
                onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                <Icon name="pencil" size={14} style={{ color: 'var(--text-muted)' }} /> Edit
              </div>
              <div onClick={() => { setMenuOpen(false); onDelete(p); }}
                style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '9px 12px', cursor: 'pointer', fontSize: 'var(--text-sm)', color: '#dc2626', borderTop: '1px solid var(--border-subtle)' }}
                onMouseEnter={e => e.currentTarget.style.background = '#fff1f2'}
                onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                <Icon name="trash-2" size={14} style={{ color: '#dc2626' }} /> Delete
              </div>
            </div>
          )}
        </div>
      </div>
      <div style={{ display: 'flex', gap: 6 }}>
        <Badge tone={PRIORITY_TONE[p.priority] || 'neutral'} size="sm">{p.priority}</Badge>
        <Badge tone={st} dot>{sl}</Badge>
        {/* Health is separate from progress — traffic light, not a number. */}
        <Badge tone={hp.tone} size="sm">{hp.dot} {hp.label}</Badge>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 'var(--text-xs)' }}>
          <span style={{ color: 'var(--text-muted)', fontWeight: 'var(--fw-semibold)' }}>Progress</span>
          <span style={{ color: 'var(--text-strong)', fontWeight: 'var(--fw-bold)' }}>{pct}%</span>
        </div>
        <ProgressBar value={pct} tone={p.status === 'completed' ? 'success' : 'brand'} size="sm" />
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 12, borderTop: '1px solid var(--border-subtle)' }}>
        <div>
          {/* Owner/admin only, and "Not set" rather than a misleading Rs0 / 0% used. */}
          {canSeeBudget ? (hasBudget ? <>
            <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-subtle)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-wide)', fontWeight: 'var(--fw-bold)' }}>Budget · {budgetPct}% used</div>
            <div style={{ fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-bold)', color: 'var(--text-strong)', fontVariantNumeric: 'tabular-nums' }}>{fmtBudget(p.budget, p.currency)}</div>
            {(p.currency || 'PKR') !== 'PKR' && rates && p.budget > 0 && (
              <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-muted)', marginTop: 1 }}>≈ {fmtBudget(fxToPKR(p.budget, p.currency, rates), 'PKR')}</div>
            )}
          </> : <>
            <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-subtle)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-wide)', fontWeight: 'var(--fw-bold)' }}>Budget</div>
            <div style={{ fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-subtle)' }}>Not set</div>
          </>) : null}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}><Icon name="calendar" size={13} /> {due}</span>
        </div>
      </div>
    </Card>
  );
}

function Projects() {
  useLucide();
  // Budget is commercial information — owner/admin only, matching Finance and
  // Reports. Managers run delivery but do not see project money. The server
  // redacts it too (ProjectController@redactMoney), so this is presentation
  // only, not the actual guard. Whitelist so it stays hidden in the brief
  // moment before the role resolves.
  const canSeeBudget = ['owner', 'admin'].includes(window.TFMyRole);
  const [projects, setProjects] = React.useState([]);
  const [allTasks, setAllTasks] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [clients, setClients] = React.useState([]);
  const [teams, setTeams] = React.useState([]);       // real Team entities (Content Team etc.)
  const [members, setMembers] = React.useState([]);   // workspace members, for the PM picker
  const [rates, setRates] = React.useState(null);
  const [modalOpen, setModalOpen] = React.useState(false);
  const [saving, setSaving] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', client_id: '', budget: '', currency: 'PKR', due_date: '', start_date: '', priority: 'medium', status: 'active', project_type: 'general', manager_id: '', team_id: '', workflow: 'general', description: '' });
  const [addProjectError, setAddProjectError] = React.useState('');

  const [editProject, setEditProject] = React.useState(null);
  const [editForm, setEditForm] = React.useState({});
  const [editSaving, setEditSaving] = React.useState(false);
  const [editProjectError, setEditProjectError] = React.useState('');
  const [statusFilter, setStatusFilter] = React.useState('all');
  const [groupByClient, setGroupByClient] = React.useState(false);
  const [viewMode, setViewMode] = React.useState('cards'); // 'cards' | 'timeline'
  const [detailProject, setDetailProject] = React.useState(null);

  // Normalise legacy statuses so filter tabs match (paused → on_hold).
  const normStatus = (s) => s === 'paused' ? 'on_hold' : (s || 'active');
  const clientName = (id) => { const c = clients.find(x => x.id === id); return c ? (c.company || c.name) : 'No client'; };

  // Derived rather than tracked separately, so they always reflect the
  // current projects list (and each project's own currency) with no
  // separate counters to keep in sync on every add/edit/delete.
  const activeCount = projects.filter(p => p.status === 'active').length;
  const totalBudget = projects.reduce((s, p) => s + fxToPKR(p.budget, p.currency, rates), 0);

  function set(k, v) { setForm(f => ({ ...f, [k]: v })); }
  function setEF(k, v) { setEditForm(f => ({ ...f, [k]: v })); }

  function openEdit(p) {
    setEditProjectError('');
    setEditProject(p);
    setEditForm({
      name: p.name || '', client_id: p.client_id || '', budget: p.budget ? String(p.budget) : '', currency: p.currency || 'PKR',
      due_date: p.due_date ? p.due_date.slice(0, 10) : '', priority: p.priority || 'medium', status: p.status || 'active',
      project_type: p.project_type || 'general', manager_id: p.manager_id || '', team_id: p.team_id || '',
      workflow: p.workflow || defaultWorkflow(p.project_type),
    });
  }

  async function handleUpdateProject() {
    if (!editProject || !editForm.name?.trim()) return;
    setEditSaving(true);
    setEditProjectError('');
    try {
      const changes = { name: editForm.name.trim(), priority: editForm.priority, status: editForm.status, currency: editForm.currency || 'PKR' };
      changes.client_id = editForm.client_id || null;
      changes.budget    = editForm.budget ? Number(editForm.budget) : null;
      changes.due_date  = editForm.due_date || null;
      changes.project_type = editForm.project_type || null;
      changes.manager_id   = editForm.manager_id || null;
      changes.team_id      = editForm.team_id || null;
      changes.workflow     = editForm.workflow || null;
      if (!window.API) { setEditProject(null); return; }
      const { data, error } = await window.API.updateProject(editProject.id, changes);
      if (error) { setEditProjectError(error.message || 'Could not save changes. Please try again.'); return; }
      const clientObj = clients.find(c => c.id === changes.client_id);
      const updated = { ...editProject, ...(data || changes), clients: clientObj ? { name: clientObj.company || clientObj.name } : null };
      setProjects(prev => prev.map(p => p.id === editProject.id ? updated : p));
      setEditProject(null);
    } finally { setEditSaving(false); }
  }

  async function handleDeleteProject(p) {
    if (!window.confirm(`Delete "${p.name}"? This can't be undone.`)) return;
    try { if (window.API) await window.API.deleteProject(p.id); } catch {}
    setProjects(prev => prev.filter(x => x.id !== p.id));
  }

  React.useEffect(() => {
    if (!window.API) { setLoading(false); return; }
    window.API.getProjects().then(r => {
      if (r.data) setProjects(r.data);
    }).catch(() => {}).finally(() => setLoading(false));
    window.API.getClients().then(r => { if (r.data) setClients(r.data); }).catch(() => {});
    // Teams and members feed the Team / Project Manager pickers. Both are
    // best-effort: a failure just leaves the picker empty, never blocks the page.
    if (window.API.getTeams) window.API.getTeams().then(r => { if (r && r.data) setTeams(r.data); }).catch(() => {});
    if (window.API.getTeam) window.API.getTeam().then(r => { if (r && r.data) setMembers(r.data); }).catch(() => {});
    // Tasks drive the derived progress/health on every card.
    if (window.API.getTasks) window.API.getTasks().then(r => { if (r.data) setAllTasks(r.data); }).catch(() => {});
    if (window.API.getFxRates) {
      window.API.getFxRates().then(fx => { if (fx && fx.rates) setRates(fx.rates); }).catch(() => {});
    }
  }, []);

  function fmtTotal(n) {
    if (n >= 1000000) return '₨' + (n / 1000000).toFixed(1) + 'M';
    if (n >= 1000)    return '₨' + (n / 1000).toFixed(1) + 'K';
    return '₨' + Math.round(n);
  }

  async function handleAddProject() {
    if (!form.name.trim()) return;
    setSaving(true);
    setAddProjectError('');
    try {
      const payload = { name: form.name, status: form.status, priority: form.priority, currency: form.currency || 'PKR' };
      if (form.client_id) payload.client_id = form.client_id;
      if (form.budget)    payload.budget    = Number(form.budget);
      if (form.due_date)  payload.due_date  = form.due_date;
      if (form.start_date) payload.start_date = form.start_date;
      if (form.project_type) payload.project_type = form.project_type;
      if (form.manager_id) payload.manager_id = form.manager_id;
      if (form.team_id)   payload.team_id   = form.team_id;
      if (form.workflow)  payload.workflow  = form.workflow;
      if (form.description) payload.description = form.description;
      if (window.API) {
        const { data, error } = await window.API.createProject(payload);
        if (error) { setAddProjectError(error.message || 'Could not create the project. Please try again.'); return; }
        if (data) {
          const clientName = clients.find(c => c.id === form.client_id)?.name || null;
          const newP = { ...data, clients: clientName ? { name: clientName } : null };
          setProjects(prev => [...prev, newP]);
        }
      }
      setModalOpen(false);
      setForm({ name: '', client_id: '', budget: '', currency: 'PKR', due_date: '', start_date: '', priority: 'medium', status: 'active', project_type: 'general', manager_id: '', team_id: '', workflow: 'general', description: '' });
    } finally { setSaving(false); }
  }

  return (
    <div style={{ padding: 24, maxWidth: 1280, margin: '0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 18, flexWrap: 'wrap', gap: 12 }}>
        <div>
          <h1 style={{ fontSize: 'var(--text-3xl)', fontWeight: 'var(--fw-extrabold)', letterSpacing: '-0.02em' }}>Projects</h1>
          <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)', marginTop: 2 }}>{activeCount} active{canSeeBudget ? ` · ${fmtTotal(totalBudget)} in committed budget` : ''}</p>
        </div>
        <button onClick={() => setModalOpen(true)} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, height: 36, padding: '0 14px', background: 'var(--blue-600)', color: '#fff', border: 'none', borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-brand)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', cursor: 'pointer' }}>
          <Icon name="plus" size={16} /> New project
        </button>
      </div>
      {loading && <div style={{ padding: 48, textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>Loading…</div>}

      {!loading && projects.length === 0 && (
        <div style={{ padding: '60px 24px', textAlign: 'center' }}>
          <Icon name="folder-kanban" size={40} style={{ color: 'var(--text-subtle)', marginBottom: 12 }} />
          <div style={{ fontSize: 'var(--text-lg)', fontWeight: 'var(--fw-bold)', color: 'var(--text-strong)', marginBottom: 6 }}>No projects yet</div>
          <div style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)' }}>Create your first project to get started.</div>
        </div>
      )}

      {!loading && projects.length > 0 && (() => {
        const filtered = statusFilter === 'all' ? projects : projects.filter(p => normStatus(p.status) === statusFilter);
        const countFor = (s) => s === 'all' ? projects.length : projects.filter(p => normStatus(p.status) === s).length;
        const grid = (list) => (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {list.map((p, i) => <ProjectCard key={p.id || i} p={p} onEdit={openEdit} onDelete={handleDeleteProject} onOpen={setDetailProject} rates={rates} tasks={allTasks} />)}
          </div>
        );
        return (
          <>
            {/* Filter + grouping bar */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16, flexWrap: 'wrap' }}>
              {[['all','All'], ...PROJECT_STATUSES].map(([v,l]) => (
                <button key={v} onClick={() => setStatusFilter(v)} style={{ height: 32, padding: '0 12px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)', cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-semibold)', background: statusFilter===v?'var(--blue-50)':'var(--slate-0)', color: statusFilter===v?'var(--blue-700)':'var(--text-muted)' }}>{l} ({countFor(v)})</button>
              ))}
              <div style={{ flex: 1 }} />
              <div style={{ display: 'inline-flex', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', overflow: 'hidden' }}>
                {[['cards','Cards','layout-grid'],['timeline','Timeline','gantt-chart']].map(([v,l,ic]) => (
                  <button key={v} onClick={() => setViewMode(v)} style={{ height: 32, padding: '0 11px', border: 'none', cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-semibold)', background: viewMode===v?'var(--blue-50)':'var(--slate-0)', color: viewMode===v?'var(--blue-700)':'var(--text-muted)', display: 'inline-flex', alignItems: 'center', gap: 5 }}><Icon name={ic} size={13} /> {l}</button>
                ))}
              </div>
              {viewMode === 'cards' && <button onClick={() => setGroupByClient(g => !g)} style={{ height: 32, padding: '0 12px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)', cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-semibold)', background: groupByClient?'var(--blue-50)':'var(--slate-0)', color: groupByClient?'var(--blue-700)':'var(--text-muted)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <Icon name="contact" size={14} /> Group by client
              </button>}
            </div>

            {filtered.length === 0 && <div style={{ padding: '40px 24px', textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>No projects in this status.</div>}

            {filtered.length > 0 && viewMode === 'timeline' && <TimelineView projects={filtered} onOpen={setDetailProject} />}

            {filtered.length > 0 && viewMode === 'cards' && !groupByClient && grid(filtered)}

            {filtered.length > 0 && viewMode === 'cards' && groupByClient && (() => {
              const groups = {};
              filtered.forEach(p => { const k = p.client_id || '__none'; (groups[k] ??= []).push(p); });
              return Object.keys(groups).map(k => (
                <div key={k} style={{ marginBottom: 24 }}>
                  <div style={{ fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-bold)', color: 'var(--text-strong)', margin: '0 0 10px', display: 'flex', alignItems: 'center', gap: 7 }}>
                    <Icon name="contact" size={15} style={{ color: 'var(--blue-600)' }} />
                    {k === '__none' ? 'No client' : clientName(k)}
                    <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', fontWeight: 'var(--fw-semibold)' }}>· {groups[k].length}</span>
                  </div>
                  {grid(groups[k])}
                </div>
              ));
            })()}
          </>
        );
      })()}

      <Modal open={modalOpen} onClose={() => { setModalOpen(false); setAddProjectError(''); }} title="New project" onSubmit={handleAddProject} loading={saving} submitLabel="Create project">
        {addProjectError && (
          <div style={{ marginBottom: 14, padding: '8px 12px', borderRadius: 'var(--radius-md)', background: '#fff1f2', border: '1px solid #fecdd3', color: '#be123c', fontSize: 'var(--text-sm)' }}>
            {addProjectError}
          </div>
        )}
        <FormRow label="Project name" required>
          <input style={FF.input} placeholder="Project name…" value={form.name} onChange={e => set('name', e.target.value)} />
        </FormRow>
        <FormRow label="Client">
          <select style={FF.select} value={form.client_id} onChange={e => set('client_id', e.target.value)}>
            <option value="">No client</option>
            {clients.map(c => <option key={c.id} value={c.id}>{c.company || c.name}</option>)}
          </select>
        </FormRow>
        <div style={FF.row2}>
          <FormRow label="Project type">
            {/* Type picks the default task workflow; the PM can still override it below. */}
            <select style={FF.select} value={form.project_type} onChange={e => { set('project_type', e.target.value); set('workflow', defaultWorkflow(e.target.value)); }}>
              {PROJECT_TYPES.map(([v,l]) => <option key={v} value={v}>{l}</option>)}
            </select>
          </FormRow>
          <FormRow label="Project manager">
            <select style={FF.select} value={form.manager_id} onChange={e => set('manager_id', e.target.value)}>
              <option value="">Unassigned</option>
              {members.map(m => <option key={m.id} value={m.id}>{m.name || m.email}</option>)}
            </select>
          </FormRow>
        </div>
        <div style={FF.row2}>
          <FormRow label="Team">
            {/* Team = project-level access/workload. Task-level responsibility is the assignee. */}
            <select style={FF.select} value={form.team_id} onChange={e => set('team_id', e.target.value)}>
              <option value="">No team</option>
              {teams.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
            </select>
          </FormRow>
          <FormRow label="Task workflow">
            <select style={FF.select} value={form.workflow} onChange={e => set('workflow', e.target.value)}>
              {WORKFLOWS.map(([v,l]) => <option key={v} value={v}>{l}</option>)}
            </select>
          </FormRow>
        </div>
        <div style={FF.row2}>
          <FormRow label="Priority">
            <select style={FF.select} value={form.priority} onChange={e => set('priority', e.target.value)}>
              {PRIORITIES.map(([v,l]) => <option key={v} value={v}>{l}</option>)}
            </select>
          </FormRow>
          <FormRow label="Status">
            <select style={FF.select} value={form.status} onChange={e => set('status', e.target.value)}>
              {PROJECT_STATUSES.map(([v,l]) => <option key={v} value={v}>{l}</option>)}
            </select>
          </FormRow>
        </div>
        <div style={FF.row2}>
          {canSeeBudget && (
          <FormRow label="Budget">
            <div style={{ display: 'flex', gap: 6 }}>
              <input style={FF.input} type="number" placeholder="0" value={form.budget} onChange={e => set('budget', e.target.value)} />
              <select style={{ ...FF.select, flex: '0 0 auto', width: 90 }} value={form.currency} onChange={e => set('currency', e.target.value)}>
                {CURRENCIES.map(c => <option key={c.code} value={c.code}>{c.code}</option>)}
              </select>
            </div>
          </FormRow>
          )}
          <FormRow label="Due date">
            <input style={FF.input} type="date" value={form.due_date} onChange={e => set('due_date', e.target.value)} />
          </FormRow>
        </div>
      </Modal>

      <Modal open={!!editProject} onClose={() => setEditProject(null)} title="Edit project" onSubmit={handleUpdateProject} loading={editSaving} submitLabel="Save changes">
        {editProjectError && (
          <div style={{ marginBottom: 14, padding: '8px 12px', borderRadius: 'var(--radius-md)', background: '#fff1f2', border: '1px solid #fecdd3', color: '#be123c', fontSize: 'var(--text-sm)' }}>
            {editProjectError}
          </div>
        )}
        <FormRow label="Project name" required>
          <input style={FF.input} placeholder="Project name…" value={editForm.name || ''} onChange={e => setEF('name', e.target.value)} />
        </FormRow>
        <FormRow label="Client">
          <select style={FF.select} value={editForm.client_id || ''} onChange={e => setEF('client_id', e.target.value)}>
            <option value="">No client</option>
            {clients.map(c => <option key={c.id} value={c.id}>{c.company || c.name}</option>)}
          </select>
        </FormRow>
        <div style={FF.row2}>
          <FormRow label="Project type">
            <select style={FF.select} value={editForm.project_type || 'general'} onChange={e => { setEF('project_type', e.target.value); if (!editForm.workflow) setEF('workflow', defaultWorkflow(e.target.value)); }}>
              {PROJECT_TYPES.map(([v,l]) => <option key={v} value={v}>{l}</option>)}
            </select>
          </FormRow>
          <FormRow label="Project manager">
            <select style={FF.select} value={editForm.manager_id || ''} onChange={e => setEF('manager_id', e.target.value)}>
              <option value="">Unassigned</option>
              {members.map(m => <option key={m.id} value={m.id}>{m.name || m.email}</option>)}
            </select>
          </FormRow>
        </div>
        <div style={FF.row2}>
          <FormRow label="Team">
            <select style={FF.select} value={editForm.team_id || ''} onChange={e => setEF('team_id', e.target.value)}>
              <option value="">No team</option>
              {teams.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
            </select>
          </FormRow>
          <FormRow label="Task workflow">
            <select style={FF.select} value={editForm.workflow || defaultWorkflow(editForm.project_type)} onChange={e => setEF('workflow', e.target.value)}>
              {WORKFLOWS.map(([v,l]) => <option key={v} value={v}>{l}</option>)}
            </select>
          </FormRow>
        </div>
        <div style={FF.row2}>
          <FormRow label="Priority">
            <select style={FF.select} value={editForm.priority || 'medium'} onChange={e => setEF('priority', e.target.value)}>
              {PRIORITIES.map(([v,l]) => <option key={v} value={v}>{l}</option>)}
            </select>
          </FormRow>
          <FormRow label="Status">
            <select style={FF.select} value={editForm.status || 'active'} onChange={e => setEF('status', e.target.value)}>
              {PROJECT_STATUSES.map(([v,l]) => <option key={v} value={v}>{l}</option>)}
              <option value="archived">Archived</option>
            </select>
          </FormRow>
        </div>
        <div style={FF.row2}>
          {canSeeBudget && (
          <FormRow label="Budget">
            <div style={{ display: 'flex', gap: 6 }}>
              <input style={FF.input} type="number" placeholder="0" value={editForm.budget || ''} onChange={e => setEF('budget', e.target.value)} />
              <select style={{ ...FF.select, flex: '0 0 auto', width: 90 }} value={editForm.currency || 'PKR'} onChange={e => setEF('currency', e.target.value)}>
                {CURRENCIES.map(c => <option key={c.code} value={c.code}>{c.code}</option>)}
              </select>
            </div>
          </FormRow>
          )}
          <FormRow label="Due date">
            <input style={FF.input} type="date" value={editForm.due_date || ''} onChange={e => setEF('due_date', e.target.value)} />
          </FormRow>
        </div>
      </Modal>

      {detailProject && <ProjectDetail project={detailProject} clients={clients} rates={rates} members={members} teams={teams} onClose={() => setDetailProject(null)} onEdit={(p) => { setDetailProject(null); openEdit(p); }} />}
    </div>
  );
}

// ── Project detail drawer ────────────────────────────────────────────────────
function ProjectDetail({ project, clients, rates, members = [], teams = [], onClose, onEdit }) {
  useLucide && useLucide();
  const canSeeBudget = ['owner', 'admin'].includes(window.TFMyRole);
  const [tab, setTab] = React.useState('overview');
  const [milestones, setMilestones] = React.useState([]);
  const [tasks, setTasks] = React.useState([]);
  const [files, setFiles] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [newMs, setNewMs] = React.useState('');
  // A milestone is a real unit of work, so it gets a proper edit form (owner,
  // dates, status) rather than only a title and a status toggle.
  const [msEdit, setMsEdit] = React.useState(null);
  // Per-project audit trail. Loaded lazily — most visits never open this tab.
  const [activity, setActivity] = React.useState(null);
  const [msSaving, setMsSaving] = React.useState(false);
  const canManage = ['owner','admin','manager'].includes(window.TFMyRole);

  const p = project;
  const clientName = (() => { const c = clients.find(x => x.id === p.client_id); return c ? (c.company || c.name) : (p.clients?.name || '—'); })();

  React.useEffect(() => {
    if (!window.API) { setLoading(false); return; }
    (async () => {
      try { const { data } = await window.API.getMilestones(p.id); if (data) setMilestones(data); } catch {}
      try { const r = await window.API.getTasks(); if (r.data) setTasks(r.data.filter(t => t.project_id === p.id)); } catch {}
      try { const r = await window.API.getFiles({ projectId: p.id }); if (r.data) setFiles(r.data); } catch {}
      setLoading(false);
    })();
  }, [p.id]);

  // Health % = blend of task completion and milestone completion (simple, honest).
  const doneTasks = tasks.filter(t => t.status === 'done').length;
  const taskPct = tasks.length ? Math.round(doneTasks / tasks.length * 100) : (p.progress || 0);
  const doneMs = milestones.filter(m => msStatus(m) === 'done').length;
  const msPct = milestones.length ? Math.round(doneMs / milestones.length * 100) : null;
  // Progress = tasks done / total. Health is a separate traffic light.
  const progress = tasks.length ? taskPct : (Number(p.progress) || 0);
  const hp = projHealth(p, progress);
  const budgetPct = p.budget ? Math.round((Number(p.spent||0) / Number(p.budget)) * 100) : 0;

  async function addMilestone() {
    if (!newMs.trim() || !window.API) return;
    try { const { data } = await window.API.createMilestone({ project_id: p.id, title: newMs.trim() }); if (data) setMilestones(prev => [...prev, data]); setNewMs(''); } catch { alert('Could not add milestone.'); }
  }
  async function cycleMs(m) {
    const next = msStatus(m) === 'pending' ? 'in_progress' : msStatus(m) === 'in_progress' ? 'done' : 'pending';
    setMilestones(prev => prev.map(x => x.id===m.id?{...x,status:next}:x));
    try { await window.API.updateMilestone(m.id, { status: next }); } catch {}
  }
  // Persist an edited milestone. `progress` is intentionally NOT sent — the
  // server derives it from the milestone's linked tasks.
  async function saveMs() {
    if (!msEdit || !window.API) return;
    setMsSaving(true);
    try {
      const body = {
        title: (msEdit.title || '').trim(),
        description: msEdit.description || null,
        status: msEdit.status || 'pending',
        start_date: msEdit.start_date || null,
        due_date: msEdit.due_date || null,
        owner_id: msEdit.owner_id || null,
      };
      const { data } = await window.API.updateMilestone(msEdit.id, body);
      if (data) setMilestones(prev => prev.map(m => (m.id === data.id ? data : m)));
      setMsEdit(null);
    } catch (e) {
      alert('Could not save the milestone.');
    } finally { setMsSaving(false); }
  }

  async function delMs(m) {
    setMilestones(prev => prev.filter(x => x.id !== m.id));
    try { await window.API.deleteMilestone(m.id); } catch {}
  }

  const TABS = [['overview','Overview'],['milestones','Milestones'],['tasks','Tasks'],['files','Files'],['activity','Activity']];
  React.useEffect(() => {
    if (tab !== 'activity' || activity !== null || !window.API || !window.API.getActivityLog) return;
    window.API.getActivityLog({ entityId: p.id, limit: 50 })
      .then(r => setActivity((r && r.data) || []))
      .catch(() => setActivity([]));
  }, [tab, p.id, activity]);

  const cur = p.currency || 'PKR';
  // Prefer the eager-loaded relation, fall back to the picker lists.
  const pmName = (p.manager && p.manager.name) || (members.find(m => m.id === p.manager_id) || {}).name || '';
  const teamName = (p.team && p.team.name) || (teams.find(t => t.id === p.team_id) || {}).name || '';
  const typeLabel = ((PROJECT_TYPES.find(([v]) => v === p.project_type) || [])[1]) || '—';
  // Milestone-grouped task list. Milestones keep their board order; tasks with no
  // milestone (or one that no longer exists) fall into "Direct Project Tasks".
  const taskGroups = React.useMemo(() => {
    const byMs = new Map();
    milestones.forEach(m => byMs.set(m.id, { key: m.id, label: m.title, tasks: [] }));
    const direct = { key: '__direct__', label: 'Direct Project Tasks', tasks: [] };
    tasks.forEach(t => {
      const g = t.milestone_id && byMs.get(t.milestone_id);
      (g || direct).tasks.push(t);
    });
    return [...byMs.values(), direct].filter(g => g.tasks.length > 0);
  }, [tasks, milestones]);

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.5)', zIndex: 1000, display: 'flex', justifyContent: 'flex-end' }}>
      <div onClick={e => e.stopPropagation()} style={{ width: 'min(560px, 100%)', height: '100%', background: 'var(--slate-0)', display: 'flex', flexDirection: 'column', boxShadow: 'var(--shadow-xl)' }}>
        {/* Header */}
        <div style={{ padding: '18px 22px', borderBottom: '1px solid var(--border-subtle)' }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 10 }}>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 'var(--text-xl)', fontWeight: 'var(--fw-extrabold)', color: 'var(--text-strong)' }}>{p.name}</div>
              <div style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)', marginTop: 2 }}>{clientName}</div>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              {canManage && <button onClick={() => onEdit(p)} style={{ height: 32, padding: '0 12px', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', background: 'var(--slate-0)', cursor: 'pointer', fontSize: 'var(--text-sm)', fontFamily: 'var(--font-sans)', color: 'var(--text-body)', display: 'inline-flex', alignItems: 'center', gap: 5 }}><Icon name="pencil" size={14} /> Edit</button>}
              <button onClick={onClose} style={{ width: 32, height: 32, border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', background: 'var(--slate-0)', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-muted)' }}><Icon name="x" size={16} /></button>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 6, marginTop: 12 }}>
            <Badge tone={PRIORITY_TONE[p.priority] || 'neutral'} size="sm">{p.priority}</Badge>
            <Badge tone={(PS[p.status]||['neutral'])[0]} dot>{(PS[p.status]||['',p.status])[1]}</Badge>
          </div>
        </div>

        {/* Tabs */}
        <div style={{ display: 'flex', gap: 2, padding: '0 16px', borderBottom: '1px solid var(--border-subtle)' }}>
          {TABS.map(([id,label]) => (
            <button key={id} onClick={() => setTab(id)} style={{ padding: '11px 12px', background: 'none', border: 'none', borderBottom: tab===id?'2px solid var(--blue-600)':'2px solid transparent', cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', color: tab===id?'var(--blue-700)':'var(--text-muted)', marginBottom: -1 }}>{label}{id==='milestones'&&milestones.length?` (${milestones.length})`:''}{id==='tasks'&&tasks.length?` (${tasks.length})`:''}</button>
          ))}
        </div>

        <div style={{ flex: 1, overflowY: 'auto', padding: 22 }}>
          {tab === 'overview' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {/* Health */}
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 12 }}>
                <Card padding="md"><div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-muted)', fontWeight:'var(--fw-semibold)', textTransform:'uppercase' }}>Project health</div><div style={{ fontSize: 'var(--text-xl)', fontWeight:'var(--fw-extrabold)', color: hp.color, marginTop: 4 }}>{hp.dot} {hp.label}</div><div style={{ fontSize:'var(--text-2xs)', color:'var(--text-subtle)', marginTop: 4 }}>{p.due_date ? 'Due ' + new Date(String(p.due_date).slice(0,10)+'T00:00:00').toLocaleDateString('en-GB',{day:'2-digit',month:'short'}) : 'No due date'}</div></Card>
                <Card padding="md"><div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-muted)', fontWeight:'var(--fw-semibold)', textTransform:'uppercase' }}>Progress</div><div style={{ fontSize: 'var(--text-2xl)', fontWeight:'var(--fw-extrabold)', color:'var(--text-strong)', marginTop: 2 }}>{progress}%</div><div style={{ fontSize:'var(--text-2xs)', color:'var(--text-subtle)' }}>{tasks.length ? `${doneTasks}/${tasks.length} tasks done` : 'No tasks yet'}</div></Card>
              </div>
              {/* Who owns and delivers this project. */}
              <Card padding="md">
                <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-muted)', fontWeight:'var(--fw-semibold)', textTransform:'uppercase', marginBottom: 8 }}>Ownership</div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 10, fontSize: 'var(--text-sm)' }}>
                  <div><div style={{ color:'var(--text-subtle)', fontSize:'var(--text-2xs)' }}>Project manager</div><div style={{ color:'var(--text-body)', fontWeight:'var(--fw-semibold)' }}>{pmName || '—'}</div></div>
                  <div><div style={{ color:'var(--text-subtle)', fontSize:'var(--text-2xs)' }}>Team</div><div style={{ color:'var(--text-body)', fontWeight:'var(--fw-semibold)' }}>{teamName || '—'}</div></div>
                  <div><div style={{ color:'var(--text-subtle)', fontSize:'var(--text-2xs)' }}>Type</div><div style={{ color:'var(--text-body)' }}>{typeLabel}</div></div>
                  <div><div style={{ color:'var(--text-subtle)', fontSize:'var(--text-2xs)' }}>Start</div><div style={{ color:'var(--text-body)' }}>{p.start_date ? new Date(String(p.start_date).slice(0,10)+'T00:00:00').toLocaleDateString('en-GB',{day:'2-digit',month:'short',year:'numeric'}) : '—'}</div></div>
                </div>
              </Card>
              {/* Commercials — finance-gated. The server nulls these for anyone
                  who is not owner/admin, so an empty object here means "not permitted"
                  as well as "not entered"; either way there is nothing to show. */}
              {canSeeBudget && (Number(p.contract_value)>0 || Number(p.amount_invoiced)>0) && (
                <Card padding="md">
                  <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-muted)', fontWeight:'var(--fw-semibold)', textTransform:'uppercase', marginBottom: 8 }}>Commercials</div>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 10, fontSize: 'var(--text-sm)' }}>
                    {[['Contract value', p.contract_value], ['Invoiced', p.amount_invoiced], ['Paid', p.amount_paid], ['Outstanding', p.amount_outstanding], ['Profit', p.profit]].map(([lbl,val]) => (
                      <div key={lbl}><div style={{ color:'var(--text-subtle)', fontSize:'var(--text-2xs)' }}>{lbl}</div><div style={{ color:'var(--text-body)', fontWeight:'var(--fw-semibold)' }}>{val==null?'—':fmtBudget(Number(val), cur)}</div></div>
                    ))}
                    {p.profit_margin != null && <div><div style={{ color:'var(--text-subtle)', fontSize:'var(--text-2xs)' }}>Margin</div><div style={{ color:'var(--text-body)', fontWeight:'var(--fw-semibold)' }}>{p.profit_margin}%</div></div>}
                  </div>
                </Card>
              )}
              {/* Budget — owner/admin only; "Not set" when no budget was entered. */}
              {canSeeBudget && (
                <Card padding="md">
                  {Number(p.budget) > 0 ? <>
                    <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-muted)', fontWeight:'var(--fw-semibold)', textTransform:'uppercase', marginBottom: 6 }}>Budget · {budgetPct}% used</div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 'var(--text-sm)' }}>
                      <span style={{ color: 'var(--text-muted)' }}>Spent {fmtBudget(Number(p.spent||0), cur)}</span>
                      <span style={{ fontWeight: 'var(--fw-bold)', color: 'var(--text-strong)' }}>{fmtBudget(Number(p.budget||0), cur)}</span>
                    </div>
                    <ProgressBar value={Math.min(100,budgetPct)} tone={budgetPct>90?'danger':'brand'} size="sm" />
                  </> : <>
                    <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-muted)', fontWeight:'var(--fw-semibold)', textTransform:'uppercase', marginBottom: 4 }}>Budget</div>
                    <div style={{ fontSize: 'var(--text-sm)', color: 'var(--text-subtle)', fontWeight: 'var(--fw-semibold)' }}>Not set</div>
                  </>}
                </Card>
              )}
              {/* Meta */}
              <Card padding="md">
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 'var(--text-sm)' }}>
                  {[['Client', clientName],['Start', p.start_date ? new Date(p.start_date).toLocaleDateString('en-GB') : '—'],['Due', p.due_date ? new Date(p.due_date).toLocaleDateString('en-GB') : '—'],['Tasks', `${doneTasks}/${tasks.length} done`],['Milestones', milestones.length ? `${doneMs}/${milestones.length} done` : '—']].map(([k,v]) => (
                    <div key={k} style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: 'var(--text-muted)' }}>{k}</span><span style={{ fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>{v}</span></div>
                  ))}
                </div>
              </Card>
              {p.description && <Card padding="md"><div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-muted)', fontWeight:'var(--fw-semibold)', textTransform:'uppercase', marginBottom: 6 }}>Description</div><div style={{ fontSize: 'var(--text-sm)', color: 'var(--text-body)', whiteSpace: 'pre-wrap', lineHeight: 1.5 }}>{p.description}</div></Card>}
            </div>
          )}

          {tab === 'milestones' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {canManage && (
                <div style={{ display: 'flex', gap: 8, marginBottom: 6 }}>
                  <input value={newMs} onChange={e => setNewMs(e.target.value)} onKeyDown={e => e.key==='Enter'&&addMilestone()} placeholder="New milestone…" style={{ flex: 1, height: 36, padding: '0 12px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', fontSize: 'var(--text-sm)', fontFamily: 'var(--font-sans)', outline: 'none' }} />
                  <button onClick={addMilestone} style={{ height: 36, padding: '0 14px', background: 'var(--blue-600)', color: '#fff', border: 'none', borderRadius: 'var(--radius-md)', cursor: 'pointer', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', fontFamily: 'var(--font-sans)' }}>Add</button>
                </div>
              )}
              {milestones.length === 0 && <div style={{ padding: 24, textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>No milestones yet.</div>}
              {milestones.map(m => (
                <div key={m.id} style={{ padding: '10px 12px', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <button onClick={() => canManage && cycleMs(m)} title="Toggle status" style={{ width: 22, height: 22, borderRadius: '50%', border: '2px solid ' + (msStatus(m)==='done'?'var(--green-600)':msStatus(m)==='in_progress'?'var(--amber-500)':'var(--border-default)'), background: msStatus(m)==='done'?'var(--green-600)':'transparent', cursor: canManage?'pointer':'default', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{msStatus(m)==='done' && <Icon name="check" size={12} style={{ color: '#fff' }} />}</button>
                    <span style={{ flex: 1, fontSize: 'var(--text-sm)', color: 'var(--text-body)', textDecoration: msStatus(m)==='done'?'line-through':'none' }}>{m.title}</span>
                    <Badge tone={msStatus(m)==='done'?'success':msStatus(m)==='in_progress'?'warning':'neutral'} size="sm">{msStatus(m).replace('_',' ')}</Badge>
                    {canManage && <button onClick={() => setMsEdit({ ...m, start_date: m.start_date ? String(m.start_date).slice(0,10) : '', due_date: m.due_date ? String(m.due_date).slice(0,10) : '' })} title="Edit milestone" style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-muted)' }}><Icon name="pencil" size={13} /></button>}
                    {canManage && <button onClick={() => delMs(m)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--red-500)' }}><Icon name="x" size={14} /></button>}
                  </div>
                  {/* Progress comes from the milestone's own linked tasks (server-derived).
                      A milestone with no tasks yet shows nothing rather than a bare 0%. */}
                  {Number(m.tasks_count) > 0 && (
                    <div style={{ marginTop: 8, paddingLeft: 32 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 'var(--text-2xs)', color: 'var(--text-subtle)', marginBottom: 3 }}>
                        <span>{m.done_tasks_count || 0}/{m.tasks_count} tasks done</span>
                        <span style={{ fontWeight: 'var(--fw-semibold)' }}>{m.progress || 0}%</span>
                      </div>
                      <ProgressBar value={Number(m.progress) || 0} tone={Number(m.progress) >= 100 ? 'success' : 'brand'} size="sm" />
                    </div>
                  )}
                  {(m.due_date || m.start_date || m.owner_id) && (
                    <div style={{ marginTop: 6, paddingLeft: 32, fontSize: 'var(--text-2xs)', color: 'var(--text-subtle)', display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                      {(m.due_date || m.start_date) && (
                        <span>
                          {m.start_date ? new Date(String(m.start_date).slice(0,10)+'T00:00:00').toLocaleDateString('en-GB',{day:'2-digit',month:'short'}) : '—'}
                          {' → '}
                          {m.due_date ? new Date(String(m.due_date).slice(0,10)+'T00:00:00').toLocaleDateString('en-GB',{day:'2-digit',month:'short'}) : '—'}
                        </span>
                      )}
                      {m.owner_id && <span>Owner: {(members.find(x => x.id === m.owner_id) || {}).name || '—'}</span>}
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}

          {tab === 'tasks' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {tasks.length === 0 && (
                <div style={{ padding: 28, textAlign: 'center' }}>
                  <div style={{ color: 'var(--text-muted)', fontSize: 'var(--text-sm)', marginBottom: 12 }}>No tasks yet.</div>
                  <button onClick={() => { if (window.TFNavigate) window.TFNavigate('tasks'); }} style={{ display:'inline-flex', alignItems:'center', gap:6, height: 34, padding: '0 14px', background: 'var(--blue-600)', color:'#fff', border:'none', borderRadius:'var(--radius-md)', cursor:'pointer', fontSize:'var(--text-sm)', fontWeight:'var(--fw-semibold)', fontFamily:'var(--font-sans)' }}><Icon name="plus" size={14} /> Add Task</button>
                </div>
              )}
              {/* Grouped: each milestone's tasks under its own heading, then the
                  tasks that belong to the project but no milestone. A milestone is
                  OPTIONAL, so "Direct Project Tasks" is a normal place to be, not a
                  fallback for bad data. */}
              {taskGroups.map(g => (
                <div key={g.key} style={{ marginBottom: 4 }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: '10px 2px 6px' }}>
                    <span style={{ fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>{g.label}</span>
                    <span style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-subtle)' }}>{g.tasks.filter(t => t.status==='done').length}/{g.tasks.length}</span>
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                    {g.tasks.map(t => (
                      <div key={t.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)' }}>
                        <span style={{ width: 8, height: 8, borderRadius: '50%', background: t.status==='done'?'var(--green-500)':t.status==='in_progress'?'var(--violet-500)':'var(--slate-400)', flexShrink: 0 }} />
                        <span style={{ flex: 1, fontSize: 'var(--text-sm)', color: 'var(--text-body)', textDecoration: t.status==='done'?'line-through':'none' }}>{t.title}</span>
                        <Badge tone={t.priority==='urgent'||t.priority==='high'?'danger':'neutral'} size="sm">{t.priority}</Badge>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          )}

          {tab === 'activity' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              {activity === null && <div style={{ padding: 20, textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>Loading activity…</div>}
              {activity !== null && activity.length === 0 && (
                <div style={{ padding: 24, textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>No activity recorded for this project yet.</div>
              )}
              {(activity || []).map((a, i) => (
                <div key={a.id || i} style={{ display: 'flex', gap: 10, padding: '10px 2px', borderBottom: '1px solid var(--border-subtle)' }}>
                  <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--blue-500)', marginTop: 6, flexShrink: 0 }} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 'var(--text-sm)', color: 'var(--text-body)' }}>
                      <strong style={{ color: 'var(--text-strong)' }}>{a.actor_name || (a.actor && a.actor.name) || 'Someone'}</strong>
                      {' '}{actLabel(a.action)}
                    </div>
                    <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-subtle)', marginTop: 2 }}>{actWhen(a.created_at)}</div>
                  </div>
                </div>
              ))}
            </div>
          )}

          {tab === 'files' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {files.length === 0 && <div style={{ padding: 24, textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>No files. Upload from Docs &amp; Files → this project.</div>}
              {files.map(f => (
                <a key={f.id} href={f.url} target="_blank" rel="noreferrer" style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', textDecoration: 'none', color: 'var(--text-body)' }}>
                  <Icon name="file-text" size={16} style={{ color: 'var(--text-muted)' }} />
                  <span style={{ flex: 1, fontSize: 'var(--text-sm)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.name}</span>
                  <Icon name="external-link" size={13} style={{ color: 'var(--text-subtle)' }} />
                </a>
              ))}
            </div>
          )}
        </div>
      </div>

        {/* Milestone edit — owner, dates, status and description. Progress is not
            editable here: the server derives it from the milestone's tasks. */}
        {msEdit && (
          <div onClick={() => setMsEdit(null)} style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.5)', zIndex: 1100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}>
            <div onClick={e => e.stopPropagation()} style={{ width: 'min(460px, 100%)', maxHeight: '90vh', overflowY: 'auto', background: 'var(--slate-0)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-xl)', padding: 20 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
                <span style={{ fontSize: 'var(--text-lg)', fontWeight: 'var(--fw-extrabold)', color: 'var(--text-strong)' }}>Edit milestone</span>
                <button onClick={() => setMsEdit(null)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-muted)' }}><Icon name="x" size={16} /></button>
              </div>
              <FormRow label="Milestone name" required>
                <input style={FF.input} value={msEdit.title || ''} onChange={e => setMsEdit(v => ({ ...v, title: e.target.value }))} />
              </FormRow>
              <div style={FF.row2}>
                <FormRow label="Owner">
                  <select style={FF.select} value={msEdit.owner_id || ''} onChange={e => setMsEdit(v => ({ ...v, owner_id: e.target.value }))}>
                    <option value="">Unassigned</option>
                    {members.map(m => <option key={m.id} value={m.id}>{m.name || m.email}</option>)}
                  </select>
                </FormRow>
                <FormRow label="Status">
                  <select style={FF.select} value={msEdit.status || 'pending'} onChange={e => setMsEdit(v => ({ ...v, status: e.target.value }))}>
                    <option value="pending">Pending</option>
                    <option value="in_progress">In progress</option>
                    <option value="done">Done</option>
                  </select>
                </FormRow>
              </div>
              <div style={FF.row2}>
                <FormRow label="Start date">
                  <input style={FF.input} type="date" value={msEdit.start_date || ''} onChange={e => setMsEdit(v => ({ ...v, start_date: e.target.value }))} />
                </FormRow>
                <FormRow label="Due date">
                  <input style={FF.input} type="date" value={msEdit.due_date || ''} onChange={e => setMsEdit(v => ({ ...v, due_date: e.target.value }))} />
                </FormRow>
              </div>
              <FormRow label="Description">
                <textarea style={{ ...FF.input, minHeight: 60, resize: 'vertical' }} value={msEdit.description || ''} onChange={e => setMsEdit(v => ({ ...v, description: e.target.value }))} placeholder="Optional" />
              </FormRow>
              {Number(msEdit.tasks_count) > 0 && (
                <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-subtle)', marginBottom: 10 }}>
                  Progress ({msEdit.progress || 0}%) is calculated from this milestone's {msEdit.tasks_count} task{Number(msEdit.tasks_count) === 1 ? '' : 's'}.
                </div>
              )}
              <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 6 }}>
                <button onClick={() => setMsEdit(null)} style={{ height: 36, padding: '0 14px', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', background: 'var(--slate-0)', cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', color: 'var(--text-body)' }}>Cancel</button>
                <button onClick={saveMs} disabled={msSaving || !(msEdit.title || '').trim()} style={{ height: 36, padding: '0 16px', border: 'none', borderRadius: 'var(--radius-md)', background: 'var(--blue-600)', color: '#fff', cursor: msSaving ? 'default' : 'pointer', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-bold)', opacity: msSaving ? 0.7 : 1 }}>{msSaving ? 'Saving…' : 'Save changes'}</button>
              </div>
            </div>
          </div>
        )}

    </div>
  );
}

// ── Timeline / Gantt view ────────────────────────────────────────────────────
function TimelineView({ projects, onOpen }) {
  const parse = (d) => d ? new Date(String(d).slice(0,10)) : null;
  // Determine range across projects (fallback: this month ± range).
  const withDates = projects.map(p => ({ p, s: parse(p.start_date) || parse(p.created_at), e: parse(p.due_date) }));
  const dates = withDates.flatMap(x => [x.s, x.e]).filter(Boolean);
  const today = new Date();
  let min = dates.length ? new Date(Math.min(...dates.map(d=>d.getTime()))) : new Date(today.getFullYear(), today.getMonth()-1, 1);
  let max = dates.length ? new Date(Math.max(...dates.map(d=>d.getTime()))) : new Date(today.getFullYear(), today.getMonth()+2, 0);
  // snap to month bounds
  min = new Date(min.getFullYear(), min.getMonth(), 1);
  max = new Date(max.getFullYear(), max.getMonth()+1, 0);
  const totalMs = Math.max(1, max - min);
  // Month columns
  const months = [];
  let cur = new Date(min);
  while (cur <= max) { months.push(new Date(cur)); cur = new Date(cur.getFullYear(), cur.getMonth()+1, 1); }
  const pct = (d) => Math.max(0, Math.min(100, ((d - min) / totalMs) * 100));
  const todayPct = pct(today);

  return (
    <div style={{ overflowX: 'auto' }} data-scroll-x>
      <div style={{ minWidth: Math.max(680, months.length * 90) }}>
        {/* Month header */}
        <div style={{ display: 'flex', borderBottom: '1px solid var(--border-subtle)', marginLeft: 180 }}>
          {months.map((m, i) => (
            <div key={i} style={{ flex: 1, fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--text-subtle)', padding: '6px 8px', borderLeft: i?'1px solid var(--border-subtle)':'none' }}>{m.toLocaleDateString('en',{month:'short',year:'2-digit'})}</div>
          ))}
        </div>
        {/* Rows */}
        <div style={{ position: 'relative' }}>
          {todayPct >= 0 && todayPct <= 100 && (
            <div style={{ position: 'absolute', top: 0, bottom: 0, left: `calc(180px + ${todayPct}% * (100% - 180px) / 100)`, width: 2, background: 'var(--red-400)', zIndex: 1, opacity: 0.6 }} title="Today" />
          )}
          {withDates.map(({ p, s, e }, i) => {
            const [tone] = PS[p.status] || ['neutral'];
            const bg = { info:'var(--blue-500)', success:'var(--green-500)', warning:'var(--amber-500)', neutral:'var(--slate-400)' }[tone] || 'var(--blue-500)';
            const left = s ? pct(s) : 0;
            const right = e ? pct(e) : (s ? pct(s)+5 : 100);
            const width = Math.max(3, right - left);
            return (
              <div key={p.id||i} style={{ display: 'flex', alignItems: 'center', borderBottom: '1px solid var(--border-subtle)', minHeight: 40 }}>
                <div onClick={() => onOpen && onOpen(p)} style={{ width: 180, flexShrink: 0, paddingRight: 10, fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', cursor: 'pointer' }}>{p.name}</div>
                <div style={{ flex: 1, position: 'relative', height: 22 }}>
                  <div onClick={() => onOpen && onOpen(p)} title={`${p.start_date||'?'} → ${p.due_date||'?'} · ${p.progress||0}%`}
                    style={{ position: 'absolute', left: left+'%', width: width+'%', top: 3, height: 16, background: bg, borderRadius: 4, cursor: 'pointer', opacity: 0.9, overflow: 'hidden' }}>
                    <div style={{ height: '100%', width: (p.progress||0)+'%', background: 'rgba(255,255,255,0.35)' }} />
                  </div>
                </div>
              </div>
            );
          })}
        </div>
        <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-subtle)', marginTop: 8, marginLeft: 180 }}>Bars span start → due date. Lighter fill = progress. Red line = today.</div>
      </div>
    </div>
  );
}

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