// ELS HRM — Module 11: Lịch Phỏng Vấn (Interview Scheduling) — All Screens

// 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";

// Số vòng là MỘT TRƯỜNG RIÊNG (`round`), không nhét vào chuỗi tên tự do — nhét vào tên thì không
// đếm được số vòng để chặn ở trần (audit vấn đề 06, quyết định A4.2).
//
// Trần này nằm trong BẢNG CẤU HÌNH CỦA CHÍNH MODULE TUYỂN DỤNG (`recruitment_configs`), không
// phải trong cấu hình hệ thống chung — `system_settings` chỉ có đúng một cột nghiệp vụ là múi
// giờ (quyết định R2-01). Người có `action:recruitment:manage` sửa được, khoảng cho phép 1–10.
const MAX_ROUNDS = 4;

// Trần số người trong hội đồng của một buổi: 1–5 (quyết định R2-48).
const PANEL_LIMIT = { min:1, max:5 };

// Hạn mức tệp của BUỔI PHỎNG VẤN — 10 MB mỗi tệp, tổng 50 MB. Luồng tệp của ứng viên có con số
// KHÁC (5 MB / 20 MB). Hạn mức tổng phải hiện trên màn, người dùng không tự suy ra được vì nó
// phụ thuộc các tệp đã tải trước đó (quyết định R2-30).
const INT_FILE_LIMIT = { perFile:'10 MB', total:'50 MB' };

const INT_LIST = [
  { id:'I001', name:'Technical Interview',  round:1, cand:'Nguyễn Văn Bảo',  vacancy:'Senior Backend Engineer', date:'20/05/2026', time:'14:00', endTime:'15:30', interviewers:['Lê Hữu Phước','Trần Minh Tuấn'], status:'SCHEDULED', note:'Coding test + System design'   },
  { id:'I002', name:'HR Interview Final',   round:2, cand:'Lê Hoàng Nam',    vacancy:'HR Business Partner',     date:'19/05/2026', time:'10:30', endTime:'11:30', interviewers:['Nguyễn Thị Lan'],              status:'COMPLETED', note:'Đã chốt — Đạt'                 },
  { id:'I003', name:'Technical Screening',  round:1, cand:'Trần Thị Cẩm Tú',vacancy:'Senior Backend Engineer', date:'22/05/2026', time:'09:00', endTime:'09:30', interviewers:['Lê Hữu Phước'],              status:'SCHEDULED', note:'30 phút — Google Meet'         },
  { id:'I004', name:'Culture Fit Interview',round:2, cand:'Đỗ Quang Huy',   vacancy:'Frontend Developer',      date:'18/05/2026', time:'15:00', endTime:'16:00', interviewers:['Hồ Văn Minh','Lê Thị Hương'],status:'COMPLETED', note:'Đã đánh dấu gửi offer sau buổi này' },
  { id:'I005', name:'Technical Interview',  round:2, cand:'Phạm Minh Đức',  vacancy:'Frontend Developer',      date:'25/05/2026', time:'11:00', endTime:'12:00', interviewers:['Trần Minh Tuấn'],             status:'SCHEDULED', note:'Portfolio review + coding'     },
  { id:'I006', name:'Competency Interview', round:1, cand:'Võ Thị Mỹ Linh', vacancy:'DevOps Engineer',         date:'14/05/2026', time:'14:30', endTime:'15:30', interviewers:['Lê Hữu Phước'],              status:'NO_SHOW',   note:'Ứng viên không đến'            },
  { id:'I007', name:'Panel Interview',      round:3, cand:'Bùi Thị Thu Hằng',vacancy:'Senior Backend Engineer',date:'21/05/2026', time:'16:00', endTime:'17:00', interviewers:['Hồ Văn Minh'],               status:'CANCELLED', note:'Hủy — ứng viên xin dời sang tuần sau' },
];

const INT_ST = {
  SCHEDULED: { label:'Đã lên lịch', v:'warning', icon:'clock'       },
  COMPLETED: { label:'Hoàn thành',  v:'success', icon:'check-circle'},
  CANCELLED: { label:'Đã hủy',      v:'neutral', icon:'x'           },
  NO_SHOW:   { label:'Vắng mặt',   v:'danger',  icon:'alert-circle' },
};

// Lưới lịch: ĐỦ BẢY CỘT kể cả thứ Bảy và Chủ nhật (quyết định R2-46). Lưới cũ chỉ có T2–T6 nên
// buổi đặt cuối tuần biến mất khỏi màn hình mà không có lời cảnh báo nào — trong khi luật đặt
// buổi không hề cấm cuối tuần.
const WEEK_DAYS = [
  { label:'T2', date:'18/05/2026' },
  { label:'T3', date:'19/05/2026' },
  { label:'T4', date:'20/05/2026' },
  { label:'T5', date:'21/05/2026' },
  { label:'T6', date:'22/05/2026' },
  { label:'T7', date:'23/05/2026' },
  { label:'CN', date:'24/05/2026' },
];

// Cuộn được hết 24 giờ, mặc định mở ở 7–20 giờ (quyết định R2-46). Khung 9–17 của bản trước cắt
// mất buổi sớm và buổi muộn.
const CAL_HOURS = Array.from({ length:24 }, (_,h)=>h);
const CAL_ROW_H = 60;
const CAL_DEFAULT_FROM = 7;
const CAL_DEFAULT_TO = 20;

