/* ============================================
   LIST VIEW (grouped by status)
   ============================================ */

const ListView = ({ tasks, onOpenTask, onToggleDone, groupBy = 'status' }) => {
  const [collapsed, setCollapsed] = React.useState({});

  const groups = React.useMemo(() => {
    if (groupBy === 'status') {
      return STATUSES.map(s => ({
        key: s.key,
        label: s.label,
        color: s.color,
        tasks: tasks.filter(t => (t.status || 'Backlog') === s.key),
      })).filter(g => g.tasks.length > 0);
    }
    if (groupBy === 'priority') {
      return PRIORITIES.map(p => ({
        key: p,
        label: p,
        color: ({ Highest: '#DC2649', High: '#EA580C', Medium: '#D97706', Low: '#059669' })[p],
        tasks: tasks.filter(t => t.priority === p),
      })).filter(g => g.tasks.length > 0);
    }
    if (groupBy === 'project') {
      const map = {};
      tasks.forEach(t => {
        if (!map[t.project]) map[t.project] = [];
        map[t.project].push(t);
      });
      return Object.keys(map).map(pid => {
        const p = getProject(pid) || { name: 'No project', color: '#94A3B8' };
        return { key: pid, label: p.name, color: p.color, tasks: map[pid] };
      });
    }
    return [{ key: 'all', label: 'All tasks', color: '#6D49F2', tasks }];
  }, [tasks, groupBy]);

  return (
    <div className="list-view">
      {groups.map(g => (
        <div className="list-group" key={g.key}>
          <div className="list-group-head" onClick={() => setCollapsed(c => ({ ...c, [g.key]: !c[g.key] }))}>
            <Icon name={collapsed[g.key] ? 'chevronRight' : 'chevronDown'} size={14} />
            <span className="list-group-pill">
              <span className="dot" style={{ background: g.color }} />
              {g.label}
            </span>
            <span className="list-group-count">{g.tasks.length}</span>
            <span className="list-group-line" />
          </div>
          {!collapsed[g.key] && (
            <div className="list-table">
              <div className="list-row head">
                <span></span>
                <span>Task</span>
                <span>Project</span>
                <span>Priority</span>
                <span>Assignee</span>
                <span>Due</span>
                <span>Work type</span>
                <span></span>
              </div>
              {g.tasks.map(t => {
                const proj = getProject(t.project);
                const done = t.status === 'Done';
                const checkDone = (t.checklist || []).filter(c => c.done).length;
                const checkTotal = (t.checklist || []).length;
                return (
                  <div className="list-row" key={t.id} onClick={() => onOpenTask(t.id)}>
                    <button
                      className={`list-check${done ? ' done' : ''}`}
                      onClick={(e) => { e.stopPropagation(); onToggleDone(t.id); }}
                    >
                      {done && <Icon name="check" size={12} stroke={3} />}
                    </button>
                    <div className="list-name">
                      <span className="list-name-text">{t.name}</span>
                      {checkTotal > 0 && (
                        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 11, color: 'var(--text-subtle)', flexShrink: 0 }}>
                          <Icon name="checkSquare" size={11} />
                          {checkDone}/{checkTotal}
                        </span>
                      )}
                      {(t.comments || []).length > 0 && (
                        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 11, color: 'var(--text-subtle)', flexShrink: 0 }}>
                          <Icon name="message" size={11} />
                          {t.comments.length}
                        </span>
                      )}
                    </div>
                    {proj ? (
                      <span className="list-cell-pill" style={{ background: `${proj.color}1A`, color: proj.color, width: 'fit-content' }}>
                        <span className="dot" style={{ background: proj.color }} />
                        {proj.name}
                      </span>
                    ) : <span className="list-cell-muted">—</span>}
                    <PriorityBadge priority={t.priority} />
                    {t.assignee ? (
                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
                        <Avatar user={t.assignee} size="sm" />
                        <span className="list-cell-muted" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                          {getUser(t.assignee)?.short}
                        </span>
                      </span>
                    ) : <span className="list-cell-muted">Unassigned</span>}
                    <span><DuePill date={t.dueDate} status={t.status} /></span>
                    <span className="list-cell-muted" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                      {t.workType || '—'}
                    </span>
                    <button className="icon-btn" onClick={(e) => { e.stopPropagation(); }} title="More">
                      <Icon name="more" size={14} />
                    </button>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      ))}
      {groups.length === 0 && (
        <div className="empty-state">
          <div className="empty-state-icon"><Icon name="list" size={28} /></div>
          <h3>No tasks match your filters</h3>
          <p>Try clearing some filters to see more results.</p>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { ListView });