// ELS HRM — Module 13: Tài khoản của tôi (Current Account)
// Trang của MỌI tài khoản đã đăng nhập: thông tin tài khoản + bảo mật + tùy chọn hiển thị.
// Vào từ khu người dùng ở chân sidebar. RBAC: chỉ cần đăng nhập (AuthGuard toàn cục).
// SRS/SDS: ACCOUNT-OVERVIEW · ACCOUNT-SETTINGS.
// Layout bám PIMDetailScreen: panel hồ sơ trái (full-width grid) + card phải chứa tab strip.

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

// ── Hàng thông tin (label cố định · value) — idiom OrgTabInfo ──────
const AccInfoRow = ({ label, children, last }) => (
  <div className={"flex gap-3 py-[11px] " + (last ? "" : "border-b border-border")}>
    <span className="w-[168px] shrink-0 text-sm text-muted-foreground">{label}</span>
    <span className="flex-1 text-sm font-medium">{children}</span>
  </div>
);

// ── Segmented control (Sáng/Tối · 24/12 giờ · Thứ Hai/CN) ──────────
const AccSegment = ({ options, value }) => (
  <div className="inline-flex rounded-md border border-border bg-muted p-0.5">
    {options.map((o) => {
      const label = o.label != null ? o.label : o;
      const on = label === value;
      return (
        <button key={label} type="button"
          className={"inline-flex items-center gap-1.5 rounded-[5px] px-3 py-1.5 text-xs font-medium transition-colors "
            + (on ? "bg-card text-foreground shadow-xs" : "text-muted-foreground hover:text-foreground")}>
          {o.icon && <Icon name={o.icon} size={13} />}
          {label}
        </button>
      );
    })}
  </div>
);

// ── Nhóm tùy chọn (khung có tiêu đề) ──────────────────────────────
const AccSetGroup = ({ title, children, last }) => (
  <div className={"overflow-hidden rounded-lg border border-border " + (last ? "" : "mb-4")}>
    <div className="border-b border-border bg-muted px-4 py-2.5 text-xs font-bold uppercase tracking-[0.05em] text-muted-foreground">{title}</div>
    {children}
  </div>
);

// ── Hàng tùy chọn (icon · tiêu đề · mô tả · control) ───────────────
const AccSetRow = ({ icon, title, desc, control, last }) => (
  <div className={"flex items-center justify-between gap-6 px-4 py-3.5 " + (last ? "" : "border-b border-border")}>
    <div className="flex min-w-0 items-start gap-3">
      <div className="grid size-9 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground">
        <Icon name={icon} size={16} />
      </div>
      <div className="min-w-0">
        <div className="text-sm font-semibold text-foreground">{title}</div>
        {desc && <div className="mt-0.5 text-xs text-muted-foreground">{desc}</div>}
      </div>
    </div>
    <div className="shrink-0">{control}</div>
  </div>
);

// ── Dropdown ngôn ngữ mở sẵn (static) — khớp popup của Select ──────
const AccLangMenuOpen = () => (
  <div className="relative w-52">
    <button type="button" className={SELECT_TRIGGER + " h-9 text-base"}>
      <span className="line-clamp-1 text-left">Tiếng Việt</span>
      <Icon name="chevron-down" size={16} className="shrink-0 opacity-50" />
    </button>
    <div className="font-sans absolute left-0 top-full z-50 mt-1 w-full overflow-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md">
      {[['vi', 'Tiếng Việt', true], ['en', 'English', false], ['zh', '中文 (Trung)', false]].map(([v, l, sel]) => (
        <div key={v} className={"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-base outline-none hover:bg-accent hover:text-accent-foreground " + (sel ? "font-medium" : "")}>
          {sel && <span className="absolute left-2 flex size-3.5 items-center justify-center"><Icon name="check" size={16} /></span>}
          {l}
        </div>
      ))}
    </div>
  </div>
);

// ── Toast xác nhận auto-save ──────────────────────────────────────
const AccToast = () => (
  <div className="absolute bottom-6 right-6 z-50 flex items-center gap-2.5 rounded-lg border border-border bg-card px-4 py-3 shadow-lg">
    <div className="grid size-7 shrink-0 place-items-center rounded-full bg-success-soft text-success"><Icon name="check" size={15} /></div>
    <div className="text-sm text-foreground"><span className="font-semibold">Đã lưu tùy chọn</span> <span className="text-muted-foreground">· Định dạng giờ: 12 giờ</span></div>
  </div>
);

