import { type FC } from 'react'
import { type DashboardData, type OrderChartData } from '../types/Types'
import { Chart } from 'iconsax-react'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar } from 'recharts'

export interface OrdersChartSectionProps {
    dashboardData?: DashboardData
    orderChartData?: OrderChartData
}

const OrdersChartSection: FC<OrdersChartSectionProps> = ({
    dashboardData,
    orderChartData
}) => {
    // پردازش داده‌های Order Chart API
    const processOrderChartData = (chartData?: OrderChartData) => {
        if (chartData && chartData.xAxis && chartData.yAxis) {
            return chartData.xAxis.map((xValue, index) => ({
                name: xValue,
                value: chartData.yAxis[index] || 0,
                sales: chartData.yAxis[index] || 0,
            }))
        }
        return []
    }

    // پردازش داده‌های ۵ روز گذشته برای نمودار (fallback)
    const processDashboardChartData = (rawData: unknown) => {
        if (Array.isArray(rawData) && rawData.length > 0) {
            return (rawData as Array<Record<string, unknown>>).slice(-5).map((item, index: number) => ({
                name: `${5 - index} روز پیش`,
                sales: (item.totalSales as number) || (item.sales as number) || 0,
                orders: (item.totalOrders as number) || (item.orders as number) || 0,
                date: item.date || item.created_at || `روز ${5 - index}`,
            }))
        }
        return []
    }

    // اولویت با داده‌های Order Chart API
    const orderChartProcessed = processOrderChartData(orderChartData)
    const dashboardChartProcessed = processDashboardChartData(dashboardData?.FiveDaysAgoSales)

    // استفاده از داده‌های Order Chart اگر موجود باشد، در غیر این صورت از Dashboard استفاده کن
    const chartData = orderChartProcessed.length > 0 ? orderChartProcessed : dashboardChartProcessed

    return (
        <div className="space-y-6">
            {/* نمودار فروش ۵ روز گذشته */}
            <div className="bg-white rounded-lg p-6 shadow-sm">
                <div className="flex items-center gap-3 mb-6">
                    <Chart size={24} color="#3B82F6" />
                    <h3 className="text-lg font-medium">آمار فروش ۵ روز گذشته</h3>
                </div>

                <div className="h-80 w-full">
                    {chartData.length > 0 ? (
                        <ResponsiveContainer width="100%" height="100%">
                            <LineChart data={chartData}>
                                <CartesianGrid strokeDasharray="3 3" />
                                <XAxis
                                    dataKey="name"
                                    tick={{ fontSize: 12 }}
                                    axisLine={false}
                                    tickLine={false}
                                />
                                <YAxis
                                    tick={{ fontSize: 12 }}
                                    axisLine={false}
                                    tickLine={false}
                                    tickFormatter={(value) => orderChartData ? value.toLocaleString() : `${(value / 1000000).toFixed(1)}M`}
                                />
                                <Tooltip
                                    formatter={(value: number, name: string) => {
                                        if (orderChartData) {
                                            return [
                                                `${value.toLocaleString()} ${orderChartData.unit || 'تومان'}`,
                                                orderChartData.title || 'مقدار'
                                            ]
                                        } else {
                                            return [
                                                name === 'sales' ? `${value.toLocaleString()} تومان` : value,
                                                name === 'sales' ? 'فروش' : 'سفارشات'
                                            ]
                                        }
                                    }}
                                    labelStyle={{ color: '#374151' }}
                                    contentStyle={{
                                        backgroundColor: '#ffffff',
                                        border: '1px solid #e5e7eb',
                                        borderRadius: '8px',
                                        boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)'
                                    }}
                                />
                                <Line
                                    type="monotone"
                                    dataKey="sales"
                                    stroke="#3B82F6"
                                    strokeWidth={3}
                                    dot={{ fill: '#3B82F6', strokeWidth: 2, r: 4 }}
                                    activeDot={{ r: 6, stroke: '#3B82F6', strokeWidth: 2 }}
                                />
                            </LineChart>
                        </ResponsiveContainer>
                    ) : (
                        <div className="flex items-center justify-center h-full">
                            <div className="text-center">
                                <Chart size={48} color="#9CA3AF" className="mx-auto mb-4" />
                                <div className="text-gray-500 text-sm">
                                    داده‌ای برای نمایش نمودار وجود ندارد
                                </div>
                                <div className="text-gray-400 text-xs mt-1">
                                    منتظر دریافت داده از API...
                                </div>
                            </div>
                        </div>
                    )}
                </div>
            </div>

            {/* نمودار مقایسه فروش و سفارشات */}
            <div className="bg-white rounded-lg p-6 shadow-sm">
                <h3 className="text-lg font-medium mb-6">مقایسه فروش و تعداد سفارشات</h3>

                <div className="h-80 w-full">
                    {chartData.length > 0 ? (
                        <ResponsiveContainer width="100%" height="100%">
                            <BarChart data={chartData}>
                                <CartesianGrid strokeDasharray="3 3" />
                                <XAxis
                                    dataKey="name"
                                    tick={{ fontSize: 12 }}
                                    axisLine={false}
                                    tickLine={false}
                                />
                                <YAxis
                                    yAxisId="left"
                                    tick={{ fontSize: 12 }}
                                    axisLine={false}
                                    tickLine={false}
                                    tickFormatter={(value) => orderChartData ? value.toLocaleString() : `${(value / 1000000).toFixed(1)}M`}
                                />
                                <YAxis
                                    yAxisId="right"
                                    orientation="right"
                                    tick={{ fontSize: 12 }}
                                    axisLine={false}
                                    tickLine={false}
                                />
                                <Tooltip
                                    formatter={(value: number, name: string) => {
                                        if (orderChartData) {
                                            return [
                                                `${value.toLocaleString()} ${orderChartData.unit || 'تومان'}`,
                                                orderChartData.title || 'مقدار'
                                            ]
                                        } else {
                                            return [
                                                name === 'sales' ? `${value.toLocaleString()} تومان` : value,
                                                name === 'sales' ? 'فروش' : 'سفارشات'
                                            ]
                                        }
                                    }}
                                    labelStyle={{ color: '#374151' }}
                                    contentStyle={{
                                        backgroundColor: '#ffffff',
                                        border: '1px solid #e5e7eb',
                                        borderRadius: '8px',
                                        boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)'
                                    }}
                                />
                                <Bar
                                    yAxisId="left"
                                    dataKey="sales"
                                    fill="#10B981"
                                    radius={[4, 4, 0, 0]}
                                />
                                <Bar
                                    yAxisId="right"
                                    dataKey="orders"
                                    fill="#8B5CF6"
                                    radius={[4, 4, 0, 0]}
                                />
                            </BarChart>
                        </ResponsiveContainer>
                    ) : (
                        <div className="flex items-center justify-center h-full">
                            <div className="text-center">
                                <Chart size={48} color="#9CA3AF" className="mx-auto mb-4" />
                                <div className="text-gray-500 text-sm">
                                    داده‌ای برای نمایش نمودار مقایسه وجود ندارد
                                </div>
                                <div className="text-gray-400 text-xs mt-1">
                                    منتظر دریافت داده از API...
                                </div>
                            </div>
                        </div>
                    )}
                </div>

                {chartData.length > 0 && (
                    <div className="flex justify-center gap-6 mt-4">
                        <div className="flex items-center gap-2">
                            <div className="w-4 h-4 bg-green-500 rounded"></div>
                            <span className="text-sm text-gray-600">فروش (تومان)</span>
                        </div>
                        <div className="flex items-center gap-2">
                            <div className="w-4 h-4 bg-purple-500 rounded"></div>
                            <span className="text-sm text-gray-600">تعداد سفارشات</span>
                        </div>
                    </div>
                )}
            </div>

            {/* آمار ماهانه */}
            <div className="bg-white rounded-lg p-6 shadow-sm">
                <h3 className="text-lg font-medium mb-4">آمار فروش ماهانه</h3>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="text-center">
                        <div className="text-2xl font-bold text-blue-600">{dashboardData?.monthlySales?.totalOrders || 0}</div>
                        <div className="text-sm text-gray-600">تعداد سفارشات</div>
                    </div>
                    <div className="text-center">
                        <div className="text-2xl font-bold text-green-600">{dashboardData?.monthlySales?.totalSales?.toLocaleString() || 0} تومان</div>
                        <div className="text-sm text-gray-600">مجموع فروش</div>
                    </div>
                    <div className="text-center">
                        <div className="text-2xl font-bold text-purple-600">{dashboardData?.monthlySales?.itemsSold || 0}</div>
                        <div className="text-sm text-gray-600">تعداد آیتم فروش رفته</div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default OrdersChartSection
