"use client"

import { useState } from "react"
import Image from "next/image"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { Eye, EyeOff } from "lucide-react"
import { loginSchema, LoginValues } from "@/lib/validations"

import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

function GoogleIcon() {
  return (
    <svg viewBox="0 0 24 24" className="size-4">
      <path
        fill="#4285F4"
        d="M23.52 12.27c0-.85-.08-1.67-.22-2.45H12v4.64h6.47a5.53 5.53 0 0 1-2.4 3.63v3h3.89c2.27-2.09 3.56-5.17 3.56-8.82Z"
      />
      <path
        fill="#34A853"
        d="M12 24c3.24 0 5.95-1.07 7.93-2.91l-3.89-3c-1.08.73-2.46 1.15-4.04 1.15-3.1 0-5.73-2.09-6.67-4.9H1.32v3.09A12 12 0 0 0 12 24Z"
      />
      <path
        fill="#FBBC05"
        d="M5.33 14.34a7.2 7.2 0 0 1 0-4.68V6.57H1.32a12 12 0 0 0 0 10.86l4.01-3.09Z"
      />
      <path
        fill="#EA4335"
        d="M12 4.77c1.76 0 3.35.6 4.6 1.79l3.45-3.45C17.94 1.19 15.23 0 12 0A12 12 0 0 0 1.32 6.57l4.01 3.09C6.27 6.86 8.9 4.77 12 4.77Z"
      />
    </svg>
  )
}

export default function LoginPage() {
  const router = useRouter()
  const [showPassword, setShowPassword] = useState(false)
  const [remember, setRemember] = useState(false)

  const form = useForm<LoginValues>({
    resolver: zodResolver(loginSchema),
    defaultValues: { email: "", password: "" },
  })

  const onSubmit = form.handleSubmit(async (values) => {
    console.log(values)
    router.push("/dashboard")
  })

  return (
    <div className="relative min-h-screen overflow-hidden">
      {/* Full-page background photo — right side only */}
      <div className="absolute inset-y-0 left-[45%] right-0">
        <Image
          src="/images/loginerps.png"
          alt="ERP Illustration"
          fill
          className="object-contain object-center bg-white"
          priority
        />
      </div>

      {/* Login panel — overlays left side, no hard border with the photo */}
      <main className="relative z-10 flex min-h-screen w-full flex-col justify-center bg-white px-6 py-12 sm:px-12 md:w-[45%]">
        <div className="mb-8 flex justify-center">
          <Link href="/" className="inline-flex items-center">
            <Image src="/images/logo%20(2).png" alt="Hexa ERP" width={300} height={150} />
          </Link>
        </div>

        <div className="text-center">
          <h1 className="text-3xl font-bold text-foreground">Sign in to your account</h1>
          <p className="mt-3 text-base text-muted-foreground">Access your ERP dashboard and manage your business</p>
        </div>

        <form onSubmit={onSubmit} noValidate className="mt-10 space-y-6" aria-describedby="form-errors" aria-live="polite">
          <FieldGroup className="space-y-5">
            <Field data-invalid={!!form.formState.errors.email}>
              <FieldLabel htmlFor="email" className="text-sm font-semibold text-foreground">
                Email Address
              </FieldLabel>
              <Input
                id="email"
                type="email"
                autoComplete="email"
                className="mt-2 h-11 rounded-lg px-4 text-base"
                placeholder="you@example.com"
                aria-invalid={!!form.formState.errors.email}
                {...form.register("email")}
              />
              <FieldError errors={[form.formState.errors.email]} />
            </Field>

            <Field data-invalid={!!form.formState.errors.password}>
              <FieldLabel htmlFor="password" className="text-sm font-semibold text-foreground">
                Password
              </FieldLabel>
              <div className="relative mt-2">
                <Input
                  id="password"
                  type={showPassword ? "text" : "password"}
                  autoComplete="current-password"
                  className="h-11 rounded-lg px-4 pr-11 text-base"
                  placeholder="Enter your password"
                  aria-invalid={!!form.formState.errors.password}
                  {...form.register("password")}
                />
                <button
                  type="button"
                  onClick={() => setShowPassword((v) => !v)}
                  aria-label={showPassword ? "Hide password" : "Show password"}
                  className="absolute inset-y-0 right-3 flex items-center text-muted-foreground hover:text-foreground transition-colors"
                >
                  {showPassword ? (
                    <EyeOff className="size-5" />
                  ) : (
                    <Eye className="size-5" />
                  )}
                </button>
              </div>
              <FieldError errors={[form.formState.errors.password]} />
              <div className="flex justify-end mt-1">
                <Link href="/login/forgot" className="text-sm font-medium text-black hover:text-black/70 transition-colors">
                  Forgot password?
                </Link>
              </div>
            </Field>

            <Field>
              <label className="flex items-center gap-3">
                <Checkbox checked={remember} onCheckedChange={(v) => setRemember(v === true)} />
                <span className="text-sm font-medium text-foreground">Remember me</span>
              </label>
            </Field>

            <Button
              type="submit"
              className="w-1/2 mx-auto mt-8 h-12 text-sm font-medium rounded-full bg-black text-white hover:bg-black/90"
              disabled={form.formState.isSubmitting}
            >
              {form.formState.isSubmitting ? "Signing in…" : "Sign in"}
            </Button>

          </FieldGroup>
        </form>

        <div id="form-errors" className="sr-only" aria-live="polite">
          {Object.values(form.formState.errors).length > 0 && "There are errors in the form."}
        </div>

        <div className="my-8 flex items-center gap-4">
          <div className="flex-1 h-px bg-border" />
          <span className="text-sm text-muted-foreground font-medium">Or continue with</span>
          <div className="flex-1 h-px bg-border" />
        </div>

        <Button
          type="button"
          className="w-full h-11 text-base font-medium inline-flex items-center justify-center gap-3 rounded-full bg-transparent text-foreground border border-gray-300 hover:bg-black/5"
          onClick={() => {
            alert('Google OAuth flow placeholder')
          }}
          aria-label="Continue with Google"
        >
          <GoogleIcon />
          Continue with Google
        </Button>

        <div className="mt-12 text-center">
          <p className="text-sm text-muted-foreground">
            Don&apos;t have an account? <Link href="#" className="font-semibold text-black hover:text-black/80 transition-colors">Create an account</Link>
          </p>
        </div>
      </main>
    </div>
  )
}
