"use client"

import { CheckSVG, EmailCTAImage } from '@/assets/svg'
import { metaTitles } from '@/components/metaData/metaTitles'
import { Button } from '@/components/ui/buttons/Button'
import { CustomCard } from '@/components/ui/cards'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { H5, H6, S, } from '@/components/ui/typography'
import { NewsLetter } from '@/models/NewsLetter'
import { useTranslations } from 'next-intl'

import React, { FormEvent, useState } from 'react'

const EmailCTASection = ({mini}:{mini?:boolean}) => {
    const t = useTranslations()
    const [error, setError] = useState<string | null>(null)
    const [isSubmitting, setIsSubmitting] = useState(false)
    const [isSuccess, setIsSuccess] = useState(false)

    async function onSubmit(event: FormEvent<HTMLFormElement>) {
        event.preventDefault()
        setIsSubmitting(true)
        setError(null)

        const formData = new FormData(event.currentTarget)
        const email = formData.get("email") as string
        
        if (!email) {
            setError(t("Email is required"))
            setIsSubmitting(false)
            return
        }

        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
            setError(t("Please enter a valid email address"))
            setIsSubmitting(false)
            return
        }

        try {
            const response = await NewsLetter.post({ email })
            console.log("Newsletter subscription successful:", response)
            setIsSuccess(true)
        } catch (error) {
            console.error("Newsletter subscription failed:", error)
            setError(t("Subscription failed Please try again later"))
        } finally {
            setIsSubmitting(false)
        }
    }

    if (isSuccess) {
        return (
            <CustomCard className='flex flex-col lg:flex-row items-center gap-10 bg-white border-none p-6 w-full lg:w-[845px] mx-auto'>
                {!mini &&  <CustomImage pageTitle={metaTitles?.defaultMeta_Title} src={EmailCTAImage} alt='Newsletter' className='w-[175px] h-[327px] max-lg:h-[175px] object-cover rounded-md' />}
                <div className='flex flex-col items-start gap-4 max-lg:gap-y-6'>
                    <H5>{t("Thank you for subscribing!")}</H5>
                    <H6 className='!font-normal text-muted-foreground'>
                        {t("You've been added to our newsletter list Stay tuned for updates!")}
                    </H6>
                </div>
            </CustomCard>
        )
    }

    return (
        <CustomCard className='flex flex-col lg:flex-row items-center gap-10 bg-white border-none p-6 w-full lg:w-[845px] mx-auto'>
           {!mini &&  <CustomImage pageTitle={metaTitles?.defaultMeta_Title} src={EmailCTAImage} alt='Newsletter' className='w-[175px] h-[280px] max-lg:h-[175px] object-cover rounded-md' />}
            <div className='flex flex-col items-start gap-4 max-lg:gap-y-6'>
                <H5 className=''>{t("Stay Ahead with Dadycar!")}</H5>
                <H6 className={`!font-normal text-muted-foreground ${mini && "text-sm"}`}>{t("Subscribe to our newsletter and get exclusive insights, fleet management tips, and the latest updates—delivered straight to your inbox!")}</H6>
                {!mini &&
                <div className='flex flex-col gap-1'>
                    <div className='flex items-center gap-2'>
                        <CheckSVG className="text-white fill-[#4FB277] w-6 h-6" />
                        <S className='!font-normal'>{t("Stay informed about new features")}</S>
                    </div>
                    <div className='flex items-center gap-2'>
                        <CheckSVG className="text-white fill-[#4FB277] w-6 h-6" />
                        <S className='!font-normal'>{t("Get expert advice & best practices")}</S>
                    </div>
                </div>
                }

                <div className='flex items-center gap-4 w-full'>
                    <form onSubmit={onSubmit} className={`flex  ${mini ? "flex-col" : "flex-col lg:flex-row"} items-center w-full gap-2 gap-y-4`}>
                        <div className={`w-full relative ${mini ? " lg:w-[240px]" : " lg:w-[350px]"}`}>
                            <input 
                                name="email" 
                                placeholder={"schirano@gmail.com"} 
                                className={`w-full border rounded-sm px-3 p-2 text-start outline-none ${
                                    error ? 'border-red-500' : 'border-gray-300'
                                }`}
                            />
                            {error && (
                                <p className={`text-red-500 text-sm mt-1 ${!mini && "absolute"} top-10 left-1`}>{error}</p>
                            )}
                        </div>
                        <Button 
                            url='' 
                            className={` !font-normal ${mini ? "w-full" : "w-fit"}`} 
                            disabled={isSubmitting}
                        >
                            {isSubmitting ? t("Subscribing") : t("Join now")}
                        </Button>
                    </form>
                </div>
            </div>
        </CustomCard>
    )
}

export default EmailCTASection