"use client";

import * as React from "react";
import { signIn } from "next-auth/react";
import { useRouter, useSearchParams } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card } from "@/components/ui/card";
import { Snowflake, Loader2, ShieldCheck, ArrowRight } from "lucide-react";
import Link from "next/link";

export default function AdminLoginPage() {
  const router = useRouter();
  const params = useSearchParams();
  const callbackUrl = params.get("callbackUrl") || "/admin";
  const [email, setEmail] = React.useState("admin@admin.com");
  const [password, setPassword] = React.useState("");
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState("");

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError("");
    const res = await signIn("credentials", { email, password, redirect: false });
    setLoading(false);
    if (res?.error) {
      setError("Invalid email or password");
    } else if (res?.ok) {
      router.push(callbackUrl);
      router.refresh();
    }
  };

  return (
    <div className="min-h-screen grid lg:grid-cols-2">
      <div className="hidden lg:flex flex-col justify-between navy-bg text-white p-12 relative overflow-hidden">
        <div className="absolute inset-0 grid-pattern opacity-30" />
        <div className="absolute -bottom-32 -right-32 size-96 rounded-full bg-[var(--brand-royal)]/30 blur-3xl" />
        <div className="relative">
          <Link href="/" className="flex items-center gap-3">
            <div className="grid place-items-center size-12 rounded-xl brand-gradient">
              <Snowflake className="size-6" />
            </div>
            <div className="leading-tight">
              <div className="font-extrabold">AL-HASAN ENGINEERING</div>
              <div className="text-[10px] tracking-[0.18em] text-white/50 uppercase">AHE Services · Admin</div>
            </div>
          </Link>
        </div>
        <div className="relative">
          <h2 className="text-4xl font-extrabold leading-tight text-balance">
            Manage your HVAC business, all in one place.
          </h2>
          <p className="mt-4 text-white/70 text-lg leading-relaxed max-w-md">
            Services, projects, leads, blog, media and SEO — fully controlled from a premium dashboard.
          </p>
          <div className="mt-8 flex items-center gap-2 text-sm text-white/60">
            <ShieldCheck className="size-4 text-[var(--brand-cyan)]" /> Secure admin access · Role protected
          </div>
        </div>
        <div className="relative text-xs text-white/40">© {new Date().getFullYear()} AHE Services</div>
      </div>

      <div className="flex items-center justify-center p-6 sm:p-12 bg-muted/30">
        <div className="w-full max-w-sm">
          <div className="lg:hidden mb-8 flex items-center gap-3">
            <div className="grid place-items-center size-11 rounded-xl brand-gradient text-white">
              <Snowflake className="size-5" />
            </div>
            <div className="font-extrabold">AHE Services · Admin</div>
          </div>
          <h1 className="text-2xl font-extrabold">Welcome back</h1>
          <p className="mt-1.5 text-muted-foreground text-sm">Sign in to access your admin dashboard.</p>

          <form onSubmit={onSubmit} className="mt-7 space-y-4">
            <div className="space-y-1.5">
              <Label htmlFor="email">Email</Label>
              <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required autoComplete="email" />
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="password">Password</Label>
              <Input id="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required autoComplete="current-password" placeholder="••••••••" />
            </div>
            {error && <div className="text-sm text-destructive bg-destructive/10 px-3 py-2 rounded-md">{error}</div>}
            <Button type="submit" disabled={loading} className="w-full brand-gradient text-white">
              {loading ? <><Loader2 className="size-4 mr-2 animate-spin" /> Signing in...</> : <>Sign In <ArrowRight className="size-4 ml-1" /></>}
            </Button>
          </form>

          <Card className="mt-6 p-4 bg-muted/50 border-dashed">
            <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1">Default Credentials</div>
            <div className="text-sm text-foreground/80">Email: <code className="font-mono">admin@admin.com</code></div>
            <div className="text-sm text-foreground/80">Password: <code className="font-mono">admin456</code></div>
          </Card>

          <Link href="/" className="mt-6 block text-center text-sm text-muted-foreground hover:text-[var(--brand-royal)]">← Back to website</Link>
        </div>
      </div>
    </div>
  );
}