// ── Tab: Tổng quan ────────────────────────────────────────────────
const AccOverviewTab = ({ noEmployee, username, email, role }) => (
  <div>
    <div className="mb-2 text-base font-bold">Thông tin tài khoản</div>
    <AccInfoRow label="Tên đăng nhập">{username}</AccInfoRow>
    <AccInfoRow label="Email">
      <span className="inline-flex items-center gap-2">{email}<Badge variant="success" dot>Đã xác minh</Badge></span>
    </AccInfoRow>
    <AccInfoRow label="Vai trò">{role}</AccInfoRow>
    <AccInfoRow label="Trạng thái"><Badge variant="success" dot>Đang hoạt động</Badge></AccInfoRow>
    <AccInfoRow label="Lần đăng nhập gần nhất">Hôm nay · 08:12 · Chrome trên Windows</AccInfoRow>
    <AccInfoRow label="Thành viên từ" last>22/04/2026</AccInfoRow>

    <div className="mt-5">
      {noEmployee ? (
        <div className="flex items-start gap-3 rounded-lg border border-border bg-muted p-4">
          <div className="grid size-9 shrink-0 place-items-center rounded-md bg-card text-muted-foreground"><Icon name="info" size={16} /></div>
          <div className="text-sm leading-[1.55] text-muted-foreground">
            Tài khoản này <span className="font-medium text-foreground">chưa gắn hồ sơ nhân viên</span> nên không có hồ sơ nhân sự để xem. Bạn vẫn quản lý được thông tin đăng nhập và tùy chọn hiển thị của mình.
          </div>
        </div>
      ) : (
        <div className="flex items-center justify-between gap-4 rounded-lg border border-border p-4">
          <div className="flex items-start gap-3">
            <div className="grid size-9 shrink-0 place-items-center rounded-md bg-primary-soft text-primary"><Icon name="user" size={16} /></div>
            <div>
              <div className="text-sm font-semibold">Hồ sơ nhân sự</div>
              <div className="mt-0.5 text-xs text-muted-foreground">Xem và cập nhật thông tin cá nhân, liên hệ, người phụ thuộc…</div>
            </div>
          </div>
          <Btn variant="outline" size="sm" iconRight="arrow-right">Xem hồ sơ của tôi</Btn>
        </div>
      )}
    </div>
  </div>
);

