// Kanban view
function KanbanView({ tasks, displayIds, updateTask, openTask, t, lang, perms, workstreams }) {
  const columns = ['Not Started','In Progress','Blocked','Done'];
  const [dragOver, setDragOver] = useState(null);
  const canEdit = perms?.canEdit !== false;

  function onDragStart(e, task){
    if (!canEdit) { e.preventDefault(); return; }
    e.dataTransfer.setData('text/plain', task.id);
    e.dataTransfer.effectAllowed = 'move';
  }
  function onDrop(e, col){
    if (!canEdit) return;
    const id = e.dataTransfer.getData('text/plain');
    if (id) {
      const prog = col === 'Done' ? 100 : col === 'Not Started' ? 0 : undefined;
      const patch = { status: col };
      if (prog !== undefined) patch.progress = prog;
      updateTask(id, patch);
    }
    setDragOver(null);
  }

  const grouped = useMemo(() => {
    const g = {};
    columns.forEach(c => g[c] = []);
    tasks.forEach(tk => { (g[tk.status] || g['Not Started']).push(tk); });
    return g;
  }, [tasks]);

  return (
    <div style={{
      display:'grid',
      gridTemplateColumns: `repeat(${columns.length}, 1fr)`,
      gap: 14, alignItems: 'stretch'
    }}>
      {columns.map(col => (
        <div key={col}
          onDragOver={(e)=>{ e.preventDefault(); setDragOver(col); }}
          onDragLeave={()=>setDragOver(v => v===col ? null : v)}
          onDrop={(e)=>onDrop(e, col)}
          style={{
            display:'flex', flexDirection:'column',
            background: dragOver === col ? 'var(--accent-soft)' : 'var(--surface-2)',
            border: '1px solid ' + (dragOver === col ? 'var(--accent)' : 'var(--border)'),
            borderRadius: 12,
            padding: 10, gap: 8,
            transition: 'background .15s, border-color .15s',
            minHeight: 200
          }}>
          <div style={{
            display:'flex', alignItems:'center', justifyContent:'space-between',
            padding: '4px 6px'
          }}>
            <span style={{display:'flex', alignItems:'center', gap:7, fontWeight:600, fontSize:12.5}}>
              <StatusPill status={col} t={t}/>
            </span>
            <span className="mono muted" style={{fontSize:11}}>{grouped[col].length}</span>
          </div>
          {grouped[col].map(tk => {
            const phaseN = (tk.phase||'').match(/\d/)?.[0] || '3';
            return (
              <div key={tk.id}
                draggable={canEdit}
                onDragStart={(e)=>onDragStart(e, tk)}
                onClick={()=>openTask(tk)}
                style={{
                  background: 'var(--surface)',
                  border: '1px solid var(--border)',
                  borderRadius: 10,
                  padding: 10,
                  cursor: canEdit ? 'grab' : 'pointer',
                  boxShadow: 'var(--shadow-1)',
                  transition: 'transform .1s, box-shadow .15s'
                }}
                onMouseDown={e=>{ if (canEdit) e.currentTarget.style.cursor='grabbing'; }}
                onMouseUp={e=>{ if (canEdit) e.currentTarget.style.cursor='grab'; }}
              >
                <div style={{display:'flex', alignItems:'center', gap:6, marginBottom:6}}>
                  <span style={{width: 3, height:14, background: `var(--phase${phaseN})`, borderRadius: 2}}/>
                  <PhaseTag phase={tk.phase}/>
                  <span className="muted mono" style={{fontSize: 10.5}}>{displayIds?.[tk.id] || tk.id}</span>
                  <span style={{flex:1}}/>
                  <RiskPill risk={tk.risk} t={t}/>
                </div>
                <div style={{fontSize: 13, fontWeight: 500, lineHeight: 1.35, marginBottom: 8}}>{tk.task}</div>
                <div style={{display:'flex', alignItems:'center', gap:8, marginBottom: 8}}>
                  <TrackTag track={tk.workstream} workstreams={workstreams}/>
                  <span className="muted" style={{fontSize: 11, marginLeft:'auto'}}>{tk.deliverable}</span>
                </div>
                <div style={{display:'flex', alignItems:'center', gap:8}}>
                  <Progress value={tk.progress}/>
                  <span className="mono muted" style={{fontSize:10.5}}>{tk.progress||0}%</span>
                  <span style={{flex:1}}/>
                  <span className="mono muted" style={{fontSize:10.5}}>{tk.start?.slice(5)} → {tk.end?.slice(5)}</span>
                </div>
              </div>
            );
          })}
        </div>
      ))}
    </div>
  );
}
window.KanbanView = KanbanView;