// ELS HRM — Module 14: Cấu hình hệ thống (System Config) — All Screens — Tailwind utility classes
// Nguồn chân lý MỘT múi giờ dùng chung toàn hệ thống (SYSCFG-TIMEZONE). Admin-only (screen:settings).
// Khung màn bám idiom màn "Danh mục" (Module 12 · AdminShell): MỘT card gộp — thanh tab ở đỉnh +
// dải phân quyền + nội dung + footer lưu — thay cho hai card rời trước đây.

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

// ─── Thanh tab (idiom AdminTabBar) — hiện một tab "Múi giờ"; chừa chỗ mở rộng company-level sau ───
const SC_TABS = [
  { id: 'timezone', label: 'Múi giờ', icon: 'globe' },
];

const SysCfgTabBar = ({ active }) => (
  <div className="flex shrink-0 items-center gap-0.5 border-b border-border bg-card px-2">
    {SC_TABS.map(t => {
      const on = t.id === active;
      return (
        <div key={t.id}
          className={"relative flex cursor-pointer items-center gap-1.5 px-3.5 py-2.5 text-sm transition-colors "
            + (on ? "font-semibold text-primary" : "font-medium text-muted-foreground hover:text-foreground")}>
          <Icon name={t.icon} size={14} />
          {t.label}
          {on && <span className="absolute inset-x-2.5 -bottom-px h-[2px] rounded-t-sm bg-primary" />}
        </div>
      );
    })}
  </div>
);


// ─── 01: Cấu hình › Múi giờ (Admin · SYSCFG-TIMEZONE) ─────────────────
const SysCfgTimezoneScreen = ({ dark = false }) => (
  <HRMShell active="system-config" dark={dark}
    title="Cấu hình"
    crumbs={['Hệ thống', 'Cấu hình']}>
    <div className={"flex flex-col overflow-hidden " + SC_CARD}>
      <SysCfgTabBar active="timezone" />

      {/* Nội dung tab Múi giờ */}
      <div className="p-5">
        <div className="mb-1 text-base font-bold">Múi giờ hệ thống</div>
        <div className="mb-4 text-xs text-muted-foreground">Một múi giờ dùng chung cho toàn hệ thống — không theo địa điểm, tổ chức hay người dùng.</div>

        {/* Trường chọn múi giờ */}
        <div className="max-w-[440px]">
          <label className="mb-[5px] flex items-center gap-[5px] text-xs font-medium">
            Múi giờ áp dụng toàn hệ thống <span className="text-destructive">*</span>
          </label>
          <Select className="w-full" defaultValue="Asia/Ho_Chi_Minh (ICT · UTC+7)"
            options={[
              'Asia/Ho_Chi_Minh (ICT · UTC+7)',
              'Asia/Bangkok (ICT · UTC+7)',
              'Asia/Singapore (+08)',
              'Asia/Tokyo (JST · UTC+9)',
              'UTC',
            ]} />
          <div className="mt-1 text-xs text-muted-foreground">Định danh IANA · mặc định <span className="font-mono">Asia/Ho_Chi_Minh</span>.</div>
        </div>

        {/* Phạm vi ảnh hưởng */}
        <div className="mt-5 rounded-lg border border-border bg-muted/40 p-4">
          <div className="mb-2.5 text-2xs font-bold uppercase tracking-[0.06em] text-muted-foreground">Múi giờ này áp cho</div>
          <div className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm">
            {[
              'Chấm công — Ngày làm việc (Business Day), giờ vào/ra, đi trễ/về sớm',
              'Bảng công — mốc "hôm nay" & biên kỳ',
              'Nghỉ phép — lịch chạy tác vụ định kỳ',
              'Phỏng vấn — giờ hiển thị lịch',
              'Nhật ký kiểm toán — mốc thời gian hiển thị',
              'Mọi màn — quy đổi giờ UTC → giờ hiển thị',
            ].map((t, i) => (
              <div key={i} className="flex items-start gap-2 text-foreground">
                <Icon name="check" size={13} className="mt-0.5 shrink-0 text-success" />
                <span>{t}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Ghi chú bất biến — panel info nhẹ (idiom panel thông báo Module 12) */}
        <div className="mt-4 flex items-start gap-2.5 rounded-lg p-3.5 text-xs leading-[1.65]"
          style={{ background: 'var(--color-info-soft)', border: '1px solid oklch(0.604 0.180 253 / 0.22)' }}>
          <Icon name="info" size={15} className="mt-px shrink-0 text-info" />
          <span className="text-foreground">
            Mọi mốc thời gian vẫn <strong>lưu theo UTC</strong>. Đổi múi giờ chỉ đổi cách <strong>diễn giải &amp; hiển thị</strong> — <strong>không</strong> sửa dữ liệu quá khứ (Ngày làm việc đã đóng băng lúc chấm giữ nguyên).
          </span>
        </div>

        {/* Phân phối theo phiên đăng nhập */}
        <div className="mt-3 flex items-start gap-1.5 text-2xs leading-[1.5] text-muted-foreground">
          <Icon name="users" size={12} className="mt-px shrink-0" />
          <span><strong className="text-foreground">Mọi người xem thấy cùng một giờ</strong> cho cùng một mốc — giá trị này được gửi kèm phiên đăng nhập để hiển thị đúng, bất kể múi giờ máy người dùng.</span>
        </div>
      </div>

      {/* Footer — hành động lưu (idiom footer dialog Module 12) */}
      <div className="flex shrink-0 justify-end gap-2 border-t border-border px-5 py-3.5">
        <Btn variant="outline" size="sm">Hoàn tác</Btn>
        <Btn variant="primary" size="sm" icon="check">Lưu thay đổi</Btn>
      </div>
    </div>
  </HRMShell>
);

// ─── 02: Dark Mode ────────────────────────────────────────────────────────────
const SysCfgTimezoneDarkScreen = () => <SysCfgTimezoneScreen dark />;

Object.assign(window, { SysCfgTimezoneScreen, SysCfgTimezoneDarkScreen });