"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { signIn } from "@/lib/auth-client";

export default function LoginPage() {
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setLoading(true);
    setError(null);

    const { error: signInError } = await signIn.email({
      email,
      password,
      callbackURL: "/me",
    });

    if (signInError) {
      setError(signInError.message ?? "Đăng nhập không thành công");
      setLoading(false);
      return;
    }

    router.push("/me");
    router.refresh();
  }

  async function handleGoogle() {
    await signIn.social({ provider: "google", callbackURL: "/me" });
  }

  return (
    <div className="mx-auto flex min-h-screen w-full max-w-md flex-col justify-center px-4 py-16">
      <div className="rounded-2xl border border-stone-800 bg-stone-950/60 p-8 shadow-2xl backdrop-blur">
        <h1 className="font-serif text-3xl font-semibold text-stone-100">Đăng nhập</h1>
        <p className="mt-2 text-sm text-stone-400">Quay lại với lá số của bạn</p>

        <form onSubmit={handleSubmit} className="mt-6 space-y-4">
          <div>
            <label htmlFor="email" className="mb-1.5 block text-sm text-stone-300">
              Email
            </label>
            <input
              id="email"
              type="email"
              required
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="w-full rounded-md border border-stone-700 bg-stone-900 px-4 py-2.5 text-stone-100 placeholder:text-stone-500 focus:border-amber-500 focus:ring-2 focus:ring-amber-500/20 focus:outline-none"
              placeholder="ban@example.com"
              autoComplete="email"
            />
          </div>

          <div>
            <label htmlFor="password" className="mb-1.5 block text-sm text-stone-300">
              Mật khẩu
            </label>
            <input
              id="password"
              type="password"
              required
              minLength={8}
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="w-full rounded-md border border-stone-700 bg-stone-900 px-4 py-2.5 text-stone-100 placeholder:text-stone-500 focus:border-amber-500 focus:ring-2 focus:ring-amber-500/20 focus:outline-none"
              placeholder="Tối thiểu 8 ký tự"
              autoComplete="current-password"
            />
          </div>

          {error ? (
            <div className="rounded-md border border-red-900 bg-red-950/40 px-3 py-2 text-sm text-red-300">
              {error}
            </div>
          ) : null}

          <button
            type="submit"
            disabled={loading}
            className="w-full rounded-md bg-amber-500 py-3 font-semibold text-stone-950 transition hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-60"
          >
            {loading ? "Đang xử lý…" : "Đăng nhập"}
          </button>
        </form>

        <div className="my-6 flex items-center gap-3 text-xs text-stone-500">
          <div className="h-px flex-1 bg-stone-800" />
          <span>HOẶC</span>
          <div className="h-px flex-1 bg-stone-800" />
        </div>

        <button
          type="button"
          onClick={handleGoogle}
          className="flex w-full items-center justify-center gap-2 rounded-md border border-stone-700 bg-stone-900 py-2.5 text-sm text-stone-200 transition hover:border-amber-500/40"
        >
          <svg width="16" height="16" viewBox="0 0 24 24">
            <path
              fill="#fff"
              d="M21.35 11.1H12v3.2h5.35c-.23 1.4-1.7 4.1-5.35 4.1-3.22 0-5.84-2.66-5.84-5.95s2.62-5.95 5.84-5.95c1.83 0 3.06.78 3.76 1.45l2.56-2.47C16.78 3.74 14.6 2.85 12 2.85 6.78 2.85 2.55 7.08 2.55 12.3S6.78 21.75 12 21.75c6.93 0 9.5-4.86 9.5-7.4 0-.5-.05-.88-.15-1.25z"
            />
          </svg>
          Tiếp tục với Google
        </button>

        <p className="mt-6 text-center text-sm text-stone-400">
          Chưa có tài khoản?{" "}
          <Link href="/register" className="text-amber-400 hover:text-amber-300">
            Đăng ký miễn phí
          </Link>
        </p>
      </div>

      <p className="mt-6 text-center text-xs text-stone-600">
        Bằng việc đăng nhập, bạn đồng ý với{" "}
        <Link href="/terms" className="hover:text-stone-400">
          Điều khoản
        </Link>{" "}
        và{" "}
        <Link href="/privacy" className="hover:text-stone-400">
          Chính sách bảo mật
        </Link>
        .
      </p>
    </div>
  );
}