import { createFileRoute, useNavigate, redirect } from "@tanstack/react-router";
import { useState } from "react";
import { useServerFn } from "@tanstack/react-start";
import { SiteShell } from "@/components/site-shell";
import { authSignIn, authSignUp } from "@/lib/auth.functions";
import { getAuthToken, setAuthToken } from "@/lib/auth/client";

export const Route = createFileRoute("/auth")({
  component: AuthPage,
  beforeLoad: () => {
    if (typeof window === "undefined") return;
    if (getAuthToken()) throw redirect({ to: "/admin" });
  },
});

function AuthPage() {
  const navigate = useNavigate();
  const doSignIn = useServerFn(authSignIn);
  const doSignUp = useServerFn(authSignUp);
  const [mode, setMode] = useState<"signin" | "signup">("signin");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    setLoading(true);
    try {
      const session =
        mode === "signin"
          ? await doSignIn({ data: { email, password } })
          : await doSignUp({ data: { email, password } });

      setAuthToken(session.access_token);
      navigate({ to: "/admin" });
    } catch (e: any) {
      setError(e.message);
    } finally {
      setLoading(false);
    }
  }

  return (
    <SiteShell>
      <div className="max-w-md mx-auto bg-surface border border-white/5 rounded-2xl p-8">
        <h1 className="text-2xl font-display text-white mb-2">
          {mode === "signin" ? "Вход в админку" : "Регистрация"}
        </h1>
        <p className="text-text-dim text-sm mb-6">
          Первый зарегистрированный пользователь становится администратором.
        </p>
        <form onSubmit={onSubmit} className="space-y-4">
          <div>
            <label className="text-xs uppercase tracking-widest text-text-muted">Email</label>
            <input
              type="email"
              required
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="w-full mt-1 bg-bg border border-white/10 rounded-lg py-2 px-3 focus:outline-none focus:border-accent"
            />
          </div>
          <div>
            <label className="text-xs uppercase tracking-widest text-text-muted">Пароль</label>
            <input
              type="password"
              required
              minLength={6}
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="w-full mt-1 bg-bg border border-white/10 rounded-lg py-2 px-3 focus:outline-none focus:border-accent"
            />
          </div>
          {error && <p className="text-sm text-red-400">{error}</p>}
          <button
            type="submit"
            disabled={loading}
            className="w-full py-3 bg-accent hover:bg-accent/90 text-white font-bold uppercase tracking-wider rounded-lg disabled:opacity-50"
          >
            {loading ? "..." : mode === "signin" ? "Войти" : "Создать аккаунт"}
          </button>
        </form>
        <button
          type="button"
          onClick={() => setMode(mode === "signin" ? "signup" : "signin")}
          className="mt-4 text-sm text-text-dim hover:text-neon"
        >
          {mode === "signin" ? "Нет аккаунта? Зарегистрироваться" : "Уже есть аккаунт? Войти"}
        </button>
      </div>
    </SiteShell>
  );
}