import { Add, Calendar, CallCalling, Edit, Location, Map1, MessageMinus, Profile, Setting2, Sms } from 'iconsax-react'
import { FC } from 'react'
import { Link, useNavigate, useParams } from 'react-router-dom'
import { useGetMyCompany } from '../home/hooks/useHomeData'
import moment from 'moment-jalaali'
import Button from '../../components/Button'
import { buildPath } from '../../helpers/utils'
import { Pages } from '../../config/Pages'
import MyProduct from './components/MyProduct'
const CompanyDetail: FC = () => {

    const { slug } = useParams()
    const { data } = useGetMyCompany()
    const navigate = useNavigate()

    const handleEditClick = () => {
        if (data?.data?.company) {
            console.log('Navigating to edit with company data:', data.data.company);
            navigate(buildPath(`${Pages.request}/${data.data.company.id}`, slug))
        }
    }

    if (data?.data?.company) {
        return (
            <div className='mt-4 pb-20'>
                <img
                    src={data?.data?.company?.coverImageUrl}
                    className='w-full h-[220px] rounded-xl'
                />
                <div className='p-6 bg-white rounded-xl -mt-4 relative'>
                    <div className='flex gap-3'>
                        <img
                            src={data?.data?.company?.profileImageUrl}
                            className='size-14 rounded-xl object-cover'
                        />
                        <div className='flex-1 items-center flex justify-between '>
                            <div className='text-xs'>
                                {data?.data?.company?.name}
                            </div>
                            <div
                                className='flex gap-2 text-[#0047FF] text-xs items-center cursor-pointer'
                                onClick={handleEditClick}
                            >
                                <Edit
                                    size={16}
                                    color='#0047FF'
                                />
                                <div>
                                    ویرایش
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className='flex justify-end items-center gap-1.5 text-xs'>
                        <Map1
                            size={20}
                            color='black'
                        />
                        <div>
                            آدرس در نقشه
                        </div>
                    </div>

                    <div className='mt-5 text-[10px]'>
                        <div className='flex justify-between'>
                            <div className='flex gap-1 items-center'>
                                <Profile
                                    size={18}
                                    color='black'
                                />
                                <div>
                                    مدیرعامل: {data?.data?.company?.chiefExecutiveOfficer}
                                </div>
                            </div>
                            <div className='flex gap-1 items-center'>
                                <Setting2
                                    size={18}
                                    color='black'
                                />
                                <div>
                                    صنعت : {data?.data?.company?.industry?.title}
                                </div>
                            </div>
                        </div>
                        <div className='flex justify-between mt-4'>
                            <div className='flex gap-1 items-center'>
                                <CallCalling
                                    size={18}
                                    color='black'
                                />
                                <div>
                                    شماره تماس : {data?.data?.company?.phone}
                                </div>
                            </div>
                            <div className='flex gap-1 items-center'>
                                <MessageMinus
                                    size={18}
                                    color='black'
                                />
                                <div>
                                    شناسه ملی : {data?.data?.company?.identificationNumber}
                                </div>
                            </div>
                        </div>
                        <div className='flex justify-between mt-4'>
                            <div className='flex gap-1 items-center'>
                                <Sms
                                    size={18}
                                    color='black'
                                />
                                <div>
                                    ایمیل : {data?.data?.company?.user?.email}
                                </div>
                            </div>
                            <div className='flex gap-1 items-center'>
                                <Calendar
                                    size={18}
                                    color='black'
                                />
                                <div>
                                    تاریخ تاسیس : {moment(data?.data?.company?.dateOfEstablishment, 'jYYYY/jMM/jDD').format('jYYYY/jMM/jDD')}
                                </div>
                            </div>
                        </div>

                        <div className='flex gap-2 mt-4'>
                            <Location
                                size={18}
                                color='black'
                            />
                            <div>
                                آدرس : {data?.data?.company?.address}
                            </div>
                        </div>
                    </div>
                </div>

                <MyProduct />
            </div>
        )
    } else {
        return (
            <div className='flex flex-col justify-center items-center h-full gap-4 py-8'>
                <div className='text-gray-600 text-center'>
                    <p className='text-lg font-medium mb-2'>شما هنوز شرکتی ثبت نکردید</p>
                    <p className='text-sm text-gray-500'>برای ثبت شرکت خود، روی دکمه زیر کلیک کنید</p>
                </div>
                <Link to={buildPath(Pages.request)}>
                    <Button
                        className='w-fit px-5'
                    >
                        <div className='flex items-center gap-2'>
                            <Add size={20} color='white' />
                            <span>ثبت درخواست شرکت</span>
                        </div>
                    </Button>
                </Link>
            </div>
        )
    }
}

export default CompanyDetail