// Table view — inline editable spreadsheet
function TableView({ tasks, displayIds, updateTask, deleteTask, openTask, justAddedId, t, lang, density, perms, workstreams }) {
  // Prefer real users from shared.profiles; legacy AOX_TEAM only if the query failed.
  const profileTeam = window.AOX_TEAM_MEMBERS || [];
  const legacyTeam  = window.AOX_TEAM || [];
  const useProfiles = profileTeam.length > 0;
  const [editing, setEditing] = useState(null); // {id, field}
  const canEdit = perms?.canEdit !== false;
  const canDelete = !!perms?.canDelete;
  const rowH = density === 'compact' ? 28 : 36;

  function startEdit(id, field){ setEditing({id, field}); }
  function commitEdit(id, field, value){
    const patch = {};
    if (field === 'progress') patch.progress = Math.max(0, Math.min(100, Number(value)||0));
    else if (field === 'budgetPlan' || field === 'budgetActual') patch[field] = Number(String(value).replace(/[^0-9]/g,'')) || 0;
    else patch[field] = value;
    updateTask(id, patch);
    setEditing(null);
  }

  const cols = [
    { key:'id', label:'ID', w: 60, render:(v, tk)=>(<span className="mono muted" style={{fontSize:10.5}}>{displayIds?.[tk.id] || v}</span>) },
    { key:'phase', label: t.labels.phase, w: 70, render:(v)=>(<PhaseTag phase={v}/>) },
    { key:'workstream', label: t.labels.workstream, w: 90, render:(v)=>(<TrackTag track={v} workstreams={workstreams}/>) },
    { key:'deliverable', label: t.labels.deliverable, w: 130, edit:true },
    { key:'task', label: t.labels.task, w: 260, edit:true, bold:true, render:(v, tk)=>(
      <div style={{display:'flex', alignItems:'center', gap: 5, overflow:'hidden', minWidth:0, flex:1}}>
        <span style={{overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', flex:1}}>{v}</span>
        {tk.links?.length > 0 && <span style={{fontSize:10.5, color:'var(--fg-muted)', flexShrink:0}}>🔗</span>}
      </div>
    )},
    { key:'owner', label: t.labels.owner, w: 140, render:(v)=>{
      const person = AOX_UTIL.avatarFor(v);
      return (
        <div style={{display:'flex', alignItems:'center', gap:6}}>
          {person ? <Avatar person={person} size={18}/> : <span className="muted" style={{fontSize:11}}>—</span>}
          <span style={{fontSize:12, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>
            {AOX_UTIL.memberDisplayName(AOX_UTIL.findMember(v))}
          </span>
        </div>
      );
    }, customEdit: true },
    { key:'start', label: t.labels.start, w: 100, edit:true, type:'date', mono: true },
    { key:'end', label: t.labels.end, w: 100, edit:true, type:'date', mono: true },
    { key:'duration', label: t.labels.duration, w: 54, render:(v)=>(<span className="mono" style={{fontSize:11.5}}>{v}</span>) },
    { key:'status', label: t.labels.status, w: 100, render:(v)=>(<StatusPill status={v} t={t}/>), customEdit: true },
    { key:'progress', label: t.labels.progress, w: 90, render:(v, tk)=>(
      <div style={{display:'flex', alignItems:'center', gap:6}}>
        <Progress value={v}/>
        <span className="mono" style={{fontSize:10.5, minWidth:26}}>{v||0}%</span>
      </div>
    ), edit:true, type:'number' },
    { key:'budgetPlan', label: t.labels.budgetPlan, w: 110, render:(v)=>(<span className="mono" style={{fontSize:11}}>{AOX_UTIL.moneyShort(v)}</span>), edit:true, type:'number', align:'right' },
    { key:'budgetActual', label: t.labels.budgetActual, w: 100, render:(v)=>(<span className="mono" style={{fontSize:11, color: v > 0 ? 'var(--fg)' : 'var(--fg-subtle)'}}>{AOX_UTIL.moneyShort(v)}</span>), edit:true, type:'number', align:'right' },
    { key:'risk', label: t.labels.risk, w: 70, render:(v)=>(<RiskPill risk={v} t={t}/>), customEdit: true },
  ];

  const totalW = cols.reduce((a,c)=>a+c.w, 0) + 44;

  return (
    <div style={{
      background:'var(--bg-solid)',
      borderRadius: 12, border:'1px solid var(--border)',
      overflow:'auto', boxShadow: 'var(--shadow-1)'
    }}>
      <div style={{ minWidth: totalW }}>
        {/* header */}
        <div style={{
          display:'grid',
          gridTemplateColumns: cols.map(c=>c.w+'px').join(' ') + ' 44px',
          position:'sticky', top:0, zIndex:2,
          background:'var(--bg-solid)',
          borderBottom:'1px solid var(--border)',
          height: rowH
        }}>
          {cols.map(c => (
            <div key={c.key} style={{
              padding: '0 8px',
              display:'flex', alignItems:'center',
              fontSize: 10.5, fontWeight: 600, color: 'var(--fg-muted)',
              textTransform:'uppercase', letterSpacing: 0.05,
              borderRight: '1px solid var(--divider)',
              justifyContent: c.align === 'right' ? 'flex-end' : 'flex-start'
            }}>{c.label}</div>
          ))}
          <div/>
        </div>
        {/* rows */}
        {tasks.map((tk, idx) => (
          <div key={tk.id}
            className={tk.id === justAddedId ? 'aox-just-added' : undefined}
            style={{
            display:'grid',
            gridTemplateColumns: cols.map(c=>c.w+'px').join(' ') + ' 44px',
            height: rowH,
            borderBottom:'1px solid var(--divider)',
            background: idx % 2 === 0 ? 'transparent' : 'var(--surface-2)',
          }}
          onMouseEnter={e=>e.currentTarget.style.background='var(--hover)'}
          onMouseLeave={e=>e.currentTarget.style.background=idx%2===0?'transparent':'var(--surface-2)'}
          >
            {cols.map(c => {
              const v = tk[c.key];
              const isEditing = editing?.id === tk.id && editing?.field === c.key;
              const cellStyle = {
                padding: '0 8px',
                display:'flex', alignItems:'center',
                borderRight:'1px solid var(--divider)',
                overflow:'hidden', whiteSpace:'nowrap',
                fontSize: 12.5,
                justifyContent: c.align === 'right' ? 'flex-end' : 'flex-start',
                fontWeight: c.bold ? 500 : 400
              };

              if (isEditing && c.edit && !c.customEdit) {
                return (
                  <div key={c.key} style={{...cellStyle, padding: 0}}>
                    <input
                      autoFocus
                      type={c.type || 'text'}
                      defaultValue={v ?? ''}
                      onBlur={e=>commitEdit(tk.id, c.key, e.target.value)}
                      onKeyDown={e=>{
                        if (e.key === 'Enter') e.target.blur();
                        if (e.key === 'Escape') setEditing(null);
                      }}
                      style={{
                        width:'100%', height:'100%',
                        border: '2px solid var(--accent)',
                        background: 'var(--bg-solid)',
                        padding: '0 8px', fontSize: 12.5,
                        textAlign: c.align || 'left',
                        fontFamily: c.mono ? 'var(--font-mono)' : 'inherit'
                      }}
                    />
                  </div>
                );
              }
              if (isEditing && c.customEdit) {
                if (c.key === 'status') {
                  return (
                    <div key={c.key} style={{...cellStyle, padding: 0}}>
                      <select autoFocus defaultValue={v} onBlur={()=>setEditing(null)} onChange={e=>commitEdit(tk.id, c.key, e.target.value)}
                        style={{width:'100%', height:'100%', border:'2px solid var(--accent)', background:'var(--bg-solid)', padding:'0 6px'}}>
                        {['Not Started','In Progress','Blocked','Done'].map(s => <option key={s} value={s}>{t.status[s]}</option>)}
                      </select>
                    </div>
                  );
                }
                if (c.key === 'risk') {
                  return (
                    <div key={c.key} style={{...cellStyle, padding: 0}}>
                      <select autoFocus defaultValue={v} onBlur={()=>setEditing(null)} onChange={e=>commitEdit(tk.id, c.key, e.target.value)}
                        style={{width:'100%', height:'100%', border:'2px solid var(--accent)', background:'var(--bg-solid)', padding:'0 6px'}}>
                        {['Low','Med','High'].map(s => <option key={s} value={s}>{t.risk[s]}</option>)}
                      </select>
                    </div>
                  );
                }
                if (c.key === 'owner') {
                  return (
                    <div key={c.key} style={{...cellStyle, padding: 0}}>
                      <select autoFocus defaultValue={v} onBlur={()=>setEditing(null)} onChange={e=>commitEdit(tk.id, c.key, e.target.value)}
                        style={{width:'100%', height:'100%', border:'2px solid var(--accent)', background:'var(--bg-solid)', padding:'0 6px'}}>
                        <option value="">—</option>
                        {useProfiles
                          ? profileTeam.map(p => (
                              <option key={p.email || p.id} value={p.email || p.id}>
                                {AOX_UTIL.memberLabel(p)}
                              </option>
                            ))
                          : legacyTeam.map(p => (
                              <option key={p.id} value={p.id}>{p.name} · {p.role}</option>
                            ))}
                      </select>
                    </div>
                  );
                }
              }

              return (
                <div key={c.key}
                  onDoubleClick={()=>{ if (canEdit && (c.edit || c.customEdit)) startEdit(tk.id, c.key); }}
                  onClick={()=>{ if (c.key === 'task') openTask(tk); }}
                  style={{...cellStyle,
                    cursor: (canEdit && (c.edit || c.customEdit)) ? 'cell' : (c.key === 'task' ? 'pointer' : 'default'),
                    color: (!canEdit && (c.edit || c.customEdit)) ? 'var(--fg-muted)' : undefined,
                  }}>
                  {c.render ? c.render(v, tk) : <span style={{overflow:'hidden', textOverflow:'ellipsis'}}>{v}</span>}
                </div>
              );
            })}
            <div style={{display:'flex', alignItems:'center', justifyContent:'center'}}>
              {canDelete && (
                <button className="iconbtn" onClick={()=>deleteTask(tk.id)} title={t.labels.deleteTask}
                  style={{width:24, height:24, color:'var(--fg-subtle)'}}>
                  <Icon name="trash" size={13}/>
                </button>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
window.TableView = TableView;