'use client';
import { Button } from '@/components/ui/button'
import React, { useCallback } from 'react'
import { useGetMyCoupons } from '../hooks/useTransactionData';
import { toast } from '@/components/Toast';
import type { Coupon } from '../types/Types';

function TransactionsIndex() {
    const { data: myCoupons, isLoading } = useGetMyCoupons();

    const handleCopyCode = useCallback(async (code: string) => {
        try {
            await navigator.clipboard.writeText(code);
            toast('کد تخفیف با موفقیت کپی شد', 'success');
        } catch {
            toast('خطا در کپی کردن کد تخفیف', 'error');
        }
    }, []);

    const formatDiscount = useCallback((coupon: Coupon) => {
        if (coupon.type === 'PERCENTAGE') {
            return `${coupon.value}%`;
        }
        return `${coupon.value.toLocaleString('fa-IR')} تومان`;
    }, []);

    const coupons = myCoupons?.data ?? [];

    return (
        <section className='pt-6'>
            <h1 className='font-medium'>کدهای تخفیف</h1>

            <section
                aria-label="درباره کدهای تخفیف"
                className='mt-3 bg-container rounded-normal grid grid-cols-4 items-center'
            >
                <div className='col-span-3 py-9.5 pe-7 ps-5 relative'>
                    <div className='w-full h-full absolute top-0 left-0 overflow-clip'>
                        <svg width="301" height="146" viewBox="0 0 301 146" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g opacity="0.15">
                                <path d="M262.479 152.795C202.8 122.128 120.111 132.267 77.763 175.315C35.4154 218.362 49.3247 278.14 109.004 308.807C168.683 339.474 251.373 329.335 293.721 286.287C336.069 243.24 322.159 183.462 262.479 152.795Z" stroke="#AFAFAF" />
                                <path d="M298.808 115.866C239.129 85.1988 156.44 95.3379 114.092 138.385C71.7445 181.433 85.6538 241.21 145.333 271.877C205.012 302.544 287.702 292.405 330.05 249.358C372.398 206.31 358.488 146.533 298.808 115.866Z" stroke="#AFAFAF" />
                                <path d="M347.543 66.3263C287.863 35.6595 205.174 45.7986 162.826 88.8461C120.479 131.894 134.388 191.671 194.067 222.338C253.747 253.005 336.437 242.866 378.784 199.819C421.132 156.771 407.222 96.9933 347.543 66.3263Z" stroke="#AFAFAF" />
                                <path d="M416.657 -3.92933C356.977 -34.5961 274.288 -24.457 231.941 18.5905C189.593 61.638 203.502 121.415 263.182 152.082C322.861 182.749 405.551 172.61 447.899 129.563C490.246 86.5153 476.336 26.7377 416.657 -3.92933Z" stroke="#AFAFAF" />
                            </g>
                        </svg>
                    </div>
                    <h2 className='font-bold text-base'>کدهای تخفیف شما</h2>
                    <p className='text-xs mt-[7px]'>کد تخفیف مورد نظر را کپی کنید و در بخش پرداخت‌ها استفاده کنید</p>
                </div>

                <div
                    className='col-span-1 h-full text-end py-4 px-5.5 flex flex-col justify-between rounded-e-normal'
                    style={{
                        background: 'linear-gradient(165.51deg, #000000 -8.44%, #C3C7DD 100%)',
                    }}
                >
                    <p className='text-sm2 text-white leading-tight'>
                        <span className='font-medium'>Your</span><br />
                        <span className='font-bold'>Coupon</span>
                    </p>

                    <svg className='w-full' height="20" viewBox="0 0 72 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4.0033 0H0.845703V20H4.0033V0Z" fill="white" />
                        <path d="M9.266 0H6.1084V20H9.266V0Z" fill="white" />
                        <path d="M12.4236 0H11.3711V20H12.4236V0Z" fill="white" />
                        <path d="M16.6344 0H14.5293V20H16.6344V0Z" fill="white" />
                        <path d="M19.7916 0H17.6865V20H19.7916V0Z" fill="white" />
                        <path d="M24.0018 0H22.9492V20H24.0018V0Z" fill="white" />
                        <path d="M28.2113 0H25.0537V20H28.2113V0Z" fill="white" />
                        <path d="M30.3182 0H29.2656V20H30.3182V0Z" fill="white" />
                        <path d="M33.4744 0H32.4219V20H33.4744V0Z" fill="white" />
                        <path d="M36.6324 0H34.5273V20H36.6324V0Z" fill="white" />
                        <path d="M42.9478 0H40.8428V20H42.9478V0Z" fill="white" />
                        <path d="M47.1576 0H44V20H47.1576V0Z" fill="white" />
                        <path d="M49.2625 0H48.21V20H49.2625V0Z" fill="white" />
                        <path d="M55.5785 0H52.4209V20H55.5785V0Z" fill="white" />
                        <path d="M57.6824 0H56.6299V20H57.6824V0Z" fill="white" />
                        <path d="M62.9455 0H58.7354V20H62.9455V0Z" fill="white" />
                        <path d="M66.1031 0H63.998V20H66.1031V0Z" fill="white" />
                        <path d="M71.3666 0H68.209V20H71.3666V0Z" fill="white" />
                    </svg>
                </div>
            </section>

            {isLoading ? (
                <div className='flex flex-col items-center justify-center gap-2 py-12 text-sm2 text-muted-foreground mt-6'>
                    <span className='h-4 w-4 animate-spin rounded-full border border-dashed border-foreground border-t-transparent'></span>
                    <p>در حال دریافت کدهای تخفیف...</p>
                </div>
            ) : coupons.length === 0 ? (
                <div className='flex flex-col items-center justify-center gap-2 py-12 text-sm2 text-muted-foreground mt-6'>
                    <p>کد تخفیفی موجود نیست</p>
                </div>
            ) : (
                <section className="mt-6 space-y-6" aria-label="لیست کدهای تخفیف">
                    {coupons.map((coupon) => (
                        <article
                            key={coupon.id}
                            className='bg-container rounded-normal flex justify-between items-center'
                        >
                            <div className='py-4 pe-7 ps-5 border-e-2 w-full border-border border-dashed'>
                                <h3 className='font-bold text-sm2'>مبلغ تخفیف: {formatDiscount(coupon)}</h3>
                                <p className='text-xs mt-[7px]'>{coupon.description || 'قابل استفاده برای همه‌ی منوها و محصولات'}</p>
                                <Button
                                    className='w-fit text-white font-bold px-10 py-1.5 mt-4 text-xs rounded-lg '
                                    aria-label="کپی کد تخفیف"
                                    onClick={() => handleCopyCode(coupon.code)}
                                >
                                    کپی کد
                                </Button>
                            </div>
                            <div className='w-14'>
                                <p className='text-sm2 transform -rotate-90 text-[#B2B2B2] font-medium' aria-label="کد تخفیف">
                                    {coupon.code}
                                </p>
                            </div>
                        </article>
                    ))}
                </section>
            )}
        </section>
    )
}

export default TransactionsIndex