import { type FC } from 'react'
import DefaulModal from '../../../components/DefaulModal'
import Button from '../../../components/Button'
import { type Contract } from '../types/Types'
import { useApproveContract } from '../hooks/useSellerData'
import { toast } from 'react-toastify'
import { extractErrorMessage } from '@/helpers/utils'

interface Props {
    open: boolean
    close: () => void
    contract?: Contract
}

const SellerContractModal: FC<Props> = ({ open, close, contract }) => {
    const { mutate: approveContract, isPending } = useApproveContract();

    const handleApproveContract = () => {
        if (contract) {
            approveContract(contract.seller, {
                onSuccess: () => {
                    close();
                    toast.success('قرارداد با موفقیت تایید شد');
                },
                onError: (error) => {
                    toast.error(extractErrorMessage(error));
                }
            });
        }
    };

    return (
        <DefaulModal
            open={open}
            close={close}
            isHeader={true}
            title_header="قرارداد فروشنده"
            width={800}
        >
            <div className="p-2">
                {contract?.content ? (
                    <div className="max-w-none">
                        <div
                            className="text-gray-700 "
                            style={{ lineHeight: '2', fontSize: '14px' }}
                            dangerouslySetInnerHTML={{ __html: contract.content }}
                        />
                    </div>
                ) : (
                    <div className="text-center py-8 text-gray-500">
                        قراردادی برای نمایش وجود ندارد
                    </div>
                )}

                {contract && (
                    <div className="mt-3 pt-3 border-t border-gray-200">
                        <div className="grid grid-cols-2 gap-4 text-sm text-gray-600">
                            <div>
                                <span className="font-medium">شماره قرارداد:</span> {contract.contractNumber}
                            </div>
                            <div>
                                <span className="font-medium">وضعیت امضا:</span> {contract.signed ? 'امضا شده' : 'امضا نشده'}
                            </div>
                            {contract.signed && contract.singedAt && (
                                <div className="col-span-2">
                                    <span className="font-medium">تاریخ امضا:</span> {contract.singedAt}
                                </div>
                            )}
                        </div>

                        <div className="mt-4 flex justify-end">
                            <Button
                                variant="primary"
                                size="md"
                                className="w-auto px-6"
                                isLoading={isPending}
                                onClick={handleApproveContract}
                            >
                                تایید قرارداد
                            </Button>
                        </div>
                    </div>
                )}
            </div>
        </DefaulModal>
    )
}

export default SellerContractModal
