/* ============================================
   DASHBOARD
   ============================================ */

const Dashboard = ({ tasks, currentUser, onOpenTask }) => {
  const active = tasks.filter(t => !['Done', 'Cancel', 'Archived'].includes(t.status));
  const done = tasks.filter(t => t.status === 'Done');
  const overdue = active.filter(t => {
    const days = daysFromToday(t.dueDate);
    return days !== null && days < 0;
  });
  const myActive = active.filter(t => t.assignee === currentUser.id);

  const statusCounts = STATUSES.map(s => ({
    label: s.label,
    color: s.color,
    value: tasks.filter(t => (t.status || 'Backlog') === s.key).length,
  }));

  // Workload per person (top 8)
  const workload = USERS.map(u => ({
    user: u,
    count: active.filter(t => t.assignee === u.id).length,
  })).sort((a, b) => b.count - a.count).slice(0, 8);
  const maxWorkload = Math.max(...workload.map(w => w.count), 1);

  // Top projects
  const projectCounts = PROJECTS.map(p => ({
    project: p,
    value: tasks.filter(t => t.project === p.id).length,
  })).sort((a, b) => b.value - a.value).slice(0, 6);
  const maxProj = Math.max(...projectCounts.map(p => p.value), 1);

  // Tasks due in next 7 days
  const upcoming = active
    .filter(t => {
      const days = daysFromToday(t.dueDate);
      return days !== null && days >= 0 && days <= 7;
    })
    .sort((a, b) => new Date(a.dueDate) - new Date(b.dueDate))
    .slice(0, 6);

  return (
    <div className="dash">
      <div className="dash-stats">
        <StatCard icon="list" color="#6D49F2" num={tasks.length} label="Total tasks" delta={{ value: '+8 this week', up: true }} />
        <StatCard icon="clock" color="#3B82F6" num={active.length} label="Active" delta={{ value: '4 in progress', up: true }} />
        <StatCard icon="warning" color="#F43F5E" num={overdue.length} label="Overdue" delta={{ value: '2 high priority', up: false }} />
        <StatCard icon="check" color="#10B981" num={done.length} label="Completed" delta={{ value: '+3 this week', up: true }} />
      </div>

      <div className="dash-grid">
        <div className="dash-card">
          <div className="dash-card-head">
            <div className="dash-card-title">Status breakdown</div>
            <div className="dash-card-sub">All tasks</div>
          </div>
          <div className="donut-wrap">
            <Donut data={statusCounts.filter(s => s.value > 0)} />
            <div className="donut-legend">
              {statusCounts.map(s => (
                <div className="donut-legend-row" key={s.label}>
                  <span className="dot" style={{ background: s.color }} />
                  <span className="name">{s.label}</span>
                  <span className="val">{s.value}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="dash-card">
          <div className="dash-card-head">
            <div className="dash-card-title">Due this week</div>
            <div className="dash-card-sub">{upcoming.length} task{upcoming.length !== 1 ? 's' : ''}</div>
          </div>
          {upcoming.length === 0 ? (
            <div style={{ padding: '24px 0', color: 'var(--text-subtle)', textAlign: 'center', fontSize: 13 }}>
              Nothing due in the next 7 days 🎉
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {upcoming.map(t => {
                const rel = relativeDue(t.dueDate, t.status);
                const proj = getProject(t.project);
                return (
                  <div
                    key={t.id}
                    onClick={() => onOpenTask(t.id)}
                    style={{
                      display: 'flex', alignItems: 'center', gap: 10,
                      padding: '8px 10px',
                      borderRadius: 8,
                      cursor: 'pointer',
                      border: '1px solid var(--border)',
                      background: 'var(--surface)',
                    }}
                  >
                    {proj && <span style={{ width: 4, alignSelf: 'stretch', borderRadius: 2, background: proj.color }} />}
                    <Avatar user={t.assignee} size="sm" />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.name}</div>
                      <div style={{ fontSize: 11, color: 'var(--text-subtle)' }}>{proj?.name}</div>
                    </div>
                    <DuePill date={t.dueDate} status={t.status} />
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>

      <div className="dash-grid">
        <div className="dash-card">
          <div className="dash-card-head">
            <div className="dash-card-title">Team workload</div>
            <div className="dash-card-sub">Active tasks per person</div>
          </div>
          <div>
            {workload.map(w => (
              <div className="bar-row" key={w.user.id}>
                <div className="bar-label">
                  <Avatar user={w.user} size="sm" />
                  {w.user.short}
                </div>
                <div className="bar-track">
                  <div
                    className="bar-fill"
                    style={{ width: `${(w.count / maxWorkload) * 100}%`, background: w.user.color }}
                  />
                </div>
                <div className="bar-val">{w.count}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="dash-card">
          <div className="dash-card-head">
            <div className="dash-card-title">Top projects</div>
            <div className="dash-card-sub">By task volume</div>
          </div>
          <div>
            {projectCounts.map(p => (
              <div className="bar-row" key={p.project.id}>
                <div className="bar-label">
                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: p.project.color }} />
                  {p.project.name}
                </div>
                <div className="bar-track">
                  <div className="bar-fill" style={{ width: `${(p.value / maxProj) * 100}%`, background: p.project.color }} />
                </div>
                <div className="bar-val">{p.value}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="dash-card">
        <div className="dash-card-head">
          <div className="dash-card-title">Recent activity</div>
          <div className="dash-card-sub">Last 24 hours</div>
        </div>
        <div className="activity-list">
          {ACTIVITY.map(a => {
            const u = getUser(a.user);
            const t = tasks.find(x => x.id === a.target);
            return (
              <div className="activity-row" key={a.id}>
                <Avatar user={u} size="sm" />
                <div className="activity-text">
                  <b>{u?.short}</b> {a.verb}{' '}
                  {t ? (
                    <a
                      style={{ color: 'var(--brand-600)', fontWeight: 600, cursor: 'pointer' }}
                      onClick={() => onOpenTask(t.id)}
                    >
                      {t.name}
                    </a>
                  ) : a.target}
                  {a.meta && <> · {a.meta}</>}
                </div>
                <span className="activity-time">{formatDate(a.time)}</span>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

const StatCard = ({ icon, color, num, label, delta }) => (
  <div className="dash-stat">
    <div className="dash-stat-icon" style={{ background: color }}>
      <Icon name={icon} size={16} stroke={2.4} />
    </div>
    <div className="dash-stat-num">{num}</div>
    <div className="dash-stat-label">{label}</div>
    {delta && (
      <div className={`dash-stat-delta ${delta.up ? 'up' : 'down'}`}>
        <Icon name={delta.up ? 'arrowUp' : 'arrowDown'} size={12} />
        {delta.value}
      </div>
    )}
  </div>
);

Object.assign(window, { Dashboard, StatCard });