// ELS HRM — Module 09: Quản Lý Tuyển Dụng (Vacancy) — All Screens — Tailwind utility classes

// v1 CHỈ NỘI BỘ: không có cổng ứng tuyển công khai, không có kênh đăng tin bên thứ ba, và vì thế
// không có cờ "công khai" trên tin tuyển dụng (quyết định A1.2 — audit vấn đề 17).
//
// `published` là cờ ĐĂNG TẢI lên bảng việc làm nội bộ, KHÁC với `status`. Một tin có thể đang
// tuyển mà chưa đăng tải (V002) — đó cũng là trạng thái tin rơi vào ngay sau khi bấm "Mở lại tin"
// (quyết định R2-13: mở lại đưa tin về đang tuyển NHƯNG chưa đăng tải, muốn lên bảng phải bấm
// Đăng tải lần nữa). V004 để `filled` nhỏ hơn `total` để bản vẽ chứng minh được điều kiện tiền đề
// của thao tác mở lại: chỉ mở lại được khi CÒN vị trí chưa tuyển.
const VAC_LIST = [
  { id:'V001', title:'Senior Backend Engineer',      dept:'Engineering', hm:'Lê Hữu Phước', total:3, filled:1, status:'ACTIVE',    published:true,  created:'01/04/2026', apps:18, code:'ENG' },
  { id:'V002', title:'HR Business Partner',          dept:'Nhân sự',     hm:'Nguyễn Thị Lan',total:1,filled:0, status:'ACTIVE',    published:false, created:'10/04/2026', apps:24, code:'HR'  },
  { id:'V003', title:'Frontend Developer (React)',   dept:'Engineering', hm:'Lê Hữu Phước', total:2, filled:0, status:'ACTIVE',    published:true,  created:'15/04/2026', apps:31, code:'ENG' },
  { id:'V004', title:'Sales Account Manager',        dept:'Kinh doanh',  hm:'Đỗ Thị Mai',   total:2, filled:1, status:'CLOSED',    published:false, created:'01/03/2026', apps:45, code:'BIZ' },
  { id:'V005', title:'Marketing Content Specialist', dept:'Marketing',   hm:'Lê Thị Hương', total:1, filled:0, status:'DRAFT',     published:false, created:'14/05/2026', apps:0,  code:'MKT' },
  { id:'V006', title:'DevOps Engineer',              dept:'Engineering', hm:'Lê Hữu Phước', total:1, filled:0, status:'ACTIVE',    published:true,  created:'20/04/2026', apps:9,  code:'ENG' },
  { id:'V007', title:'Product Manager',              dept:'Product',     hm:'Hồ Văn Minh',  total:1, filled:0, status:'CANCELLED', published:false, created:'01/02/2026', apps:12, code:'PROD'},
];

const VAC_ST = {
  DRAFT:     { label:'Bản nháp',  v:'neutral', icon:'file-text'    },
  ACTIVE:    { label:'Đang mở',   v:'success', icon:'check-circle' },
  CLOSED:    { label:'Đã đóng',   v:'info',    icon:'x-circle'     },
  CANCELLED: { label:'Đã hủy',    v:'danger',  icon:'x'            },
};

// Hạn mức tệp đính kèm của TIN — khác hẳn luồng tệp của ứng viên (5 MB / 20 MB). Mỗi màn phải in
// đúng con số của luồng mình, và hạn mức TỔNG cũng phải hiện ra: người dùng không tự suy được vì
// nó phụ thuộc các tệp đã tải trước đó (quyết định R2-30 · srs/09_recruitment/12_vacancy-attachments.md).
const VAC_FILE_LIMIT = { perFile:'10 MB', total:'50 MB', maxCount:10 };

// Nhãn từng chặng CHÉP TỪ cột «Nhãn hiển thị» của `srs/09_recruitment/01_shared.md` §1 và phải
// TRÙNG CHỮ với bảng `CAN_ST` ở candidate-screens.jsx. Trước đây màn này gọi "Đề nghị"/"Phỏng
// vấn", màn kia gọi "Offer"/"PV lên lịch", còn đặc tả gọi kiểu thứ ba — cùng một chặng có tới bốn
// cái tên (audit vấn đề 15 và 44). Ở đây dùng bản rút gọn "Đã lên lịch PV" vì phễu có năm cột.
const VAC_FUNNEL = [
  { stage:'Đã nộp đơn',      count:18, color:'var(--color-muted-foreground)' },
  { stage:'Đã sàng lọc',     count:12, color:'var(--color-primary)'          },
  { stage:'Đã lên lịch PV',  count:6,  color:'var(--color-info)'             },
  { stage:'Đã gửi lời mời',  count:2,  color:'var(--color-success)'          },
  { stage:'Đã tuyển',        count:1,  color:'var(--color-success)'          },
];

const DEPT_COLOR = {
  ENG:'var(--color-primary)', HR:'var(--color-success)', BIZ:'var(--color-info)',
  MKT:'oklch(0.564 0.198 320)', PROD:'var(--color-warning)', CORP:'var(--color-muted-foreground)',
};

const CARD = "rounded-xl border border-border bg-card shadow-xs";

