"use client";

import { signIn } from "next-auth/react";
import { useRouter, useSearchParams } from "next/navigation";
import { FormEvent, Suspense, useState } from "react";
import Link from "next/link";

function LoginForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [email, setEmail] = useState("admin@morpay.local");
  const [password, setPassword] = useState("Admin@12345");
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function onSubmit(e: FormEvent) {
    e.preventDefault();
    setLoading(true);
    setError(null);
    const res = await signIn("credentials", {
      email,
      password,
      redirect: false,
    });
    setLoading(false);
    if (res?.error) {
      setError("بيانات الدخول غير صحيحة أو تم تجاوز عدد المحاولات.");
      return;
    }
    router.push(searchParams.get("callbackUrl") || "/dashboard");
    router.refresh();
  }

  return (
    <div className="relative flex min-h-screen items-center justify-center overflow-hidden px-4">
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,#6B2BFF33,transparent_40%),radial-gradient(circle_at_bottom_left,#FDD10033,transparent_35%),linear-gradient(160deg,#F5F2FB,#EFEAF8)]" />
      <form
        onSubmit={onSubmit}
        className="card relative z-10 w-full max-w-md space-y-5 p-8"
      >
        <div className="text-center">
          <div className="text-3xl font-bold text-primary">MorPay</div>
          <div className="mt-1 text-sm text-muted">Finance Desk — تسجيل الدخول</div>
        </div>

        {error && (
          <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
            {error}
          </div>
        )}

        <div>
          <label className="label">البريد الإلكتروني</label>
          <input
            className="field"
            type="email"
            required
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            autoComplete="username"
          />
        </div>
        <div>
          <label className="label">كلمة المرور</label>
          <input
            className="field"
            type="password"
            required
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            autoComplete="current-password"
          />
        </div>

        <button className="btn btn-primary w-full" disabled={loading}>
          {loading ? "جارٍ الدخول..." : "دخول"}
        </button>

        <div className="text-center text-sm">
          <Link href="/forgot-password" className="text-primary font-semibold">
            استعادة كلمة المرور
          </Link>
        </div>
      </form>
    </div>
  );
}

export default function LoginPage() {
  return (
    <Suspense>
      <LoginForm />
    </Suspense>
  );
}