// Mỗi NGƯỜI PHỎNG VẤN một phiếu (quyết định A4.1). Buổi chỉ chuyển sang "hoàn thành" khi người có
// action:recruitment:manage bấm chốt — KHÔNG chờ đủ phiếu, vì một người không nhập là treo mãi
// (quyết định B06).
//
// `overallScore` là NHẬN ĐỊNH ĐỘC LẬP của người phỏng vấn, KHÔNG phải trung bình năm tiêu chí —
// hệ thống không tự tính và cũng không kiểm tính nhất quán giữa hai con số (quyết định R2-17).
// Xem hai phiếu dưới đây: trung bình năm tiêu chí là 88 và 86, còn điểm tổng kết là 92 và 85.
// Chênh lệch đó là CÓ Ý: người phỏng vấn được phép nhấn mạnh một tiêu chí quan trọng hơn phần
// còn lại, hoặc hạ điểm vì một lo ngại không nằm trong năm tiêu chí nào.
const EVALUATIONS = [
  {
    by:'Hồ Văn Minh', title:'Product Director', submitted:'18/05/2026 16:20', verdict:'PROCEED_OFFER',
    overallScore:92,
    scores:[
      { label:'Kỹ năng chuyên môn',    score:90, note:'React và Next.js xuất sắc. Nắm chắc rendering pipeline.' },
      { label:'System Design',          score:85, note:'Tư duy kiến trúc tốt, đưa ra trade-off hợp lý.'         },
      { label:'Problem Solving',        score:88, note:'Giải quyết vấn đề logic, có cấu trúc.'                 },
      { label:'Kỹ năng giao tiếp',      score:92, note:'Diễn đạt rõ ràng, lắng nghe tốt.'                       },
      { label:'Culture Fit & Teamwork', score:85, note:'Phù hợp với văn hóa ELS, nhiệt tình và cởi mở.'        },
    ],
    comment:'Ứng viên vững chuyên môn, cách tiếp cận vấn đề có cấu trúc. Đề xuất tiến hành offer.',
  },
  {
    by:'Lê Thị Hương', title:'HR Manager', submitted:'18/05/2026 17:05', verdict:'PROCEED_OFFER',
    overallScore:85,
    scores:[
      { label:'Kỹ năng chuyên môn',    score:86, note:'Đánh giá theo góc nhân sự — đủ cho yêu cầu vị trí.'    },
      { label:'System Design',          score:84, note:'Không đi sâu, nhưng trình bày mạch lạc.'                },
      { label:'Problem Solving',        score:90, note:'Xử lý tình huống thực tế tốt.'                          },
      { label:'Kỹ năng giao tiếp',      score:88, note:'Tự tin, tiếng Anh lưu loát.'                            },
      { label:'Culture Fit & Teamwork', score:82, note:'Hợp văn hoá nhóm, cần thời gian hoà nhập.'             },
    ],
    comment:'Không có lo ngại nào về mặt nhân sự. Đồng ý tiến hành offer.',
  },
];

const VERDICT_LABEL = {
  PROCEED_OFFER:'Tiến hành offer',
  RE_INTERVIEW:'Phỏng vấn thêm',
  REJECT:'Từ chối',
};

// Trung bình năm tiêu chí — chỉ dùng làm con số THAM KHẢO đặt cạnh điểm tổng kết, để thấy rõ hai
// thứ này khác nhau. KHÔNG dùng nó làm điểm của phiếu, cũng không dùng để tính điểm cả buổi.
const avgOf = (scores) => Math.round(scores.reduce((s,x)=>s+x.score,0) / scores.length);

