import { Users, ShoppingBag, DollarSign, TrendingUp } from 'lucide-react';
import { StatsCard } from '../components/dashboard/StatsCard';
import { BarChart } from '../components/charts/BarChart';
import { LineChart } from '../components/charts/LineChart';
import { PieChart } from '../components/charts/PieChart';
import { Table } from '../components/ui/Table';
import { Button } from '../components/ui/Button';
import { PermissionWrapper } from '../components/common/PermissionWrapper';
import { ChartData, TableColumn } from '../types';

const statsData = [
    {
        title: 'کل کاربران',
        value: 1247,
        change: 12,
        icon: Users,
        color: 'blue',
    },
    {
        title: 'فروش ماهانه',
        value: '۲۴,۵۶۷,۰۰۰',
        change: 8.5,
        icon: DollarSign,
        color: 'green',
    },
    {
        title: 'کل سفارشات',
        value: 356,
        change: -2.3,
        icon: ShoppingBag,
        color: 'yellow',
    },
    {
        title: 'رشد فروش',
        value: '۲۳.۵%',
        change: 15.2,
        icon: TrendingUp,
        color: 'purple',
    },
];

const chartData: ChartData[] = [
    { name: 'فروردین', value: 4000 },
    { name: 'اردیبهشت', value: 3000 },
    { name: 'خرداد', value: 5000 },
    { name: 'تیر', value: 4500 },
    { name: 'مرداد', value: 6000 },
    { name: 'شهریور', value: 5500 },
];

const pieData: ChartData[] = [
    { name: 'دسکتاپ', value: 45 },
    { name: 'موبایل', value: 35 },
    { name: 'تبلت', value: 20 },
];

const recentUsers = [
    { id: 1, name: 'علی احمدی', email: 'ali@example.com', role: 'کاربر', status: 'فعال', createdAt: '۱۴۰۲/۰۸/۱۵' },
    { id: 2, name: 'فاطمه حسینی', email: 'fateme@example.com', role: 'مدیر', status: 'فعال', createdAt: '۱۴۰۲/۰۸/۱۴' },
    { id: 3, name: 'محمد رضایی', email: 'mohammad@example.com', role: 'کاربر', status: 'غیرفعال', createdAt: '۱۴۰۲/۰۸/۱۳' },
    { id: 4, name: 'زهرا کریمی', email: 'zahra@example.com', role: 'کاربر', status: 'فعال', createdAt: '۱۴۰۲/۰۸/۱۲' },
];

const userColumns: TableColumn[] = [
    { key: 'name', label: 'نام', sortable: true },
    { key: 'email', label: 'ایمیل' },
    { key: 'role', label: 'نقش' },
    {
        key: 'status',
        label: 'وضعیت',
        render: (value) => (
            <span className={`px-2 py-1 rounded-full text-xs font-medium ${value === 'فعال'
                ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
                : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
                }`}>
                {value}
            </span>
        )
    },
    { key: 'createdAt', label: 'تاریخ عضویت' },
    {
        key: 'actions',
        label: 'عملیات',
        render: (_, row) => (
            <div className="flex space-x-2">
                <Button size="sm" variant="secondary">
                    ویرایش
                </Button>
                <PermissionWrapper permission={22}>
                    <Button size="sm" variant="danger">
                        حذف
                    </Button>
                </PermissionWrapper>
            </div>
        )
    }
];

export const Dashboard = () => {
    return (
        <div className="p-6 space-y-6">
            <div className="flex items-center justify-between">
                <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
                    داشبورد
                </h1>
                <div className="flex space-x-4">
                    <Button variant="secondary">
                        گزارش‌گیری
                    </Button>
                    <PermissionWrapper permission={25}>
                        <Button>
                            اضافه کردن
                        </Button>
                    </PermissionWrapper>
                </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                {statsData.map((stat, index) => (
                    <StatsCard key={index} {...stat} />
                ))}
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <BarChart
                    data={chartData}
                    title="فروش ماهانه"
                    color="#3b82f6"
                />
                <LineChart
                    data={chartData}
                    title="روند رشد"
                    color="#10b981"
                />
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div className="lg:col-span-2">
                    <div className="card p-6">
                        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
                            کاربران اخیر
                        </h3>
                        <Table
                            columns={userColumns}
                            data={recentUsers}
                        />
                    </div>
                </div>
                <div>
                    <PieChart
                        data={pieData}
                        title="دستگاه‌های کاربری"
                        colors={['#3b82f6', '#10b981', '#f59e0b']}
                    />
                </div>
            </div>
        </div>
    );
};