// ELS HRM — Trang xác minh email (public, transactional) — Tailwind utility
// Người dùng mở link ${APP_URL}/verify-email?token=… từ email → trang TỰ ĐỘNG gọi
// POST /users/verify-email khi load. 4 trạng thái: loading / success / invalid / changed.
// Dùng <Icon> + <Btn> từ shared.jsx. Logo tự định nghĩa để trang độc lập (không phụ
// thuộc thứ tự load login-screens.jsx).

// ── Logo ELS HRM (bản sáng — đồng bộ với login-screens.jsx) ──
const VeLogo = () => (
  <div className="inline-flex items-center gap-2.5">
    <div className="grid size-10 place-items-center rounded-lg bg-primary text-primary-foreground shadow-xs">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
        <rect x="3" y="4" width="14" height="2.6" rx="1" fill="currentColor" />
        <rect x="3" y="10.7" width="9" height="2.6" rx="1" fill="currentColor" opacity="0.85" />
        <rect x="3" y="17.4" width="14" height="2.6" rx="1" fill="currentColor" opacity="0.6" />
        <circle cx="19.5" cy="11.5" r="2.2" fill="currentColor" />
      </svg>
    </div>
    <div className="flex flex-col leading-none">
      <span className="text-lg font-extrabold tracking-[-0.02em] text-foreground">
        ELS <span className="text-primary">HRM</span>
      </span>
      <span className="mt-1 text-2xs uppercase tracking-[0.1em] text-muted-foreground">
        Employee Lifecycle System
      </span>
    </div>
  </div>
);

// ── Spinner tròn (shared.jsx không có icon loader) ──
const VeSpinner = ({ size = 36 }) => (
  <span className="inline-block animate-spin rounded-full border-[3px] border-muted border-t-primary"
    style={{ width: size, height: size }} />
);

// ── Vòng tròn icon trạng thái ──
const VE_TONE = {
  success: 'bg-success-soft text-success',
  danger: 'bg-destructive-soft text-destructive',
  warning: 'bg-warning-soft text-[oklch(0.55_0.158_65)]',
};
const VeStatusIcon = ({ name, tone }) => (
  <div className={"mx-auto grid size-16 place-items-center rounded-full " + (VE_TONE[tone] || VE_TONE.success)}>
    <Icon name={name} size={30} />
  </div>
);

// ── Khung trang chung: nền nhẹ · logo · card căn giữa · footer ──
// text-foreground ở root: tránh kế thừa color:#fff khi xem focus artboard (DCFocusOverlay)
const VerifyShell = ({ children }) => (
  <div className="flex size-full flex-col items-center justify-center gap-7 bg-background px-6 py-10 text-foreground">
    <VeLogo />
    <div className="w-full max-w-[420px] rounded-2xl border border-border bg-card p-8 text-center shadow-lg">
      {children}
    </div>
    <div className="text-xs text-muted-foreground">© 2026 ELS Technologies JSC.</div>
  </div>
);

// ── 1 · Đang xác minh (loading) ──
const VerifyLoading = () => (
  <VerifyShell>
    <div className="mx-auto mb-5 grid size-16 place-items-center"><VeSpinner size={36} /></div>
    <h1 className="mb-1.5 text-xl font-bold text-foreground">Đang xác minh email…</h1>
    <p className="text-sm leading-relaxed text-muted-foreground">
      Vui lòng đợi trong giây lát — chúng tôi đang xác nhận đường dẫn của bạn.
    </p>
  </VerifyShell>
);

// ── 2 · Thành công ──
const VerifySuccess = ({ email = 'minh.ho@els.tech' }) => (
  <VerifyShell>
    <VeStatusIcon name="check-circle" tone="success" />
    <h1 className="mb-1.5 mt-5 text-xl font-bold text-foreground">Email đã được xác minh</h1>
    <p className="mb-6 text-sm leading-relaxed text-muted-foreground">
      Địa chỉ <strong className="font-semibold text-foreground">{email}</strong> đã được xác thực thành công.
      Bạn có thể tiếp tục đăng nhập vào ELS HRM.
    </p>
    <Btn variant="primary" size="lg" iconRight="arrow-right" className="w-full">Đến trang đăng nhập</Btn>
  </VerifyShell>
);

// ── 3 · Token sai / hết hạn ──
const VerifyInvalid = () => (
  <VerifyShell>
    <VeStatusIcon name="x-circle" tone="danger" />
    <h1 className="mb-1.5 mt-5 text-xl font-bold text-foreground">Link xác minh không hợp lệ</h1>
    <p className="mb-6 text-sm leading-relaxed text-muted-foreground">
      Đường dẫn đã hết hạn (sau 24 giờ) hoặc không chính xác. Hãy đề nghị quản trị viên
      gửi lại email xác minh cho bạn.
    </p>
    <Btn variant="outline" size="lg" iconRight="arrow-right" className="w-full">Về trang đăng nhập</Btn>
  </VerifyShell>
);

// ── 4 · Email đã đổi (token cũ không còn áp dụng) ──
const VerifyChanged = () => (
  <VerifyShell>
    <VeStatusIcon name="alert-triangle" tone="warning" />
    <h1 className="mb-1.5 mt-5 text-xl font-bold text-foreground">Link không còn hiệu lực</h1>
    <p className="mb-6 text-sm leading-relaxed text-muted-foreground">
      Email tài khoản đã được thay đổi sau khi đường dẫn này được gửi, nên link cũ không còn
      dùng được. Hãy dùng email xác minh mới nhất trong hộp thư của bạn.
    </p>
    <Btn variant="outline" size="lg" iconRight="arrow-right" className="w-full">Về trang đăng nhập</Btn>
  </VerifyShell>
);

// ── Dark wrappers (cho artboard dark) ──
const VerifySuccessDark = () => <div className="dark size-full"><VerifySuccess /></div>;
const VerifyInvalidDark = () => <div className="dark size-full"><VerifyInvalid /></div>;

Object.assign(window, {
  VerifyLoading, VerifySuccess, VerifyInvalid, VerifyChanged,
  VerifySuccessDark, VerifyInvalidDark,
});