// ELS HRM — Login screen (Split Panel) — Tailwind utility
// Viết theo pilot đã duyệt (pilot-login-tailwind.html). Dùng chung <Icon> từ shared.jsx.
// Export: LoginSplit (light) + LoginSplitDark (dark) cho DCArtboard 1280×800.

const { useState } = React;

// ── Logo ELS HRM (utility) ──
const ElsLogo = ({ mono = false }) => (
  <div className="inline-flex items-center gap-2.5">
    <div className={"grid size-10 place-items-center rounded-lg "
      + (mono ? "bg-white/[0.12] text-white shadow-[inset_0_0_0_1px_rgba(255,255,255,0.18)]"
              : "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] " + (mono ? "text-white" : "text-foreground")}>
        ELS <span className={mono ? "text-white/70" : "text-primary"}>HRM</span>
      </span>
      <span className={"mt-1 text-2xs uppercase tracking-[0.1em] " + (mono ? "text-white/55" : "text-muted-foreground")}>
        Employee Lifecycle System
      </span>
    </div>
  </div>
);

// ── Field có icon trái + suffix phải ──
const LoginField = ({ icon, type = "text", placeholder, value, onChange, suffix, autoComplete }) => (
  <div className="relative w-full">
    {icon && <Icon name={icon} size={14} className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />}
    <input
      type={type} placeholder={placeholder} value={value} onChange={onChange} autoComplete={autoComplete}
      className={"h-11 w-full rounded-md border border-input bg-card text-md text-foreground shadow-xs transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-4 focus:ring-ring "
        + (icon ? "pl-9 " : "pl-3 ") + (suffix ? "pr-10" : "pr-3")} />
    {suffix && (
      <button type="button" className="absolute right-1.5 top-1/2 grid size-8 -translate-y-1/2 place-items-center rounded-sm text-muted-foreground hover:text-foreground">
        {suffix}
      </button>
    )}
  </div>
);

// ── Checkbox (check dày 3 để khớp pilot) ──
const Checkbox = ({ checked, onChange, label }) => (
  <label className="inline-flex cursor-pointer select-none items-center gap-2 text-sm text-foreground">
    <span className={"grid size-4 place-items-center rounded-sm border-[1.5px] transition-all "
      + (checked ? "border-primary bg-primary text-white" : "border-border-strong bg-transparent")}>
      {checked && (
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5" /></svg>
      )}
    </span>
    <input type="checkbox" checked={checked} onChange={onChange} className="hidden" />
    {label}
  </label>
);

// ── SVG logo Google / Microsoft (giữ màu thương hiệu) ──
const GoogleMark = () => (
  <svg width="16" height="16" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC04" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
);
const MicrosoftMark = () => (
  <svg width="16" height="16" viewBox="0 0 23 23"><path fill="#f25022" d="M1 1h10v10H1z"/><path fill="#7fba00" d="M12 1h10v10H12z"/><path fill="#00a4ef" d="M1 12h10v10H1z"/><path fill="#ffb900" d="M12 12h10v10H12z"/></svg>
);

// ── Brand panel (cột trái) — gradient cam cố ý không đổi giữa light/dark ──
const FEATURES = [
  { icon: 'users',  title: '2,400+ doanh nghiệp',      sub: 'Đang sử dụng hằng ngày' },
  { icon: 'clock',  title: 'Chấm công thời gian thực', sub: 'GPS, vân tay, khuôn mặt' },
  { icon: 'dollar', title: 'Bảng lương tự động',       sub: 'Tuân thủ luật lao động VN' },
  { icon: 'award',  title: 'ISO 27001 · SOC 2',        sub: 'Bảo mật cấp doanh nghiệp' },
];

const BrandPanel = ({ gridId }) => (
  <div className="relative flex flex-col justify-between overflow-hidden px-14 py-12 text-white
                  bg-[linear-gradient(155deg,#2a1009_0%,#6b1c08_38%,#c4480f_78%,#f26522_110%)]">
    <div className="absolute -right-[120px] -top-20 size-[480px] rounded-full bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.18),transparent_60%)]" />
    <div className="absolute -bottom-40 -left-[60px] size-[420px] rounded-full bg-[radial-gradient(circle_at_40%_40%,rgba(255,193,7,0.18),transparent_65%)]" />
    <svg className="absolute inset-0 h-full w-full opacity-[0.07]">
      <defs><pattern id={gridId} width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="white" strokeWidth="1" /></pattern></defs>
      <rect width="100%" height="100%" fill={`url(#${gridId})`} />
    </svg>

    <div className="relative z-[2]"><ElsLogo mono /></div>

    <div className="relative z-[2]">
      <div className="mb-[22px] inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/[0.12] px-3 py-1.5 text-xs font-medium">
        <span className="size-1.5 rounded-full bg-[#FFC107] shadow-[0_0_8px_#FFC107]" />
        Phiên bản 4.2 · vừa phát hành
      </div>
      <h1 className="mb-[18px] text-5xl font-extrabold leading-[1.05] tracking-[-0.025em] text-white">
        Quản trị nhân sự<br />trở nên đơn giản.
      </h1>
      <p className="mb-8 max-w-[460px] text-md leading-[1.6] text-white/[0.78]">
        ELS HRM hợp nhất chấm công, bảng lương, tuyển dụng và phát triển nhân viên trong một nền tảng duy nhất — dành cho đội ngũ HR Việt Nam hiện đại.
      </p>
      <div className="grid max-w-[480px] grid-cols-2 gap-3">
        {FEATURES.map((f, i) => (
          <div key={i} className="flex items-start gap-2.5 rounded-lg border border-white/[0.12] bg-white/[0.07] p-3.5 backdrop-blur-md">
            <div className="grid size-[30px] shrink-0 place-items-center rounded-md bg-white/[0.12]"><Icon name={f.icon} size={14} /></div>
            <div>
              <div className="mb-0.5 text-xs font-semibold">{f.title}</div>
              <div className="text-xs leading-[1.35] text-white/60">{f.sub}</div>
            </div>
          </div>
        ))}
      </div>
    </div>

    <div className="relative z-[2] flex items-center justify-between text-xs text-white/55">
      <span>© 2026 ELS Technologies JSC.</span>
      <div className="flex gap-[18px]">
        <span className="cursor-pointer">Trợ giúp</span>
        <span className="cursor-pointer">Chính sách bảo mật</span>
        <span className="cursor-pointer">Trạng thái hệ thống</span>
      </div>
    </div>
  </div>
);

// ── Form panel (cột phải) ──
const FormPanel = () => {
  const [email, setEmail] = useState('minh.tran@els.tech');
  const [password, setPassword] = useState('••••••••••');
  const [showPwd, setShowPwd] = useState(false);
  const [remember, setRemember] = useState(true);
  const outlineBtn = "inline-flex items-center justify-center gap-2 rounded-md border border-input bg-card text-foreground shadow-xs transition-colors hover:bg-accent";

  return (
    <div className="relative flex flex-col justify-center bg-card px-[72px] py-14">
      <div className="absolute right-10 top-8 flex items-center gap-2 text-xs text-muted-foreground">
        Chưa có tài khoản?
        <button className={outlineBtn + " h-[30px] px-3 text-xs font-medium"}>Liên hệ HR</button>
      </div>

      <div className="mx-auto w-full max-w-[400px]">
        <h2 className="mb-2 text-3xl font-bold tracking-[-0.02em] text-foreground">Chào mừng trở lại</h2>
        <p className="mb-7 text-base text-muted-foreground">
          Đăng nhập vào không gian làm việc <strong className="text-foreground">els.tech</strong> của bạn.
        </p>

        <div className="mb-[22px] grid grid-cols-2 gap-2.5">
          <button className={outlineBtn + " h-[42px] text-sm"}><GoogleMark /> Google Workspace</button>
          <button className={outlineBtn + " h-[42px] text-sm"}><MicrosoftMark /> Microsoft 365</button>
        </div>

        <div className="my-[6px] mb-[18px] flex items-center gap-3 text-xs text-muted-foreground">
          <div className="h-px flex-1 bg-border" />
          <span className="font-medium uppercase tracking-[0.1em]">Hoặc với email</span>
          <div className="h-px flex-1 bg-border" />
        </div>

        <form className="flex flex-col gap-3.5" onSubmit={e => e.preventDefault()}>
          <div>
            {/* Ô này nhận CẢ email công ty LẪN tên đăng nhập: BE tra cứu theo or(username, email).
                Vì vậy kiểu input là text, không phải email — kiểu email sẽ chặn tên đăng nhập trơn.
                Gợi ý tự động điền cũng là username để khớp app thật (login-page.tsx). */}
            <label className="mb-1.5 block text-xs font-medium text-foreground">Email công ty hoặc tên đăng nhập</label>
            <LoginField icon="mail" type="text" placeholder="ban@els.tech" value={email} onChange={e => setEmail(e.target.value)} autoComplete="username" />
          </div>
          <div>
            <div className="mb-1.5 flex items-baseline justify-between">
              <label className="text-xs font-medium text-foreground">Mật khẩu</label>
              <a className="cursor-pointer text-xs font-medium text-primary">Quên mật khẩu?</a>
            </div>
            <LoginField
              icon="lock"
              type={showPwd ? 'text' : 'password'}
              placeholder="Nhập mật khẩu"
              value={password}
              onChange={e => setPassword(e.target.value)}
              autoComplete="current-password"
              suffix={<span onClick={() => setShowPwd(s => !s)}><Icon name={showPwd ? 'eye-off' : 'eye'} size={14} /></span>}
            />
          </div>

          <div className="mt-1 flex items-center justify-between">
            <Checkbox checked={remember} onChange={() => setRemember(!remember)} label="Ghi nhớ thiết bị này (30 ngày)" />
          </div>

          <button className="mt-2.5 inline-flex h-11 items-center justify-center gap-2 rounded-md bg-primary text-base font-semibold text-primary-foreground shadow-xs transition-colors hover:bg-primary-hover">
            Đăng nhập <Icon name="arrow-right" size={14} />
          </button>
        </form>

        <div className="mt-6 flex items-start gap-2.5 rounded-md bg-muted p-3">
          <Icon name="alert-circle" size={14} className="mt-0.5 shrink-0 text-info" />
          <div className="text-xs leading-[1.45] text-muted-foreground">
            Tài khoản nhân viên được cấp bởi quản trị viên HR. Nếu chưa nhận được thông tin đăng nhập, hãy liên hệ <span className="font-medium text-primary">hr@els.tech</span>.
          </div>
        </div>
      </div>
    </div>
  );
};

// ── Split panel 1280×800 ──
// text-foreground ở root: tránh kế thừa color:#fff khi xem focus artboard (DCFocusOverlay)
const LoginScreenInner = ({ gridId }) => (
  <div className="grid h-[800px] w-[1280px] bg-card text-foreground" style={{ gridTemplateColumns: '1.05fr 1fr' }}>
    <BrandPanel gridId={gridId} />
    <FormPanel />
  </div>
);

const LoginSplit = () => <LoginScreenInner gridId="els-grid-light" />;
const LoginSplitDark = () => <div className="dark"><LoginScreenInner gridId="els-grid-dark" /></div>;

Object.assign(window, { LoginSplit, LoginSplitDark, ElsLogo });