import { type FC } from 'react'
import { Link, useParams } from 'react-router-dom'
import moment from 'moment-jalaali'
import { Calendar, Profile2User, TickSquare } from 'iconsax-react'
import { useGetRequestDetail } from './hooks/useRequestData'
import RequestDetailItem from './components/RequestDetailItem'
import TicketSection from './components/TicketSection'
import { Paths } from '@/config/Paths'
import BackButton from '@/components/BackButton'
import Button from '@/components/Button'
import RefreshButton from '@/components/RefreshButton'

const RequestDetail: FC = () => {
    const { id } = useParams()
    const { data, refetch, isFetching, isPending, isError } = useGetRequestDetail(id!)
    const request = data?.data
    const items = request?.items ?? []

    const customerName =
        [request?.user?.firstName, request?.user?.lastName].filter(Boolean).join(' ') ||
        request?.user?.phone ||
        undefined

    if (isPending && !request) {
        return (
            <div className="flex items-center justify-center min-h-[240px]">
                <span className="text-sm text-[#8C90A3]">در حال بارگذاری...</span>
            </div>
        )
    }

    if (isError || !request) {
        return (
            <div className="flex flex-col items-center justify-center min-h-[240px] gap-4">
                <span className="text-sm text-[#8C90A3]">درخواست یافت نشد</span>
                <BackButton to={Paths.requests.list} />
            </div>
        )
    }

    return (
        <div className="pb-8">
            <div className="flex flex-wrap items-center justify-between gap-4 mb-6">
                <BackButton to={Paths.requests.list} />

                <div className="flex items-center gap-3">
                    <RefreshButton onClick={() => refetch()} isLoading={isFetching} />
                    <Link to={Paths.perfomaInvoice.create + `?requestId=${id}`}>
                        <Button className="w-fit px-5">
                            <div className="flex gap-2 items-center">
                                <TickSquare size={20} color="black" />
                                <span>ثبت پیش فاکتور</span>
                            </div>
                        </Button>
                    </Link>
                </div>
            </div>

            <div className="flex flex-wrap items-start justify-between gap-4 mb-6">
                <div>
                    <h1 className="text-lg font-light text-black">
                        درخواست #{request.requestNumber}
                    </h1>
                    <div className="flex flex-wrap items-center gap-x-3 gap-y-2 mt-2 text-xs text-[#8C90A3]">
                        <div className="flex items-center gap-2">
                            <Calendar size={14} />
                            <span>
                                تاریخ ثبت:{' '}
                                {moment(request.createdAt).format('jYYYY/jMM/jDD HH:mm')}
                            </span>
                        </div>
                        {items.length > 0 && (
                            <>
                                <span className="text-[#D8DCE8]">|</span>
                                <span>{items.length} قلم</span>
                            </>
                        )}
                        {customerName && (
                            <>
                                <span className="text-[#D8DCE8]">|</span>
                                <div className="flex items-center gap-1.5">
                                    <Profile2User size={14} />
                                    <span>{customerName}</span>
                                </div>
                            </>
                        )}
                        {request.user?.phone && (
                            <>
                                <span className="text-[#D8DCE8]">|</span>
                                <span dir="ltr">{request.user.phone}</span>
                            </>
                        )}
                    </div>
                </div>
            </div>

            <section className="bg-white rounded-2xl p-6 md:p-8 mb-6">
                <h2 className="text-sm text-black mb-6">اطلاعات درخواست</h2>

                {items.length === 0 ? (
                    <p className="text-sm text-[#8C90A3]">قلمی برای این درخواست ثبت نشده است.</p>
                ) : (
                    <div>
                        {items.map((item, index) => (
                            <RequestDetailItem
                                key={item.id}
                                item={item}
                                index={index}
                                total={items.length}
                            />
                        ))}
                    </div>
                )}
            </section>

            <TicketSection customerName={customerName} />
        </div>
    )
}

export default RequestDetail