import { useState } from "react";
import { Link, useLoaderData, useNavigate } from "react-router";
import { startAuthentication, startRegistration } from "@simplewebauthn/browser";
import type { Route } from "./+types/login";
import { ensureSetupToken, isLoggedIn } from "~/lib/auth.server";

export async function loader({ request }: Route.LoaderArgs) {
  ensureSetupToken();
  const url = new URL(request.url);
  const next = url.searchParams.get("next");
  return {
    loggedIn: isLoggedIn(request),
    token: url.searchParams.get("token"),
    // Only allow same-site relative redirects
    next: next && /^\/(?![/\\])/.test(next) ? next : "/favorites",
  };
}

async function postJson(path: string, body: unknown) {
  const res = await fetch(path, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body),
  });
  const data = await res.json();
  if (!res.ok || data.ok === false) throw new Error(data.error ?? `HTTP ${res.status}`);
  return data;
}

export default function Login() {
  const { loggedIn, token, next } = useLoaderData<typeof loader>();
  const navigate = useNavigate();
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [label, setLabel] = useState("");
  const canRegister = loggedIn || !!token;

  async function run(fn: () => Promise<void>) {
    setBusy(true);
    setError(null);
    try {
      await fn();
      navigate(next);
    } catch (e) {
      const err = e as Error;
      setError(err.name === "NotAllowedError" ? "キャンセルされました" : err.message);
    } finally {
      setBusy(false);
    }
  }

  const login = () =>
    run(async () => {
      const optionsJSON = await postJson("/api/auth/login-options", {});
      const response = await startAuthentication({ optionsJSON });
      await postJson("/api/auth/login-verify", { response });
    });

  const register = () =>
    run(async () => {
      const optionsJSON = await postJson("/api/auth/register-options", { token });
      const response = await startRegistration({ optionsJSON });
      await postJson("/api/auth/register-verify", { token, response, label: label || null });
    });

  return (
    <div className="min-h-screen bg-gray-950 text-gray-100 flex items-center justify-center px-4">
      <div className="w-full max-w-sm rounded-xl border border-gray-800 bg-gray-900 p-6 flex flex-col gap-5">
        <Link to="/events" className="text-lg font-bold tracking-tight text-white">
          🎸 ライブに行くしかない
        </Link>

        {!loggedIn && (
          <button
            onClick={login}
            disabled={busy}
            className="rounded-md bg-indigo-600 px-4 py-2.5 text-sm font-medium hover:bg-indigo-500 disabled:opacity-50 transition-colors"
          >
            🔑 パスキーでログイン
          </button>
        )}

        {loggedIn && !token && (
          <p className="text-sm text-gray-300">
            ログイン済みです。{" "}
            <Link to="/favorites" className="text-indigo-400 hover:text-indigo-300 underline">
              お気に入りへ
            </Link>
          </p>
        )}

        {canRegister && (
          <div className="flex flex-col gap-2 border-t border-gray-800 pt-5">
            <p className="text-xs text-gray-400">
              {loggedIn ? "このデバイスのパスキーを追加登録" : "パスキーを新規登録"}
            </p>
            <input
              value={label}
              onChange={(e) => setLabel(e.target.value)}
              placeholder="デバイス名（例: iPhone）"
              className="rounded-md bg-gray-800 border border-gray-700 px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
            />
            <button
              onClick={register}
              disabled={busy}
              className="rounded-md bg-gray-700 px-4 py-2 text-sm font-medium hover:bg-gray-600 disabled:opacity-50 transition-colors"
            >
              パスキーを登録
            </button>
          </div>
        )}

        {error && <p className="text-sm text-red-400">{error}</p>}
      </div>
    </div>
  );
}