/* ============================================================
   VLF 2026 · OPS TASKS — Bảng nhiệm vụ phối hợp + chi tiết
   Mỗi nhiệm vụ: đội chủ trì · đội phối hợp · người làm · việc con
   · phụ thuộc · luồng trao đổi. Trạng thái lưu ở OpsRoot (store).
   ============================================================ */
function mergeTask(t, store) {
  return { ...t, status: store.taskStatus[t.id], steps: t.steps.map((s, i) => ({ ...s, done: store.taskSteps[t.id][i] })) };
}

function OpsTasksBoard({ nav, store, team, isBtc, initTeam, phase }) {
  const lang = useLang();
  const O = window.VLF.ops;
  const [view, setView] = useState('list');
  const [day, setDay] = useState(O.todayId);      // ngày cho Danh sách & Gantt ('all' = cả giai đoạn, chỉ Danh sách)
  const phaseDays = O.daysOfPhase(phase);
  const phaseIds = phaseDays.map((d) => d.id);
  React.useEffect(() => { setDay(O.todayId); }, [phase]); // đổi giai đoạn → về ngày đại diện
  const [scope, setScope] = useState(initTeam ? 'team' : (isBtc ? 'all' : 'mine'));
  const [pickTeam, setPickTeam] = useState(initTeam || team.id);
  const [stf, setStf] = useState('all');
  const [person, setPerson] = useState('all');

  const openDayGantt = (id) => { setDay(id); setView('gantt'); };

  // 1) lọc theo phạm vi đội
  let scoped = O.tasks.map((t) => mergeTask(t, store));
  if (scope === 'mine') scoped = scoped.filter((t) => t.team === team.id);
  else if (scope === 'collab') scoped = scoped.filter((t) => (t.collab || []).includes(team.id));
  else if (scope === 'team') scoped = scoped.filter((t) => t.team === pickTeam);

  // chỉ trong giai đoạn hiện tại
  scoped = scoped.filter((t) => phaseIds.includes(t.day || O.todayId));

  // 2) Lịch tuần: cả giai đoạn. Danh sách & Gantt: lọc theo ngày đã chọn
  const dayFiltered = view === 'week' ? scoped : (day === 'all' ? scoped : scoped.filter((t) => (t.day || O.todayId) === day));

  // 3) bộ lọc trạng thái (chỉ Danh sách)
  let list = dayFiltered;
  if (view === 'list' && stf !== 'all') list = list.filter((t) => stf === 'late' ? O.isOverdue(t) : t.status === stf);
  const people = Array.from(new Set(dayFiltered.flatMap((t) => t.assignees || [])));
  if (person !== 'all') list = list.filter((t) => (t.assignees || []).includes(person));
  const ord = { P1: 0, P2: 1, P3: 2 };
  list = [...list].sort((a, b) => (a.status === 'done') - (b.status === 'done') || ord[a.prio] - ord[b.prio] || O.parseWindow(a.window).s - O.parseWindow(b.window).s);

  const counts = { all: dayFiltered.length, late: dayFiltered.filter((t) => O.isOverdue(t)).length, todo: dayFiltered.filter((t) => t.status === 'todo').length, doing: dayFiltered.filter((t) => t.status === 'doing').length, done: dayFiltered.filter((t) => t.status === 'done').length };

  const scopes = isBtc
    ? [['all', { vi: 'Tất cả', en: 'All' }], ['team', { vi: 'Theo đội', en: 'By team' }]]
    : [['mine', { vi: 'Đội tôi', en: 'My team' }], ['collab', { vi: 'Phối hợp', en: 'Collab' }], ['all', { vi: 'Tất cả', en: 'All' }]];

  const dayChips = view === 'list' ? [['all', { vi: 'Cả giai đoạn', en: 'Whole phase' }], ...phaseDays.map((d) => [d.id, d])] : phaseDays.map((d) => [d.id, d]);

  return (
    <>
      <div className="ops-viewseg ops-viewseg-3">
        <button className={view === 'list' ? 'on' : ''} onClick={() => setView('list')}><Icon name="survey" size={15} sw={1.9} />{trL(lang, { vi: 'Danh sách', en: 'List' })}</button>
        <button className={view === 'week' ? 'on' : ''} onClick={() => setView('week')}><Icon name="calendar" size={15} sw={1.9} />{trL(lang, { vi: 'Lịch tuần', en: 'Week' })}</button>
        <button className={view === 'gantt' ? 'on' : ''} onClick={() => setView('gantt')}><Icon name="clock" size={15} sw={1.9} />{trL(lang, { vi: 'Gantt', en: 'Gantt' })}</button>
      </div>

      <div className="ops-scopebar">
        {scopes.map(([id, lbl]) => <button key={id} className={'ops-scope' + (scope === id ? ' on' : '')} onClick={() => setScope(id)}>{trL(lang, lbl)}</button>)}
      </div>

      {scope === 'team' && (
        <div className="ops-teampick">
          {O.teams.filter((t) => O.tasks.some((x) => x.team === t.id)).map((t) => (
            <button key={t.id} className={'ops-teampick-b' + (pickTeam === t.id ? ' on' : '')} style={pickTeam === t.id ? { borderColor: t.color, color: t.color } : null} onClick={() => setPickTeam(t.id)}>
              <i style={{ background: t.color }} />{trL(lang, t.name)}
            </button>))}
        </div>
      )}

      {/* chọn ngày — Danh sách & Gantt */}
      {view !== 'week' && (
        <div className="ops-daystrip">
          {dayChips.map(([id, d]) => (
            <button key={id} className={'ops-daychip' + (day === id ? ' on' : '') + (id === O.todayId ? ' today' : '')} onClick={() => setDay(id)}>
              {id === 'all' ? trL(lang, d) : <><span className="dw">{d.dow}</span><b>{d.date.split('/')[0]}</b></>}
            </button>))}
        </div>
      )}

      {view === 'list' && (
        <div className="ops-statfilter">
          {[['all', { vi: 'Tất cả', en: 'All' }], ['late', { vi: 'Trễ', en: 'Late' }], ['todo', { vi: 'Chờ', en: 'To do' }], ['doing', { vi: 'Đang làm', en: 'Doing' }], ['done', { vi: 'Xong', en: 'Done' }]].map(([id, lbl]) => (
            <button key={id} className={'ops-sf' + (stf === id ? ' on' : '') + (id === 'late' && counts.late ? ' ops-sf-late' : '')} onClick={() => setStf(id)}>{trL(lang, lbl)} <b>{counts[id]}</b></button>
          ))}
        </div>
      )}

      {view === 'list' && people.length > 1 && (
        <div className="ops-personfilter">
          <button className={'ops-pf' + (person === 'all' ? ' on' : '')} onClick={() => setPerson('all')}>{trL(lang, { vi: 'Mọi người', en: 'Everyone' })}</button>
          {people.map((p) => (
            <button key={p} className={'ops-pf ops-pf-person' + (person === p ? ' on' : '')} onClick={() => setPerson(person === p ? 'all' : p)}><OpsAva name={p} size={20} />{p}</button>
          ))}
        </div>
      )}

      {view === 'week' && <OpsWeek tasks={scoped} lang={lang} nav={nav} onOpenDay={openDayGantt} />}
      {view === 'gantt' && <OpsGantt tasks={list} lang={lang} nav={nav} />}
      {view === 'list' && (
        <>
          <div className="v-card" style={{ marginTop: 4 }}>
            {list.map((t) => <TaskRow key={t.id} task={t} lang={lang} collab={scope !== 'team' && t.team !== team.id && (t.collab || []).includes(team.id)} onClick={() => nav('task', { id: t.id })} />)}
            {list.length === 0 && <div className="v-row" style={{ cursor: 'default' }}><div className="v-muted" style={{ fontSize: 13 }}>{trL(lang, { vi: 'Không có nhiệm vụ ở bộ lọc này.', en: 'No tasks for this filter.' })}</div></div>}
          </div>
          <p className="v-muted" style={{ fontSize: 11.5, lineHeight: 1.5, padding: '10px 2px 0' }}>{trL(lang, { vi: 'Chạm một nhiệm vụ để xem người làm, việc con, phụ thuộc, cập nhật & ảnh báo cáo.', en: 'Tap a task to see people, sub-steps, dependencies, updates & photo reports.' })}</p>
        </>
      )}
    </>);
}

