"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import * as React from "react";
import { Button, Card, CardHint, CardTitle, ErrorState, Field } from "@agy/ui";
import { ApiError } from "@/lib/api";
import { useSession } from "@/lib/session";

export default function LoginPage() {
  const router = useRouter();
  const { login, user, ready } = useSession();
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [error, setError] = React.useState<string | null>(null);
  const [submitting, setSubmitting] = React.useState(false);

  React.useEffect(() => {
    if (ready && user) router.replace("/dashboard");
  }, [ready, user, router]);

  const onSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    setError(null);
    setSubmitting(true);
    try {
      await login(email, password);
      router.replace("/dashboard");
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "ورود ناموفق بود.");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="flex min-h-screen items-center justify-center p-5">
      <Card className="anim-rise w-full max-w-sm">
        <CardTitle>ورود به Smart Organization</CardTitle>
        <CardHint>با ایمیل و رمز عبور خود وارد شوید.</CardHint>

        <form onSubmit={onSubmit} className="mt-5 flex flex-col gap-4">
          <Field
            label="ایمیل"
            type="email"
            dir="ltr"
            autoComplete="email"
            required
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
          <Field
            label="رمز عبور"
            type="password"
            dir="ltr"
            autoComplete="current-password"
            required
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />

          {error && <ErrorState title="ورود ناموفق" message={error} />}

          <Button type="submit" loading={submitting}>
            ورود
          </Button>
        </form>

        <p className="mt-4 text-xs text-slate-400">
          حساب ندارید؟{" "}
          <Link href="/signup" className="text-accent hover:underline">
            ثبت‌نام کنید
          </Link>
        </p>
      </Card>
    </div>
  );
}