"use client";

import { signIn } from "next-auth/react";
import { BrandLogo } from "@/components/brand/brand-logo";
import { useBrand } from "@/components/providers/brand-provider";
import { useRouter, useSearchParams } from "next/navigation";
import { FormEvent, useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";

export function LoginForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const callbackUrl = searchParams.get("callbackUrl") ?? "/dashboard";
  const { brand, logoUrl } = useBrand();

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

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

    const result = await signIn("credentials", {
      email: email.trim(),
      password,
      redirect: false,
    });

    setLoading(false);

    if (result?.error) {
      setError("بيانات الدخول غير صحيحة أو الحساب غير نشط.");
      return;
    }

    router.push(callbackUrl);
    router.refresh();
  }

  return (
    <Card className="border-border shadow-[var(--shadow)]">
      <CardHeader className="text-center">
        {logoUrl ? (
          <div className="mx-auto mb-2 flex h-12 w-12 items-center justify-center overflow-hidden rounded-lg bg-primary/10">
            <BrandLogo width={40} height={40} imageClassName="h-10 w-10 object-contain" />
          </div>
        ) : null}
        <CardTitle className="text-2xl">{brand.platformName}</CardTitle>
        <CardDescription>{brand.companyName} — تسجيل الدخول</CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label htmlFor="email" className="mb-1 block text-sm font-medium">
              البريد الإلكتروني
            </label>
            <Input
              id="email"
              name="email"
              type="email"
              autoComplete="email"
              required
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              dir="ltr"
            />
          </div>
          <div>
            <label htmlFor="password" className="mb-1 block text-sm font-medium">
              كلمة المرور
            </label>
            <Input
              id="password"
              name="password"
              type="password"
              autoComplete="current-password"
              required
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              dir="ltr"
            />
          </div>
          {error ? (
            <p className="rounded-lg bg-red-500/10 px-3 py-2 text-sm text-red-700 dark:text-red-300" role="alert">
              {error}
            </p>
          ) : null}
          <Button type="submit" className="w-full" disabled={loading}>
            {loading ? "جاري الدخول..." : "دخول"}
          </Button>
        </form>
      </CardContent>
    </Card>
  );
}