/* ============================================================
   VLF 2026 · OPS GANTT — Lịch điều phối dạng thanh thời gian
   Trục 05:00–19:00, mỗi nhiệm vụ 1 thanh theo cửa sổ thời gian,
   màu theo đội, trạng thái thể hiện bằng kiểu thanh, có vạch
   "bây giờ". Cuộn ngang. Chạm thanh → chi tiết nhiệm vụ.
   Xuất: OpsGantt
   ============================================================ */
function OpsGantt({ tasks, lang, nav }) {
  const O = window.VLF.ops;
  const PX = 1.15; // px / phút
  const span = O.dayEnd - O.dayStart;
  const width = Math.round(span * PX);
  const hours = [];
  for (let h = O.dayStart; h <= O.dayEnd; h += 60) hours.push(h);
  const left = (m) => Math.round((m - O.dayStart) * PX);
  const sorted = [...tasks].sort((a, b) => O.parseWindow(a.window).s - O.parseWindow(b.window).s);
  const nowL = left(O.nowMin);

  return (
    <div className="ops-gantt-wrap">
      <div className="ops-gantt-hint"><Icon name="info" size={13} sw={2} />{trL(lang, { vi: 'Cuộn ngang để xem cả ngày · vạch vàng là “bây giờ”', en: 'Scroll for the full day · gold line is “now”' })}</div>
      <div className="ops-gantt-scroll">
        <div className="ops-gantt-track" style={{ width }}>
          <div className="ops-gantt-scale">
            {hours.map((h, i) => <span className="ops-gantt-tick" key={i} style={{ left: left(h) }}>{String(h / 60 | 0).padStart(2, '0')}:00</span>)}
          </div>
          <div className="ops-gantt-grid">
            {hours.map((h, i) => <span key={i} style={{ left: left(h) }} />)}
          </div>
          <div className="ops-gantt-now" style={{ left: nowL }}><span>{window.OPS_NOW}</span></div>
          <div className="ops-gantt-rows">
            {sorted.map((t) => {
              const w = O.parseWindow(t.window);
              const tm = O.teamById(t.team);
              const bl = Math.max(left(w.s), 0);
              const bw = Math.max(left(w.e) - bl, 74);
              const st = t.status;
              return (
                <div className="ops-gantt-row" key={t.id}>
                  <div className={'ops-gbar st-' + st} onClick={() => nav('task', { id: t.id })}
                    style={{ left: bl, width: bw, '--tc': tm.color }}>
                    {st === 'done' && <Icon name="check" size={13} sw={2.8} />}
                    <span className="ops-gbar-tx">{trL(lang, t.title)}</span>
                    <span className="ops-gbar-meta">{w.allDay ? trL(lang, { vi: 'Cả ngày', en: 'All day' }) : t.window}</span>
                  </div>
                </div>);
            })}
            {sorted.length === 0 && <div className="v-muted" style={{ fontSize: 13, padding: '14px' }}>{trL(lang, { vi: 'Không có nhiệm vụ ở bộ lọc này.', en: 'No tasks for this filter.' })}</div>}
          </div>
        </div>
      </div>
      <div className="ops-gantt-legend">
        <span><i className="lg solid" />{trL(lang, { vi: 'Đang làm', en: 'Doing' })}</span>
        <span><i className="lg todo" />{trL(lang, { vi: 'Chờ', en: 'To do' })}</span>
        <span><i className="lg done" />{trL(lang, { vi: 'Xong', en: 'Done' })}</span>
      </div>
    </div>);
}
Object.assign(window, { OpsGantt });

/* ============================================================
   OPS WEEK — Lịch tuần: 6 ngày lễ hội, mỗi ngày 1 thẻ với
   nhiệm vụ trong ngày. Trả lời "trong tuần làm gì".
   Chạm nhiệm vụ → chi tiết · Chạm "xem giờ" → Gantt ngày đó.
   Xuất: OpsWeek
   ============================================================ */
function OpsWeek({ tasks, lang, nav, onOpenDay }) {
  const O = window.VLF.ops;
  const byDay = (id) => tasks.filter((t) => (t.day || O.todayId) === id)
    .sort((a, b) => O.parseWindow(a.window).s - O.parseWindow(b.window).s);
  const stTone = { done: '#1F8A5B', doing: 'var(--vlf-gold-700)', todo: 'var(--vlf-ink-400,#9E9E9E)' };

  return (
    <div className="ops-week">
      <div className="ops-gantt-hint"><Icon name="info" size={13} sw={2} />{trL(lang, { vi: 'Toàn tuần lễ hội · ngày hôm nay được tô sáng. Chạm “xem giờ” để mở dạng Gantt.', en: 'Whole festival week · today highlighted. Tap “timeline” for the Gantt view.' })}</div>
      {O.opsDays.map((d) => {
        const ds = byDay(d.id);
        const done = ds.filter((t) => t.status === 'done').length;
        const today = d.id === O.todayId;
        const past = O.dayCmp(d.id, O.todayId) < 0;
        return (
          <div className={'ops-wkday' + (today ? ' today' : '') + (past ? ' past' : '')} key={d.id}>
            <div className="ops-wkday-head">
              <div className="ops-wkday-date">
                <span className="dow">{d.dow}</span>
                <span className="dd">{d.date.split('/')[0]}</span>
              </div>
              <div className="ops-wkday-meta">
                <div className="th">{trL(lang, d.theme)}{today && <span className="ops-wkday-now">{trL(lang, { vi: 'HÔM NAY', en: 'TODAY' })}</span>}</div>
                <div className="sub">{ds.length ? (done + '/' + ds.length + ' ' + trL(lang, { vi: 'nhiệm vụ xong', en: 'tasks done' })) : trL(lang, { vi: 'Không có nhiệm vụ', en: 'No tasks' })}</div>
              </div>
              {ds.length > 0 && <button className="ops-wkday-gantt" onClick={() => onOpenDay(d.id)}><Icon name="calendar" size={14} sw={1.9} />{trL(lang, { vi: 'xem giờ', en: 'timeline' })}</button>}
            </div>
            {ds.length > 0 && (
              <div className="ops-wkday-list">
                {ds.map((t) => {
                  const tm = O.teamById(t.team);
                  const w = O.parseWindow(t.window);
                  return (
                    <div className="ops-wktask" key={t.id} onClick={() => nav('task', { id: t.id })}>
                      <span className="ops-wktask-tm" style={{ background: w.allDay ? 'var(--vlf-sunk)' : 'transparent', color: 'var(--vlf-ink-700)' }}>{w.allDay ? trL(lang, { vi: 'Cả ngày', en: 'All day' }) : t.window.split('–')[0]}</span>
                      <i className="ops-wktask-bar" style={{ background: tm.color }} />
                      <span className="ops-wktask-tx"><PrioChip p={t.prio} />{trL(lang, t.title)}</span>
                      <span className="ops-wktask-dot" style={{ background: stTone[t.status] }} title={t.status} />
                    </div>);
                })}
              </div>
            )}
          </div>);
      })}
    </div>);
}
Object.assign(window, { OpsGantt, OpsWeek });