(() => {
const { Button, Input, Field, Card, Checkbox, Icon, IconButton } = window.TaskFlowDesignSystem_dd53c2;

/* Kredensial diperiksa terhadap akun yang tersimpan (localStorage sekarang, API CI3 nanti).
   Di produksi: POST auth/login → password_hash() di server → cookie session httpOnly. */
const MAX_TRY = 5;
const LOCK_SEC = 60;

function LoginScreen({ onLogin }) {
  const [email, setEmail] = React.useState("");
  const [pass, setPass] = React.useState("");
  const [reveal, setReveal] = React.useState(false);
  const [err, setErr] = React.useState("");
  const [tries, setTries] = React.useState(0);
  const [lock, setLock] = React.useState(0);
  const bp = useBreakpoint();
  const compact = bp !== "desktop";

  // Lockout mundur otomatis — menahan percobaan menebak password berulang.
  React.useEffect(() => {
    if (!lock) return;
    const t = setInterval(() => setLock((s) => (s <= 1 ? 0 : s - 1)), 1000);
    return () => clearInterval(t);
  }, [lock]);

  const [busy, setBusy] = React.useState(false);
  const submit = () => {
    if (lock || busy) return;
    if (!email.trim() || !pass) return setErr("Email dan password wajib diisi.");
    // Server aktif: akun diperiksa di server sehingga bisa dipakai dari perangkat mana pun.
    if (window.TMSNet && TMSNet.online) {
      setBusy(true); setErr("");
      TMSNet.login(email.trim(), pass).then((acc) => {
        setBusy(false); setPass(""); setTries(0);
        onLogin({ id: acc.id, access: acc.access || "user", mustChange: !!acc.mustChange });
      }).catch((e) => {
        setBusy(false); setPass("");
        setErr(e.message || "Tidak bisa menghubungi server.");
      });
      return;
    }
    const acc = findAccount(email);
    if (!acc || acc.pass !== pass) {
      const n = tries + 1;
      setTries(n);
      setPass("");
      if (n >= MAX_TRY) { setLock(LOCK_SEC); setTries(0); setErr("Terlalu banyak percobaan. Login dikunci sementara."); }
      else setErr(`Email atau password salah. Sisa percobaan: ${MAX_TRY - n}.`);
      return;
    }
    if (acc.active === false) { setPass(""); return setErr("Akun ini dinonaktifkan. Hubungi Direktur."); }
    setPass(""); setErr(""); setTries(0);
    onLogin({ id: acc.id, access: acc.access || "user", mustChange: !!acc.mustChange });
  };

  return (
    <div style={{ height: "100%", display: "flex", background: "var(--white)", overflow: "hidden" }}>
      {bp !== "mobile" && (
      <div style={{ flex: compact ? "0 0 40%" : "0 0 46%", background: "var(--gradient-stage)", padding: compact ? "32px 28px 32px 34px" : "48px 48px 48px 76px", display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 20, color: "var(--white)", overflowY: "auto" }}>
        <span style={{ font: "var(--fw-extrabold) var(--fs-body-lg)/1 var(--font-display)", color: "var(--white)", letterSpacing: "var(--ls-tight)" }}>TMS BBMC</span>
        <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 380 }}>
          <h1 style={{ font: "var(--text-display)", color: "var(--white)", letterSpacing: "var(--ls-tight)" }}>Klinik BBMC Task Management System</h1>
          <p style={{ font: "italic var(--fw-medium) 19px/1.65 var(--font-body)", color: "rgba(255,255,255,.8)", borderLeft: "3px solid rgba(255,255,255,.3)", paddingLeft: 16, letterSpacing: "var(--ls-snug)" }}>
            “Pelayanan medis yang hebat selalu ditopang oleh manajemen yang kuat. Kehadiran Anda hari ini membuat segalanya menjadi jauh lebih baik.”
          </p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, paddingTop: 8 }}>
            {["To Do", "In Progress", "On Verification", "Done"].map((s) => (
              <span key={s} style={{ padding: "8px 14px", borderRadius: "var(--radius-pill)", background: "rgba(255,255,255,.12)", border: "1px solid rgba(255,255,255,.18)", whiteSpace: "nowrap", font: "var(--fw-semibold) var(--fs-sm)/1 var(--font-body)", color: "rgba(255,255,255,.9)" }}>{s}</span>
            ))}
          </div>
        </div>
        <span style={{ font: "var(--text-caption)", color: "rgba(255,255,255,.5)" }}>Powered By Klinik BBMC 2026</span>
      </div>
      )}
      <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", padding: compact ? "24px 20px" : 40, overflowY: "auto", WebkitOverflowScrolling: "touch" }}>
        <div style={{ width: "100%", maxWidth: 380, display: "flex", flexDirection: "column", gap: 16, margin: "auto 0" }}>
          <img src={LOGO_URL} alt="Klinik BBMC — Batubulan Medical" style={{ width: 168, height: "auto", alignSelf: "flex-start" }} />
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            <h2 style={{ font: "var(--text-h1)", color: "var(--text-strong)" }}>Sign In</h2>
            <p style={{ font: "var(--text-body-default)", color: "var(--text-muted)" }}>Silahkan sign in untuk melihat task anda</p>
          </div>
          <Field label="User / Email">
            <Input icon="mail" type="email" name="email" autoComplete="username" inputMode="email" value={email}
              disabled={!!lock} onChange={(e) => { setEmail(e.target.value); setErr(""); }} onKeyDown={(e) => e.key === "Enter" && submit()} />
          </Field>
          <Field label="Password" hint="Wajib diganti saat login pertama kali. Jangan bagikan password Anda.">
            <Input icon="lock" type={reveal ? "text" : "password"} name="password" autoComplete="current-password"
              placeholder="Masukkan password" value={pass} disabled={!!lock} invalid={!!err}
              onChange={(e) => { setPass(e.target.value); setErr(""); }} onKeyDown={(e) => e.key === "Enter" && submit()}
              suffix={
                <button type="button" aria-label={reveal ? "Sembunyikan password" : "Tampilkan password"} onClick={() => setReveal((v) => !v)}
                  style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 30, height: 30, border: "none", background: "transparent", cursor: "pointer", padding: 0 }}>
                  <Icon name={reveal ? "eye-off" : "eye"} size={17} color="var(--text-faint)" />
                </button>
              } />
          </Field>
          {(err || lock > 0) ? (
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "9px 12px", borderRadius: "var(--radius-sm)", background: "var(--coral-50)", border: "1px solid var(--coral-100)", font: "var(--text-caption)", color: "var(--coral-600)" }}>
              <Icon name={lock ? "lock" : "triangle-alert"} size={15} color="var(--coral-600)" />
              {lock ? `Login dikunci ${lock}s karena percobaan gagal berulang.` : err}
            </span>
          ) : null}
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, flexWrap: "wrap" }}>
            <Checkbox label="Ingat saya" />
            <span style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>Lupa password? Hubungi Direktur.</span>
          </div>
          <Button variant="primary" size="lg" fullWidth gradient disabled={!!lock} onClick={submit}>Sign In</Button>
          {USERS.length === 0 && <span style={{ font: "var(--text-caption)", color: "var(--text-faint)", textAlign: "center" }}>Instalasi baru — masuk sebagai Direktur: {DB.direktur.email}</span>}
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { LoginScreen });

})();