/* ---------------- CHI TIẾT NHIỆM VỤ (L2) ---------------- */
function TaskDetail({ id, nav, store }) {
  const lang = useLang();
  const O = window.VLF.ops;
  const base = O.tasks.find((t) => t.id === id);
  if (!base) return null;
  const t = mergeTask(base, store);
  const team = O.teamById(t.team);
  const dn = t.steps.filter((s) => s.done).length;
  const deps = (base.deps || []).map((d) => mergeTask(O.tasks.find((x) => x.id === d), store)).filter(Boolean);
  const blockedBy = deps.filter((d) => d.status !== 'done');
  const scrollToReport = () => {
    const c = document.querySelector('.za-content'); const r = document.querySelector('.ops-report-compose');
    if (c && r) c.scrollTo({ top: r.offsetTop - 80, behavior: 'smooth' });
    const ta = document.querySelector('.ops-report-note'); if (ta) setTimeout(() => ta.focus(), 350);
  };

  return (
    <div className="ops-detail">
      <div className="ops-td-head">
        <div className="ops-td-top"><PrioChip p={t.prio} /><TeamChip id={t.team} lang={lang} /></div>
        <h2>{trL(lang, t.title)}</h2>
        <div className="ops-td-facts">
          <span><Icon name="clock" size={14} sw={1.8} />{t.window}</span>
          <span><Icon name="pin" size={14} sw={1.8} />{trL(lang, t.zone)}</span>
          <span><Icon name="calendar" size={14} sw={1.8} />{O.opsDayById(t.day).date}</span>
        </div>
        <div className="ops-td-dlrow"><DeadlinePill task={t} big /></div>
        <p className="ops-td-desc">{trL(lang, t.desc)}</p>
      </div>

      {/* focus: mở ra biết làm gì tiếp + hạn chót */}
      <TaskFocus task={t} store={store} onJumpReport={scrollToReport} />

      {/* trạng thái */}
      <div className="ops-td-status">
        {['todo', 'doing', 'done'].map((s) => (
          <button key={s} className={'ops-stbtn' + (t.status === s ? ' on' : '')} onClick={() => store.setTStatus(t.id, s)}>{trL(lang, O.statusMeta[s])}</button>
        ))}
      </div>
      <DoneStamp task={t} store={store} />

      {blockedBy.length > 0 && (
        <div className="ops-blocked">
          <Icon name="info" size={16} sw={1.9} />
          <span>{trL(lang, { vi: 'Chờ xong', en: 'Waiting on' })}: {blockedBy.map((d) => trL(lang, d.title)).join(', ')}</span>
        </div>
      )}

      {/* người phụ trách + phối hợp */}
      <SectionHead title={trL(lang, { vi: 'Đội & người làm', en: 'Team & people' })} />
      <div className="v-card" style={{ padding: 14 }}>
        <div className="ops-people-row">
          <div className="ops-people-lbl">{trL(lang, { vi: 'Chủ trì', en: 'Owner' })}</div>
          <div className="ops-people-v"><TeamChip id={t.team} lang={lang} /> · {team.lead}</div>
        </div>
        <div className="ops-people-row">
          <div className="ops-people-lbl">{trL(lang, { vi: 'Người làm', en: 'Assignees' })}</div>
          <div className="ops-people-avas">{t.assignees.map((n, i) => <span key={i} className="ops-person"><OpsAva name={n} size={26} />{n}</span>)}</div>
        </div>
        {(base.collab || []).length > 0 && (
          <div className="ops-people-row">
            <div className="ops-people-lbl">{trL(lang, { vi: 'Phối hợp', en: 'Collaborating' })}</div>
            <div className="ops-people-v ops-collabwrap">{base.collab.map((c) => <TeamChip key={c} id={c} lang={lang} small />)}</div>
          </div>
        )}
      </div>

      {/* việc con */}
      <SectionHead title={trL(lang, { vi: 'Việc con', en: 'Sub-tasks' })} right={<span className="v-muted" style={{ fontSize: 12 }}>{dn}/{t.steps.length}</span>} />
      <div className="v-card">
        {t.steps.map((s, i) => (
          <div className="v-row ops-step" key={i} onClick={() => store.toggleStep(t.id, i)}>
            <div className={'v-prep-ic' + (s.done ? ' done' : '')} style={{ width: 28, height: 28, borderRadius: '50%' }}>{s.done && <Icon name="check" size={15} sw={2.6} />}</div>
            <div style={{ flex: 1, minWidth: 0 }}><div className="t" style={{ fontSize: 13.5, textDecoration: s.done ? 'line-through' : 'none', color: s.done ? 'var(--vlf-ink-500)' : 'var(--vlf-ink-900)' }}>{trL(lang, s.t)}</div></div>
            <span className="ops-step-by"><OpsAva name={s.by} size={20} /> {s.by}</span>
          </div>
        ))}
      </div>

      {/* cập nhật & ảnh báo cáo */}
      <TaskReport taskId={t.id} store={store} team={team} />

      {/* trao đổi theo nhiệm vụ */}
      <TaskComments taskId={t.id} store={store} team={team} />
    </div>);
}

Object.assign(window, { OpsTasksBoard, TaskDetail });