// tasks.jsx
function TasksPage({ user, onOpenLead }) {
  const [leads, setLeads] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  const today = new Date().toISOString().slice(0, 10);

  const load = () => {
    if (!user) return;
    setLoading(true);
    window.api.getLeads({ assigned_to: user.email, limit: 200 })
      .then(({ leads }) => setLeads(leads))
      .catch(console.error)
      .finally(() => setLoading(false));
  };

  React.useEffect(load, [user?.email]);

  const active = leads.filter(l => l.status !== 'won' && l.status !== 'lost');
  const overdue  = active.filter(l => l.followUp && l.followUp < today);
  const dueToday = active.filter(l => l.followUp === today);
  const fresh    = active.filter(l => l.status === 'new' && !l.followUp);
  const noDate   = active.filter(l => !l.followUp && l.status !== 'new');

  const total = overdue.length + dueToday.length + fresh.length + noDate.length;

  const groups = [
    { key: 'overdue',  label: '已逾期',       color: '#ef4444', bg: '#fef2f2', dot: '#ef4444', leads: overdue  },
    { key: 'today',    label: '今日跟进',      color: '#d97706', bg: '#fffbeb', dot: '#f59e0b', leads: dueToday },
    { key: 'fresh',    label: '新线索待处理',  color: '#2563eb', bg: '#eff6ff', dot: '#3b82f6', leads: fresh    },
    { key: 'nodate',   label: '未设跟进日期',  color: '#64748b', bg: '#f8fafc', dot: '#94a3b8', leads: noDate   },
  ];

  return (
    <main className="main">
      <header className="main-header">
        <div className="crumbs">
          <span className="crumb-soft">销售</span>
          <span className="crumb-sep">/</span>
          <span className="crumb-cur">我的任务</span>
        </div>
      </header>

      <div className="page-body">
        <div className="page-title-row">
          <div>
            <h1 className="page-title">我的任务</h1>
            <div className="page-sub">
              {loading ? '加载中…' : total === 0 ? '今天没有待处理事项 🎉' : `共 ${total} 项待处理`}
            </div>
          </div>
          <button className="btn-ghost" onClick={load} style={{ alignSelf: 'center' }}>刷新</button>
        </div>

        {loading ? (
          <div className="empty">加载中…</div>
        ) : total === 0 ? (
          <div className="task-empty-state">
            <div className="task-empty-icon">✓</div>
            <div className="task-empty-title">全部处理完毕</div>
            <div className="task-empty-sub">没有逾期、没有今日待跟进、没有新线索</div>
          </div>
        ) : (
          <div className="task-groups">
            {groups.filter(g => g.leads.length > 0).map(g => (
              <div key={g.key} className="task-group">
                <div className="task-group-header" style={{ background: g.bg, borderColor: g.dot }}>
                  <span className="task-group-dot" style={{ background: g.dot }}></span>
                  <span className="task-group-label" style={{ color: g.color }}>{g.label}</span>
                  <span className="task-group-count">{g.leads.length}</span>
                </div>
                {g.leads.map(lead => (
                  <TaskRow key={lead.id} lead={lead} today={today} onClick={() => onOpenLead(lead)} />
                ))}
              </div>
            ))}
          </div>
        )}
      </div>
    </main>
  );
}

function TaskRow({ lead, today, onClick }) {
  const meta = window.STATUS_META[lead.status] || window.STATUS_META['new'];
  const dk = lead.followUp
    ? (lead.followUp < today ? 'overdue' : lead.followUp === today ? 'today' : 'normal')
    : 'none';

  return (
    <div className="task-row" onClick={onClick}>
      <div className="task-row-left">
        <div className="task-avatar">{(lead.name || '?').slice(0, 1)}</div>
        <div>
          <div className="task-name">{lead.name}</div>
          <div className="task-sub">{lead.company}{lead.product ? ` · ${lead.product}` : ''}</div>
        </div>
      </div>
      <div className="task-row-right">
        <span className="status-pill" style={{ background: meta.bg, color: meta.fg }}>
          <span className="pill-dot" style={{ background: meta.dot }}></span>
          {meta.label}
        </span>
        {lead.followUp && (
          <span className={`task-date task-date-${dk}`}>
            {dk === 'overdue' ? '⚠ ' : ''}{lead.followUp.slice(5)}
          </span>
        )}
      </div>
    </div>
  );
}

window.TasksPage = TasksPage;