import { zodResolver } from "@hookform/resolvers/zod";
import { ArrowLeft, KeyRound } from "lucide-react";
import { useForm } from "react-hook-form";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { z } from "zod";
import { useSession } from "../app/store/session";
import { Button } from "../shared/ui/Button";
import { Input } from "../shared/ui/Field";

const schema = z.object({
  identifier: z.string().min(3, "Введите логин или почту"),
  password: z.string().min(6, "Минимум 6 символов"),
});

export function LoginPage() {
  const login = useSession((state) => state.login);
  const navigate = useNavigate();
  const location = useLocation();
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm({
    resolver: zodResolver(schema),
    defaultValues: { identifier: "demo_admin", password: "demo_password" },
  });

  const onSubmit = async (data) => {
    await login(data);
    const state = location.state;
    navigate(state?.from ?? "/cabinet", { replace: true });
  };

  return (
    <div className="grid min-h-screen bg-paper lg:grid-cols-2">
      <div className="hidden bg-primary p-12 text-white lg:flex lg:flex-col lg:justify-between">
        <Link className="font-serif text-2xl" to="/">
          ДГТУ МЕДИА
        </Link>
        <blockquote className="max-w-xl font-serif text-4xl leading-tight">
          «Знание становится частью культуры, когда им можно делиться».
        </blockquote>
        <p className="text-sm text-white/50">Информационная система управления медиаконтентом</p>
      </div>
      <div className="flex items-center justify-center p-5 sm:p-10">
        <div className="w-full max-w-md">
          <Link className="mb-10 inline-flex items-center gap-2 text-sm text-muted hover:text-primary" to="/">
            <ArrowLeft className="size-4" /> Вернуться на портал
          </Link>
          <div className="grid size-12 place-items-center rounded-md bg-accent-soft text-accent">
            <KeyRound className="size-6" />
          </div>
          <h1 className="mt-6 font-serif text-4xl">Вход в систему</h1>
          <p className="mt-3 leading-7 text-muted">
            Используйте демо-логин backend или тестовую почту роли.
          </p>
          <form className="mt-8 grid gap-5" noValidate onSubmit={handleSubmit(onSubmit)}>
            <Input
              label="Логин или почта"
              error={errors.identifier?.message}
              {...register("identifier")}
            />
            <Input
              label="Пароль"
              type="password"
              error={errors.password?.message}
              {...register("password")}
            />
            <Button className="mt-2 w-full" type="submit" loading={isSubmitting}>
              Войти
            </Button>
          </form>
          <div className="mt-7 rounded-lg border border-line bg-surface p-4 text-xs leading-6 text-muted">
            <b className="text-ink">Демо-вход:</b> demo_admin / demo_password. Также поддерживаются
            user@dstu.ru, editor@dstu.ru, moderator@dstu.ru и admin@dstu.ru.
          </div>
        </div>
      </div>
    </div>
  );
}
