/* ============================================================
   VLF 2026 · OPS REQUESTS — Đơn từ nhân sự
   Xin nghỉ · đổi ca · đến muộn · không tham gia được.
   Nhân viên tạo đơn (kèm SOP) → đội trưởng/điều phối duyệt.
   Xuất: RequestsScreen, NewRequest, opsPendingReqs
   ============================================================ */
function allRequests(store) {
  const O = window.VLF.ops;
  return [...(store.extraReq || []), ...O.requests].map((r) => ({ ...r, status: store.reqStatus[r.id] || r.status }));
}
function opsPendingReqs(store, team, isBtc) {
  return allRequests(store).filter((r) => (r.status === 'pending' || r.status === 'cover') && (isBtc || r.team === team.id));
}

function ReqRow({ r, lang, me, canApprove, onApprove, onDecline }) {
  const O = window.VLF.ops;
  const ty = O.reqTypeById(r.type);
  const sm = O.reqStatusMeta[r.status];
  const showAct = canApprove && (r.status === 'pending' || r.status === 'cover');
  return (
    <div className="ops-req">
      <div className="ops-req-main">
        <div className="ops-req-ic"><Icon name={ty.ic} size={18} sw={1.8} /></div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="ops-req-top"><b>{trL(lang, ty.t)}</b><span className="v-tag" style={{ color: sm.c, background: sm.bg }}>{trL(lang, sm)}</span></div>
          <div className="ops-req-who"><OpsAva name={r.by} size={20} /> {r.by} · <TeamChip id={r.team} lang={lang} small /></div>
          <div className="ops-req-when">{trL(lang, r.when)} · {r.at}</div>
          <div className="ops-req-reason">{trL(lang, r.reason)}</div>
          <div className="ops-req-cover">{trL(lang, { vi: 'Người trực thay', en: 'Cover' })}: <b>{r.cover && r.cover !== '—' ? r.cover : trL(lang, { vi: 'chưa có — cần điều người', en: 'none — needs cover' })}</b></div>
        </div>
      </div>
      {showAct && (
        <div className="ops-req-act">
          <button className="v-btn v-btn-ghost" onClick={() => onDecline(r.id)}>{trL(lang, { vi: 'Từ chối', en: 'Decline' })}</button>
          <button className="v-btn v-ops-btn" onClick={() => onApprove(r.id)}>{trL(lang, { vi: 'Duyệt & xếp người thay', en: 'Approve & cover' })}</button>
        </div>
      )}
      {!showAct && r.approver && <div className="ops-req-by">{trL(lang, { vi: 'Người duyệt', en: 'Approver' })}: {r.approver}</div>}
    </div>);
}

/* ---------- MÀN ĐƠN TỪ (L2) — role-aware ---------- */
function RequestsScreen({ nav, store, team, isBtc, role }) {
  const lang = useLang();
  const O = window.VLF.ops;
  const me = role.me;
  const canApprove = isBtc || me === team.lead;
  const reqs = allRequests(store);
  const [tab, setTab] = useState(canApprove ? 'pending' : 'mine');

  const mineList = reqs.filter((r) => r.by === me);
  const pendingList = reqs.filter((r) => (r.status === 'pending' || r.status === 'cover') && (isBtc || r.team === team.id));
  let list = tab === 'mine' ? mineList : tab === 'pending' ? pendingList : reqs.filter((r) => isBtc || r.team === team.id);

  const tabs = canApprove
    ? [['pending', { vi: 'Chờ duyệt', en: 'Pending' }, pendingList.length], ['mine', { vi: 'Của tôi', en: 'Mine' }, mineList.length], ['all', { vi: 'Tất cả', en: 'All' }, reqs.filter((r) => isBtc || r.team === team.id).length]]
    : [['mine', { vi: 'Của tôi', en: 'Mine' }, mineList.length]];

  const approve = (id) => store.setReqStatus(id, 'approved');
  const decline = (id) => store.setReqStatus(id, 'declined');

  return (
    <>
      <button className="v-btn v-ops-btn ops-newreq-btn" onClick={() => nav('newrequest')}><Icon name="survey" size={18} sw={1.9} />{trL(lang, { vi: 'Tạo đơn mới', en: 'New request' })}</button>

      <div className="ops-scopebar" style={{ marginTop: 12 }}>
        {tabs.map(([id, lbl, n]) => <button key={id} className={'ops-scope' + (tab === id ? ' on' : '')} onClick={() => setTab(id)}>{trL(lang, lbl)} <b>{n}</b></button>)}
      </div>

      {canApprove && tab === 'pending' && pendingList.length > 0 &&
        <div className="ops-blocked" style={{ marginTop: 4 }}><Icon name="info" size={16} sw={1.9} /><span>{trL(lang, { vi: 'Đơn chờ bạn xử lý — duyệt sớm để kịp xếp người trực thay.', en: 'Requests awaiting you — approve early to arrange cover.' })}</span></div>}

      <div className="v-card" style={{ marginTop: 4, padding: 0 }}>
        {list.map((r) => <ReqRow key={r.id} r={r} lang={lang} me={me} canApprove={canApprove} onApprove={approve} onDecline={decline} />)}
        {list.length === 0 && <div className="v-row" style={{ cursor: 'default' }}><div className="v-muted" style={{ fontSize: 13 }}>{tab === 'mine' ? trL(lang, { vi: 'Bạn chưa gửi đơn nào. Tạo đơn khi cần nghỉ, đổi ca hoặc đến muộn.', en: 'No requests yet. Create one for time-off, swaps or late arrival.' }) : trL(lang, { vi: 'Không có đơn nào.', en: 'No requests.' })}</div></div>}
      </div>
    </>);
}

