import React from 'react';
import { Link } from 'react-router-dom';

const Dashboard = () => {
  const stats = [
    {
      title: 'کل اشخاص',
      value: '25',
      color: 'bg-blue-500',
      icon: '👥',
      link: '/persons'
    },
    {
      title: 'کل کالاها',
      value: '150',
      color: 'bg-green-500',
      icon: '📦',
      link: '/products'
    },
    {
      title: 'خرید امروز',
      value: '5',
      color: 'bg-yellow-500',
      icon: '🛒',
      link: '/purchases'
    },
    {
      title: 'فروش امروز',
      value: '12',
      color: 'bg-purple-500',
      icon: '💰',
      link: '/sales'
    },
    {
      title: 'حساب‌های فعال',
      value: '21',
      color: 'bg-indigo-500',
      icon: '📊',
      link: '/chart-of-accounts'
    },
    {
      title: 'فاکتورهای صادر شده',
      value: '8',
      color: 'bg-pink-500',
      icon: '📄',
      link: '/invoices'
    }
  ];

  return (
    <div className="farsi-text">
      <h1 className="text-3xl font-bold text-gray-900 mb-8">داشبورد</h1>
      
      {/* Stats Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6 mb-8">
        {stats.map((stat, index) => (
          <Link
            key={index}
            to={stat.link}
            className="card hover:shadow-lg transition-shadow duration-300"
          >
            <div className="flex items-center">
              <div className={`${stat.color} rounded-full p-3 text-white text-2xl`}>
                {stat.icon}
              </div>
              <div className="mr-4">
                <p className="text-sm font-medium text-gray-600">{stat.title}</p>
                <p className="text-2xl font-bold text-gray-900">{stat.value}</p>
              </div>
            </div>
          </Link>
        ))}
      </div>

      {/* Quick Actions */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="card">
          <h2 className="text-xl font-bold text-gray-900 mb-4">عملیات سریع</h2>
          <div className="space-y-3">
            <Link
              to="/purchases"
              className="flex items-center p-3 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors"
            >
              <span className="text-2xl ml-3">🛒</span>
              <span className="font-medium">ثبت خرید جدید</span>
            </Link>
            <Link
              to="/sales"
              className="flex items-center p-3 bg-green-50 rounded-lg hover:bg-green-100 transition-colors"
            >
              <span className="text-2xl ml-3">💰</span>
              <span className="font-medium">ثبت فروش جدید</span>
            </Link>
            <Link
              to="/persons"
              className="flex items-center p-3 bg-purple-50 rounded-lg hover:bg-purple-100 transition-colors"
            >
              <span className="text-2xl ml-3">👥</span>
              <span className="font-medium">افزودن شخص جدید</span>
            </Link>
            <Link
              to="/products"
              className="flex items-center p-3 bg-yellow-50 rounded-lg hover:bg-yellow-100 transition-colors"
            >
              <span className="text-2xl ml-3">📦</span>
              <span className="font-medium">افزودن کالای جدید</span>
            </Link>
            <Link
              to="/invoices"
              className="flex items-center p-3 bg-pink-50 rounded-lg hover:bg-pink-100 transition-colors"
            >
              <span className="text-2xl ml-3">📄</span>
              <span className="font-medium">ایجاد فاکتور جدید</span>
            </Link>
            <Link
              to="/financial-reports"
              className="flex items-center p-3 bg-indigo-50 rounded-lg hover:bg-indigo-100 transition-colors"
            >
              <span className="text-2xl ml-3">📊</span>
              <span className="font-medium">مشاهده گزارش‌های مالی</span>
            </Link>
          </div>
        </div>

        <div className="card">
          <h2 className="text-xl font-bold text-gray-900 mb-4">آخرین فعالیت‌ها</h2>
          <div className="space-y-3">
            <div className="flex items-center p-3 bg-gray-50 rounded-lg">
              <span className="text-green-600 ml-3">✓</span>
              <span className="text-sm">فروش کالای A به مشتری B</span>
              <span className="text-xs text-gray-500 mr-auto">2 ساعت پیش</span>
            </div>
            <div className="flex items-center p-3 bg-gray-50 rounded-lg">
              <span className="text-blue-600 ml-3">+</span>
              <span className="text-sm">خرید کالای C از تامین‌کننده D</span>
              <span className="text-xs text-gray-500 mr-auto">4 ساعت پیش</span>
            </div>
            <div className="flex items-center p-3 bg-gray-50 rounded-lg">
              <span className="text-purple-600 ml-3">👤</span>
              <span className="text-sm">افزودن مشتری جدید</span>
              <span className="text-xs text-gray-500 mr-auto">6 ساعت پیش</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Dashboard;