"use client"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { zodResolver } from "@hookform/resolvers/zod"
import { Controller, useForm } from "react-hook-form"
import { z } from "zod"
import { ArrowLeft, Eye, EyeOff } from "lucide-react"

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"

const loginSchema = z.object({
  email: z.string().min(1, "Email is required").email("Enter a valid email"),
  password: z.string().min(1, "Password is required"),
  agreeToTerms: z.literal(true, {
    error: "You must agree to the Terms & Condition",
  }),
})

type LoginValues = z.infer<typeof loginSchema>

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>
  )
}

function FacebookIcon() {
  return (
    <svg viewBox="0 0 24 24" className="size-4" fill="#1877F2">
      <path d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.09 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.96h-1.51c-1.49 0-1.95.93-1.95 1.89v2.26h3.32l-.53 3.49h-2.79V24C19.61 23.09 24 18.1 24 12.07Z" />
    </svg>
  )
}

export default function LoginPage() {
  const router = useRouter()
  const [showPassword, setShowPassword] = useState(false)
  const form = useForm<LoginValues>({
    resolver: zodResolver(loginSchema),
    defaultValues: { email: "", password: "", agreeToTerms: true },
  })

  const onSubmit = form.handleSubmit(async (values) => {
    // TODO: wire up to the auth API once it exists
    console.log(values)
    router.push("/dashboard")
  })

  return (
    <div className="grid min-h-screen bg-white md:grid-cols-[60%_40%]">
      <div className="relative hidden flex-col justify-between overflow-hidden bg-[radial-gradient(ellipse_at_bottom_right,var(--color-orange-600),var(--color-rose-950)_60%,var(--color-slate-950))] p-8 md:flex">
        <svg viewBox="0 0 48 32" className="h-10 w-16 fill-white">
          <path d="M24 16c-3-8-11-12-16-8s-3 14 6 14c5 0 8.5-2.5 10-6 1.5 3.5 5 6 10 6 9 0 11-10 6-14s-13 0-16 8Z" />
        </svg>
      </div>

        <div className="flex flex-col justify-center p-8 sm:p-12">
          <div className="flex items-center gap-4">
            <button
              type="button"
              aria-label="Go back"
              className="flex size-10 shrink-0 items-center justify-center text-foreground"
            >
              <ArrowLeft className="size-6" />
            </button>

            <h1 className="text-5xl font-bold tracking-tighter md:text-6xl">Log in</h1>
          </div>
          <p className="mt-4 text-lg text-muted-foreground">
            Don&apos;t have an account?{" "}
            <Link href="#" className="font-semibold text-foreground underline underline-offset-2">
              Create an Account
            </Link>
          </p>

          <form onSubmit={onSubmit} noValidate className="mt-8">
            <FieldGroup>
              <Field data-invalid={!!form.formState.errors.email}>
                <FieldLabel htmlFor="email" className="text-lg font-semibold">
                  Email Address
                </FieldLabel>
                <Input
                  id="email"
                  type="email"
                  autoComplete="email"
                  className="h-14 rounded-full px-5 text-lg"
                  placeholder="john52martinez@gmail.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-lg font-semibold">
                  Password
                </FieldLabel>
                <div className="relative">
                  <Input
                    id="password"
                    type={showPassword ? "text" : "password"}
                    autoComplete="current-password"
                    className="h-14 rounded-full px-5 pr-12 text-lg"
                    placeholder="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-5 flex items-center text-muted-foreground"
                  >
                    {showPassword ? (
                      <EyeOff className="size-5" />
                    ) : (
                      <Eye className="size-5" />
                    )}
                  </button>
                </div>
                <FieldError errors={[form.formState.errors.password]} />
                <div className="flex justify-end">
                  <Link href="#" className="text-lg font-semibold underline underline-offset-2">
                    Forgot Password?
                  </Link>
                </div>
              </Field>

              <div className="flex justify-center">
                <Button
                  type="submit"
                  size="lg"
                  className="h-14 w-72 rounded-full text-lg"
                  disabled={form.formState.isSubmitting}
                >
                  {form.formState.isSubmitting ? "Logging in…" : "Log in"}
                </Button>
              </div>

              <Field data-invalid={!!form.formState.errors.agreeToTerms}>
                <Controller
                  control={form.control}
                  name="agreeToTerms"
                  render={({ field }) => (
                    <label className="flex items-center gap-2 text-lg">
                      <Checkbox
                        checked={field.value}
                        onCheckedChange={(checked) => field.onChange(checked === true)}
                      />
                      <span>
                        I agree to the{" "}
                        <Link href="#" className="font-semibold underline underline-offset-2">
                          Terms &amp; Condition
                        </Link>
                      </span>
                    </label>
                  )}
                />
                <FieldError errors={[form.formState.errors.agreeToTerms]} />
              </Field>
            </FieldGroup>
          </form>

          <div className="my-6 flex items-center gap-3 text-lg text-muted-foreground">
            <div className="h-px flex-1 bg-border" />
            or
            <div className="h-px flex-1 bg-border" />
          </div>

          <div className="grid grid-cols-2 gap-3">
            <Button variant="outline" className="h-13 rounded-full text-lg">
              <GoogleIcon />
              Continue with Google
            </Button>
            <Button variant="outline" className="h-13 rounded-full text-lg">
              <FacebookIcon />
              Continue with Facebook
            </Button>
          </div>
        </div>
      </div>
  )
}