// ─── 01: Interview List / Calendar ────────────────────────────────────────────
const IntListScreen = ({ dark=false }) => {
  const [viewMode, setViewMode] = React.useState('list');
  const scrollRef = React.useRef(null);
  React.useEffect(()=>{
    if (scrollRef.current) scrollRef.current.scrollTop = CAL_DEFAULT_FROM * CAL_ROW_H;
  }, [viewMode]);
  return (
    <HRMShell active="interviews" dark={dark}
      title="Lịch phỏng vấn"
      crumbs={['Lịch phỏng vấn']}
      meta="Tuần 21 · 18–24/05/2026"
      actions={<>
        <div className="flex gap-0.5 rounded-sm bg-muted p-[3px]">
          {[{id:'list',icon:'menu'},{id:'calendar',icon:'calendar'}].map(v=>(
            <button key={v.id} onClick={()=>setViewMode(v.id)}
              className={"flex h-7 items-center gap-[5px] rounded-sm px-2.5 text-xs font-medium "
                + (viewMode===v.id ? "bg-card text-foreground shadow-xs" : "bg-transparent text-muted-foreground")}>
              <Icon name={v.icon} size={13} />
              {v.id==='list'?'Danh sách':'Lịch'}
            </button>
          ))}
        </div>
        <Btn variant="primary" size="sm" icon="plus">Lên lịch phỏng vấn</Btn>
      </>}>

      {/* Stats */}
      <div className="mb-4 grid grid-cols-4 gap-3">
        {[
          { label:'Tuần này',      val:'5',  icon:'calendar-days', ib:'var(--color-primary-soft)',  ic:'var(--color-primary)'   },
          { label:'Hoàn thành',   val:'2',  icon:'check-circle',  ib:'var(--color-success-soft)',  ic:'var(--color-success)'   },
          { label:'Sắp diễn ra',  val:'3',  icon:'clock',         ib:'var(--color-warning-soft)',  ic:'oklch(0.55 0.158 65)' },
          { label:'Vắng mặt',     val:'1',  icon:'alert-circle',  ib:'var(--color-destructive-soft)',ic:'var(--color-destructive)'},
        ].map((s,i)=><StatCard key={i} label={s.label} value={s.val} icon={s.icon} iconBg={s.ib} iconColor={s.ic} />)}
      </div>

      {viewMode==='list' ? (
        <>
          <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 items-center w-[260px]">
              <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 placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" placeholder="Tìm phỏng vấn, ứng viên..." />
            </div>
            {/* Mỗi giá trị trong ô lọc này phải có ít nhất một đường thao tác dẫn tới, nếu không
                nó là bộ lọc luôn rỗng. «Vắng mặt» và «Đã hủy» nay có nút tương ứng ở cột Thao tác
                và trên màn chi tiết buổi (audit vấn đề 23). */}
            <Select className="h-8 text-xs" style={{width:148}} defaultValue="Tất cả trạng thái" options={['Tất cả trạng thái', ...Object.values(INT_ST).map(v=>v.label)]} />
            <div className="flex-1" />
            <span className="text-xs text-muted-foreground">{INT_LIST.length} buổi phỏng vấn</span>
          </div>
          <div className="overflow-hidden rounded-lg border border-border bg-card">
            <table className={TABLE_CLS}>
              <thead>
                <tr>
                  <th>Buổi phỏng vấn</th>
                  <th>Ứng viên</th>
                  <th>Vị trí</th>
                  <th>Ngày · Giờ</th>
                  <th>Người phỏng vấn</th>
                  <th>Trạng thái</th>
                  <th>Thao tác</th>
                </tr>
              </thead>
              <tbody>
                {INT_LIST.map(iv=>{
                  const st=INT_ST[iv.status];
                  return (
                    <tr key={iv.id}>
                      <td>
                        <div className="flex items-center gap-2">
                          <span className="text-sm font-semibold">{iv.name}</span>
                          <Badge variant="neutral">Vòng {iv.round}</Badge>
                        </div>
                        <div className="mt-0.5 text-xs text-muted-foreground">{iv.note}</div>
                      </td>
                      <td>
                        <div className="flex items-center gap-2">
                          <Avatar name={iv.cand} size="sm" />
                          <span className="text-sm">{iv.cand}</span>
                        </div>
                      </td>
                      <td className="max-w-[160px] text-xs text-muted-foreground">
                        <div className="overflow-hidden text-ellipsis whitespace-nowrap">{iv.vacancy}</div>
                      </td>
                      <td>
                        <div className="text-sm font-semibold">{iv.date}</div>
                        <div className="font-mono text-xs text-muted-foreground">{iv.time}</div>
                      </td>
                      <td>
                        <div className="flex items-center">
                          <div className="inline-flex">
                            {iv.interviewers.slice(0,2).map((n,j)=>(
                              <div key={j} className={j>0 ? "-ml-2" : ""}>
                                <Avatar name={n} size="sm" />
                              </div>
                            ))}
                          </div>
                          <div className="ml-2 text-xs">
                            {iv.interviewers[0]}
                            {iv.interviewers.length>1 && <span className="text-muted-foreground"> +{iv.interviewers.length-1}</span>}
                          </div>
                        </div>
                      </td>
                      <td><Badge variant={st.v} dot>{st.label}</Badge></td>
                      <td>
                        <div className="flex gap-[3px]">
                          <Btn variant="ghost" size="sm" iconOnly icon="eye" />
                          {iv.status==='SCHEDULED' && <Btn variant="ghost" size="sm" iconOnly icon="edit" />}
                          {/* Hai thao tác này trước đây không có đường đi nào trên bản vẽ, dù nhãn
                              trạng thái tương ứng đã được vẽ sẵn (audit vấn đề 23) */}
                          {iv.status==='SCHEDULED' && <Btn variant="ghost" size="sm" iconOnly icon="alert-circle" />}
                          {iv.status==='SCHEDULED' && <Btn variant="ghost" size="sm" iconOnly icon="x" />}
                          {iv.status==='COMPLETED' && <Btn variant="soft" size="xs">Kết quả</Btn>}
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
          <div className="mt-2.5 text-xs leading-[1.5] text-muted-foreground">
            Trên dòng đang ở trạng thái «{INT_ST.SCHEDULED.label}»: biểu tượng bút là <strong>Dời lịch</strong>, biểu tượng chấm than là <strong>Đánh dấu ứng viên không đến</strong>, dấu nhân là <strong>Hủy buổi</strong> (mở hộp thoại nhập lý do). Đủ bộ thao tác nằm ở màn chi tiết buổi phỏng vấn.
          </div>
        </>
      ) : (
        /* Calendar week view — bảy cột, cuộn hết 24 giờ, mặc định mở ở 7–20 giờ */
        <div className="overflow-hidden rounded-xl border border-border bg-card shadow-xs">
          {/* Week header */}
          <div className="grid grid-cols-[80px_repeat(7,1fr)] border-b border-border bg-muted">
            <div className="px-3 py-2.5 text-xs font-semibold text-muted-foreground">Giờ</div>
            {WEEK_DAYS.map(d=>(
              <div key={d.date} className={"border-l border-border px-2 py-2.5 text-center text-xs font-semibold "
                + (d.date==='20/05/2026' ? "bg-primary-soft" : "")}>
                <div>{d.label}</div>
                <div className="mt-0.5 text-xs font-normal text-muted-foreground">{d.date.slice(0,5)}</div>
              </div>
            ))}
          </div>
          {/* Time slots — ô sự kiện SINH RA TỪ INT_LIST, không vẽ cứng toạ độ như bản trước */}
          <div ref={scrollRef} className="max-h-[520px] overflow-y-auto">
            {CAL_HOURS.map(h=>{
              const outsideDefault = h < CAL_DEFAULT_FROM || h > CAL_DEFAULT_TO;
              return (
                <div key={h} className="grid grid-cols-[80px_repeat(7,1fr)] border-b border-border" style={{ minHeight:CAL_ROW_H }}>
                  <div className={"px-3 py-1.5 font-mono text-xs " + (outsideDefault ? "text-border-strong" : "text-muted-foreground")}>
                    {String(h).padStart(2,'0')}:00
                  </div>
                  {WEEK_DAYS.map(d=>{
                    const slot = INT_LIST.filter(iv=>iv.date===d.date && Number(iv.time.split(':')[0])===h);
                    return (
                      <div key={d.date} className={"border-l border-border p-[3px] " + (d.date==='20/05/2026' ? "bg-primary-soft" : "")}>
                        {slot.map(iv=>{
                          const st = INT_ST[iv.status];
                          const tone = iv.status==='COMPLETED'
                            ? { bg:'bg-success-soft', border:'oklch(0.711 0.18 148 / 0.3)', color:'var(--color-success)' }
                            : iv.status==='CANCELLED'
                              ? { bg:'bg-muted',        border:'var(--color-border)',        color:'var(--color-muted-foreground)' }
                              : { bg:'bg-warning-soft', border:'oklch(0.835 0.158 80 / 0.3)',color:'oklch(0.45 0.1 65)' };
                          return (
                            <div key={iv.id} className={"rounded-sm px-2 py-1.5 text-xs " + tone.bg} style={{ border:`1px solid ${tone.border}` }}>
                              <div className={"font-bold " + (iv.status==='CANCELLED' ? "line-through" : "")} style={{ color:tone.color }}>
                                {iv.name} · Vòng {iv.round}
                              </div>
                              <div className="opacity-85" style={{ color:tone.color }}>{iv.cand} · {iv.time}</div>
                              <div className="opacity-70" style={{ color:tone.color }}>{st.label}</div>
                            </div>
                          );
                        })}
                      </div>
                    );
                  })}
                </div>
              );
            })}
          </div>
          <div className="border-t border-border px-3.5 py-2.5 text-xs leading-[1.5] text-muted-foreground">
            Lưới mở sẵn ở khung {CAL_DEFAULT_FROM}–{CAL_DEFAULT_TO} giờ; cuộn lên hoặc xuống để thấy đủ 24 giờ. Buổi <strong>I006 · 14/05/2026</strong> nằm ở tuần trước nên không hiện trong lưới này — dùng chế độ xem Danh sách hoặc lùi tuần để thấy.
          </div>
        </div>
      )}
    </HRMShell>
  );
};

// ─── 02: Schedule Interview Form ─────────────────────────────────────────────
const IntCreateScreen = () => (
  <HRMShell active="interviews"
    title="Lên lịch phỏng vấn"
    crumbs={['Lịch phỏng vấn','Lên lịch mới']}
    actions={<>
      <Btn variant="outline" size="sm">Hủy</Btn>
      <Btn variant="primary"  size="sm" icon="calendar">Xác nhận lịch</Btn>
    </>}>
    <div className="grid grid-cols-[1fr_300px] gap-[18px]">
      <div className="flex flex-col gap-3.5">
        {/* Link to candidate-vacancy */}
        <div className="rounded-xl border border-border bg-card p-[22px] shadow-xs">
          <div className="mb-4 flex items-center gap-2">
            <div className="grid size-7 place-items-center rounded-md bg-primary-soft">
              <Icon name="user-check" size={14} className="text-primary" />
            </div>
            <span className="text-base font-bold">Ứng viên & Vị trí *</span>
          </div>
          <div className="grid grid-cols-2 gap-3.5">
            <div>
              <label className="mb-[5px] block text-xs font-medium">Vị trí tuyển dụng *</label>
              <Select className="w-full" placeholder="— Chọn vị trí —" options={VAC_LIST.filter(v=>v.status==='ACTIVE').map(v=>v.title)} />
            </div>
            <div>
              <label className="mb-[5px] block text-xs font-medium">Ứng viên *</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 placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" placeholder="Tìm ứng viên..." defaultValue="Nguyễn Văn Bảo" />
              </div>
            </div>
          </div>
          {/* Validation: trần MAX_ROUNDS buổi cho mỗi đơn ứng tuyển */}
          <div className="mt-2.5 flex gap-[7px] rounded-sm bg-info-soft px-3 py-2.5 text-xs" style={{ color:'oklch(0.385 0.062 222)' }}>
            <Icon name="alert-circle" size={13} className="mt-0.5 shrink-0" />
            Đơn ứng tuyển này đã có 1/{MAX_ROUNDS} buổi phỏng vấn. Có thể lên lịch thêm {MAX_ROUNDS-1} buổi nữa.
          </div>
        </div>

        {/* Interview details */}
        <div className="rounded-xl border border-border bg-card p-[22px] shadow-xs">
          <div className="mb-4 flex items-center gap-2">
            <div className="grid size-7 place-items-center rounded-md bg-primary-soft">
              <Icon name="calendar-days" size={14} className="text-primary" />
            </div>
            <span className="text-base font-bold">Chi tiết buổi phỏng vấn</span>
          </div>
          <div className="mb-3.5 grid grid-cols-[1fr_150px] gap-3.5">
            <div>
              <label className="mb-[5px] block text-xs font-medium">Tên buổi phỏng vấn *</label>
              <input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" placeholder="Ví dụ: Technical Interview" defaultValue="Technical Interview" />
            </div>
            <div>
              {/* Số vòng KHÔNG phải ô chọn: hệ thống gán bằng «vòng lớn nhất đã dùng của đơn, kể cả
                  buổi đã huỷ, cộng một» (quyết định R2-06). Cho người dùng chọn thì hai người đặt
                  cùng số vòng cho một đơn sẽ đâm vào chỉ mục duy nhất và hỏng ở tầng dưới. */}
              <label className="mb-[5px] block text-xs font-medium">Vòng</label>
              <div className="flex h-9 items-center rounded-md border border-border bg-muted px-3 text-base text-muted-foreground">
                Vòng 2
              </div>
              <div className="mt-1 text-xs text-muted-foreground">Hệ thống tự gán</div>
            </div>
          </div>
          <div className="mb-3.5 grid grid-cols-3 gap-3.5">
            <div>
              <label className="mb-[5px] block text-xs font-medium">Ngày phỏng vấn *</label>
              <input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" type="date" defaultValue="2026-05-22" />
              <div className="mt-1 text-xs text-muted-foreground">Phải từ hôm nay trở đi</div>
            </div>
            <div>
              <label className="mb-[5px] block text-xs font-medium">Giờ bắt đầu *</label>
              <input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" type="time" defaultValue="09:00" />
            </div>
            <div>
              <label className="mb-[5px] block text-xs font-medium">Giờ kết thúc *</label>
              <input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" type="time" defaultValue="10:30" />
            </div>
          </div>
          <div className="mb-3.5 grid grid-cols-2 gap-3.5">
            <div>
              <label className="mb-[5px] block text-xs font-medium">Hình thức *</label>
              <Select className="w-full cursor-pointer" options={['Trực tuyến','Trực tiếp']} defaultValue="Trực tuyến" />
            </div>
            <div>
              <label className="mb-[5px] block text-xs font-medium">Địa điểm / Link họp *</label>
              <input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" placeholder="https://meet.google.com/..." defaultValue="https://meet.google.com/abc-defg-hij" />
            </div>
          </div>
          <div>
            <label className="mb-[5px] block text-xs font-medium">Ghi chú / Hướng dẫn</label>
            <textarea className="h-20 w-full resize-none rounded-md border border-input bg-transparent px-3 pt-2 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring"
              defaultValue="Chuẩn bị: portfolio, coding test 30 phút." />
          </div>
        </div>

        {/* Interviewers */}
        <div className="rounded-xl border border-border bg-card p-[22px] shadow-xs">
          <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="users" size={14} className="text-primary" />
              </div>
              <span className="text-base font-bold">Hội đồng phỏng vấn *</span>
              <span className="text-xs font-normal text-muted-foreground">2/{PANEL_LIMIT.max} người</span>
            </div>
            <Btn variant="soft" size="xs" icon="plus">Thêm</Btn>
          </div>
          {[
            { name:'Lê Hữu Phước',   title:'Engineering Director', notified:true  },
            { name:'Trần Minh Tuấn', title:'Tech Lead',            notified:false },
          ].map((m,i)=>(
            <div key={i} className={"mb-2 flex items-center gap-3 rounded-md px-3 py-2.5 "
              + (i===0 ? "bg-primary-soft" : "border border-transparent bg-muted")}
              style={i===0 ? { border:'1px solid oklch(0.687 0.184 41 / 0.2)' } : undefined}>
              <Avatar name={m.name} size="sm" />
              <div className="flex-1">
                <div className="text-sm font-semibold">{m.name}</div>
                <div className="text-xs text-muted-foreground">{m.title}</div>
              </div>
              {m.notified
                ? <Badge variant="success" dot>Đã thông báo</Badge>
                : <Badge variant="neutral">Chưa gửi</Badge>
              }
              <Btn variant="ghost" size="sm" iconOnly icon="x" />
            </div>
          ))}
          <div className="mt-2 text-xs leading-[1.5] text-muted-foreground">
            Hội đồng có từ {PANEL_LIMIT.min} đến {PANEL_LIMIT.max} người. Người đang bận buổi khác hoặc có đơn nghỉ phép đã duyệt trùng khung giờ vẫn thêm được, nhưng hệ thống sẽ cảnh báo.
          </div>
          {/* Gửi thư KHÔNG phải lựa chọn: hệ thống luôn gửi cho hội đồng và ứng viên. Bản trước vẽ
              một ô tích tô sẵn không có <input> nào, tức người đọc tưởng tắt được (audit vấn đề 44). */}
          <div className="mt-2.5 flex gap-2 rounded-sm bg-info-soft px-3 py-2.5 text-xs leading-[1.55]" style={{ color:'oklch(0.385 0.062 222)' }}>
            <Icon name="mail" size={13} className="mt-0.5 shrink-0" />
            Hệ thống sẽ gửi email cho toàn bộ hội đồng và ứng viên sau khi lịch được xác nhận. Thư gửi cho ứng viên dùng ngôn ngữ liên hệ ghi trên hồ sơ.
          </div>
        </div>

        {/* Attachments */}
        <div className="rounded-xl border border-border bg-card p-[22px] shadow-xs">
          <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} className="text-primary" />
            </div>
            <span className="text-base font-bold">Tài liệu đí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">Scorecard, JD, bài test...</div>
            <div className="mt-1 text-xs text-muted-foreground">
              PDF, DOC, DOCX, XLS, XLSX · tối đa {INT_FILE_LIMIT.perFile} mỗi tệp, tổng {INT_FILE_LIMIT.total} cho một buổi (ảnh JPEG/PNG tối đa 5 MB)
            </div>
          </div>
        </div>
      </div>

      {/* Right preview */}
      <div className="flex flex-col gap-3">
        <div className="rounded-xl border border-border bg-card p-[18px] shadow-xs">
          <div className="mb-3.5 text-sm font-bold">Xem trước lịch</div>
          {[
            ['Ứng viên',      'Nguyễn Văn Bảo'],
            ['Vị trí',        'Senior Backend Engineer'],
            ['Tên buổi PV',   'Technical Interview'],
            ['Vòng',          'Vòng 2 (hệ thống gán)'],
            ['Ngày',          '22/05/2026 (Thứ Sáu)'],
            ['Giờ',           '09:00 – 10:30'],
            ['Hình thức',     'Trực tuyến · Google Meet'],
            ['Hội đồng',      'Lê Hữu Phước +1'],
            ['Trạng thái',    <Badge variant="warning" dot>Sẽ được lên lịch</Badge>],
          ].map(([l,v],i)=>(
            <div key={i} className={"flex justify-between py-[7px] text-xs " + (i<8 ? "border-b border-border" : "")}>
              <span className="text-muted-foreground">{l}</span>
              <span className="max-w-[160px] text-right font-medium">{v}</span>
            </div>
          ))}
        </div>
        {/* Kiểm trùng lịch là CẢNH BÁO MỀM — vẫn lưu được (quyết định A4.4) */}
        <div className="rounded-xl bg-success-soft p-3.5" style={{ border:'1px solid oklch(0.711 0.18 148 / 0.2)' }}>
          <div className="mb-1.5 text-xs font-bold text-success">✓ Không phát hiện trùng lịch</div>
          <div className="text-xs leading-[1.55] text-success">
            Đơn ứng tuyển còn {MAX_ROUNDS-1} lượt phỏng vấn. Không người phỏng vấn nào có buổi khác hoặc đơn nghỉ phép đã duyệt trùng khung giờ này.
          </div>
        </div>
        <div className="rounded-xl border border-border bg-card p-3.5 shadow-xs">
          <div className="mb-2.5 text-xs font-bold uppercase tracking-[0.07em] text-muted-foreground">Sau khi xác nhận</div>
          {[
            { n:'1', label:'Email thông báo gửi đến hội đồng phỏng vấn' },
            { n:'2', label:'Email mời gửi đến ứng viên kèm giờ và link họp' },
            { n:'3', label:'Lịch hiển thị trong chế độ xem Lịch'        },
            { n:'4', label:'Đơn ứng tuyển cập nhật: Lên lịch PV'      },
          ].map((s,i)=>(
            <div key={i} className={"flex gap-[9px] py-1.5 text-xs " + (i<3 ? "border-b border-dashed border-border" : "")}>
              <div className="grid size-5 shrink-0 place-items-center rounded-full bg-primary-soft text-xs font-bold text-primary">{s.n}</div>
              {s.label}
            </div>
          ))}
        </div>
      </div>
    </div>
  </HRMShell>
);

// ─── 03: Interview Detail ─────────────────────────────────────────────────────
// MÀN MỚI (quyết định R2-23). Đặc tả đã khai `GET /interviews/:id` cho nó từ lâu nhưng chưa ai
// vẽ, nên hai thao tác «Hủy buổi» và «Đánh dấu ứng viên không đến» không có chỗ nào để đặt —
// trong khi hai trạng thái tương ứng đã được vẽ sẵn trong bảng nhãn và trong ô lọc.
const IntDetailScreen = ({ showCancelDialog=false }) => {
  const iv = INT_LIST[0]; // Technical Interview — đang ở trạng thái Đã lên lịch
  const st = INT_ST[iv.status];
  return (
    <div className="relative size-full">
      <HRMShell active="interviews"
        title={iv.name}
        crumbs={['Lịch phỏng vấn', iv.name]}
        meta={<div className="flex items-center gap-1.5">
          <Badge variant={st.v} dot>{st.label}</Badge>
          <Badge variant="neutral">Vòng {iv.round}</Badge>
        </div>}
        actions={<>
          {iv.status==='SCHEDULED' && <Btn variant="outline" size="sm" icon="edit">Dời lịch</Btn>}
          {/* Đánh dấu không đến: dùng khi ứng viên vắng mặt — buổi sang trạng thái «Vắng mặt» */}
          {iv.status==='SCHEDULED' && <Btn variant="outline" size="sm" icon="alert-circle">Đánh dấu ứng viên không đến</Btn>}
          {/* Hủy buổi: một trong năm chỗ BẮT BUỘC nhập lý do (quyết định R2-26) */}
          {iv.status==='SCHEDULED' && <Btn variant="destructive" size="sm" icon="x">Hủy buổi</Btn>}
          {iv.status==='SCHEDULED' && <Btn variant="primary" size="sm" icon="check-circle">Ghi kết quả</Btn>}
        </>}>

        <div className="grid grid-cols-[1fr_300px] gap-4">
          <div className="flex flex-col gap-3.5">
            <div className="rounded-xl border border-border bg-card p-[22px] shadow-xs">
              <div className="mb-4 flex items-center gap-4 border-b border-border pb-4">
                <Avatar name={iv.cand} size="lg" />
                <div className="flex-1">
                  <div className="mb-1 text-md font-bold">{iv.cand}</div>
                  <div className="text-sm text-muted-foreground">{iv.vacancy}</div>
                </div>
                <Btn variant="outline" size="sm" icon="eye">Xem hồ sơ ứng viên</Btn>
              </div>
              <div className="grid grid-cols-2 gap-x-6 gap-y-1.5">
                {[
                  ['Ngày',        `${iv.date} (Thứ Tư)`],
                  ['Giờ',         `${iv.time} – ${iv.endTime}`],
                  ['Vòng',        `Vòng ${iv.round} / trần ${MAX_ROUNDS}`],
                  ['Hình thức',   'Trực tuyến · Google Meet'],
                  ['Link họp',    'meet.google.com/abc-defg-hij'],
                  ['Ghi chú',     iv.note],
                ].map(([l,v],i)=>(
                  <div key={i} className="border-b border-border py-[9px]">
                    <div className="mb-[3px] text-xs text-muted-foreground">{l}</div>
                    <div className="break-all text-sm font-medium">{v}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Tệp đính kèm của buổi */}
            <div className="rounded-xl border border-border bg-card p-[22px] shadow-xs">
              <div className="mb-3 flex items-center justify-between">
                <div className="text-base font-bold">Tài liệu đính kèm</div>
                <Btn variant="soft" size="sm" icon="upload">Tải tệp lên</Btn>
              </div>
              <div className="mb-3 rounded-md border border-border bg-muted px-3.5 py-2.5 text-xs text-muted-foreground">
                Đã dùng 4,1 MB / {INT_FILE_LIMIT.total} · mỗi tệp tối đa {INT_FILE_LIMIT.perFile} · đường dẫn tải xuống có hiệu lực 15 phút
              </div>
              {[
                { name:'Scorecard_Technical_R1.pdf', size:'420 KB', by:'Lê Hữu Phước', at:'18/05/2026 09:30' },
                { name:'Bai_test_Backend_Round1.docx', size:'3.7 MB', by:'Trần Minh Tuấn', at:'18/05/2026 09:31' },
              ].map((f,i)=>(
                <div key={i} className={"flex items-center gap-3 py-2.5 " + (i<1 ? "border-b border-border" : "")}>
                  <div className="grid size-9 shrink-0 place-items-center rounded-md bg-primary-soft">
                    <Icon name="file-text" size={15} className="text-primary" />
                  </div>
                  <div className="min-w-0 flex-1">
                    <div className="truncate text-sm font-semibold">{f.name}</div>
                    <div className="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>

            {/* Lịch sử của buổi */}
            <div className="rounded-xl border border-border bg-card p-[22px] shadow-xs">
              <div className="mb-3 text-base font-bold">Lịch sử buổi phỏng vấn</div>
              {[
                { icon:'edit',     color:'var(--color-warning)', label:'Dời lịch từ 19/05 14:00 sang 20/05 14:00', time:'16/05/2026 10:02', by:'Nguyễn Thị Lan' },
                { icon:'users',    color:'var(--color-primary)', label:'Thêm Trần Minh Tuấn vào hội đồng',          time:'15/05/2026 14:20', by:'Nguyễn Thị Lan' },
                { icon:'calendar', color:'var(--color-success)', label:'Tạo buổi phỏng vấn — Vòng 1',               time:'12/05/2026 09:30', by:'Nguyễn Thị Lan' },
              ].map((ev,i)=>(
                <div key={i} className={"flex gap-3 py-2.5 " + (i<2 ? "border-b border-border" : "")}>
                  <div className="grid size-8 shrink-0 place-items-center rounded-full bg-muted">
                    <Icon name={ev.icon} size={14} style={{ color:ev.color }} />
                  </div>
                  <div>
                    <div className="text-sm font-medium">{ev.label}</div>
                    <div className="mt-0.5 text-xs text-muted-foreground">{ev.by} · {ev.time}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Right */}
          <div className="flex flex-col gap-3">
            <div className="rounded-xl border border-border bg-card p-[18px] shadow-xs">
              <div className="mb-3 flex items-center justify-between">
                <div className="text-xs font-bold">Hội đồng phỏng vấn</div>
                <span className="text-xs text-muted-foreground">{iv.interviewers.length}/{PANEL_LIMIT.max}</span>
              </div>
              {iv.interviewers.map((name,i)=>(
                <div key={i} className={"flex items-center gap-[9px] py-2 " + (i<iv.interviewers.length-1 ? "border-b border-border" : "")}>
                  <Avatar name={name} size="sm" />
                  <div className="min-w-0 flex-1">
                    <div className="truncate text-sm font-medium">{name}</div>
                    <div className="text-xs text-muted-foreground">Chưa nộp phiếu</div>
                  </div>
                  <Btn variant="ghost" size="sm" iconOnly icon="x" />
                </div>
              ))}
              <Btn variant="outline" size="xs" icon="plus">Thêm thành viên hội đồng</Btn>
              <div className="mt-2.5 text-xs leading-[1.5] text-muted-foreground">
                Phiếu đánh giá chỉ nộp được khi buổi còn ở trạng thái «{INT_ST.SCHEDULED.label}». Buổi đã hủy hoặc ứng viên vắng mặt thì không nhận phiếu nữa.
              </div>
            </div>

            <div className="rounded-xl bg-warning-soft p-4" style={{ border:'1px solid oklch(0.835 0.158 80 / 0.3)' }}>
              <div className="mb-1.5 text-xs font-bold" style={{ color:'oklch(0.35 0.1 65)' }}>Hủy buổi thì mất số vòng không?</div>
              <div className="text-xs leading-[1.55]" style={{ color:'oklch(0.45 0.1 65)' }}>
                Không lấy lại được. Buổi đã hủy vẫn tính vào số vòng đã dùng của đơn, nên buổi tạo sau sẽ là <strong>Vòng {iv.round+1}</strong>. Đơn còn {MAX_ROUNDS - iv.round} lượt.
              </div>
            </div>
          </div>
        </div>
      </HRMShell>

      {showCancelDialog && <IntCancelDialog />}
    </div>
  );
};

// Hộp thoại hủy buổi — CÙNG MỘT MẪU với hộp thoại nhập lý do ở màn Ứng viên
// (`CandReasonDialog` trong candidate-screens.jsx). Khi hiện thực code, đây phải là MỘT component
// dùng chung, không phải hai bản chép. Ở bản vẽ thì mỗi module một tệp nên phải vẽ lại.
const IntCancelDialog = () => (
  <div className="absolute inset-0 z-[60] grid place-items-center bg-black/50">
    <div className="w-[460px] rounded-xl bg-popover p-6 shadow-2xl outline outline-4 outline-black/5">
      <div className="mb-4 flex items-start gap-3">
        <div className="grid size-10 shrink-0 place-items-center rounded-md bg-destructive-soft">
          <Icon name="alert-triangle" size={18} className="text-destructive" />
        </div>
        <div>
          <div className="text-base font-bold">Hủy buổi phỏng vấn</div>
          <div className="mt-0.5 text-xs text-muted-foreground">Technical Interview · Vòng 1 · Nguyễn Văn Bảo · 20/05/2026 14:00</div>
        </div>
      </div>
      <div className="mb-1.5">
        <label className="mb-[5px] block text-xs font-medium text-foreground">Lý do hủy *</label>
        <textarea className="h-24 w-full resize-none rounded-md border border-input bg-transparent px-3 pt-2 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring"
          placeholder="Nêu rõ vì sao hủy — nội dung này gửi kèm trong thư báo cho ứng viên và hội đồng." />
      </div>
      <div className="mb-4 text-xs leading-[1.5] text-muted-foreground">
        Lý do là <strong>bắt buộc</strong>. Buổi đã hủy vẫn tính vào số vòng đã dùng của đơn ứng tuyển.
      </div>
      <div className="flex justify-end gap-2">
        <Btn variant="outline">Quay lại</Btn>
        <Btn variant="destructive">Xác nhận hủy buổi</Btn>
      </div>
    </div>
  </div>
);

const IntCancelDialogScreen = () => <IntDetailScreen showCancelDialog />;

// ─── 04: Interview Result Entry ───────────────────────────────────────────────
const IntResultScreen = () => {
  // Buổi mẫu phải có NHIỀU hơn một người phỏng vấn, nếu không màn này không nói được gì về
  // mô hình mỗi-người-một-phiếu (bản trước lấy buổi chỉ có 1 người rồi vẫn ghi "Cả 2 người").
  const iv = INT_LIST[3];
  // Điểm của cả buổi là trung bình các ĐIỂM TỔNG KẾT, không phải trung bình của trung bình các
  // tiêu chí (quyết định R2-17).
  const overall = Math.round(EVALUATIONS.reduce((s,e)=>s+e.overallScore,0) / EVALUATIONS.length);
  const proceedCount = EVALUATIONS.filter(e=>e.verdict==='PROCEED_OFFER').length;
  return (
    <HRMShell active="interviews"
      title="Kết quả phỏng vấn"
      crumbs={['Lịch phỏng vấn',iv.name,'Kết quả']}
      actions={<>
        <Btn variant="outline" size="sm">Lưu nháp</Btn>
        <Btn variant="primary"  size="sm" icon="check">Chốt kết quả buổi</Btn>
      </>}>
      <div className="grid grid-cols-[1fr_280px] gap-[18px]">
        <div className="flex flex-col gap-3.5">
          {/* Interview summary */}
          <div className="flex items-center gap-4 rounded-xl border border-border bg-card p-5 shadow-xs">
            <Avatar name={iv.cand} size="lg" />
            <div className="flex-1">
              <div className="mb-1 text-md font-bold">{iv.cand}</div>
              <div className="mb-2 text-sm text-muted-foreground">{iv.vacancy}</div>
              <div className="flex items-center gap-2">
                <Badge variant="success" dot>Hoàn thành</Badge>
                <Badge variant="neutral">Vòng {iv.round}</Badge>
                <span className="text-xs text-muted-foreground">{iv.date} · {iv.time}</span>
              </div>
            </div>
            <div className="rounded-lg bg-success-soft px-5 py-3 text-center">
              <div className="text-4xl font-extrabold leading-none text-success">{overall}</div>
              <div className="mt-1 text-xs text-success">/ 100 · TB điểm tổng kết</div>
            </div>
          </div>

          {/* Màn NÀY là màn ĐỌC. Ô nhập «Điểm tổng kết (0–100)» của người phỏng vấn nằm ở màn nhập
              phiếu — màn đó CHƯA ĐƯỢC VẼ, xem `_DECISIONS.md` R2-17 phần «Còn ngỏ». */}
          <div className="flex gap-2.5 rounded-xl border border-dashed border-border-strong bg-muted px-4 py-3 text-xs leading-[1.55] text-muted-foreground">
            <Icon name="info" size={14} className="mt-0.5 shrink-0" />
            <div>
              Màn này chỉ để <strong>đọc</strong> các phiếu đã nộp và chốt kết luận buổi. Người phỏng vấn nhập phiếu ở một màn riêng — <strong>màn đó chưa được vẽ</strong> (còn chờ chốt). Ở đó mới có ô «Điểm tổng kết (0–100)», năm ô điểm tiêu chí và năm ô nhận xét theo tiêu chí.
            </div>
          </div>

          {/* Một phiếu cho MỖI người phỏng vấn */}
          {EVALUATIONS.map((ev,ei)=>(
            <div key={ei} className="rounded-xl border border-border bg-card p-[22px] shadow-xs">
              <div className="mb-4 flex items-center gap-3 border-b border-border pb-3.5">
                <Avatar name={ev.by} size="sm" />
                <div className="flex-1">
                  <div className="text-sm font-bold">Phiếu đánh giá — {ev.by}</div>
                  <div className="text-xs text-muted-foreground">{ev.title} · nộp {ev.submitted}</div>
                </div>
                <Badge variant="success">{VERDICT_LABEL[ev.verdict]}</Badge>
                {/* Con số cạnh tên là ĐIỂM TỔNG KẾT do người phỏng vấn tự cho — không phải trung
                    bình năm tiêu chí. Trung bình để cạnh cho dễ đối chiếu, cỡ chữ nhỏ hơn hẳn. */}
                <div className="text-right">
                  <div className="text-base font-bold text-success">{ev.overallScore}/100</div>
                  <div className="text-xs text-muted-foreground">TB 5 tiêu chí: {avgOf(ev.scores)}</div>
                </div>
              </div>
              {ev.scores.map((s,i)=>(
                <div key={i} className="mb-[18px]">
                  <div className="mb-1.5 flex justify-between">
                    <span className="text-sm font-semibold">{s.label}</span>
                    <span className="text-base font-bold" style={{ color:s.score>=90?'var(--color-success)':s.score>=80?'var(--color-primary)':'var(--color-warning)' }}>{s.score}/100</span>
                  </div>
                  <div className="mb-1.5 h-2 overflow-hidden rounded-full bg-muted">
                    <div className="h-full rounded-full" style={{ width:`${s.score}%`, background:s.score>=90?'var(--color-success)':s.score>=80?'var(--color-primary)':'var(--color-warning)' }} />
                  </div>
                  <div className="text-xs italic text-muted-foreground">{s.note}</div>
                </div>
              ))}
              <div className="rounded-md bg-muted p-3 text-xs leading-[1.55]">{ev.comment}</div>
            </div>
          ))}

          {/* Vì sao hai con số không được gộp — nói thẳng ra, đừng để người hiện thực tự đoán */}
          <div className="flex gap-2.5 rounded-xl 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>Điểm tổng kết và trung bình năm tiêu chí là hai con số khác nhau, cố ý.</strong> Điểm tổng kết là nhận định độc lập của người phỏng vấn: được phép nhấn mạnh một tiêu chí quan trọng hơn phần còn lại, hoặc hạ điểm vì một lo ngại không nằm trong năm tiêu chí nào. Hệ thống <strong>không</strong> tự tính điểm tổng kết từ năm tiêu chí và <strong>không</strong> kiểm tính nhất quán giữa hai con số.
            </div>
          </div>

          {/* Kết luận chốt của cả buổi */}
          <div className="rounded-xl border border-border bg-card p-[22px] shadow-xs">
            <div className="mb-1.5 text-base font-bold">Chốt kết luận buổi phỏng vấn</div>
            <div className="mb-3.5 text-xs text-muted-foreground">
              Hệ thống gợi ý theo đa số phiếu ({proceedCount}/{EVALUATIONS.length} chọn "{VERDICT_LABEL.PROCEED_OFFER}"). Người chốt vẫn chọn được kết luận khác.
            </div>
            <div className="mb-4 grid grid-cols-3 gap-2.5">
              {[
                { key:'PROCEED_OFFER', selected:true,  color:'var(--color-success)',     bg:'var(--color-success-soft)' },
                { key:'RE_INTERVIEW',  selected:false, color:'var(--color-muted-foreground)', bg:'var(--color-muted)' },
                { key:'REJECT',        selected:false, color:'var(--color-muted-foreground)', bg:'var(--color-muted)' },
              ].map((opt,i)=>(
                <label key={i} className={"cursor-pointer rounded-md p-3 text-center text-sm " + (opt.selected ? "font-bold" : "font-normal")}
                  style={{ border:`2px solid ${opt.selected?opt.color:'var(--color-border)'}`, background:opt.selected?opt.bg:'var(--color-card)', color:opt.selected?opt.color:'var(--color-muted-foreground)' }}>
                  <input type="radio" name="verdict" checked={opt.selected} onChange={()=>{}} className="hidden" />
                  {VERDICT_LABEL[opt.key]}
                </label>
              ))}
            </div>
            <label className="mb-1.5 block text-xs font-medium">Ghi chú của người chốt</label>
            <textarea className="h-[100px] w-full resize-none rounded-md border border-input bg-transparent px-3 pt-2 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring"
              defaultValue="Hai phiếu đều đề xuất tiến hành offer, điểm tổng kết trung bình vượt ngưỡng. Chốt đạt phỏng vấn và chuyển sang bước phê duyệt offer." />
            <div className="mt-2 text-xs leading-[1.5] text-muted-foreground">
              Chọn kết luận <strong>{VERDICT_LABEL.REJECT}</strong> thì ghi chú trở thành <strong>bắt buộc</strong> — đó là một trong năm chỗ phải nhập lý do.
            </div>
          </div>
        </div>

        {/* Right */}
        <div className="flex flex-col gap-3">
          <div className="rounded-xl border border-border bg-card p-[18px] shadow-xs">
            <div className="mb-3 text-xs font-bold">Hội đồng phỏng vấn</div>
            {iv.interviewers.map((name,i)=>{
              const ev = EVALUATIONS.find(e=>e.by===name);
              return (
                <div key={i} className={"flex items-center gap-[9px] py-2 " + (i<iv.interviewers.length-1 ? "border-b border-border" : "")}>
                  <Avatar name={name} size="sm" />
                  <div>
                    <div className="text-sm font-medium">{name}</div>
                    <div className="text-xs text-muted-foreground">{ev ? ev.title : '—'}</div>
                  </div>
                  {ev
                    ? <Badge variant="success" style={{ marginLeft:'auto' }}>Đã đánh giá</Badge>
                    : <Badge variant="neutral" style={{ marginLeft:'auto' }}>Chưa đánh giá</Badge>
                  }
                </div>
              );
            })}
            <div className="mt-2 border-t border-border pt-2 text-xs leading-[1.5] text-muted-foreground">
              Buổi phỏng vấn chốt được ngay cả khi còn phiếu chưa nộp — không chờ đủ phiếu.
            </div>
          </div>
          {/* Offer chỉ là một trạng thái trên đơn ứng tuyển: hệ thống KHÔNG sinh thư mời */}
          <div className="rounded-xl bg-success-soft p-4" style={{ border:'1px solid oklch(0.711 0.18 148 / 0.2)' }}>
            <div className="mb-2 text-sm font-bold text-success">Đề xuất: Gửi offer</div>
            <div className="mb-2.5 text-xs leading-[1.55] text-success">
              {proceedCount}/{EVALUATIONS.length} người phỏng vấn đề xuất tiến hành offer. Trung bình điểm tổng kết: {overall}/100. Thư mời được soạn ngoài hệ thống — đánh dấu tại đây sau khi đã gửi.
            </div>
            <Btn variant="primary" size="sm" icon="gift">Đánh dấu đã gửi lời mời</Btn>
          </div>
        </div>
      </div>
    </HRMShell>
  );
};

// ─── 05: Empty State ──────────────────────────────────────────────────────────
const IntEmptyScreen = () => (
  <HRMShell active="interviews" title="Lịch phỏng vấn" crumbs={['Lịch phỏng vấn']}
    actions={<Btn variant="primary" size="sm" icon="plus">Lên lịch phỏng vấn</Btn>}>
    <div className="flex min-h-[460px] 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="16" y="20" width="48" height="42" rx="5" fill="none" stroke="var(--color-border-strong)" strokeWidth="2.5" />
        <line x1="16" y1="32" x2="64" y2="32" stroke="var(--color-border-strong)" strokeWidth="1.5" />
        <line x1="28" y1="16" x2="28" y2="24" stroke="var(--color-border-strong)" strokeWidth="2.5" strokeLinecap="round" />
        <line x1="52" y1="16" x2="52" y2="24" stroke="var(--color-border-strong)" strokeWidth="2.5" strokeLinecap="round" />
        <circle cx="59" cy="59" r="12" fill="var(--color-primary-soft)" stroke="var(--color-primary)" strokeWidth="2" />
        <path d="M55 59h8M59 55v8" stroke="var(--color-primary)" strokeWidth="2" strokeLinecap="round" />
      </svg>
      <div className="mb-2.5 text-xl font-bold">Chưa có lịch phỏng vấn</div>
      <div className="mb-7 max-w-[420px] text-center text-base leading-[1.65] text-muted-foreground">
        Lịch phỏng vấn sẽ xuất hiện khi recruiter lên lịch cho ứng viên. Bắt đầu bằng cách chọn một ứng viên và lên lịch buổi phỏng vấn đầu tiên.
      </div>
      <Btn variant="primary" icon="plus">Lên lịch phỏng vấn đầu tiên</Btn>
    </div>
  </HRMShell>
);

// ─── 06: Dark Mode ────────────────────────────────────────────────────────────
const IntDarkScreen = () => <IntListScreen dark />;

Object.assign(window, {
  IntListScreen, IntCreateScreen, IntDetailScreen, IntCancelDialog, IntCancelDialogScreen,
  IntResultScreen, IntEmptyScreen, IntDarkScreen,
});