/* ============================================================
   VLF 2026 · OPS CHECK-IN — Vòng đời nhân sự hiện trường
   Nhận kit làm việc → điểm danh vào ca → trực → tan ca (báo về).
   Dùng cho nhân sự mới, hiện trường, cộng tác viên & TNV.
   State ở OpsRoot store: kit[] · shiftIn · shiftOut.
   ============================================================ */
function ShiftCheckin({ nav, store, team, role }) {
  const lang = useLang();
  const O = window.VLF.ops;
  const NOW = window.OPS_NOW || '06:18';
  const kitDone = store.kit.filter(Boolean).length;
  const kitTotal = O.kit.length;
  const kitReady = kitDone === kitTotal;
  const inAt = store.shiftIn;
  const outAt = store.shiftOut;
  const shift = (role.shift || '06:00–12:00').split('–');

  // trạng thái 3 bước: kit → vào ca → tan ca
  const stepState = (i) => {
    if (i === 0) return kitReady ? 'done' : 'now';
    if (i === 1) return inAt ? 'done' : (kitReady ? 'now' : 'wait');
    return outAt ? 'done' : (inAt ? 'now' : 'wait');
  };
  const steps = [
    { t: { vi: 'Nhận kit', en: 'Get kit' }, ic: 'qr' },
    { t: { vi: 'Vào ca', en: 'Check in' }, ic: 'check' },
    { t: { vi: 'Tan ca', en: 'Check out' }, ic: 'clock' },
  ];

  return (
    <div className="ops-detail">
      <div className="ops-td-head">
        <div className="ops-td-top"><span className="kk" style={{ color: 'var(--vlf-gold-700)' }}>{O.today} · {trL(lang, { vi: 'CA TRỰC CỦA BẠN', en: 'YOUR SHIFT' })}</span></div>
        <h2>{trL(lang, { vi: 'Vào ca & điểm danh', en: 'Shift & roll-call' })}</h2>
        <div className="ops-td-facts">
          <span><Icon name="clock" size={14} sw={1.8} />{shift[0]}–{shift[1] || ''}</span>
          <span><Icon name="pin" size={14} sw={1.8} />{trL(lang, team.zone || team.name)}</span>
          <span><Icon name="bell" size={14} sw={1.8} />{team.radio}</span>
        </div>
      </div>

      {/* tiến trình 3 bước */}
      <div className="ops-ci-track">
        {steps.map((s, i) => {
          const st = stepState(i);
          return (
            <React.Fragment key={i}>
              <div className={'ops-ci-node ' + st}>
                <div className="dot">{st === 'done' ? <Icon name="check" size={15} sw={2.8} /> : <Icon name={s.ic} size={15} sw={1.9} />}</div>
                <span>{trL(lang, s.t)}</span>
              </div>
              {i < 2 && <div className={'ops-ci-line' + (stepState(i + 1) !== 'wait' ? ' on' : '')} />}
            </React.Fragment>);
        })}
      </div>

      {/* 1 · nhận kit làm việc */}
      <SectionHead title={trL(lang, { vi: 'Bộ kit làm việc', en: 'Work kit' })}
        right={<span className="ops-sop-min">{kitDone}/{kitTotal}</span>} />
      <div className="ops-ci-kithint">
        <Icon name="pin" size={15} sw={1.8} />
        <span>{trL(lang, { vi: 'Nhận tại Lều nhân sự · khu Vận hành. Mang CCCD để đối chiếu.', en: 'Collect at the Staff tent · Ops zone. Bring your ID to verify.' })}</span>
      </div>
      <div className="v-card ops-ci-kit">
        {O.kit.map((k, i) => (
          <div className="ops-ci-kitrow" key={i} onClick={() => store.toggleKit(i)}>
            <div className={'ops-ci-ck' + (store.kit[i] ? ' done' : '')}>{store.kit[i] && <Icon name="check" size={15} sw={2.8} />}</div>
            <div className="ops-ci-kitic"><Icon name={k.ic} size={17} sw={1.7} /></div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="t" style={{ textDecoration: store.kit[i] ? 'line-through' : 'none', color: store.kit[i] ? 'var(--vlf-ink-500)' : 'var(--vlf-ink-900)' }}>{trL(lang, k.t)}</div>
              <div className="s">{trL(lang, k.s)}</div>
            </div>
          </div>
        ))}
      </div>
      {kitReady && (
        <div className="ops-ci-ok"><Icon name="check" size={15} sw={2.6} />{trL(lang, { vi: 'Đã nhận đủ kit · thẻ QR đã kích hoạt', en: 'Kit complete · QR badge activated' })}</div>
      )}

      {/* 2 · điểm danh vào ca / 3 · tan ca */}
      <SectionHead title={trL(lang, { vi: 'Điểm danh', en: 'Roll-call' })} />
      {!inAt && (
        <div className="ops-ci-action">
          <div className="ops-ci-action-hd">
            <div className="ic"><Icon name="qr" size={22} sw={1.7} /></div>
            <div><div className="t">{trL(lang, { vi: 'Check-in vào ca', en: 'Check in for your shift' })}</div><div className="s">{trL(lang, { vi: 'Quét QR tại khu trực hoặc chạm để điểm danh với đội trưởng.', en: 'Scan QR at your zone or tap to roll-call with your lead.' })}</div></div>
          </div>
          <button className={'v-btn ' + (kitReady ? 'v-ops-btn' : 'v-btn-ghost')} disabled={!kitReady} onClick={() => store.setShiftIn(NOW)}>
            {kitReady ? trL(lang, { vi: 'Điểm danh vào ca', en: 'Check in now' }) : trL(lang, { vi: 'Nhận đủ kit để vào ca', en: 'Finish kit to check in' })}
          </button>
        </div>
      )}
      {inAt && (
        <div className="v-card ops-ci-on">
          <div className="ops-ci-on-row">
            <span className="ops-onduty"><i />{trL(lang, { vi: 'Đang trong ca', en: 'On duty' })}</span>
            <span className="ops-ci-since">{trL(lang, { vi: 'Vào ca', en: 'In' })} {inAt}{outAt ? ' · ' + trL(lang, { vi: 'Tan', en: 'Out' }) + ' ' + outAt : ''}</span>
          </div>
          <div className="ops-ci-on-meta"><OpsAva name={role.me} size={26} /><div><b>{role.me}</b><span>{trL(lang, { vi: 'Đã điểm danh với', en: 'Rolled-call with' })} {role.me === team.lead ? trL(lang, { vi: 'điều phối ca', en: 'shift command' }) : team.lead}</span></div></div>
          {!outAt
            ? <button className="v-btn v-btn-ghost" onClick={() => store.setShiftOut(NOW)}>{trL(lang, { vi: 'Tan ca & bàn giao bộ đàm', en: 'Check out & hand back radio' })}</button>
            : <div className="ops-ci-done"><Icon name="check" size={16} sw={2.6} />{trL(lang, { vi: 'Đã tan ca · cảm ơn bạn đã trực!', en: 'Checked out · thank you for your shift!' })}</div>}
        </div>
      )}

      <p className="v-muted" style={{ fontSize: 11.5, lineHeight: 1.5, padding: '14px 2px 0' }}>
        {trL(lang, { vi: 'Điểm danh giúp điều phối nắm quân số thực tế mỗi ca. Khi tan ca, nhớ báo để bàn giao vị trí & thiết bị.', en: 'Roll-call lets command track real headcount each shift. Check out so your post & gear are handed over.' })}
      </p>
    </div>);
}

