// Manager view: dashboard + workload + table

function ManagerView({ tasks, members }) {
  const [filterStatus, setFilterStatus] = useState('all'); // all|todo|inprogress|done|overdue
  const [filterOwner, setFilterOwner] = useState('all');
  const [search, setSearch] = useState('');
  const [detailTask, setDetailTask] = useState(null);

  // ===== summary stats =====
  const stats = useMemo(() => {
    const total = tasks.length;
    const todo = tasks.filter((t) => t.status === 'todo').length;
    const inprogress = tasks.filter((t) => t.status === 'inprogress').length;
    const done = tasks.filter((t) => t.status === 'done').length;
    const overdue = tasks.filter(isOverdue).length;
    return { total, todo, inprogress, done, overdue };
  }, [tasks]);

  // workload per member — split active tasks into overdue / inprogress / todo (non-overlapping)
  const workload = useMemo(() => {
    return members.map((m) => {
      const userTasks = tasks.filter((t) => t.ownerId === m.id);
      const overdue = userTasks.filter(isOverdue).length;
      const inprogressActive = userTasks.filter((t) => t.status === 'inprogress' && !isOverdue(t)).length;
      const todoActive = userTasks.filter((t) => t.status === 'todo' && !isOverdue(t)).length;
      const done = userTasks.filter((t) => t.status === 'done').length;
      const active = overdue + inprogressActive + todoActive;
      return { member: m, total: userTasks.length, todoActive, inprogressActive, done, overdue, active };
    });
  }, [tasks, members]);

  const maxActive = Math.max(1, ...workload.map((w) => w.active));

  // filtered table data
  const filteredTasks = useMemo(() => {
    return tasks
      .filter((t) => {
        if (filterStatus === 'all') return true;
        if (filterStatus === 'overdue') return isOverdue(t);
        return t.status === filterStatus;
      })
      .filter((t) => filterOwner === 'all' || t.ownerId === filterOwner)
      .filter((t) => {
        if (!search.trim()) return true;
        const q = search.toLowerCase();
        return t.title.toLowerCase().includes(q) || (t.desc || '').toLowerCase().includes(q);
      })
      .sort((a, b) => {
        // overdue first, then by deadline asc
        const ao = isOverdue(a) ? 0 : a.status === 'done' ? 2 : 1;
        const bo = isOverdue(b) ? 0 : b.status === 'done' ? 2 : 1;
        if (ao !== bo) return ao - bo;
        return (a.deadline || '').localeCompare(b.deadline || '');
      });
  }, [tasks, filterStatus, filterOwner, search]);

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">ภาพรวมงานของทีม</h1>
          <p className="page-sub">ติดตามสถานะงานและภาระงานของลูกทีมทั้งหมด {members.length} คน</p>
        </div>
      </div>

      {/* ===== Stat cards ===== */}
      <div className="stats-grid">
        <StatCard label="งานทั้งหมด" value={stats.total} accent="" sub={`${members.length} คนในทีม`} />
        <StatCard label="กำลังทำ" value={stats.inprogress} accent="inprogress" sub="งานที่อยู่ระหว่างดำเนินการ" />
        <StatCard label="เสร็จแล้ว" value={stats.done} accent="done" sub={`${stats.total ? Math.round((stats.done / stats.total) * 100) : 0}% ของงานทั้งหมด`} />
        <StatCard label="เลยกำหนด" value={stats.overdue} accent="overdue" sub={stats.overdue > 0 ? 'ต้องติดตามด่วน' : 'อยู่ในแผน'} highlight={stats.overdue > 0} />
      </div>

      {/* ===== Two panels: status chart + workload heatmap ===== */}
      <div className="panel-grid">
        {/* Status chart */}
        <div className="panel">
          <div className="panel-header">
            <div>
              <h3 className="panel-title">สัดส่วนสถานะงาน</h3>
              <p className="panel-sub">ทั้งทีมรวมกัน</p>
            </div>
          </div>
          <div className="status-chart">
            <StatusRow label="รอดำเนินการ" color="#8B8B98" count={stats.todo} total={stats.total} />
            <StatusRow label="กำลังทำ" color="#F59E0B" count={stats.inprogress} total={stats.total} />
            <StatusRow label="เสร็จแล้ว" color="#10B981" count={stats.done} total={stats.total} />
            <StatusRow label="เลยกำหนด" color="#EF4444" count={stats.overdue} total={stats.total} subtle />
          </div>
        </div>

        {/* Workload heatmap */}
        <div className="panel">
          <div className="panel-header">
            <div>
              <h3 className="panel-title">ภาระงานของลูกทีม</h3>
              <p className="panel-sub">งานที่ยังไม่เสร็จ (Todo + กำลังทำ)</p>
            </div>
          </div>
          <div className="workload">
            {workload.map((w) => {
              return (
                <div className="workload-row" key={w.member.id}>
                  <div className="workload-name">
                    <Avatar member={w.member} size="sm" />
                    <span title={w.member.name}>{w.member.nickname}</span>
                  </div>
                  <div className="workload-bar" title={`${w.active} งานที่ยังไม่เสร็จ (${w.overdue} เลยกำหนด)`}>
                    <div
                      className="workload-seg overdue"
                      style={{ width: `${(w.overdue / maxActive) * 100}%` }}
                    />
                    <div
                      className="workload-seg inprogress"
                      style={{ width: `${(w.inprogressActive / maxActive) * 100}%` }}
                    />
                    <div
                      className="workload-seg todo"
                      style={{ width: `${(w.todoActive / maxActive) * 100}%` }}
                    />
                  </div>
                  <div className="workload-total">
                    {w.active} <span style={{ color: 'var(--text-soft)', fontWeight: 500, fontSize: 11 }}>งาน</span>
                  </div>
                </div>
              );
            })}
            <div className="workload-legend">
              <span className="workload-legend-item"><span className="swatch" style={{ background: '#EF4444' }} /> เลยกำหนด</span>
              <span className="workload-legend-item"><span className="swatch" style={{ background: '#FBBF24' }} /> กำลังทำ</span>
              <span className="workload-legend-item"><span className="swatch" style={{ background: '#C9C9D2' }} /> รอดำเนินการ</span>
            </div>
          </div>
        </div>
      </div>

      {/* ===== Task table ===== */}
      <div className="table-panel">
        <div className="table-toolbar">
          <div className="table-toolbar-left">
            <button
              className={`filter-chip ${filterStatus === 'all' ? 'active' : ''}`}
              onClick={() => setFilterStatus('all')}
            >ทั้งหมด · {stats.total}</button>
            <button
              className={`filter-chip ${filterStatus === 'todo' ? 'active' : ''}`}
              onClick={() => setFilterStatus('todo')}
            >รอดำเนินการ · {stats.todo}</button>
            <button
              className={`filter-chip ${filterStatus === 'inprogress' ? 'active' : ''}`}
              onClick={() => setFilterStatus('inprogress')}
            >กำลังทำ · {stats.inprogress}</button>
            <button
              className={`filter-chip ${filterStatus === 'done' ? 'active' : ''}`}
              onClick={() => setFilterStatus('done')}
            >เสร็จแล้ว · {stats.done}</button>
            <button
              className={`filter-chip ${filterStatus === 'overdue' ? 'active' : ''}`}
              onClick={() => setFilterStatus('overdue')}
              style={filterStatus === 'overdue' ? { background: 'var(--overdue-bg)', color: 'var(--overdue)' } : {}}
            >เลยกำหนด · {stats.overdue}</button>
          </div>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            <select
              className="field-select"
              value={filterOwner}
              onChange={(e) => setFilterOwner(e.target.value)}
              style={{ padding: '6px 10px', fontSize: 13, fontWeight: 600, width: 'auto' }}
            >
              <option value="all">ลูกทีมทั้งหมด</option>
              {members.map((m) => (
                <option key={m.id} value={m.id}>{m.nickname} ({m.role})</option>
              ))}
            </select>
            <div className="search-input">
              <IconSearch />
              <input
                type="text"
                placeholder="ค้นหางาน..."
                value={search}
                onChange={(e) => setSearch(e.target.value)}
              />
            </div>
          </div>
        </div>

        {filteredTasks.length === 0 ? (
          <div className="empty-state">
            <h3>ไม่พบงานที่ตรงกับเงื่อนไข</h3>
            <p>ลองปรับ filter หรือคำค้นหา</p>
          </div>
        ) : (
          <div className="scroll-x">
            <table className="task-table">
              <thead>
                <tr>
                  <th style={{ width: '35%' }}>งาน</th>
                  <th>ผู้รับผิดชอบ</th>
                  <th>สถานะ</th>
                  <th>กำหนดส่ง</th>
                </tr>
              </thead>
              <tbody>
                {filteredTasks.map((task) => {
                  const owner = members.find((m) => m.id === task.ownerId);
                  const dl = deadlineLabel(task.deadline, task.status);
                  const overdue = isOverdue(task);
                  return (
                    <tr key={task.id} onClick={() => setDetailTask(task)} style={{ cursor: 'pointer' }}>
                      <td>
                        <div className="cell-task-title">{task.title}</div>
                        {task.desc && <div className="cell-task-desc">{task.desc}</div>}
                      </td>
                      <td>
                        <div className="cell-owner">
                          {owner && <Avatar member={owner} size="sm" />}
                          {owner?.nickname || '—'}
                        </div>
                      </td>
                      <td><StatusPill status={task.status} overdue={overdue} /></td>
                      <td><span className={`cell-deadline ${dl.cls}`}>{dl.text}</span></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {detailTask && (
        <TaskDetailModal task={detailTask} owner={members.find((m) => m.id === detailTask.ownerId)} onClose={() => setDetailTask(null)} />
      )}
    </div>
  );
}

function StatCard({ label, value, accent, sub, highlight }) {
  return (
    <div className="stat-card">
      <div className={`stat-card-accent ${accent}`} />
      <p className="stat-card-label">{label}</p>
      <p className="stat-card-value" style={highlight ? { color: 'var(--overdue)' } : {}}>{value}</p>
      <p className="stat-card-sub">{sub}</p>
    </div>
  );
}

function StatusRow({ label, color, count, total, subtle }) {
  const pct = total ? (count / total) * 100 : 0;
  return (
    <div className="status-row">
      <div className="status-row-head">
        <div className="status-row-label">
          <span className="dot" style={{ background: color }} />
          {label}
        </div>
        <div className="status-row-count">
          {count} <span>/ {total} ({Math.round(pct)}%)</span>
        </div>
      </div>
      <div className="status-bar">
        <div className="status-bar-fill" style={{ width: `${pct}%`, background: color, opacity: subtle ? 0.85 : 1 }} />
      </div>
    </div>
  );
}

function TaskDetailModal({ task, owner, onClose }) {
  const dl = deadlineLabel(task.deadline, task.status);
  const overdue = isOverdue(task);
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h2 className="modal-title" style={{ fontSize: 20, lineHeight: 1.3, paddingRight: 12 }}>{task.title}</h2>
          <button className="modal-close" onClick={onClose}><IconX /></button>
        </div>
        <div className="detail-meta">
          <div className="detail-meta-item">
            <div className="label">ผู้รับผิดชอบ</div>
            <div className="value" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              {owner && <Avatar member={owner} size="sm" />}
              {owner?.name || '—'}
            </div>
          </div>
          <div className="detail-meta-item">
            <div className="label">สถานะ</div>
            <div className="value"><StatusPill status={task.status} overdue={overdue} /></div>
          </div>
          <div className="detail-meta-item">
            <div className="label">กำหนดส่ง</div>
            <div className={`value ${dl.cls === 'overdue' ? '' : ''}`} style={dl.cls === 'overdue' ? { color: 'var(--overdue)' } : {}}>
              {formatDateThai(task.deadline)} <span style={{ fontSize: 12, color: 'var(--text-soft)', fontWeight: 500, marginLeft: 6 }}>· {dl.text}</span>
            </div>
          </div>
          <div className="detail-meta-item">
            <div className="label">ตำแหน่ง</div>
            <div className="value" style={{ fontWeight: 500, color: 'var(--text-muted)' }}>{owner?.role || '—'}</div>
          </div>
        </div>

        <div className="detail-meta-item">
          <div className="label" style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-soft)', letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 8 }}>รายละเอียดงาน</div>
          <p className="detail-desc">{task.desc || 'ไม่มีรายละเอียดเพิ่มเติม'}</p>
        </div>

        <div className="modal-footer">
          <button className="btn btn-secondary" onClick={onClose}>ปิด</button>
        </div>
      </div>
    </div>
  );
}

window.ManagerView = ManagerView;