/* ---------- TẠO ĐƠN (L2) ---------- */
function NewRequest({ nav, store, team, role }) {
  const lang = useLang();
  const O = window.VLF.ops;
  const [type, setType] = useState('leave');
  const [when, setWhen] = useState('');
  const [reason, setReason] = useState('');
  const [cover, setCover] = useState('');
  const [sent, setSent] = useState(false);
  const ty = O.reqTypeById(type);
  const mates = (team.members || []).filter((m) => m !== role.me);

  function submit() {
    const id = 'RX' + Date.now().toString().slice(-4);
    store.addReq({ id, type, by: role.me, team: team.id, status: type === 'cantjoin' ? 'cover' : 'pending', at: window.OPS_NOW,
      when: { vi: when || trL(lang, ty.t), en: when || trL('en', ty.t) },
      reason: { vi: reason || 'Không có ghi chú.', en: reason || 'No note.' }, cover: cover || '—', approver: team.lead });
    setSent(true); setTimeout(() => nav('back'), 1150);
  }

  if (sent) {
    return (
      <div className="ops-detail"><div style={{ textAlign: 'center', padding: '40px 0' }}>
        <div className="ops-sent-ic"><Icon name="check" size={28} sw={2.6} /></div>
        <div style={{ fontWeight: 700, fontSize: 16, marginTop: 12 }}>{trL(lang, { vi: 'Đã gửi đơn tới đội trưởng', en: 'Request sent to your lead' })}</div>
        <div className="v-muted" style={{ fontSize: 12.5, marginTop: 4 }}>{team.lead} · {team.radio}</div>
      </div></div>);
  }

  return (
    <div className="ops-detail">
      <div className="ops-field-lbl">{trL(lang, { vi: 'Loại đơn', en: 'Request type' })}</div>
      <div className="ops-reqtypes">
        {O.requestTypes.map((x) => (
          <button key={x.id} className={'ops-reqtype' + (type === x.id ? ' on' : '')} onClick={() => setType(x.id)}>
            <Icon name={x.ic} size={18} sw={1.8} /><span>{trL(lang, x.t)}</span>
          </button>))}
      </div>

      <div className="ops-sop-note"><Icon name="info" size={15} sw={2} /><span><b>SOP · {trL(lang, ty.t)}</b> — {trL(lang, O.requestSop[type])}</span></div>

      <div className="ops-field-lbl">{trL(lang, { vi: 'Ca / thời gian', en: 'Shift / time' })}</div>
      <input className="ops-input" value={when} onChange={(e) => setWhen(e.target.value)} placeholder={trL(lang, { vi: 'VD: Ca chiều 12:00–18:00', en: 'e.g. PM shift 12:00–18:00' })} />

      <div className="ops-field-lbl">{trL(lang, { vi: 'Lý do', en: 'Reason' })}</div>
      <textarea className="ops-input ops-textarea" value={reason} onChange={(e) => setReason(e.target.value)} placeholder={trL(lang, { vi: 'Nêu ngắn gọn lý do…', en: 'Briefly explain…' })} />

      <div className="ops-field-lbl">{trL(lang, { vi: 'Đề xuất người trực thay', en: 'Suggested cover' })}</div>
      <div className="ops-canned">
        <button className={'ops-cannedb' + (cover === '' ? ' on' : '')} onClick={() => setCover('')}>{trL(lang, { vi: 'Để điều phối xếp', en: 'Let command assign' })}</button>
        {mates.map((m) => <button key={m} className={'ops-cannedb' + (cover === m ? ' on' : '')} onClick={() => setCover(m)}>{m}</button>)}
      </div>

      <button className="v-btn v-ops-btn" style={{ marginTop: 18 }} onClick={submit}><Icon name="survey" size={18} sw={1.9} />{trL(lang, { vi: 'Gửi đơn', en: 'Submit request' })}</button>
    </div>);
}

Object.assign(window, { RequestsScreen, NewRequest, allRequests, opsPendingReqs });