"use client";
import {useRef, useState} from "react";
import Image from "next/image";
import useClickOutside from "@/lib/hooks/useclickoutside";
import {sendEmail} from "@/app/actions/sendEmail";

export default function GetStartedModal({isOpen, onClose}) {
  const modalRef = useRef(null);
  const [formState, setFormState] = useState({loading: false, error: null, success: false});
  useClickOutside(modalRef, onClose);

  const handleSubmit = async (formData) => {
    setFormState({loading: true, error: null, success: false});

    try {
      const result = await sendEmail(formData);
      if (result.error) throw new Error(result.error);
      setFormState({loading: false, error: null, success: true});
      setTimeout(onClose, 2000);
    } catch (error) {
      setFormState({loading: false, error: error.message, success: false});
    }
  };

  if (!isOpen) return null;

  return (
    <div className="fixed left-0 top-0 z-50 flex h-full min-h-dvh min-w-full origin-center items-center overflow-y-auto overscroll-contain lg:bg-slate-500/80 lg:p-10 lg:backdrop-blur-sm">
      <div ref={modalRef} className="mx-auto my-auto flex h-dvh max-h-dvh w-full max-w-screen-lg origin-center flex-col overflow-hidden overflow-y-auto overscroll-contain bg-white lg:grid lg:max-h-[600px] lg:min-h-[600px] lg:flex-none lg:grid-cols-7 lg:rounded-3xl">
        <div className="h-72 w-full shrink-0 bg-started bg-cover bg-center p-5 lg:col-span-3 lg:h-full">
          <Image src="/assets/img/logo-verola-white.svg" alt="Verola Logo" width={100} height={20} className="h-5 w-fit " />
        </div>
        <div className="flex flex-col lg:col-span-4 lg:px-10">
          <div className="sticky top-0 flex flex-row items-center justify-between border-b border-slate-300 bg-white px-5 py-5 lg:relative lg:px-0">
            <span className="text-lg font-medium text-slate-800 lg:text-xl">Verola for Business</span>
            <button onClick={onClose} className="w-fit shrink-0">
              <svg fill="currentColor" viewBox="0 0 20 20" className="size-6 shrink-0 text-slate-400 lg:size-7 lg:hover:text-slate-600">
                <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
              </svg>
            </button>
          </div>
          <form action={handleSubmit} className="flex flex-col gap-6 px-5 py-5 text-sm lg:grow lg:px-0">
            <div className="flex flex-col gap-6 lg:grow">
              <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
                {[
                  {label: "Name", placeholder: "Jane Smith", type: "text", name: "business_name", required: true},
                  {label: "Company", placeholder: "Your Company", type: "text", name: "business_company"},
                  {label: "Email", placeholder: "you@example.com", type: "email", name: "business_email", required: true},
                  {label: "Phone Number", placeholder: "+62 8123456789", type: "tel", name: "business_phone", required: true},
                ].map((field, index) => (
                  <div key={index} className="flex flex-col gap-2">
                    <label className="text-xs font-medium">
                      {field.label}
                      {field.required && "*"}
                    </label>
                    <input type={field.type} name={field.name} placeholder={field.placeholder} required={field.required} className="appearance-none rounded-lg border-0 px-3 py-2 outline-none ring-1 ring-inset ring-slate-300 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-green-500" />
                  </div>
                ))}
              </div>

              <div className="flex flex-col gap-2">
                <label className="text-xs font-medium" htmlFor="services">
                  What Do You Need?*
                </label>
                <select name="business_services" required className="appearance-none rounded-lg border-0 bg-transparent bg-select bg-contain bg-[right] bg-no-repeat px-3 py-2 outline-none ring-1 ring-inset ring-slate-300 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-green-500">
                  <option value="Workspace Consultation">Workspace Consultation</option>
                  <option value="Custom Order">Custom Order</option>
                  <option value="Request A Quote">Request A Quote</option>
                </select>
              </div>

              <div className="flex flex-col gap-3">
                <label className="text-xs font-medium" htmlFor="">
                  Quantity*
                </label>
                <div className="flex flex-col gap-x-6 gap-y-2 sm:flex-row">
                  {["1-10", "10-100", "More Than 100"].map((option, index) => (
                    <div key={index} className="flex flex-row items-center gap-2">
                      <input type="radio" name="business_quantity" value={option} required defaultChecked={index === 0} className="size-5 appearance-none rounded-md ring-1 ring-inset ring-slate-300 checked:bg-green-500 checked:bg-checked checked:bg-contain checked:ring-0" />
                      <label>{option}</label>
                    </div>
                  ))}
                </div>
              </div>

              <div className="flex flex-col gap-2">
                <label className="text-xs font-medium" htmlFor="contacted">
                  How Do You Prefer to Be Contacted?*
                </label>
                <select name="business_contacted" required className="appearance-none rounded-lg border-0 bg-transparent bg-select bg-contain bg-[right] bg-no-repeat px-3 py-2 outline-none ring-1 ring-inset ring-slate-300 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-green-500">
                  <option value="WhatsApp Chat">WhatsApp Chat</option>
                  <option value="Phone Call">Phone Call</option>
                  <option value="Email">Email</option>
                </select>
              </div>
            </div>

            <div className="flex justify-end py-2">
              <div className="flex flex-col items-end gap-2">
                {formState.error && <p className="text-red-500 text-sm">{formState.error}</p>}
                {formState.success && <p className="text-green-500 text-sm">Message sent successfully!</p>}
                <button type="submit" disabled={formState.loading} className="group flex h-10 w-fit flex-row items-center gap-2 rounded-lg bg-green-500 px-4 text-sm font-medium text-white transition duration-150 ease-in-out disabled:opacity-50">
                  {formState.loading ? (
                    "Sending..."
                  ) : (
                    <>
                      <span>Submit</span>
                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" className="size-5 transition duration-300 ease-in-out group-hover:translate-x-1">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3" />
                      </svg>
                    </>
                  )}
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}
