// ELS HRM — Module 07: Bảng Công (Timesheet) — All Screens — Tailwind utility classes

// shadcn table styling reproduced via arbitrary child variants (1 className, structure untouched)
const TABLE_CLS = "w-full border-collapse text-sm "
  + "[&_thead_th]:border-b [&_thead_th]:border-border [&_thead_th]:bg-muted [&_thead_th]:px-3.5 [&_thead_th]:py-2.5 [&_thead_th]:text-left [&_thead_th]:text-xs [&_thead_th]:font-semibold [&_thead_th]:uppercase [&_thead_th]:tracking-[0.04em] [&_thead_th]:text-muted-foreground [&_thead_th]:whitespace-nowrap "
  + "[&_tbody_td]:border-b [&_tbody_td]:border-border [&_tbody_td]:px-3.5 [&_tbody_td]:py-3 [&_tbody_td]:align-middle [&_tbody_td]:text-foreground "
  + "[&_tbody_tr:last-child_td]:border-0 [&_tbody_tr:hover]:bg-muted";

const TS_PROJECTS = [
  { id:'P1', code:'ELS-HRM', name:'ELS HRM Platform',      client:'ELS Technologies',   color:'var(--color-primary)'  },
  { id:'P2', code:'CLI-001', name:'ABC Corp Portal',        client:'ABC Corp',            color:'var(--color-info)'     },
  { id:'P3', code:'INT-DEV', name:'Internal Development',   client:'Internal',            color:'var(--color-success)'  },
  { id:'P4', code:'OPS-SUP', name:'Operations Support',     client:'Internal',            color:'oklch(0.564 0.198 320)' },
];

const TS_WEEKS = ['T2 12/5','T3 13/5','T4 14/5','T5 15/5','T6 16/5','T7 17/5','CN 18/5'];

// notes[] song song hours[] — mỗi ô (entry = dự án×hoạt động×ngày) có ghi chú riêng, đúng mô hình BE.
const TS_ENTRIES = [
  { proj:'P1', act:'Frontend Development', hours:[8,7.5,8,8,6,0,0],
    notes:['Dựng trang đăng nhập, tích hợp form OTP','','Review PR #42 & sửa lỗi validate form','','','',''] },
  { proj:'P2', act:'API Integration',      hours:[0,0,0,0,2,0,0],
    notes:['','','','','Nối API đồng bộ dữ liệu khách hàng ABC','',''] },
  { proj:'P3', act:'Code Review',          hours:[0,0.5,0,0,0,0,0],
    notes:['','','','','','',''] },
];

const TS_STATUSES = [
  { id:'ts-24-01', period:'T5 2024 · W01', emp:'Đỗ Văn Hùng',      hours:40, status:'APPROVED',      approvedBy:'Lê Hữu Phước', date:'05/01/2026' },
  { id:'ts-24-02', period:'T5 2026 · W19', emp:'Đỗ Văn Hùng',      hours:31.5, status:'SUBMITTED',   approvedBy:null, date:'16/05/2026' },
  { id:'ts-24-03', period:'T5 2026 · W18', emp:'Đỗ Văn Hùng',      hours:40, status:'APPROVED',      approvedBy:'Lê Hữu Phước', date:'12/05/2026' },
  { id:'ts-24-04', period:'T5 2026 · W19', emp:'Trần Minh Tuấn',   hours:38, status:'SUBMITTED',     approvedBy:null, date:'16/05/2026' },
  { id:'ts-24-05', period:'T5 2026 · W19', emp:'Lê Thị Hương',     hours:40, status:'NOT_SUBMITTED', approvedBy:null, date:null },
  { id:'ts-24-06', period:'T5 2026 · W18', emp:'Ngô Minh Khoa',    hours:32, status:'REJECTED',      approvedBy:'Lê Hữu Phước', date:'12/05/2026' },
];

const TS_ST = {
  NOT_SUBMITTED:{ label:'Chưa nộp',   v:'neutral', icon:'clock'         },
  SUBMITTED:    { label:'Chờ duyệt',  v:'warning', icon:'inbox'         },
  APPROVED:     { label:'Đã duyệt',   v:'success', icon:'check-circle'  },
  REJECTED:     { label:'Từ chối',    v:'danger',  icon:'x-circle'      },
};

