'use client'
import { Chart2 } from 'iconsax-react'
import { FC, useState } from 'react'
import { useGetPriceHistory } from '../hooks/useProductData'
import DefaulModal from '@/components/DefaulModal'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
import { PRIMARY_COLOR } from '@/config/const'

interface PriceHistoryProps {
    productId: string
}

const PriceHistory: FC<PriceHistoryProps> = ({ productId }) => {
    const [isModalOpen, setIsModalOpen] = useState(false)
    const { data } = useGetPriceHistory(productId)

    // پردازش داده‌ها برای چارت
    const chartData = data?.results?.priceHistory?.[0]?.history?.map(item => ({
        date: item.date,
        selling_price: item.selling_price,
        retail_price: item.retail_price,
        shop: item.shop
    })) || []

    return (
        <>
            <button
                onClick={() => setIsModalOpen(true)}
                className='p-2 rounded-full bg-white/80 backdrop-blur-sm hover:bg-white transition-colors'
                title='نمودار تغییر قیمت'
            >
                <Chart2 size={20} color='#333333' />
            </button>

            <DefaulModal
                open={isModalOpen}
                close={() => setIsModalOpen(false)}
                isHeader={true}
                title_header="نمودار تغییر قیمت"
                width={600}
            >
                <div className='p-6'>
                    {chartData.length > 0 ? (
                        <div className='h-96 w-full'>
                            <ResponsiveContainer width="100%" height="100%">
                                <LineChart
                                    data={chartData}
                                    margin={{
                                        top: 20,
                                        right: 30,
                                        left: 20,
                                        bottom: 20,
                                    }}
                                >
                                    <CartesianGrid strokeDasharray="3 3" stroke={PRIMARY_COLOR} strokeOpacity={0.2} />
                                    <XAxis
                                        dataKey="date"
                                        fontSize={11}
                                        tick={{ fontSize: 9, fill: '#6b7280' }}
                                        tickLine={{ stroke: '#d1d5db' }}
                                        axisLine={{ stroke: '#d1d5db' }}
                                        angle={-45}
                                        textAnchor="end"
                                        height={60}
                                    />
                                    <YAxis
                                        fontSize={11}
                                        tick={{ fontSize: 9, fill: '#6b7280' }}
                                        tickLine={{ stroke: '#d1d5db' }}
                                        axisLine={{ stroke: '#d1d5db' }}
                                        tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
                                    />
                                    <Tooltip
                                        contentStyle={{
                                            backgroundColor: '#ffffff',
                                            border: '1px solid #e5e7eb',
                                            borderRadius: '12px',
                                            fontSize: '13px',
                                            boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
                                            padding: '12px'
                                        }}
                                        formatter={(value, name) => [
                                            <span key={name} style={{ color: name === 'selling_price' ? PRIMARY_COLOR : '#dc2626', fontWeight: 'bold' }}>
                                                {value.toLocaleString()} تومان
                                            </span>,
                                            name === 'selling_price' ? 'قیمت فروش' : 'قیمت خرده'
                                        ]}
                                        labelFormatter={(label) => (
                                            <span style={{ color: '#374151', fontWeight: '600' }}>
                                                تاریخ: {label}
                                            </span>
                                        )}
                                        cursor={{ stroke: '#9ca3af', strokeWidth: 1, strokeDasharray: '5 5' }}
                                    />
                                    <Line
                                        type="monotone"
                                        dataKey="selling_price"
                                        stroke={PRIMARY_COLOR}
                                        strokeWidth={3}
                                        dot={{ fill: PRIMARY_COLOR, strokeWidth: 2, r: 5, stroke: '#ffffff' }}
                                        activeDot={{
                                            r: 8,
                                            fill: PRIMARY_COLOR,
                                            stroke: '#ffffff',
                                            strokeWidth: 3,
                                            style: { filter: 'drop-shadow(0 4px 6px rgb(37 99 235 / 0.3))' }
                                        }}
                                        name="قیمت فروش"
                                        connectNulls={false}
                                    />
                                    <Line
                                        type="monotone"
                                        dataKey="retail_price"
                                        stroke="#dc2626"
                                        strokeWidth={3}
                                        dot={{ fill: '#dc2626', strokeWidth: 2, r: 5, stroke: '#ffffff' }}
                                        activeDot={{
                                            r: 8,
                                            fill: '#dc2626',
                                            stroke: '#ffffff',
                                            strokeWidth: 3,
                                            style: { filter: 'drop-shadow(0 4px 6px rgb(220 38 38 / 0.3))' }
                                        }}
                                        name="قیمت خرده"
                                        connectNulls={false}
                                    />
                                </LineChart>
                            </ResponsiveContainer>
                        </div>
                    ) : (
                        <div className='flex items-center justify-center h-96'>
                            <div className='text-center'>
                                <div className='w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center'>
                                    <Chart2 size={32} color='#9ca3af' />
                                </div>
                                <p className='text-gray-500 text-lg'>داده‌ای برای نمایش نمودار وجود ندارد</p>
                            </div>
                        </div>
                    )}

                    {chartData.length > 0 && (
                        <div className='mt-6 flex gap-8 justify-center'>
                            <div className='flex items-center gap-3'>
                                <div className='w-6 h-1 bg-primary rounded-full'></div>
                                <span className='text-sm font-medium text-gray-700'>قیمت فروش</span>
                            </div>
                            <div className='flex items-center gap-3'>
                                <div className='w-6 h-1 bg-red-600 rounded-full'></div>
                                <span className='text-sm font-medium text-gray-700'>قیمت خرده</span>
                            </div>
                        </div>
                    )}
                </div>
            </DefaulModal>
        </>
    )
}

export default PriceHistory