import { useState } from 'react';
import { FileText, Download, Calendar, TrendingUp, Users, ShoppingBag, DollarSign } from 'lucide-react';
import { Button } from '../components/ui/Button';
import { BarChart } from '../components/charts/BarChart';
import { LineChart } from '../components/charts/LineChart';

export const Reports = () => {
    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 reports = [
        {
            id: 1,
            title: 'گزارش فروش ماهانه',
            description: 'گزارش کامل فروش محصولات در ماه گذشته',
            type: 'فروش',
            date: '۱۴۰۲/۰۸/۳۰',
            format: 'PDF'
        },
        {
            id: 2,
            title: 'گزارش کاربران جدید',
            description: 'آمار کاربران جدید عضو شده در سیستم',
            type: 'کاربران',
            date: '۱۴۰۲/۰۸/۲۹',
            format: 'Excel'
        },
        {
            id: 3,
            title: 'گزارش موجودی انبار',
            description: 'وضعیت موجودی محصولات در انبار',
            type: 'انبار',
            date: '۱۴۰۲/۰۸/۲۸',
            format: 'PDF'
        },
        {
            id: 4,
            title: 'گزارش درآمد روزانه',
            description: 'جزئیات درآمد حاصل از فروش در ۳۰ روز گذشته',
            type: 'مالی',
            date: '۱۴۰۲/۰۸/۲۷',
            format: 'Excel'
        }
    ];

    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>
                    <LineChart data={userGrowthData} />
                </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="space-y-4">
                        {reports.map((report) => (
                            <div
                                key={report.id}
                                className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                            >
                                <div className="flex items-center">
                                    <div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg ml-4">
                                        <FileText className="h-5 w-5 text-blue-600 dark:text-blue-400" />
                                    </div>
                                    <div>
                                        <h4 className="font-medium text-gray-900 dark:text-gray-100">
                                            {report.title}
                                        </h4>
                                        <p className="text-sm text-gray-600 dark:text-gray-400">
                                            {report.description}
                                        </p>
                                        <div className="flex items-center mt-1 space-x-4">
                                            <span className="text-xs text-gray-500 dark:text-gray-500">
                                                نوع: {report.type}
                                            </span>
                                            <span className="text-xs text-gray-500 dark:text-gray-500">
                                                تاریخ: {report.date}
                                            </span>
                                            <span className="text-xs text-gray-500 dark:text-gray-500">
                                                فرمت: {report.format}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <Button
                                    size="sm"
                                    variant="secondary"
                                    onClick={() => handleDownloadReport(report.id)}
                                >
                                    <Download className="h-4 w-4 ml-2" />
                                    دانلود
                                </Button>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
};