// login-screen.jsx — static client-side password gate.
// NOTE: password is hardcoded and visible in the bundle — this is a light gate,
// not real security.

const LOGIN_PASSWORD = "skillsvideoPWD2026!&";
const AUTH_KEY = "autocut.authed";

function isAuthed() {
  return localStorage.getItem(AUTH_KEY) === "1";
}

const TXT_LOGIN = {
  vi: {
    title: "SkilssVideo.AI",
    subtitle: "Nhập mật khẩu để tiếp tục",
    placeholder: "Mật khẩu",
    submit: "Đăng nhập",
    error: "Mật khẩu không đúng. Thử lại.",
  },
  en: {
    title: "SkilssVideo.AI",
    subtitle: "Enter password to continue",
    placeholder: "Password",
    submit: "Sign in",
    error: "Wrong password. Try again.",
  },
};

function LoginScreen({ uiLang, onAuthenticated }) {
  const txt = TXT_LOGIN[uiLang] || TXT_LOGIN.vi;
  const [value, setValue] = React.useState("");
  const [error, setError] = React.useState(false);
  const [shake, setShake] = React.useState(false);
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    if (inputRef.current) inputRef.current.focus();
  }, []);

  const submit = React.useCallback(() => {
    if (value === LOGIN_PASSWORD) {
      localStorage.setItem(AUTH_KEY, "1");
      onAuthenticated();
      return;
    }
    setError(true);
    setShake(true);
    setValue("");
    setTimeout(() => setShake(false), 420);
    if (inputRef.current) inputRef.current.focus();
  }, [value, onAuthenticated]);

  const onKeyDown = (e) => {
    if (e.key === "Enter") submit();
  };

  return (
    <div
      style={{
        minHeight: "100vh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: 24,
        position: "relative",
        zIndex: 1,
      }}
    >
      <div
        style={{
          width: 360,
          maxWidth: "100%",
          background: "var(--bg-1)",
          border: "1px solid var(--line)",
          borderRadius: "var(--radius-xl)",
          boxShadow: "var(--shadow-2)",
          padding: "32px 28px",
          display: "flex",
          flexDirection: "column",
          gap: 18,
          animation: shake
            ? "loginShake 0.4s ease"
            : "fadeIn 0.4s ease",
        }}
      >
        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          <div
            className="serif"
            style={{ fontSize: 26, color: "var(--fg-0)", lineHeight: 1.1 }}
          >
            {txt.title}
          </div>
          <div style={{ fontSize: 13, color: "var(--fg-3)" }}>
            {txt.subtitle}
          </div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          <input
            ref={inputRef}
            type="password"
            value={value}
            placeholder={txt.placeholder}
            onChange={(e) => {
              setValue(e.target.value);
              if (error) setError(false);
            }}
            onKeyDown={onKeyDown}
            style={{
              width: "100%",
              padding: "11px 13px",
              fontSize: 14,
              background: "var(--bg-0)",
              color: "var(--fg-0)",
              border: `1px solid ${error ? "var(--err)" : "var(--line)"}`,
              borderRadius: "var(--radius)",
              outline: "none",
            }}
          />
          {error && (
            <div style={{ fontSize: 12, color: "var(--err)" }}>{txt.error}</div>
          )}
        </div>

        <button
          onClick={submit}
          style={{
            width: "100%",
            padding: "11px 13px",
            fontSize: 14,
            fontWeight: 600,
            background: "var(--accent)",
            color: "var(--accent-fg)",
            border: 0,
            borderRadius: "var(--radius)",
            cursor: "pointer",
          }}
        >
          {txt.submit}
        </button>
      </div>

      <style>{`
        @keyframes loginShake {
          0%, 100% { transform: translateX(0); }
          20% { transform: translateX(-8px); }
          40% { transform: translateX(8px); }
          60% { transform: translateX(-6px); }
          80% { transform: translateX(6px); }
        }
      `}</style>
    </div>
  );
}