import { Button } from '@/components/ui/button'
import Input from '@/components/Input'
import { FC, useState } from 'react'
import { useAddCoupon, useGetCart } from '../hooks/useCartData'
import { toast } from '@/components/Toast'
import { extractErrorMessage } from '@/helpers/errorUtils'



const DiscountCard: FC = () => {
    const [isExpanded, setIsExpanded] = useState(false)
    const [couponCode, setCouponCode] = useState('')
    const addCouponMutation = useAddCoupon()
    const { data: cartData, refetch } = useGetCart()

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault()

        if (!couponCode.trim()) {
            toast('لطفاً کد کوپن را وارد کنید', 'error')
            return
        }

        await addCouponMutation.mutateAsync({
            code: couponCode,
            cartShipmentItemId: cartData?.results?.cart?.cartShipmentItems?.[0]._id as string
        }, {
            onSuccess: () => {
                toast('کوپن با موفقیت اعمال شد', 'success')
                refetch()
                setCouponCode('')
                setIsExpanded(false)
            },
            onError: (error) => {
                toast(extractErrorMessage(error), 'error')
            }
        })


    }


    if (!isExpanded) {
        return (
            <div className='h-16 border border-border rounded-2xl flex justify-between mt-5 items-center px-6'>
                <div>
                    کد کوپن دارید؟
                </div>

                <Button
                    variant={'ghost'}
                    className='text-left p-0 text-primary hover:bg-transparent cursor-pointer'
                    onClick={() => setIsExpanded(true)}
                >
                    ثبت کد
                </Button>
            </div>
        )
    }

    return (
        <div className='border border-border rounded-2xl mt-5 p-4 sm:p-6'>
            <div className='text-sm font-medium mb-4'>کد کوپن</div>

            <form onSubmit={handleSubmit} className='flex gap-3'>
                <Input
                    type="text"
                    placeholder="کد کوپن خود را وارد کنید"
                    value={couponCode}
                    onChange={(e) => setCouponCode(e.target.value)}
                    className="flex-1"
                    disabled={addCouponMutation.isPending}
                    label=""
                />
                <Button
                    type="submit"
                    disabled={addCouponMutation.isPending || !couponCode.trim()}
                    className="px-6"
                >
                    {addCouponMutation.isPending ? 'در حال اعمال...' : 'اعمال'}
                </Button>
                <Button
                    type="button"
                    variant="outline"
                    onClick={() => {
                        setIsExpanded(false)
                        setCouponCode('')
                    }}
                    disabled={addCouponMutation.isPending}
                    className="px-4"
                >
                    لغو
                </Button>
            </form>
        </div>
    )
}

export default DiscountCard