/* ---- banner trạng thái ca trực (đặt đầu Hub) ---- */
function CheckinBanner({ store, nav, team, role }) {
  const lang = useLang();
  const O = window.VLF.ops;
  const kitDone = store.kit.filter(Boolean).length;
  const kitTotal = O.kit.length;
  const kitReady = kitDone === kitTotal;
  const inAt = store.shiftIn, outAt = store.shiftOut;

  let state, ic, cls, t, s;
  if (!kitReady) { state = 'kit'; ic = 'qr'; cls = 'kit'; t = { vi: 'Nhận kit làm việc', en: 'Get your work kit' }; s = { vi: kitDone + '/' + kitTotal + ' · tại Lều nhân sự, mang CCCD', en: kitDone + '/' + kitTotal + ' · Staff tent, bring ID' }; }
  else if (!inAt) { state = 'in'; ic = 'check'; cls = 'in'; t = { vi: 'Điểm danh vào ca', en: 'Check in for your shift' }; s = { vi: (role.shift || '06:00–12:00') + ' · ' + trL(lang, team.zone || team.name), en: (role.shift || '06:00–12:00') + ' · ' + trL(lang, team.zone || team.name) }; }
  else if (!outAt) { state = 'on'; ic = 'clock'; cls = 'on'; t = { vi: 'Đang trong ca từ ' + inAt, en: 'On duty since ' + inAt }; s = { vi: 'Chạm để tan ca & bàn giao', en: 'Tap to check out & hand over' }; }
  else { state = 'off'; ic = 'check'; cls = 'off'; t = { vi: 'Đã tan ca lúc ' + outAt, en: 'Checked out at ' + outAt }; s = { vi: 'Cảm ơn bạn đã trực hôm nay', en: 'Thanks for your shift today' }; }

  return (
    <div className={'ops-ci-banner ' + cls} onClick={() => nav('checkin')}>
      <div className="ops-ci-banner-ic"><Icon name={ic} size={20} sw={1.9} /></div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="t">{trL(lang, t)}</div>
        <div className="s">{trL(lang, s)}</div>
      </div>
      {state === 'on'
        ? <span className="ops-onduty"><i />{trL(lang, { vi: 'Trực', en: 'Live' })}</span>
        : state === 'off'
          ? <Icon name="check" size={20} sw={2.4} style={{ color: '#1F8A5B' }} />
          : <span className="ops-ci-banner-cta">{trL(lang, { vi: 'Mở', en: 'Open' })}<Icon name="arrowR" size={15} sw={2.2} /></span>}
    </div>);
}

Object.assign(window, { ShiftCheckin, CheckinBanner });