'use client'
import Input from '@/components/Input'
import { Textarea } from '@/components/ui/textarea'
import { Button } from '@/components/ui/button'
import Layout from '@/hoc/Layout'
import { NextPage } from 'next'
import Image from 'next/image'
import { Call, Location, Sms } from 'iconsax-react'
import { useForm } from 'react-hook-form'
import { ContactUsType } from './types/Types'
import { useContactUs } from './hooks/useContactData'
import { useState } from 'react'
import { toast } from '@/components/Toast'
import { extractErrorMessage } from '@/helpers/errorUtils'

const ContactPage: NextPage = () => {

    const { mutate: contactUs, isPending } = useContactUs()
    const { register, handleSubmit, reset, formState: { errors } } = useForm<ContactUsType>()
    const [successMessage, setSuccessMessage] = useState<string>('')

    const onSubmit = (data: ContactUsType) => {
        contactUs(data, {
            onSuccess: () => {
                toast('پیام شما با موفقیت ارسال شد.', 'success')
                setSuccessMessage('پیام شما با موفقیت ارسال شد.')
                reset()
                setTimeout(() => setSuccessMessage(''), 5000)
            },
            onError: (error) => {
                toast(extractErrorMessage(error), 'error')
            }
        })
    }

    return (
        <Layout>
            <div className='mt-14 px-4 sm:px-8 lg:px-20'>
                <div className='flex flex-col lg:flex-row gap-8 lg:gap-24'>
                    <div className='flex-1'>
                        <h1 className='font-black text-xl sm:text-2xl'>ارتباط با ما</h1>
                        <p className='text-[#7F7F7F] mt-3 font-light text-sm sm:text-base'>اطلاعات تماس و متن پیام خود را وارد کنید</p>

                        {successMessage && (
                            <div className='mt-4 p-3 bg-green-100 border border-green-400 text-green-700 rounded-md'>
                                {successMessage}
                            </div>
                        )}

                        <form onSubmit={handleSubmit(onSubmit)} className='mt-8 sm:mt-12'>
                            <Input
                                placeholder='نام و نام خانوادگی'
                                {...register('fullName', { required: 'نام و نام خانوادگی الزامی است' })}
                            />
                            {errors.fullName && (
                                <p className='text-red-500 text-sm mt-1'>{errors.fullName.message}</p>
                            )}

                            <Input
                                placeholder='شماره تماس یا ایمیل'
                                className='mt-4 sm:mt-6'
                                {...register('email_phone', { required: 'شماره تماس یا ایمیل الزامی است' })}
                            />
                            {errors.email_phone && (
                                <p className='text-red-500 text-sm mt-1'>{errors.email_phone.message}</p>
                            )}

                            <Textarea
                                placeholder='متن پیام'
                                className='mt-4 sm:mt-6 h-[100px] sm:h-[120px]'
                                {...register('message', { required: 'متن پیام الزامی است' })}
                            />
                            {errors.message && (
                                <p className='text-red-500 text-sm mt-1'>{errors.message.message}</p>
                            )}

                            <Button
                                type='submit'
                                className='mt-4 sm:mt-6 w-full'
                                disabled={isPending}
                            >
                                {isPending ? 'در حال ارسال...' : 'ارسال پیام'}
                            </Button>
                        </form>
                    </div>

                    <div className='flex-1'>
                        <Image
                            src='/images/map.png'
                            alt='contact'
                            width={500}
                            height={500}
                            className='w-full h-[300px] sm:h-[400px] lg:h-[450px] object-contain'
                        />
                    </div>
                </div>

                <div className='mt-12 sm:mt-16 lg:mt-20'>
                    <div className='flex flex-col gap-4 sm:gap-6'>
                        <div className='flex items-center gap-3 text-[#7F7F7F]'>
                            <div className='bg-primary w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center flex-shrink-0'>
                                <Call size={16} className='sm:w-5 sm:h-5' color='white' />
                            </div>
                            <div>
                                <div className='font-medium text-sm sm:text-base'>تلفن:</div>
                                <span className='text-black font-semibold text-base sm:text-lg'>67341</span>
                            </div>
                        </div>

                        <div className='flex items-center gap-3 text-[#7F7F7F]'>
                            <div className='bg-green-500 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center flex-shrink-0'>
                                <Sms size={16} className='sm:w-5 sm:h-5' color='white' />
                            </div>
                            <div>
                                <div className='font-medium text-sm sm:text-base'>کدپستی:</div>
                                <span className='text-black font-semibold text-base sm:text-lg'>1136834843</span>
                            </div>
                        </div>

                        <div className='flex items-start gap-3 text-[#7F7F7F]'>
                            <div className='bg-red-500 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center mt-1 flex-shrink-0'>
                                <Location size={16} className='sm:w-5 sm:h-5' color='white' />
                            </div>
                            <div>
                                <div className='font-medium text-sm sm:text-base'>دفتر مرکزی:</div>
                                <span className='text-black font-semibold text-xs sm:text-sm leading-relaxed'>تهران، میدان امام خمینی، خیابان فردوسی، خیابان سرهنگ سخائی نبش کوچه بهنیا، پلاک 40، طبقه چهارم، واحد 12</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </Layout>
    )
}

export default ContactPage