const ProjDot = ({ code }) => {
  const p = TS_PROJECTS.find(x=>x.id===code)||TS_PROJECTS[0];
  return <span className="inline-flex items-center gap-[5px]">
    <span className="inline-block size-2 rounded-full" style={{ background:p.color }} />
    <span className="text-xs font-medium">{p.name}</span>
  </span>;
};

// ─── 01: Manager Timesheet List ────────────────────────────────────────────────
const TimesheetListScreen = ({ dark=false }) => (
  <HRMShell active="timesheet" dark={dark}
    title="Bảng công nhân viên"
    crumbs={['Bảng công']}
    meta="Tuần 19 · 12–18/05/2026"
    actions={<>
      <Btn variant="outline" size="sm" icon="download">Xuất báo cáo</Btn>
      <Btn variant="primary"  size="sm" icon="check">Duyệt tất cả</Btn>
    </>}>

    <TSModuleNav active="list" perms={TSP_MANAGE} />

    {/* Stats */}
    <div className="mb-4 grid grid-cols-4 gap-3">
      {[
        { label:'Chờ phê duyệt',  val:'8',   icon:'inbox',        ib:'var(--color-warning-soft)',     ic:'oklch(0.55 0.158 65)' },
        { label:'Đã phê duyệt',   val:'31',  icon:'check-circle', ib:'var(--color-success-soft)',     ic:'var(--color-success)'       },
        { label:'Chưa nộp',       val:'12',  icon:'clock',        ib:'var(--color-muted)',             ic:'var(--color-muted-foreground)' },
        { label:'Tổng giờ tuần',  val:'1,284',icon:'calendar',    ib:'var(--color-primary-soft)',     ic:'var(--color-primary)'       },
      ].map((s,i)=><StatCard key={i} label={s.label} value={s.val} icon={s.icon} iconBg={s.ib} iconColor={s.ic} />)}
    </div>

    {/* Filter */}
    <div className="mb-3.5 flex items-center gap-2.5 rounded-xl border border-border bg-card px-3.5 py-2.5 shadow-xs">
      <div className="relative flex w-60 items-center">
        <Icon name="search" size={13} className="pointer-events-none absolute left-2.5 size-3.5 text-muted-foreground" />
        <input className="h-8 w-full rounded-md border border-input bg-transparent pl-8 pr-3 text-xs text-foreground shadow-xs transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" placeholder="Tìm nhân viên..." />
      </div>
      <Select className="h-8 w-40 text-xs" defaultValue="Tuần 19 · 12-18/05" options={['Tuần 19 · 12-18/05','Tuần 18 · 05-11/05','Tuần 17 · 28/04-04/05']} />
      <Select className="h-8 text-xs" style={{width:140}} defaultValue="Tất cả trạng thái" options={['Tất cả trạng thái', ...Object.values(TS_ST).map(v=>v.label)]} />
      <div className="flex-1" />
      <span className="text-xs text-muted-foreground">6 bảng công</span>
    </div>

    <div className="overflow-hidden rounded-lg border border-border bg-card">
      <table className={TABLE_CLS}>
        <thead>
          <tr>
            <th><input type="checkbox" /></th>
            <th>Nhân viên</th>
            <th>Kỳ công</th>
            <th style={{ textAlign:'center' }}>Tổng giờ</th>
            <th style={{ textAlign:'center' }}>% Mục tiêu</th>
            <th>Trạng thái</th>
            <th>Ngày nộp</th>
            <th>Thao tác</th>
          </tr>
        </thead>
        <tbody>
          {TS_STATUSES.map(ts=>{
            const st=TS_ST[ts.status];
            const pct=Math.round((ts.hours/40)*100);
            return (
              <tr key={ts.id}>
                <td><input type="checkbox" /></td>
                <td>
                  <div className="flex items-center gap-[9px]">
                    <Avatar name={ts.emp} size="sm" />
                    <span className="text-sm font-medium">{ts.emp}</span>
                  </div>
                </td>
                <td className="text-sm">{ts.period}</td>
                <td className="text-center font-bold tabular-nums">
                  {ts.hours}<span className="text-xs font-normal text-muted-foreground">h</span>
                </td>
                <td className="text-center">
                  <div className="flex items-center gap-2">
                    <div className="h-[5px] flex-1 overflow-hidden rounded-full bg-muted">
                      <div className="h-full rounded-full" style={{ width:`${Math.min(pct,100)}%`, background: pct>=100?'var(--color-success)':pct>=80?'var(--color-primary)':'var(--color-warning)' }} />
                    </div>
                    <span className="w-8 text-right text-xs text-muted-foreground">{pct}%</span>
                  </div>
                </td>
                <td><Badge variant={st.v} dot>{st.label}</Badge></td>
                <td className="text-xs text-muted-foreground">{ts.date||'—'}</td>
                <td>
                  <div className="flex gap-1">
                    <Btn variant="ghost" size="sm" iconOnly icon="eye" />
                    {ts.status==='SUBMITTED' && <Btn variant="soft" size="xs">Duyệt</Btn>}
                  </div>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  </HRMShell>
);

// ─── 02: Weekly Timesheet Entry (Employee) ────────────────────────────────────
// notePopover: biến thể hiển thị popover nhập "Mô tả công việc" cho MỘT ô (per-entry).
const TimesheetEntryScreen = ({ notePopover=false }) => {
  const totalPerDay = TS_WEEKS.map((_,di)=>TS_ENTRIES.reduce((s,e)=>s+e.hours[di],0));
  const grandTotal = totalPerDay.reduce((s,v)=>s+v,0);

  return (
    <HRMShell active="timesheet"
      user={{ name:'Đỗ Văn Hùng', role:'Frontend Developer' }}
      title="Bảng công tuần 19"
      crumbs={['Bảng công','Tuần 19 · 12-18/05/2026']}
      actions={<>
        <Btn variant="outline" size="sm">Lưu nháp</Btn>
        <Btn variant="primary"  size="sm" icon="inbox">Nộp bảng công</Btn>
      </>}>

      <TSModuleNav active="my" perms={TSP_ESS} />

      {/* Period header */}
      <div className="mb-3.5 flex items-center gap-3.5 rounded-xl border border-border bg-card px-5 py-3 shadow-xs">
        <Icon name="calendar" size={16} className="text-primary" />
        <div>
          <div className="text-base font-bold">Tuần 19 · 12/05 – 18/05/2026</div>
          <div className="text-xs text-muted-foreground">Hạn nộp: 23/05/2026 · Chưa nộp</div>
        </div>
        <div className="flex-1" />
        <div className="text-right">
          <div className="text-2xl font-extrabold leading-none" style={{ color:grandTotal>=40?'var(--color-success)':'var(--color-primary)' }}>{grandTotal}h</div>
          <div className="text-xs text-muted-foreground">/ 40h mục tiêu</div>
        </div>
        <div className="h-2 w-[120px] overflow-hidden rounded-full bg-muted">
          <div className="h-full rounded-full" style={{ width:`${Math.min((grandTotal/40)*100,100)}%`, background:grandTotal>=40?'var(--color-success)':'var(--color-primary)' }} />
        </div>
      </div>

      {/* Timesheet grid */}
      <div className="overflow-auto rounded-xl border border-border bg-card shadow-xs">
        <table className="w-full min-w-[1040px] border-collapse">
          <thead>
            <tr className="bg-muted">
              <th className="min-w-[220px] border-b border-border px-4 py-2.5 text-left text-xs font-semibold">Dự án / Hoạt động</th>
              {TS_WEEKS.map((d,i)=>(
                <th key={d} className={"min-w-[104px] border-b border-border px-3 py-2.5 text-center text-xs font-semibold " + (i>=5?"text-muted-foreground":"text-foreground")}
                  style={{ background:d.includes('16')?'var(--color-primary-soft)':'transparent' }}>
                  <div>{d.split(' ')[0]}</div>
                  <div className="mt-0.5 text-xs font-normal text-muted-foreground">{d.split(' ')[1]}</div>
                </th>
              ))}
              <th className="min-w-[64px] border-b border-border px-3 py-2.5 text-center text-xs font-bold">Tổng</th>
              <th className="w-10 border-b border-border px-2 py-2.5"></th>
            </tr>
          </thead>
          <tbody>
            {TS_ENTRIES.map((entry,ri)=>{
              const p = TS_PROJECTS.find(x=>x.id===entry.proj)||TS_PROJECTS[0];
              const rowTotal = entry.hours.reduce((s,v)=>s+v,0);
              return (
                <tr key={ri} className="border-b border-border">
                  <td className="px-4 py-2.5">
                    <div className="flex items-center gap-2">
                      <span className="size-2 shrink-0 rounded-full" style={{ background:p.color }} />
                      <div>
                        <div className="text-sm font-medium">{p.name}</div>
                        <div className="text-xs text-muted-foreground">{entry.act}</div>
                      </div>
                    </div>
                  </td>
                  {entry.hours.map((h,di)=>{
                    const note = entry.notes?.[di];
                    const showPop = notePopover && ri===0 && di===0;
                    return (
                    <td key={di} className={"relative px-1.5 py-2 " + (di===4?"bg-primary-soft":di>=5?"bg-muted":"")}>
                      <div className="flex items-center justify-center gap-1.5">
                        <input type="number" min={0} max={24} step={0.5} defaultValue={h||''} placeholder="—"
                          className={"h-[30px] w-[54px] rounded-sm border bg-card text-center font-mono text-sm outline-none " + (note?"border-primary":"border-border") + " " + (h?"font-semibold text-foreground":"font-normal text-muted-foreground")} />
                        {/* Nút mô tả cạnh input — chỉ ô đã nhập giờ (đã có entry). Tô đậm (soft) = đã có mô tả; mờ (ghost) = thêm mới. Row×cột đã cho biết ngày/dự án nên popover không lặp nhãn. */}
                        {h ? (
                          note
                            ? <Btn variant="soft" size="sm" iconOnly icon="file-text" title="Có mô tả công việc — bấm để xem/sửa" />
                            : <Btn variant="ghost" size="sm" iconOnly icon="file-text" className="text-muted-foreground" title="Thêm mô tả công việc" />
                        ) : null}
                      </div>
                      {showPop && (
                        <div className="absolute left-1.5 top-full z-50 mt-1 w-[260px] rounded-lg border border-border bg-card p-2.5 text-left shadow-2xl">
                          <textarea className="h-[64px] w-full resize-none rounded-md border border-input bg-transparent px-2.5 py-2 text-xs text-foreground shadow-xs focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" placeholder="Mô tả công việc…" defaultValue="Dựng trang đăng nhập, tích hợp form OTP" />
                          <div className="mt-2 flex justify-end gap-2">
                            <Btn variant="outline" size="xs">Hủy</Btn>
                            <Btn variant="primary" size="xs">Lưu</Btn>
                          </div>
                        </div>
                      )}
                    </td>
                    );
                  })}
                  <td className="px-3 py-2 text-center text-base font-bold tabular-nums" style={{ color:p.color }}>{rowTotal}</td>
                  <td className="px-2 py-2 text-center">
                    <Btn variant="ghost" size="sm" iconOnly icon="trash" />
                  </td>
                </tr>
              );
            })}

            {/* Add row */}
            <tr className="border-b border-border bg-muted">
              <td className="px-4 py-2.5">
                <button className="flex cursor-pointer items-center gap-1.5 border-0 bg-transparent p-0 text-sm font-medium text-primary">
                  <Icon name="plus-circle" size={14} /> Thêm dự án / hoạt động
                </button>
              </td>
              {TS_WEEKS.map((_,i)=><td key={i}></td>)}
              <td></td><td></td>
            </tr>

            {/* Totals row */}
            <tr className="bg-muted">
              <td className="px-4 py-2.5 text-xs font-bold uppercase tracking-[0.04em] text-muted-foreground">Tổng / ngày</td>
              {totalPerDay.map((h,i)=>(
                <td key={i} className={"px-3 py-2.5 text-center text-base font-bold tabular-nums " + (i>=5?"bg-muted":i===4?"bg-primary-soft":"")}
                  style={{ color:h===0?'var(--color-muted-foreground)':h>8?'var(--color-destructive)':h===8?'var(--color-success)':'var(--color-foreground)' }}>
                  {h||'—'}
                </td>
              ))}
              <td className="px-3 py-2.5 text-center text-md font-extrabold" style={{ color:grandTotal>=40?'var(--color-success)':'var(--color-primary)' }}>{grandTotal}</td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* Gợi ý nhập ghi chú per-entry */}
      <p className="mt-2 flex items-center gap-1 text-xs text-muted-foreground">
        <Icon name="info" size={13} />
        Mỗi ô đã nhập giờ có nút
        <Icon name="file-text" size={12} className="mx-1 inline text-primary" />
        bên cạnh để thêm/xem <b className="mr-1 font-medium text-foreground">mô tả công việc</b> cho ngày đó; nút tô đậm = ô đã có mô tả.
      </p>

      {/* Trao đổi (hai chiều — nhân viên ⇄ người duyệt). "Ghi chú tuần" nay là TIN ĐẦU của NV,
          không còn là ô ghi chú một chiều. NV đọc được phản hồi quản lý & trả lời ngay tại đây. */}
      <div className="mt-3.5 flex flex-col rounded-xl border border-border bg-card shadow-xs">
        <div className="flex items-center gap-2 border-b border-border px-4 py-3">
          <Icon name="message-square" size={15} className="text-primary" />
          <span className="text-sm font-bold">Trao đổi</span>
          <span className="rounded-full bg-muted px-1.5 text-xs text-muted-foreground">2</span>
        </div>
        <div className="flex flex-col gap-3.5 px-4 py-4">
          {[
            { who:'Đỗ Văn Hùng', role:'emp', at:'16/05 · 09:12', text:'Đã hoàn thành sprint 19. Thứ 6 có tăng ca để fix bug production.' },
            { who:'Lê Hữu Phước', role:'mgr', at:'16/05 · 14:03', text:'Giờ thứ 6 (10h) hơi cao so với thường lệ, em xác nhận lại giúp anh nhé.' },
          ].map((c,i)=>(
            <div key={i} className="flex gap-2.5">
              <Avatar name={c.who} size="sm" />
              <div className="flex-1">
                <div className="flex items-center gap-2">
                  <span className="text-xs font-semibold text-foreground">{c.who}</span>
                  <span className="text-xs text-muted-foreground">{c.at}</span>
                </div>
                <div className={"mt-1 rounded-lg px-3 py-2 text-sm leading-relaxed " + (c.role==='mgr' ? "bg-primary-soft text-foreground" : "bg-muted text-foreground")}>
                  {c.text}
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="border-t border-border p-3">
          <div className="flex items-end gap-2">
            <textarea className="h-[38px] flex-1 resize-none rounded-md border border-input bg-transparent px-3 pt-2 text-sm text-foreground shadow-xs transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring"
              placeholder="Viết trao đổi… (tin đầu tiên là ghi chú tuần)" />
            <Btn variant="primary" size="sm" iconOnly icon="send" />
          </div>
        </div>
      </div>
    </HRMShell>
  );
};

// ─── 03: Approve Timesheet (Manager) ─────────────────────────────────────────
// SUPERSEDED bởi TSApproveCommentsScreen (timesheet-admin-screens.jsx): màn duyệt CHÍNH THỨC dùng
// luồng "Trao đổi" hai chiều thay cho ô "Phản hồi của Manager" một chiều dưới đây. Giữ lại chỉ để
// tham chiếu lịch sử — KHÔNG dùng cho thiết kế hiện hành.
const TimesheetApproveScreen = () => {
  const ts = TS_STATUSES[1]; // Submitted
  return (
    <HRMShell active="timesheet"
      user={{ name:'Lê Hữu Phước', role:'Department Manager' }}
      title="Xem xét bảng công"
      crumbs={['Bảng công',ts.id]}
      actions={<>
        <Btn variant="outline"     size="sm" icon="x">Từ chối</Btn>
        <Btn variant="primary"     size="sm" icon="check">Phê duyệt</Btn>
      </>}>
      <TSModuleNav active="approve" perms={TSP_MANAGE} />
      <div className="grid grid-cols-[1fr_280px] gap-4">
        <div className="flex flex-col gap-3.5">
          {/* Summary */}
          <div className="flex items-center gap-4 rounded-xl border border-border bg-card p-5 shadow-xs">
            <Avatar name={ts.emp} size="lg" />
            <div className="flex-1">
              <div className="mb-1 text-md font-bold">{ts.emp}</div>
              <div className="text-sm text-muted-foreground">Frontend Developer · Engineering</div>
              <div className="mt-2 flex gap-2">
                <Badge variant="warning" dot>Chờ phê duyệt</Badge>
                <span className="text-xs text-muted-foreground">Nộp: {ts.date}</span>
              </div>
            </div>
            <div className="text-right">
              <div className="text-4xl font-extrabold leading-none text-primary">{ts.hours}h</div>
              <div className="text-xs text-muted-foreground">Tuần 19 · 12-18/05</div>
              <div className="mt-1.5">
                <Badge variant={ts.hours>=40?'success':'warning'}>{Math.round((ts.hours/40)*100)}% mục tiêu</Badge>
              </div>
            </div>
          </div>

          {/* Read-only timesheet */}
          <div className="overflow-auto rounded-xl border border-border bg-card shadow-xs">
            <table className="w-full min-w-[800px] border-collapse">
              <thead>
                <tr className="bg-muted">
                  <th className="border-b border-border px-4 py-2.5 text-left text-xs font-semibold">Dự án</th>
                  {TS_WEEKS.map(d=><th key={d} className="border-b border-border px-2.5 py-2 text-center text-xs font-semibold">{d}</th>)}
                  <th className="border-b border-border px-2.5 py-2 text-center text-xs font-bold">Tổng</th>
                </tr>
              </thead>
              <tbody>
                {TS_ENTRIES.map((entry,ri)=>{
                  const p=TS_PROJECTS.find(x=>x.id===entry.proj)||TS_PROJECTS[0];
                  const rowTotal=entry.hours.reduce((s,v)=>s+v,0);
                  return (
                    <tr key={ri} className="border-b border-border">
                      <td className="px-4 py-2.5">
                        <div className="flex items-center gap-[7px]">
                          <span className="size-[7px] rounded-full" style={{ background:p.color }} />
                          <div>
                            <div className="text-sm font-medium">{p.name}</div>
                            <div className="text-xs text-muted-foreground">{entry.act}</div>
                          </div>
                        </div>
                      </td>
                      {entry.hours.map((h,di)=>(
                        <td key={di} className={"px-2.5 py-2.5 text-center text-sm " + (h?"font-semibold text-foreground":"font-normal text-muted-foreground")}>{h||'—'}</td>
                      ))}
                      <td className="px-2.5 py-2.5 text-center text-base font-bold" style={{ color:p.color }}>{rowTotal}</td>
                    </tr>
                  );
                })}
                <tr className="bg-muted">
                  <td className="px-4 py-2.5 text-xs font-bold uppercase text-muted-foreground">Tổng / ngày</td>
                  {TS_WEEKS.map((_,di)=>{
                    const tot=TS_ENTRIES.reduce((s,e)=>s+e.hours[di],0);
                    return <td key={di} className="px-2.5 py-2.5 text-center font-bold" style={{ color:tot===8?'var(--color-success)':tot>8?'var(--color-destructive)':'var(--color-foreground)' }}>{tot||'—'}</td>;
                  })}
                  <td className="px-2.5 py-2.5 text-center text-md font-extrabold text-primary">{ts.hours}</td>
                </tr>
              </tbody>
            </table>
          </div>

          {/* Comment */}
          <div className="rounded-xl border border-border bg-card p-[18px] shadow-xs">
            <label className="mb-2 block text-sm font-semibold">Phản hồi của Manager <span className="text-xs font-normal text-muted-foreground">(tùy chọn)</span></label>
            <textarea className="h-[70px] w-full resize-none rounded-md border border-input bg-transparent px-3 pt-2 text-base text-foreground shadow-xs transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring"
              placeholder="Ghi chú cho nhân viên..." />
          </div>
        </div>

        {/* Right sidebar */}
        <div className="flex flex-col gap-3">
          <div className="rounded-xl border border-border bg-card p-4 shadow-xs">
            <div className="mb-3 text-xs font-bold">Thống kê tuần</div>
            {[
              { label:'Tổng giờ làm',      val:`${ts.hours}h`, color:'var(--color-primary)' },
              { label:'Giờ billable',      val:'29.5h', color:'var(--color-success)' },
              { label:'Giờ internal',      val:'2h',   color:'var(--color-info)'    },
              { label:'% utilization',     val:'74%',  color:'var(--color-warning)' },
            ].map((s,i)=>(
              <div key={i} className={"flex justify-between py-2 text-sm " + (i<3?"border-b border-border":"")}>
                <span className="text-muted-foreground">{s.label}</span>
                <span className="font-bold" style={{ color:s.color }}>{s.val}</span>
              </div>
            ))}
          </div>
          <div className="rounded-xl border border-border bg-card p-4 shadow-xs">
            <div className="mb-3 text-xs font-bold">Lịch sử bảng công</div>
            {[
              { week:'W18', hours:40, status:'APPROVED' },
              { week:'W17', hours:40, status:'APPROVED' },
              { week:'W16', hours:36, status:'APPROVED' },
            ].map((h,i)=>(
              <div key={i} className={"flex items-center justify-between py-[7px] text-xs " + (i<2?"border-b border-border":"")}>
                <span className="text-muted-foreground">{h.week}</span>
                <span className="font-semibold">{h.hours}h</span>
                <Badge variant="success" dot>Đã duyệt</Badge>
              </div>
            ))}
          </div>
        </div>
      </div>
    </HRMShell>
  );
};

// ─── 04: Empty State ──────────────────────────────────────────────────────────
const TimesheetEmptyScreen = () => (
  <HRMShell active="timesheet" title="Bảng công" crumbs={['Bảng công']}>
    <TSModuleNav active="list" perms={TSP_MANAGE} />
    <div className="flex min-h-[440px] flex-col items-center justify-center rounded-xl border border-border bg-card p-12 shadow-xs">
      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" className="mb-6">
        <circle cx="40" cy="40" r="40" fill="var(--color-muted)" />
        <rect x="18" y="20" width="44" height="40" rx="4" fill="none" stroke="var(--color-border-strong)" strokeWidth="2.5" />
        <line x1="18" y1="32" x2="62" y2="32" stroke="var(--color-border-strong)" strokeWidth="1.5" />
        <line x1="29" y1="20" x2="29" y2="60" stroke="var(--color-border-strong)" strokeWidth="1.5" />
        <line x1="40" y1="20" x2="40" y2="60" stroke="var(--color-border-strong)" strokeWidth="1.5" />
        <line x1="51" y1="20" x2="51" y2="60" stroke="var(--color-border-strong)" strokeWidth="1.5" />
        <circle cx="59" cy="58" r="12" fill="var(--color-primary-soft)" stroke="var(--color-primary)" strokeWidth="2" />
        <path d="M55 58h8M59 54v8" stroke="var(--color-primary)" strokeWidth="2" strokeLinecap="round" />
      </svg>
      <div className="mb-2.5 text-xl font-bold">Chưa có bảng công nào</div>
      <div className="mb-7 max-w-[400px] text-center text-base leading-[1.65] text-muted-foreground">
        Bảng công sẽ được tạo tự động theo chu kỳ đã cấu hình. Hoặc Admin có thể tạo thủ công cho nhân viên cụ thể.
      </div>
      <Btn variant="primary" icon="plus">Tạo bảng công</Btn>
    </div>
  </HRMShell>
);

// ─── 05: Dark Mode ────────────────────────────────────────────────────────────
const TimesheetDarkScreen = () => <TimesheetListScreen dark />;

Object.assign(window, {
  TimesheetListScreen, TimesheetEntryScreen, TimesheetApproveScreen,
  TimesheetEmptyScreen, TimesheetDarkScreen, ProjDot,
});