import { type FC } from 'react'
import { useParams } from 'react-router-dom'
import { useGetRequestDetails } from './hooks/useRequestData'
import TicketSection from './components/TicketSection'
import placeholderProductImage from '@/assets/images/placeholder-product.svg'

const RequestDetail: FC = () => {

    const { id } = useParams()
    const { data } = useGetRequestDetails(id!)

    return (
        <div className="w-full min-h-screen bg-[#eceef6] p-6">
            {/* Header Section */}
            <div className="flex items-start justify-between mb-6">
                <div className="text-sm text-[#8C90A3]">
                    درخواست #{data?.data?.requestNumber}
                </div>
            </div>

            {/* Order Information Section */}
            <div className="bg-white rounded-2xl p-6 mb-6">
                <div className='flex justify-between items-center'>
                    <h2 className="text-lg font-light mb-6">اطلاعات درخواست</h2>
                </div>
                <div className='flex flex-col gap-10'>
                    {
                        data?.data?.items?.map((item) => {
                            const productImage = item.product?.images?.[0]

                            return (
                                <div key={item.product.id}>
                                    <div className="flex items-center gap-6">
                                        {/* Product Image */}
                                        <div className='size-[86px] rounded-lg overflow-hidden bg-gray-100'>
                                            <img
                                                src={productImage || placeholderProductImage}
                                                alt={item.product?.title ?? 'محصول'}
                                                className='size-full object-cover'
                                                onError={(e) => {
                                                    e.currentTarget.src = placeholderProductImage
                                                }}
                                            />
                                        </div>

                                        {/* Order Details */}
                                        <div className="flex-1 flex gap-20 pr-10">
                                            <div className='flex items-center gap-2'>
                                                <div className="text-xs text-desc">عنوان:</div>
                                                <div className="text-sm font-medium text-black">{item.product.title}</div>
                                            </div>
                                        </div>
                                    </div>

                                    {/* Order Description */}
                                    <div className="mt-6 pt-6 border-t border-dashed border-desc">
                                        <div className="text-sm font-medium mb-2 text-desc">شرح درخواست:</div>
                                        <p className="text-sm font-light text-black leading-6">
                                            {item.description || '—'}
                                        </p>
                                    </div>

                                    {/* Attributes from field */}
                                    {item.attributes?.length ? (
                                        <>
                                            <div className='font-bold mb-5 mt-7'>ویژگی‌ها</div>
                                            <div className='flex flex-col gap-3'>
                                                {item.attributes.map((attr) => (
                                                    <div className='flex gap-3 items-center' key={attr.fieldId}>
                                                        <div className='text-sm text-gray-500'>{attr.field?.name}:</div>
                                                        <div className='text-sm -mt-px'>{attr.value ?? '—'}</div>
                                                    </div>
                                                ))}
                                            </div>
                                        </>
                                    ) : null}

                                    {/* Attachments */}
                                    {item.attachments?.length ? (
                                        <div className="mt-6 pt-6 border-t border-dashed border-desc">
                                            <div className="text-sm font-medium mb-3 text-desc">پیوست‌ها:</div>
                                            <div className="flex flex-wrap gap-4">
                                                {item.attachments.map((att) => (
                                                    att.type === 'voice' ? (
                                                        <div key={att.url} className="flex items-center gap-2 p-3 bg-[#f5f6fa] rounded-xl">
                                                            <audio controls src={att.url} className="max-w-[240px] h-9" />
                                                        </div>
                                                    ) : (
                                                        <a
                                                            key={att.url}
                                                            href={att.url}
                                                            target="_blank"
                                                            rel="noopener noreferrer"
                                                            className="block size-20 rounded-lg overflow-hidden border border-desc hover:opacity-90"
                                                        >
                                                            <img src={att.url} alt="پیوست" className="size-full object-cover" />
                                                        </a>
                                                    )
                                                ))}
                                            </div>
                                        </div>
                                    ) : null}
                                </div>
                            )
                        })
                    }
                </div>
            </div>

            {/* Bottom Section - White Card */}
            <TicketSection />
        </div>
    )
}

export default RequestDetail