"use client";

import { Button } from "@/components/ui/button";
import { Facebook, Github, Twitter, Mail, Menu } from "lucide-react";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";

import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import Link from "next/link";

const config = {
  theme: {
    gradient: {
      color1: "rgba(173, 216, 230, 0.35)",
      color2: "rgba(255, 182, 193, 0.4)",
    },
  },
  content: {
    title1: "Welcome Back!",
    title2: " Lorem ipsum dolor sit, amet consectetur adipisicing elit.",
    headerLink: [
      { id: 1, title: "Home", link: "#" },
      { id: 2, title: "About", link: "#" },
      { id: 3, title: "Blog", link: "#" },
      { id: 4, title: "Contact", link: "#" },
    ],
  },
};

const formSchema = z.object({
  email: z.email({ message: "Enter valid email please!" }),
  password: z.string().min(8).max(50),
});

const BackgroundGradient = () => {
  const bgClass =
    "radial-gradient(circle at 30% 70%, " +
    config.theme.gradient.color1 +
    ", transparent 60%), radial-gradient(circle at 70% 30%, " +
    config.theme.gradient.color2 +
    ", transparent 60%)";

  return (
    <div
      className="absolute inset-0 -z-50"
      style={{
        backgroundImage: bgClass,
      }}
    />
  );
};

const SocialLogin = () => {
  const buttons = [
    {
      id: 1,
      icon: <Mail size={16} aria-hidden="true" />,
      link: "https://emonui.vercel.app",
    },
    {
      id: 2,
      icon: <Facebook size={16} aria-hidden="true" />,
      link: "https://emonui.vercel.app",
    },
    {
      id: 3,
      icon: <Twitter size={16} aria-hidden="true" />,
      link: "https://emonui.vercel.app",
    },
    {
      id: 4,
      icon: <Github size={16} aria-hidden="true" />,
      link: "https://emonui.vercel.app",
    },
  ];
  return (
    <div className="inline-flex flex-wrap gap-2 text-rose-400">
      {buttons.map((button) => {
        return (
          <Link key={button.id} href={button.link}>
            <Button
              variant="outline"
              size="icon"
              className="bg-transparent hover:cursor-pointer hover:bg-transparent border dark:border-white/10 border-black/10"
            >
              {button.icon}
            </Button>
          </Link>
        );
      })}
    </div>
  );
};

const LoginFrom = () => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      email: "",
      password: "",
    },
  });

  function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values);
  }

  const inputClass = "border-rose-400 focus:border-rose-400 ring-0";

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email Address</FormLabel>
              <FormControl>
                <Input
                  placeholder="emonblocks@mail.com"
                  {...field}
                  className={inputClass}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="password"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Password</FormLabel>
              <FormControl>
                <Input
                  type="password"
                  placeholder="********"
                  {...field}
                  className={inputClass}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <div className="flex justify-between mt-3 items-center">
          <Button
            type="submit"
            size={"lg"}
            className="rounded-full border border-rose-400 bg-rose-400 text-white hover:bg-transparent hover:text-rose-400 hover:cursor-pointer transition ease-in"
          >
            Login
          </Button>
          <Link href={"#"} className="text-blue-400">
            Don&#39;t have an account?
          </Link>
        </div>
      </form>
    </Form>
  );
};

const Header = () => {
  return (
    <div className="py-4 border-b dark:border-white/10 border-black/10">
      <div className="container">
        <div className="flex justify-between items-center">
          <div>
            <span className="font-bold text-lg text-rose-400">
              Company Name
            </span>
          </div>
          <div className="hidden md:block">
            <div className="flex items-center gap-4">
              {config.content.headerLink.map((link) => {
                return (
                  <Link
                    key={link.id}
                    href={link.link}
                    className="hover:text-rose-400"
                  >
                    {link.title}
                  </Link>
                );
              })}
              <Button className="rounded-full bg-transparent border border-rose-400 text-rose-400 hover:bg-rose-400 hover:text-white hover:cursor-pointer transition ease-in">
                Get Started
              </Button>
            </div>
          </div>
          <div className="block md:hidden">
            <Button
              variant="outline"
              size="icon"
              className="bg-transparent hover:cursor-pointer hover:bg-transparent"
            >
              <Menu />
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

const Footer = () => {
  return (
    <div className="py-4 border-t dark:border-white/10 border-black/10">
      <div className="container">
        <div className="flex justify-between items-center">
          <h1>@Copyright 2025</h1>
          <span className="text-rose-400">#emon_blocks</span>
        </div>
      </div>
    </div>
  );
};

const LoginOne = () => {
  return (
    <>
      <div className="min-h-screen w-full relative">
        <BackgroundGradient />
        <div className="flex flex-col justify-between min-h-screen">
          <Header />

          <div className="flex justify-center items-center flex-col h-full">
            <div className="max-w-3xl p-10 rounded-xl space-y-4">
              <span className="dark:bg-gradient-to-r from-white to-rose-400 text-4xl bg-clip-text text-transparent font-bold bg-rose-400">
                {config.content.title1}
              </span>

              <h5>{config.content.title2}</h5>
              <SocialLogin />
              <div className="mt-3">
                <LoginFrom />
              </div>
            </div>
          </div>

          <Footer />
        </div>
      </div>
    </>
  );
};

export default LoginOne;