// DEMO MOCK LOGIN — a client-only stand-in for the real Microsoft device-code
// login, used for the boss presentation. Enabled by `window.AL_MOCK_LOGIN`
// (set in "Assembly Line.html"). It validates the typed credentials against a
// made-up constant, then persists a session marker in localStorage so a reload
// keeps the user signed in ("check for that localStorage object and let him in").
//
// THIS IS NOT REAL AUTH — it's a visual gate for the demo. For it to work the
// viewer must run OPEN (no MS_CLIENT_ID / AL_SESSION_SECRET), so the server
// serves data without a session cookie. To restore the Microsoft login, set
// window.AL_MOCK_LOGIN = false in "Assembly Line.html" (or delete the flag).
const { useState: useStateMock } = React;

// ── The made-up credentials for tomorrow's demo. ────────────────────────────
// Tell the boss these. Change them to whatever you like. He signs in AS this
// username (it shows in the "Signed in as …" badge).
const MOCK_CREDENTIALS = { username: "mbj@fellow.dk", password: "fellow2026" };
const MOCK_AUTH_KEY = "al-mock-auth";

// Read a previously-stored mock session, so a page reload stays signed in.
// Exposed on window so main.jsx can consult it before rendering.
window.readMockAuth = function readMockAuth() {
  try {
    const raw = localStorage.getItem(MOCK_AUTH_KEY);
    if (!raw) return null;
    const parsed = JSON.parse(raw);
    return parsed && parsed.identity ? parsed.identity : null;
  } catch {
    return null;
  }
};

// Clear the mock session (so a future "sign out" or manual reset works).
window.clearMockAuth = function clearMockAuth() {
  try { localStorage.removeItem(MOCK_AUTH_KEY); } catch { /* ignore */ }
};

function MockLogin({ onSignIn }) {
  const [username, setUsername] = useStateMock("");
  const [password, setPassword] = useStateMock("");
  const [error, setError] = useStateMock(null);

  function submit(e) {
    if (e) e.preventDefault();
    const ok = username.trim() === MOCK_CREDENTIALS.username && password === MOCK_CREDENTIALS.password;
    if (!ok) {
      setError("Invalid username or password.");
      return;
    }
    const identity = { name: username.trim(), username: username.trim() };
    try {
      localStorage.setItem(MOCK_AUTH_KEY, JSON.stringify({ identity, at: Date.now() }));
    } catch { /* private mode / storage full — still let them in for the demo */ }
    setError(null);
    onSignIn(identity);
  }

  return (
    <div className="min-h-[70vh] flex items-center justify-center">
      <form onSubmit={submit} className="max-w-md w-full rounded-2xl border border-neutral-200 p-8 shadow-sm">
        <div className="flex items-center justify-center gap-2 mb-2">
          <div className="bg-neutral-900 p-1.5 rounded-lg text-white shadow-inner">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
              <rect x="6.5" y="3" width="11" height="12" rx="1.4" />
              <g transform="translate(9.2 4.6) scale(0.04)" fill="currentColor" stroke="none">
                <path d="M138.12 0V55.41L0 122.09V66.68L138.12 0Z" />
                <path d="M138.12 80.3604V135.8L58.36 174.28V231.41L0 203.25V147.07L138.12 80.3604Z" />
              </g>
              <line x1="2" y1="18.5" x2="22" y2="18.5" />
              <circle cx="6" cy="21" r="1.4" />
              <circle cx="12" cy="21" r="1.4" />
              <circle cx="18" cy="21" r="1.4" />
            </svg>
          </div>
          <h1 className="text-xl font-semibold">Fellow Assembly Line</h1>
        </div>
        <p className="text-neutral-500 mb-6 text-center">Sign in to continue.</p>

        <label className="block text-sm font-medium text-neutral-700 mb-1">Username</label>
        <input
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          autoFocus
          autoComplete="username"
          className="w-full mb-4 px-3 py-2.5 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
          placeholder="name@fellow.dk"
        />

        <label className="block text-sm font-medium text-neutral-700 mb-1">Password</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          autoComplete="current-password"
          className="w-full mb-4 px-3 py-2.5 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
          placeholder="Password"
        />

        {error && <p className="text-red-600 text-sm mb-4">{error}</p>}

        <button
          type="submit"
          className="w-full px-5 py-2.5 rounded-lg bg-[#2F2F2F] text-white font-medium hover:bg-black active:scale-[0.99] transition"
        >
          Sign in
        </button>
      </form>
    </div>
  );
}

window.MockLogin = MockLogin;