import { useEffect } from "react";
import { Layers, LogIn } from "lucide-react";
import { useNavigate, useSearch } from "@tanstack/react-router";

import { useMe } from "@/client/auth/use-me";
import { buildLoginUrl } from "@/client/auth/login-redirect";
import {
  BUTTON_BASE_CLASSES,
  BUTTON_SIZE_CLASSES,
  BUTTON_VARIANT_CLASSES,
} from "@/client/components/ui/button-classes";
import { paths } from "@/client/lib/paths";

export function LoginPage() {
  const search = useSearch({ from: paths.login });
  const navigate = useNavigate();
  const me = useMe();

  useEffect(() => {
    if (me.data) {
      navigate({ to: search.return_to ?? paths.home, replace: true });
    }
  }, [me.data, navigate, search.return_to]);

  return (
    <div className="mx-auto flex max-w-md flex-col items-center gap-8 pt-12 sm:pt-24">
      <Layers className="h-16 w-16 text-accent-400" strokeWidth={1.5} aria-hidden="true" />
      <div className="space-y-3 text-center">
        <h1 className="font-display text-4xl font-extrabold tracking-tight text-zinc-50 sm:text-5xl">dab</h1>
        <p className="text-base text-zinc-400">
          Your DAV-native data home — calendars, contacts, and files on one opaque host, accessible by any standards
          client.
        </p>
      </div>
      <a
        href={buildLoginUrl(search.return_to)}
        className={`${BUTTON_BASE_CLASSES} ${BUTTON_SIZE_CLASSES.md} ${BUTTON_VARIANT_CLASSES.primary} w-full`}
      >
        <LogIn className="h-4 w-4" aria-hidden="true" />
        Sign in with tessera
      </a>
      <p className="text-xs text-zinc-500">
        You will be redirected to tessera and brought back here once authenticated.
      </p>
    </div>
  );
}