// ─── 01: Vacancy List ─────────────────────────────────────────────────────────
const VacListScreen = ({ dark=false }) => (
  <HRMShell active="vacancies" dark={dark}
    title="Tin tuyển dụng"
    crumbs={['Tin tuyển dụng']}
    meta="7 vị trí"
    actions={<>
      <Btn variant="outline" size="sm" icon="download">Xuất báo cáo</Btn>
      <Btn variant="primary"  size="sm" icon="plus">Đăng tin mới</Btn>
    </>}>

    {/* Stats */}
    <div className="mb-4 grid grid-cols-4 gap-3">
      {[
        { label:'Đang tuyển',    val:'4',  delta:'12 vị trí mở', dir:'up',   icon:'briefcase',   ib:'var(--color-success-soft)',     ic:'var(--color-success)'   },
        { label:'Tổng ứng viên', val:'139',delta:'+23 tuần này',  dir:'up',   icon:'users',       ib:'var(--color-primary-soft)',     ic:'var(--color-primary)'   },
        { label:'Chờ phỏng vấn',val:'38', delta:'Cần xếp lịch',  dir:'down', icon:'calendar',    ib:'var(--color-warning-soft)',     ic:'oklch(0.55 0.158 65)' },
        { label:'Đã tuyển T5',  val:'3',  delta:'3/6 mục tiêu',  dir:'up',   icon:'check-circle',ib:'var(--color-info-soft)',        ic:'var(--color-info)'      },
      ].map((s,i)=><StatCard key={i} label={s.label} value={s.val} delta={s.delta} deltaDir={s.dir} icon={s.icon} iconBg={s.ib} iconColor={s.ic} />)}
    </div>

    {/* Filter bar */}
    <div className={CARD + " mb-3.5 flex items-center gap-2.5 px-3.5 py-2.5"}>
      <div className="relative flex w-[260px] 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 vị trí tuyển dụng..." />
      </div>
      {[
        { w:'w-[140px]', opts:['Tất cả trạng thái','Đang mở','Bản nháp','Đã đóng','Đã hủy'] },
        { w:'w-[148px]', opts:['Tất cả phòng ban','Engineering','Nhân sự','Kinh doanh','Marketing'] },
        // Hai mức nhìn thấy tin trong màn quản trị (R2-03): mọi tin, hoặc tin mình phụ trách kể cả
        // nháp. Mức "chỉ tin đã đăng tải" KHÔNG nằm ở đây — nó là màn Việc làm nội bộ riêng.
        { w:'w-[160px]', opts:['Mọi tin tuyển dụng','Tin tôi phụ trách'] },
      ].map((s,i)=>(
        <Select key={i} className={"h-8 text-xs cursor-pointer " + s.w} options={s.opts} defaultValue={s.opts[0]} />
      ))}
      <Btn variant="outline" size="sm" icon="filter">Lọc</Btn>
      <div className="flex-1" />
      <span className="text-xs text-muted-foreground">7 tin tuyển dụng</span>
    </div>

    {/* Card grid view */}
    <div className="grid grid-cols-3 gap-3.5">
      {VAC_LIST.map(v=>{
        const st = VAC_ST[v.status];
        const dc = DEPT_COLOR[v.code] || 'var(--color-muted-foreground)';
        const openSlots = v.total - v.filled;
        return (
          <div key={v.id} className={CARD + " overflow-hidden p-0"}>
            {/* Color accent top */}
            <div className="h-1" style={{ background:dc }} />
            <div className="px-[18px] py-4">
              <div className="mb-2.5 flex items-start justify-between">
                <div className="min-w-0 flex-1">
                  <div className="mb-1 text-base font-bold leading-[1.3]">{v.title}</div>
                  <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
                    <Icon name="building" size={12} />
                    {v.dept} · {v.hm}
                  </div>
                </div>
                <div className="ml-2 flex shrink-0 flex-col items-end gap-1">
                  <Badge variant={st.v} dot>{st.label}</Badge>
                  {/* Đang tuyển mà chưa đăng tải là trạng thái có thật, không phải lỗi dữ liệu */}
                  {v.status==='ACTIVE' && !v.published && <Badge variant="neutral">Chưa đăng tải</Badge>}
                </div>
              </div>

              {/* Metrics row */}
              <div className="mb-3.5 flex gap-3 border-b border-border pb-3">
                {[
                  { icon:'users',     val:`${v.apps}`, label:'Ứng viên'           },
                  { icon:'briefcase', val:`${openSlots}/${v.total}`, label:'Chỗ trống' },
                  { icon:'calendar',  val:v.created,    label:'Đăng ngày'         },
                ].map((m,i)=>(
                  <div key={i} className="flex items-center gap-[5px] text-xs">
                    <Icon name={m.icon} size={11} style={{ color:'var(--color-muted-foreground)' }} />
                    <span className="font-semibold">{m.val}</span>
                    <span className="text-muted-foreground">{m.label}</span>
                  </div>
                ))}
              </div>

              {/* Progress bar */}
              {v.total > 0 && (
                <div className="mb-3.5">
                  <div className="mb-[5px] flex justify-between text-xs">
                    <span className="text-muted-foreground">Tiến độ tuyển dụng</span>
                    <span className="font-semibold">{v.filled}/{v.total} vị trí</span>
                  </div>
                  <div className="h-2 overflow-hidden rounded-full bg-muted">
                    <div className="h-full rounded-full" style={{ width:`${(v.filled/v.total)*100}%`, background:v.filled===v.total?'var(--color-success)':'var(--color-primary)' }} />
                  </div>
                </div>
              )}

              {/* Actions */}
              <div className="flex gap-1.5">
                <Btn variant="outline" size="xs" icon="users">Ứng viên ({v.apps})</Btn>
                {v.status==='DRAFT' && <Btn variant="primary" size="xs" icon="check-circle">Đăng tin</Btn>}
                {v.status==='ACTIVE' && !v.published && <Btn variant="primary" size="xs" icon="globe">Đăng tải</Btn>}
                <Btn variant="ghost" size="sm" iconOnly icon="more-vertical" />
              </div>
            </div>
          </div>
        );
      })}
    </div>
  </HRMShell>
);

