import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { FileText, Download, TrendingUp, Users, ShoppingBag, DollarSign, Warehouse, TrendingDown, CreditCard, BarChart3 } from 'lucide-react';
import { Button } from '../components/ui/Button';
import { BarChart } from '../components/charts/BarChart';
import { lazy, Suspense } from 'react';

const LineChart = lazy(() => import('../components/charts/LineChart').then(module => ({ default: module.LineChart })));

export const Reports = () => {
    const navigate = useNavigate();
    const [selectedPeriod, setSelectedPeriod] = useState('month');

    const salesData = [
        { name: 'فروردین', value: 12000000 },
        { name: 'اردیبهشت', value: 19000000 },
        { name: 'خرداد', value: 15000000 },
        { name: 'تیر', value: 22000000 },
        { name: 'مرداد', value: 18000000 },
        { name: 'شهریور', value: 25000000 },
    ];

    const userGrowthData = [
        { name: 'فروردین', value: 150 },
        { name: 'اردیبهشت', value: 230 },
        { name: 'خرداد', value: 180 },
        { name: 'تیر', value: 280 },
        { name: 'مرداد', value: 200 },
        { name: 'شهریور', value: 320 },
    ];

    const reportPages = [
        {
            id: 1,
            title: 'گزارش خلاصه فروش',
            description: 'گزارش جامع فروش محصولات با تفکیک و آمار کامل',
            icon: DollarSign,
            path: '/reports/sales-summary',
            type: 'فروش'
        },
        {
            id: 2,
            title: 'گزارش ارزش موجودی',
            description: 'ارزش کل موجودی به تومان بر اساس قیمت لحظه‌ای',
            icon: Warehouse,
            path: '/reports/inventory-value',
            type: 'موجودی'
        },
        {
            id: 3,
            title: 'گزارش روش‌های پرداخت',
            description: 'آمار و گزارش روش‌های پرداخت استفاده شده',
            icon: CreditCard,
            path: '/reports/payment-methods',
            type: 'پرداخت'
        },
        {
            id: 4,
            title: 'گزارش استفاده کاربر خاص از کدهای تخفیف',
            description: 'گزارش استفاده یک کاربر خاص از کدهای تخفیف',
            icon: Users,
            path: '/reports/customer-discount-usage',
            type: 'تخفیف'
        },
        {
            id: 5,
            title: 'گزارش مقایسه Variant',
            description: 'مقایسه درصد اجرت کارخانه و درصد اجرت کاربر',
            icon: TrendingUp,
            path: '/reports/variant-comparison',
            type: 'مقایسه'
        },
        {
            id: 6,
            title: 'گزارش سود و زیان',
            description: 'گزارش سود یا زیان محقق شده',
            icon: TrendingDown,
            path: '/reports/profit-loss',
            type: 'مالی'
        },
        {
            id: 7,
            title: 'گزارش کدهای تخفیف',
            description: 'گزارش استفاده از کدهای تخفیف',
            icon: BarChart3,
            path: '/reports/discount-usage',
            type: 'تخفیف'
        },
        {
            id: 8,
            title: 'گزارش ارسال‌ها',
            description: 'گزارش ارسال‌ها بر اساس روش ارسال',
            icon: ShoppingBag,
            path: '/reports/shipments-by-method',
            type: 'ارسال'
        }
    ];

    const handleDownloadReport = (reportId: number) => {
        console.log('Downloading report:', reportId);
    };

    const handleGenerateReport = () => {
        console.log('Generating new report');
    };

    return (
        <div className="p-6 space-y-6">
            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                <div>
                    <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
                        گزارش‌ها و آمار
                    </h1>
                    <p className="text-gray-600 dark:text-gray-400 mt-1">
                        مشاهده و دانلود گزارش‌های مختلف سیستم
                    </p>
                </div>

                <div className="flex items-center space-x-4">
                    <select
                        value={selectedPeriod}
                        onChange={(e) => setSelectedPeriod(e.target.value)}
                        className="input max-w-xs"
                    >
                        <option value="week">هفته گذشته</option>
                        <option value="month">ماه گذشته</option>
                        <option value="quarter">سه ماه گذشته</option>
                        <option value="year">سال گذشته</option>
                    </select>
                    <Button onClick={handleGenerateReport}>
                        <FileText className="h-4 w-4 ml-2" />
                        تولید گزارش جدید
                    </Button>
                </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
                <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
                    <div className="flex items-center">
                        <div className="p-3 rounded-full bg-blue-100 dark:bg-blue-900">
                            <DollarSign className="h-6 w-6 text-blue-600 dark:text-blue-400" />
                        </div>
                        <div className="mr-4">
                            <p className="text-sm font-medium text-gray-600 dark:text-gray-400">کل فروش</p>
                            <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">۱۱۱ میلیون</p>
                            <p className="text-xs text-green-600 dark:text-green-400">+۱۲% از ماه قبل</p>
                        </div>
                    </div>
                </div>

                <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
                    <div className="flex items-center">
                        <div className="p-3 rounded-full bg-green-100 dark:bg-green-900">
                            <Users className="h-6 w-6 text-green-600 dark:text-green-400" />
                        </div>
                        <div className="mr-4">
                            <p className="text-sm font-medium text-gray-600 dark:text-gray-400">کاربران جدید</p>
                            <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">۳۲۰</p>
                            <p className="text-xs text-green-600 dark:text-green-400">+۸% از ماه قبل</p>
                        </div>
                    </div>
                </div>

                <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
                    <div className="flex items-center">
                        <div className="p-3 rounded-full bg-purple-100 dark:bg-purple-900">
                            <ShoppingBag className="h-6 w-6 text-purple-600 dark:text-purple-400" />
                        </div>
                        <div className="mr-4">
                            <p className="text-sm font-medium text-gray-600 dark:text-gray-400">کل سفارشات</p>
                            <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">۱,۲۵۴</p>
                            <p className="text-xs text-green-600 dark:text-green-400">+۱۵% از ماه قبل</p>
                        </div>
                    </div>
                </div>

                <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
                    <div className="flex items-center">
                        <div className="p-3 rounded-full bg-yellow-100 dark:bg-yellow-900">
                            <TrendingUp className="h-6 w-6 text-yellow-600 dark:text-yellow-400" />
                        </div>
                        <div className="mr-4">
                            <p className="text-sm font-medium text-gray-600 dark:text-gray-400">نرخ رشد</p>
                            <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">+۲۳%</p>
                            <p className="text-xs text-green-600 dark:text-green-400">بهبود یافته</p>
                        </div>
                    </div>
                </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
                    <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
                        روند فروش
                    </h3>
                    <BarChart data={salesData} />
                </div>

                <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
                    <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
                        رشد کاربران
                    </h3>
                    <Suspense fallback={<div className="card p-6 animate-pulse bg-gray-100 dark:bg-gray-800 h-64" />}>
                        <LineChart data={userGrowthData} />
                    </Suspense>
                </div>
            </div>

            <div className="bg-white dark:bg-gray-800 rounded-lg shadow">
                <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                        گزارش‌های موجود
                    </h3>
                </div>
                <div className="p-6">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {reportPages.map((report) => {
                            const IconComponent = report.icon;
                            return (
                                <div
                                    key={report.id}
                                    onClick={() => navigate(report.path)}
                                    className="flex items-start p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer"
                                >
                                    <div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg ml-4 flex-shrink-0">
                                        <IconComponent className="h-5 w-5 text-blue-600 dark:text-blue-400" />
                                    </div>
                                    <div className="flex-1">
                                        <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-1">
                                            {report.title}
                                        </h4>
                                        <p className="text-sm text-gray-600 dark:text-gray-400">
                                            {report.description}
                                        </p>
                                        <span className="inline-block mt-2 text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded">
                                            {report.type}
                                        </span>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            </div>
        </div>
    );
}; 