// ── Tab: Bảo mật ──────────────────────────────────────────────────
const AccSecurityTab = () => {
  const sessions = [
    { icon: 'globe', dev: 'Chrome · Windows', meta: 'Hà Nội · 192.168.1.20', cur: true },
    { icon: 'phone', dev: 'Safari · iPhone', meta: 'Hà Nội · 10.0.0.5', cur: false },
  ];
  return (
    <div>
      <div className="mb-3.5 text-base font-bold">Bảo mật</div>

      <div className="mb-3 flex items-center justify-between gap-4 rounded-lg border border-border p-4">
        <div className="flex items-start gap-3.5">
          <div className="grid size-10 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground"><Icon name="key" size={18} /></div>
          <div>
            <div className="text-sm font-semibold text-foreground">Mật khẩu</div>
            <div className="mt-0.5 text-xs text-muted-foreground">Đổi lần cuối 12/05/2026 · Nên đổi định kỳ để giữ an toàn</div>
          </div>
        </div>
        <Btn variant="outline" size="sm" icon="lock">Đổi mật khẩu</Btn>
      </div>

      <div className="rounded-lg border border-border p-4">
        <div className="mb-3.5 flex items-center justify-between gap-4">
          <div className="flex items-start gap-3.5">
            <div className="grid size-10 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground"><Icon name="shield" size={18} /></div>
            <div>
              <div className="text-sm font-semibold text-foreground">Phiên đăng nhập</div>
              <div className="mt-0.5 text-xs text-muted-foreground">Bạn đang đăng nhập trên 2 thiết bị</div>
            </div>
          </div>
          <Btn variant="outline" size="sm" iconRight="arrow-right">Quản lý phiên</Btn>
        </div>
        <div className="rounded-md border border-border">
          {sessions.map((s, i) => (
            <div key={i} className={"flex items-center gap-3 px-3.5 py-3 " + (i < sessions.length - 1 ? "border-b border-border" : "")}>
              <div className="grid size-8 place-items-center rounded-md bg-muted text-muted-foreground"><Icon name={s.icon} size={15} /></div>
              <div className="min-w-0 flex-1">
                <div className="flex items-center gap-2 text-sm font-medium text-foreground">{s.dev}{s.cur && <Badge variant="success" dot>Hiện tại</Badge>}</div>
                <div className="text-xs text-muted-foreground">{s.meta}</div>
              </div>
              {!s.cur && <Btn variant="ghost" size="xs">Thu hồi</Btn>}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// ── Tab: Tùy chọn ─────────────────────────────────────────────────
const AccSettingsTab = ({ theme = 'Sáng', timeFmt = '24 giờ', langOpen }) => (
  <div>
    <div className="mb-1 flex items-center justify-between gap-4">
      <div className="text-base font-bold">Tùy chọn hiển thị</div>
      <span className="inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground"><Icon name="check-circle" size={13} className="text-success" /> Tự động lưu</span>
    </div>
    <div className="mb-4 text-xs text-muted-foreground">Áp dụng cho tài khoản của bạn và đồng bộ trên mọi thiết bị.</div>

    <AccSetGroup title="Giao diện">
      <AccSetRow icon="sun" title="Chế độ hiển thị" desc="Sáng, Tối, hoặc theo thiết lập của thiết bị" last
        control={<AccSegment value={theme} options={[{ label: 'Sáng', icon: 'sun' }, { label: 'Tối', icon: 'moon' }, { label: 'Theo hệ thống', icon: 'settings' }]} />} />
    </AccSetGroup>

    <AccSetGroup title="Ngôn ngữ">
      <AccSetRow icon="globe" title="Ngôn ngữ hiển thị" desc="Ngôn ngữ giao diện của hệ thống" last
        control={langOpen
          ? <AccLangMenuOpen />
          : <div className="w-52"><Select defaultValue="vi" options={[{ value: 'vi', label: 'Tiếng Việt' }, { value: 'en', label: 'English' }, { value: 'zh', label: '中文 (Trung)' }]} /></div>} />
    </AccSetGroup>

    <AccSetGroup title="Ngày &amp; giờ" last>
      <AccSetRow icon="calendar" title="Định dạng ngày" desc="Cách hiển thị ngày tháng"
        control={<div className="w-52"><Select defaultValue="dmy" options={[{ value: 'dmy', label: 'DD/MM/YYYY' }, { value: 'mdy', label: 'MM/DD/YYYY' }, { value: 'ymd', label: 'YYYY-MM-DD' }]} /></div>} />
      <AccSetRow icon="clock" title="Định dạng giờ" desc="12 giờ (AM/PM) hoặc 24 giờ"
        control={<AccSegment value={timeFmt} options={['24 giờ', '12 giờ']} />} />
      <AccSetRow icon="calendar-days" title="Ngày bắt đầu tuần" desc="Ảnh hưởng lịch và bảng công" last
        control={<AccSegment value="Thứ Hai" options={['Thứ Hai', 'Chủ Nhật']} />} />
    </AccSetGroup>

    <div className="mt-3 flex items-start gap-1.5 text-2xs leading-[1.5] text-muted-foreground">
      <Icon name="info" size={12} className="mt-px shrink-0" />
      <span>Ngôn ngữ và định dạng áp dụng cho các phần đã hỗ trợ; một số phần đang trong quá trình chuyển đổi đa ngôn ngữ.</span>
    </div>
  </div>
);

// ── Màn chính (panel trái + card tab phải, full-width) ────────────
const AccountScreen = ({ initialTab = 'overview', noEmployee, dark, theme = 'Sáng', timeFmt = '24 giờ', langOpen }) => {
  const [tab, setTab] = React.useState(initialTab);
  const name = noEmployee ? 'sysadmin' : 'Nguyễn Thị Lan';
  const username = noEmployee ? 'sysadmin' : 'lan.nguyen';
  const email = noEmployee ? 'sysadmin@els.tech' : 'lan.nguyen@els.tech';
  const role = noEmployee ? 'Quản trị hệ thống' : 'Nhân viên';
  const TABS = [
    { id: 'overview', label: 'Tổng quan' },
    { id: 'security', label: 'Bảo mật' },
    { id: 'settings', label: 'Tùy chọn' },
  ];
  return (
    <HRMShell dark={dark} active="account" user={{ name, role }}
      title="Tài khoản của tôi" crumbs={['Tài khoản của tôi']}
      meta={<Badge variant="success" dot>Đang hoạt động</Badge>}>

      <div className="grid grid-cols-[280px_1fr] gap-4">
        {/* Trái — tóm tắt tài khoản */}
        <div className="flex flex-col gap-3">
          <div className={ACC_CARD + " p-5"}>
            <div className="border-b border-border pb-4 text-center">
              <div className="mb-2.5 flex justify-center"><Avatar name={name} size="xl" status={!noEmployee} /></div>
              <div className="mb-[3px] text-md font-bold">{name}</div>
              <div className="mb-2.5 text-xs text-muted-foreground">@{username}</div>
              <div className="flex flex-wrap justify-center gap-1.5">
                <Badge variant="primary">{role}</Badge>
                <Badge variant="success" dot>Đang hoạt động</Badge>
              </div>
            </div>
            <div className="pt-3.5">
              {[
                { icon: 'mail', label: 'Email', val: email },
                { icon: 'clock', label: 'Đăng nhập gần nhất', val: 'Hôm nay · 08:12' },
                { icon: 'calendar', label: 'Thành viên từ', val: '22/04/2026' },
              ].map((f, i) => (
                <div key={i} className="mb-[9px] flex gap-[9px]">
                  <Icon name={f.icon} size={13} className="mt-0.5 shrink-0 text-muted-foreground" />
                  <div className="min-w-0">
                    <div className="text-xs text-muted-foreground">{f.label}</div>
                    <div className="truncate text-xs font-medium">{f.val}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {noEmployee ? (
            <div className={ACC_CARD + " bg-muted p-3.5"}>
              <div className="flex items-start gap-2 text-2xs leading-[1.5] text-muted-foreground">
                <Icon name="info" size={12} className="mt-px shrink-0" />
                <span>Tài khoản chưa gắn hồ sơ nhân viên.</span>
              </div>
            </div>
          ) : (
            <div className={ACC_CARD + " p-3.5"}>
              <div className="mb-1 text-2xs font-bold uppercase tracking-[0.07em] text-muted-foreground">Liên kết</div>
              <div className="flex cursor-pointer items-center gap-[9px] rounded-sm px-1.5 py-2 text-sm">
                <Icon name="user" size={14} className="shrink-0 text-primary" />
                Hồ sơ nhân sự của tôi
                <Icon name="chevron-right" size={12} className="ml-auto text-muted-foreground" />
              </div>
            </div>
          )}
        </div>

        {/* Phải — card có tab strip */}
        <div className={ACC_CARD + " overflow-hidden"}>
          <div className="flex flex-nowrap gap-1 overflow-x-auto border-b border-border px-3">
            {TABS.map((t) => (
              <div key={t.id} onClick={() => setTab(t.id)}
                className={"-mb-px cursor-pointer whitespace-nowrap border-b-2 px-3.5 py-3 text-sm font-medium "
                  + (tab === t.id ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground")}>
                {t.label}
              </div>
            ))}
          </div>
          <div className="p-[22px]">
            {tab === 'overview' && <AccOverviewTab noEmployee={noEmployee} username={username} email={email} role={role} />}
            {tab === 'security' && <AccSecurityTab />}
            {tab === 'settings' && <AccSettingsTab theme={theme} timeFmt={timeFmt} langOpen={langOpen} />}
          </div>
        </div>
      </div>
    </HRMShell>
  );
};

// ── Artboards (màn) ───────────────────────────────────────────────
const AccountOverviewScreen = () => <AccountScreen initialTab="overview" />;
const AccountOverviewNoEmployeeScreen = () => <AccountScreen initialTab="overview" noEmployee />;
const AccountSecurityScreen = () => <AccountScreen initialTab="security" />;
const AccountSettingsScreen = () => <AccountScreen initialTab="settings" />;
const AccountSettingsLanguageScreen = () => <AccountScreen initialTab="settings" langOpen />;
const AccountSettingsDarkScreen = () => <AccountScreen initialTab="settings" dark theme="Tối" />;
const AccountSettingsSavedScreen = () => (
  <div className="relative size-full">
    <AccountScreen initialTab="settings" timeFmt="12 giờ" />
    <AccToast />
  </div>
);

Object.assign(window, {
  AccountOverviewScreen, AccountOverviewNoEmployeeScreen, AccountSecurityScreen,
  AccountSettingsScreen, AccountSettingsLanguageScreen, AccountSettingsDarkScreen, AccountSettingsSavedScreen,
});