// ─── 02: Vacancy Detail ───────────────────────────────────────────────────────
// Nhận `vacancy` để vẽ được cả tin đang mở lẫn tin đã đóng — hai trạng thái này có bộ nút KHÁC
// nhau, mà đúng chỗ khác nhau đó là nơi audit vấn đề 13/14/23 chỉ ra là chưa vẽ.
const VacDetailScreen = ({ vacancy }) => {
  const v = vacancy || VAC_LIST[0]; // mặc định: Senior Backend Engineer (đang mở, đã đăng tải)
  const [tab, setTab] = React.useState('overview');
  const st = VAC_ST[v.status];
  const openSlots = v.total - v.filled;
  return (
    <HRMShell active="vacancies"
      title={v.title}
      crumbs={['Tin tuyển dụng', v.title]}
      meta={<div className="flex items-center gap-1.5">
        <Badge variant={st.v} dot>{st.label}</Badge>
        {v.status==='ACTIVE' && !v.published && <Badge variant="neutral">Chưa đăng tải</Badge>}
      </div>}
      actions={<>
        <Btn variant="outline" size="sm" icon="edit">Chỉnh sửa</Btn>
        {/* Gỡ tin khỏi bảng việc làm nội bộ nhưng KHÔNG đóng tin — vẫn nhận hồ sơ nhập tay */}
        {v.status==='ACTIVE' && v.published && <Btn variant="outline" size="sm" icon="globe">Hủy đăng tải</Btn>}
        {v.status==='ACTIVE' && !v.published && <Btn variant="outline" size="sm" icon="globe">Đăng tải</Btn>}
        {v.status==='ACTIVE' && <Btn variant="outline" size="sm" icon="x-circle">Đóng tin</Btn>}
        {/* Chỉ mở lại được khi CÒN vị trí chưa tuyển (R2-13). Tin về "đang tuyển, chưa đăng tải" */}
        {v.status==='CLOSED' && openSlots>0 && <Btn variant="primary" size="sm" icon="check-circle">Mở lại tin</Btn>}
        {/* Huỷ tin đi ra từ BẢN NHÁP và ĐANG TUYỂN — không đi ra từ "đã đóng" (R2-14) */}
        {(v.status==='DRAFT' || v.status==='ACTIVE') && <Btn variant="destructive" size="sm" icon="x">Hủy tin</Btn>}
        <Btn variant="primary"  size="sm" icon="users">Xem ứng viên ({v.apps})</Btn>
      </>}>
      <div className="grid grid-cols-[1fr_280px] gap-4">
        <div className={CARD + " overflow-hidden"}>
          <div className="flex gap-1 border-b border-border px-5">
            {['overview','candidates','attachments'].map((t,i)=>(
              <div key={t} className={"-mb-px cursor-pointer border-b-2 px-4 py-3 text-sm font-medium " + (tab===t ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground")} onClick={()=>setTab(t)}>
                {['Tổng quan',`Ứng viên (${v.apps})`,'Tệp đính kèm (3)'][i]}
              </div>
            ))}
          </div>
          <div className="p-[22px]">
            {tab==='overview' && (
              <div>
                {/* Tin đã đóng mà còn chỗ trống — nói thẳng ra đường đi tiếp theo, đừng bắt đoán */}
                {v.status==='CLOSED' && openSlots>0 && (
                  <div className="mb-4 flex gap-2.5 rounded-md border border-info bg-info-soft px-4 py-3 text-xs leading-[1.55]" style={{ color:'oklch(0.385 0.062 222)' }}>
                    <Icon name="info" size={14} className="mt-0.5 shrink-0" />
                    <div>
                      <strong>Tin đã đóng, còn {openSlots} vị trí chưa tuyển.</strong> Bấm «Mở lại tin» để đưa tin về trạng thái đang tuyển — tin sẽ ở mức <em>chưa đăng tải</em>, muốn lên bảng Việc làm nội bộ phải bấm «Đăng tải» thêm một lần. Các đơn đã ngừng xét vì tin đóng <strong>không tự sống lại</strong>; xem tab Ứng viên để hồi lại từng đơn.
                    </div>
                  </div>
                )}
                <div className="mb-3 text-base font-bold">Mô tả công việc</div>
                <div className="mb-[18px] text-sm leading-[1.7] text-foreground">
                  <p className="mt-0">Chúng tôi đang tìm kiếm <strong>Senior Backend Engineer</strong> có kinh nghiệm xây dựng hệ thống phân tán, thiết kế API hiệu suất cao và làm việc trong môi trường Agile.</p>
                  <div className="mb-2 text-sm font-bold">Trách nhiệm chính:</div>
                  <ul className="m-0 pl-5 leading-[1.8]">
                    <li>Thiết kế và phát triển API RESTful / GraphQL hiệu suất cao</li>
                    <li>Xây dựng và duy trì hệ thống microservices trên Kubernetes</li>
                    <li>Code review và mentoring cho junior engineers</li>
                    <li>Phối hợp với Product và Frontend để định nghĩa API contracts</li>
                  </ul>
                  <div className="mb-2 mt-3.5 text-sm font-bold">Yêu cầu:</div>
                  <ul className="m-0 pl-5 leading-[1.8]">
                    <li>5+ năm kinh nghiệm với Node.js hoặc Go</li>
                    <li>Kinh nghiệm với PostgreSQL, Redis, message queues</li>
                    <li>Hiểu biết về cloud infrastructure (AWS/GCP)</li>
                    <li>Kỹ năng giao tiếp tốt bằng tiếng Anh</li>
                  </ul>
                </div>
              </div>
            )}
            {tab==='candidates' && (
              <div>
                <div className="mb-3.5 flex justify-between">
                  <div className="text-base font-semibold">{v.apps} ứng viên trong pipeline</div>
                  <Btn variant="soft" size="sm" icon="plus">Thêm ứng viên</Btn>
                </div>
                {/* Pipeline funnel */}
                <div className="mb-[18px] grid grid-cols-5 gap-2">
                  {VAC_FUNNEL.map((s,i)=>(
                    <div key={i} className="rounded-md bg-muted px-2 py-3 text-center">
                      <div className="text-2xl font-extrabold" style={{ color:s.color }}>{s.count}</div>
                      <div className="mt-[3px] text-xs text-muted-foreground">{s.stage}</div>
                    </div>
                  ))}
                </div>
                {/* Đơn bị ngừng xét khi tin đóng — hồi lại TỪNG ĐƠN, không tự sống lại (R2-13) */}
                {v.status==='CLOSED' && (
                  <div className="mb-[18px] rounded-md border border-border bg-muted p-3.5">
                    <div className="mb-2 flex items-center justify-between">
                      <div className="text-sm font-semibold">2 đơn đã ngừng xét vì tin đóng</div>
                      <span className="text-xs text-muted-foreground">Lý do: Tin tuyển dụng đã đóng</span>
                    </div>
                    {[
                      { name:'Vũ Thị Ngọc Anh', stage:'Đã sàng lọc' },
                      { name:'Hoàng Đình Khoa', stage:'Đã lên lịch PV' },
                    ].map((c,i)=>(
                      <div key={i} className={"flex items-center gap-3 py-2 " + (i<1 ? "border-b border-border" : "")}>
                        <Avatar name={c.name} size="sm" />
                        <div className="flex-1">
                          <div className="text-sm font-medium">{c.name}</div>
                          <div className="text-xs text-muted-foreground">Ngừng ở chặng {c.stage}</div>
                        </div>
                        <Btn variant="outline" size="xs" icon="check-circle">Hồi lại đơn</Btn>
                      </div>
                    ))}
                  </div>
                )}
                {/* Top candidates — KHÔNG có điểm phù hợp: chấm điểm tự động đã cắt khỏi v1 */}
                {[
                  { name:'Nguyễn Văn Bảo',  stage:'Đã lên lịch PV', days:12 },
                  { name:'Trần Thị Cẩm Tú', stage:'Đã sàng lọc',    days:8  },
                  { name:'Phạm Minh Đức',   stage:'Đã nộp đơn',     days:3  },
                ].map((c,i)=>(
                  <div key={i} className={"flex items-center gap-3 py-2.5 " + (i<2 ? "border-b border-border" : "")}>
                    <Avatar name={c.name} />
                    <div className="flex-1">
                      <div className="text-sm font-semibold">{c.name}</div>
                      <div className="mt-0.5 text-xs text-muted-foreground">Nộp {c.days} ngày trước</div>
                    </div>
                    <Badge variant="neutral">{c.stage}</Badge>
                    <Btn variant="ghost" size="sm" iconOnly icon="chevron-right" />
                  </div>
                ))}
              </div>
            )}
            {tab==='attachments' && (
              <div>
                <div className="mb-3.5 flex items-center justify-between">
                  <div className="text-base font-semibold">3 / {VAC_FILE_LIMIT.maxCount} tệp đính kèm</div>
                  <Btn variant="soft" size="sm" icon="upload">Tải tệp lên</Btn>
                </div>
                {/* Hạn mức PHẢI hiện ra — người dùng không suy được vì nó phụ thuộc tệp đã tải */}
                <div className="mb-3.5 rounded-md border border-border bg-muted px-3.5 py-2.5">
                  <div className="mb-1.5 flex justify-between text-xs">
                    <span className="text-muted-foreground">Đã dùng 12,4 MB / {VAC_FILE_LIMIT.total} · còn {VAC_FILE_LIMIT.maxCount - 3} lượt tải</span>
                    <span className="font-semibold">Mỗi tệp tối đa {VAC_FILE_LIMIT.perFile}</span>
                  </div>
                  <div className="h-1.5 overflow-hidden rounded-full bg-border">
                    <div className="h-full rounded-full bg-primary" style={{ width:'25%' }} />
                  </div>
                </div>
                {[
                  { name:'JD_Senior_Backend_Engineer_2026.pdf', size:'1.8 MB', by:'Lê Hữu Phước',  at:'01/04/2026 09:12', desc:'Bản mô tả công việc chính thức' },
                  { name:'Bai_test_Backend_Round1.docx',        size:'860 KB', by:'Trần Minh Tuấn',at:'03/04/2026 15:40', desc:'Đề bài vòng 1' },
                  { name:'Khung_luong_ENG_2026.xlsx',           size:'9.7 MB', by:'Nguyễn Thị Lan',at:'05/04/2026 11:02', desc:'Khung lương tham chiếu — nội bộ' },
                ].map((f,i)=>(
                  <div key={i} className={"flex items-center gap-3 py-3 " + (i<2 ? "border-b border-border" : "")}>
                    <div className="grid size-10 shrink-0 place-items-center rounded-md bg-primary-soft">
                      <Icon name="file-text" size={16} className="text-primary" />
                    </div>
                    <div className="min-w-0 flex-1">
                      <div className="truncate text-sm font-semibold">{f.name}</div>
                      {/* Cột mô tả nhập ở bước XÁC NHẬN, sau khi tải xong (R2-30) */}
                      <div className="truncate text-xs text-muted-foreground">{f.desc}</div>
                      <div className="mt-0.5 text-xs text-muted-foreground">{f.size} · {f.by} · {f.at}</div>
                    </div>
                    <Btn variant="ghost" size="sm" iconOnly icon="download" />
                    <Btn variant="ghost" size="sm" iconOnly icon="trash" />
                  </div>
                ))}
                <div className="mt-3 text-xs leading-[1.5] text-muted-foreground">
                  Đường dẫn tải xuống có hiệu lực <strong>15 phút</strong>. Tệp đã xoá không còn hiện ở đây nhưng vẫn giữ trong lịch sử của tin.
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Right sidebar */}
        <div className="flex flex-col gap-3">
          {/* Người phụ trách: MỘT người cho mỗi tin (quyết định A5.2 / R2-25) — dòng chỉ đọc kèm
              nút Đổi, dựng giống hệt khối đã vẽ đúng ở màn Đăng tin trong cùng tệp này. */}
          <div className={CARD + " p-[18px]"}>
            <div className="mb-2.5 text-xs font-bold">Người phụ trách tuyển dụng</div>
            <div className="flex items-center gap-3 rounded-md bg-primary-soft px-3 py-2.5">
              <Avatar name={v.hm} size="sm" />
              <div className="min-w-0 flex-1">
                <div className="truncate text-sm font-semibold">{v.hm}</div>
                <div className="truncate text-xs text-muted-foreground">{v.dept}</div>
              </div>
              <Btn variant="ghost" size="sm" iconOnly icon="edit" />
            </div>
            <div className="mt-2 text-xs leading-[1.5] text-muted-foreground">
              Phòng ban của tin suy ra từ đơn vị của người phụ trách — đổi người thì phòng ban đổi theo.
            </div>
          </div>

          <div className={CARD + " p-[18px]"}>
            <div className="mb-3.5 text-xs font-bold">Thông tin vị trí</div>
            {[
              { label:'Mã tham chiếu', val:'VAC-2026-0001' },
              { label:'Phòng ban',      val:v.dept   },
              { label:'Số lượng',       val:`${v.total} vị trí` },
              { label:'Đã tuyển',       val:`${v.filled} / ${v.total}` },
              { label:'Ngày đăng',      val:v.created},
              { label:'Hạn nộp hồ sơ',  val:'30/06/2026' },
              { label:'Loại hợp đồng',  val:'Toàn thời gian' },
              { label:'Địa điểm làm việc', val:'Hà Nội' },
              { label:'Trên bảng việc làm', val:v.published ? 'Đã đăng tải' : 'Chưa đăng tải' },
            ].map((f,i)=>(
              <div key={i} className="flex justify-between border-b border-border py-[7px] text-xs">
                <span className="text-muted-foreground">{f.label}</span>
                <span className="font-medium">{f.val}</span>
              </div>
            ))}
            <div className="mt-2 text-xs leading-[1.5] text-muted-foreground">
              Hạn nộp hồ sơ là ngày tin được gỡ khỏi bảng Việc làm nội bộ. Các đơn đang xét <strong>không</strong> bị ảnh hưởng.
            </div>
          </div>
        </div>
      </div>
    </HRMShell>
  );
};

// ─── 02b: Vacancy Detail — tin đã đóng, còn chỗ trống ─────────────────────────
// Biến thể này tồn tại để bộ nút "Mở lại tin" có chỗ nhìn thấy được. Trên tin đang mở nó không
// hiện, nên nếu chỉ vẽ một màn thì thao tác này lại vô hình đúng như audit vấn đề 13 mô tả.
const VacDetailClosedScreen = () => <VacDetailScreen vacancy={VAC_LIST[3]} />;

// ─── 03: Create/Edit Vacancy Form ─────────────────────────────────────────────
const VacCreateScreen = () => (
  <HRMShell active="vacancies"
    title="Đăng tin tuyển dụng mới"
    crumbs={['Tin tuyển dụng','Đăng mới']}
    actions={<>
      <Btn variant="outline" size="sm">Lưu nháp</Btn>
      <Btn variant="primary"  size="sm" icon="check-circle">Đăng tin</Btn>
    </>}>
    <div className="grid grid-cols-[1fr_300px] gap-[18px]">
      <div className="flex flex-col gap-3.5">
        {/* Basic info */}
        <div className={CARD + " p-[22px]"}>
          <div className="mb-[18px] flex items-center gap-2">
            <div className="grid size-7 place-items-center rounded-md bg-primary-soft">
              <Icon name="briefcase" size={14} style={{ color:'var(--color-primary)' }} />
            </div>
            <span className="text-base font-bold">Thông tin vị trí</span>
          </div>
          <div className="mb-3.5 grid grid-cols-2 gap-3.5">
            <div className="col-span-2">
              <label className="mb-[5px] block text-xs font-medium">Tiêu đề vị trí *</label>
              <input className="h-9 w-full rounded-md border border-input bg-transparent px-3 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="Ví dụ: Senior Backend Engineer" defaultValue="Product Designer" />
            </div>
            <div>
              <label className="mb-[5px] block text-xs font-medium">Chức danh liên kết *</label>
              <div className="relative flex items-center">
                <Icon name="search" size={13} className="pointer-events-none absolute left-2.5 size-3.5 text-muted-foreground" />
                <input className="h-9 w-full rounded-md border border-input bg-transparent pl-8 pr-3 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="Tìm chức danh..." defaultValue="Product Designer" />
              </div>
            </div>
            <div>
              {/* Phòng ban KHÔNG phải ô nhập: nó suy ra từ đơn vị của người phụ trách (R2-27 / B30).
                  Ô chọn cũ không có cột nào để lưu và cho phép chọn lệch với người phụ trách. */}
              <label className="mb-[5px] block text-xs font-medium">Phòng ban</label>
              <div className="flex h-9 items-center rounded-md border border-border bg-muted px-3 text-base text-muted-foreground">
                Product
              </div>
              <div className="mt-1 text-xs text-muted-foreground">Suy ra từ đơn vị của người phụ trách</div>
            </div>
            <div>
              <label className="mb-[5px] block text-xs font-medium">Số lượng tuyển *</label>
              <input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" type="number" defaultValue={2} min={1} />
            </div>
            <div>
              <label className="mb-[5px] block text-xs font-medium">Loại hợp đồng</label>
              <Select className="w-full cursor-pointer" options={['Toàn thời gian', 'Bán thời gian', 'Hợp đồng']} defaultValue="Toàn thời gian" />
            </div>
            <div>
              <label className="mb-[5px] block text-xs font-medium">Địa điểm làm việc</label>
              <Select className="w-full cursor-pointer" options={['Hà Nội', 'TP. Hồ Chí Minh', 'Đà Nẵng', 'Từ xa', 'Kết hợp']} defaultValue="Hà Nội" />
            </div>
            <div>
              <label className="mb-[5px] block text-xs font-medium">Hạn nộp hồ sơ</label>
              <input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" type="date" defaultValue="2026-06-30" />
              <div className="mt-1 text-xs text-muted-foreground">Ngày gỡ tin khỏi bảng Việc làm nội bộ</div>
            </div>
          </div>
        </div>

        {/* Job description */}
        <div className={CARD + " p-[22px]"}>
          <div className="mb-[18px] flex items-center gap-2">
            <div className="grid size-7 place-items-center rounded-md bg-primary-soft">
              <Icon name="file-text" size={14} style={{ color:'var(--color-primary)' }} />
            </div>
            <span className="text-base font-bold">Mô tả công việc</span>
          </div>
          {/* Simulated rich text toolbar */}
          <div className="flex gap-1 rounded-t-[7px] border border-b-0 border-border bg-muted px-3 py-[7px]">
            {['bold','italic','list','link','image'].map(ic=>(
              <button key={ic} className="grid size-7 cursor-pointer place-items-center rounded-sm border-none bg-transparent text-muted-foreground">
                <Icon name={ic==='bold'?'award':ic==='italic'?'edit':ic==='list'?'menu':ic==='link'?'globe':'upload'} size={13} />
              </button>
            ))}
          </div>
          <textarea className="w-full rounded-b-[7px] border border-input bg-transparent px-3 pt-3 text-base text-foreground shadow-xs transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" style={{ height:200, resize:'vertical' }}
            defaultValue={`Chúng tôi đang tìm kiếm Product Designer tài năng để gia nhập team sản phẩm của ELS Technologies.\n\nTrách nhiệm:\n• Thiết kế UX/UI cho sản phẩm HRM\n• Nghiên cứu người dùng và xây dựng user journey\n• Phối hợp với Engineering để triển khai design\n\nYêu cầu:\n• 3+ năm kinh nghiệm Product Design\n• Thành thạo Figma\n• Portfolio công việc thực tế`} />
        </div>

        {/* Người phụ trách tuyển dụng — MỘT người cho mỗi tin */}
        <div className={CARD + " p-[22px]"}>
          <div className="mb-3.5 flex items-center justify-between">
            <div className="flex items-center gap-2">
              <div className="grid size-7 place-items-center rounded-md bg-primary-soft">
                <Icon name="user-check" size={14} style={{ color:'var(--color-primary)' }} />
              </div>
              <span className="text-base font-bold">Người phụ trách tuyển dụng *</span>
            </div>
          </div>
          {/* v1: MỘT người phụ trách cho mỗi tin (quyết định A5.2) — nên không có nút "Thêm" */}
          {[{ name:'Hồ Văn Minh', title:'VP of Product' }].map((m,i)=>(
            <div key={i} className="flex items-center gap-3 rounded-md bg-primary-soft px-3 py-2.5">
              <Avatar name={m.name} />
              <div className="flex-1">
                <div className="text-sm font-semibold">{m.name}</div>
                <div className="text-xs text-muted-foreground">{m.title}</div>
              </div>
              <Btn variant="ghost" size="sm" iconOnly icon="edit" />
            </div>
          ))}
        </div>

        {/* Attachments */}
        <div className={CARD + " p-[22px]"}>
          <div className="mb-3.5 flex items-center gap-2">
            <div className="grid size-7 place-items-center rounded-md bg-primary-soft">
              <Icon name="file-text" size={14} style={{ color:'var(--color-primary)' }} />
            </div>
            <span className="text-base font-bold">Tệp đính kèm <span className="text-xs font-normal text-muted-foreground">(tùy chọn)</span></span>
          </div>
          <div className="cursor-pointer rounded-md border-2 border-dashed border-border-strong p-5 text-center">
            <Icon name="upload" size={18} className="mb-1.5 text-muted-foreground" />
            <div className="text-sm text-muted-foreground">Bản mô tả công việc, đề bài, khung lương…</div>
            <div className="mt-1 text-xs text-muted-foreground">
              PDF, DOC, DOCX, XLS, XLSX · Tối đa {VAC_FILE_LIMIT.perFile} mỗi tệp, tổng {VAC_FILE_LIMIT.total}, nhiều nhất {VAC_FILE_LIMIT.maxCount} tệp cho một tin
            </div>
          </div>
        </div>
      </div>

      {/* Right */}
      <div className="flex flex-col gap-3">
        <div className={CARD + " p-4"}>
          <div className="mb-2.5 text-xs font-bold uppercase tracking-[0.07em] text-muted-foreground">Xem trước</div>
          {/* Tên gọi ở đây phải TRÙNG nhãn ô nhập bên trái, nếu không người dùng tưởng là hai thứ */}
          {[
            ['Tiêu đề vị trí',    'Product Designer'],
            ['Chức danh liên kết','Product Designer'],
            ['Phòng ban',         'Product'],
            ['Số lượng tuyển',    '2 vị trí'],
            ['Loại hợp đồng',     'Toàn thời gian'],
            ['Địa điểm làm việc', 'Hà Nội'],
            ['Hạn nộp hồ sơ',    '30/06/2026'],
            ['Trạng thái',        <Badge variant="neutral">Bản nháp</Badge>],
          ].map(([l,v],i)=>(
            <div key={i} className={"flex justify-between py-1.5 text-xs " + (i<7 ? "border-b border-border" : "")}>
              <span className="text-muted-foreground">{l}</span>
              <span className="font-medium">{v}</span>
            </div>
          ))}
        </div>
        <div className={CARD + " p-3.5 bg-primary-soft"} style={{ border:'1px solid oklch(0.687 0.184 41 / 0.2)' }}>
          <div className="text-xs leading-[1.55]" style={{ color:'oklch(0.55 0.12 41)' }}>
            {/* Nút "Đăng tin" là HAI lệnh nối nhau: tạo (luôn ra bản nháp) rồi đăng (R2-19) */}
            <strong>Nút «Đăng tin» chạy hai bước:</strong> lưu tin ở trạng thái Bản nháp, rồi mở tin để nhận ứng viên. Nếu bước hai hỏng, tin vẫn được lưu nháp và màn hình chuyển sang trang sửa chính tin đó — bấm lại ở đây sẽ tạo ra tin nháp thứ hai. Ứng viên do người phụ trách tuyển dụng nhập vào hệ thống.
          </div>
        </div>
      </div>
    </div>
  </HRMShell>
);

// ─── 04: Empty State ──────────────────────────────────────────────────────────
const VacEmptyScreen = () => (
  <HRMShell active="vacancies" title="Tin tuyển dụng" crumbs={['Tin tuyển dụng']}
    actions={<Btn variant="primary" size="sm" icon="plus">Đăng tin đầu tiên</Btn>}>
    <div className={CARD + " flex min-h-[460px] flex-col items-center justify-center p-12"}>
      <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="20" y="22" width="40" height="36" rx="4" fill="none" stroke="var(--color-border-strong)" strokeWidth="2.5" />
        <line x1="28" y1="32" x2="52" y2="32" stroke="var(--color-border-strong)" strokeWidth="2" strokeLinecap="round" />
        <line x1="28" y1="40" x2="44" y2="40" stroke="var(--color-border-strong)" strokeWidth="2" strokeLinecap="round" />
        <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ó tin tuyển dụng</div>
      <div className="mb-7 max-w-[420px] text-center text-base leading-[1.65] text-muted-foreground">
        Đăng tin tuyển dụng để bắt đầu theo dõi ứng viên cho từng vị trí. Tin hiển thị trong hệ thống cho người có quyền xem tuyển dụng.
      </div>
      <div className="flex gap-2.5">
        <Btn variant="primary" icon="plus">Đăng tin đầu tiên</Btn>
      </div>
    </div>
  </HRMShell>
);

// ─── 06: Việc làm nội bộ ──────────────────────────────────────────────────────
// Màn RIÊNG, tách khỏi màn Tin tuyển dụng (quyết định R2-03). Chỉ đọc; chỉ hiện tin ĐÃ ĐĂNG TẢI;
// không có tin nháp; không có đường nào dẫn sang dữ liệu ứng viên.
//
// Gác bằng mã quyền MỚI `screen:job-board`, cấp cho MỌI vai trò — KHÔNG dùng `screen:vacancies`
// thay thế, vì mã đó gác màn quản trị có nút tạo/sửa/xoá và dẫn thẳng sang hồ sơ ứng viên.
// *Tên mã là đề xuất, còn chờ chốt* — xem `_DECISIONS.md` R2-03 và `srs/02_rbac/21_permissions.md`.
const JobBoardScreen = () => {
  const posted = VAC_LIST.filter(v=>v.status==='ACTIVE' && v.published);
  return (
    <HRMShell active="vacancies"
      title="Việc làm nội bộ"
      crumbs={['Việc làm nội bộ']}
      meta={`${posted.length} vị trí đang tuyển`}>

      <div className="mb-4 flex gap-2.5 rounded-xl border border-info bg-info-soft px-4 py-3 text-xs leading-[1.55]" style={{ color:'oklch(0.385 0.062 222)' }}>
        <Icon name="info" size={14} className="mt-0.5 shrink-0" />
        <div>
          Danh sách vị trí đang tuyển trong nội bộ ELS Technologies. Quan tâm vị trí nào, liên hệ trực tiếp người phụ trách tuyển dụng — màn này <strong>chỉ để xem</strong>, không nộp hồ sơ trực tuyến.
        </div>
      </div>

      <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-[260px] 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 vị trí..." />
        </div>
        <Select className="h-8 text-xs w-[148px] cursor-pointer" options={['Tất cả phòng ban','Engineering','Nhân sự','Kinh doanh','Marketing']} defaultValue="Tất cả phòng ban" />
        <Select className="h-8 text-xs w-[150px] cursor-pointer" options={['Mọi địa điểm','Hà Nội','TP. Hồ Chí Minh','Đà Nẵng','Từ xa','Kết hợp']} defaultValue="Mọi địa điểm" />
        <Select className="h-8 text-xs w-[150px] cursor-pointer" options={['Mọi loại hợp đồng','Toàn thời gian','Bán thời gian','Hợp đồng']} defaultValue="Mọi loại hợp đồng" />
        <div className="flex-1" />
        <span className="text-xs text-muted-foreground">{posted.length} vị trí</span>
      </div>

      <div className="grid grid-cols-2 gap-3.5">
        {posted.map(v=>{
          const dc = DEPT_COLOR[v.code] || 'var(--color-muted-foreground)';
          return (
            <div key={v.id} className={CARD + " overflow-hidden p-0"}>
              <div className="h-1" style={{ background:dc }} />
              <div className="px-[18px] py-4">
                <div className="mb-1 text-base font-bold leading-[1.3]">{v.title}</div>
                <div className="mb-3 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
                  <span className="flex items-center gap-1.5"><Icon name="building" size={12} />{v.dept}</span>
                  <span className="flex items-center gap-1.5"><Icon name="globe" size={12} />Hà Nội</span>
                  <span className="flex items-center gap-1.5"><Icon name="briefcase" size={12} />Toàn thời gian</span>
                </div>
                <div className="mb-3.5 text-sm leading-[1.6] text-muted-foreground">
                  Tham gia đội ngũ {v.dept} của ELS Technologies. Xem mô tả đầy đủ để biết trách nhiệm và yêu cầu của vị trí.
                </div>
                {/* KHÔNG hiện số ứng viên, KHÔNG có nút nào dẫn sang dữ liệu ứng viên */}
                <div className="flex items-center justify-between border-t border-border pt-3">
                  <div className="text-xs text-muted-foreground">
                    Người phụ trách: <span className="font-medium text-foreground">{v.hm}</span> · Hạn nộp 30/06/2026
                  </div>
                  <Btn variant="outline" size="xs" icon="file-text">Xem mô tả</Btn>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </HRMShell>
  );
};

// ─── 05: Dark Mode ────────────────────────────────────────────────────────────
const VacDarkScreen = () => <VacListScreen dark />;

Object.assign(window, {
  VacListScreen, VacDetailScreen, VacDetailClosedScreen, VacCreateScreen,
  VacEmptyScreen, JobBoardScreen, VacDarkScreen,
});