import { useState, useEffect } from 'react';
import Link from 'next/link';
import { BarChart3, Package, Tag, Users, ShoppingBag, FileText, Settings } from 'lucide-react';
import AdminLayout from '../../components/admin/AdminLayout';
import { analyticsService } from '../../services/analytics';
import { orderService, Order } from '../../services/orders';
import { productService, Product } from '../../services/catalog';

// Компонент статистической карточки
const StatCard = ({ title, value, icon, color }) => {
  return (
    <div className="bg-white rounded-lg shadow p-6 flex items-center">
      <div className={`rounded-full p-3 mr-4 ${color}`}>
        {icon}
      </div>
      <div>
        <h3 className="text-gray-500 text-sm font-medium">{title}</h3>
        <p className="text-2xl font-bold">{value}</p>
      </div>
    </div>
  );
};

// Компонент последних заказов
const RecentOrders = ({ orders, loading, error }) => {
  if (loading) {
    return (
      <div className="bg-white rounded-lg shadow p-6">
        <div className="animate-pulse flex space-x-4">
          <div className="flex-1 space-y-4 py-1">
            <div className="h-4 bg-gray-200 rounded w-3/4"></div>
            <div className="space-y-2">
              <div className="h-4 bg-gray-200 rounded"></div>
              <div className="h-4 bg-gray-200 rounded"></div>
              <div className="h-4 bg-gray-200 rounded"></div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="bg-white rounded-lg shadow p-6">
        <div className="text-red-500">Ошибка при загрузке заказов: {error}</div>
      </div>
    );
  }

  return (
    <div className="bg-white rounded-lg shadow overflow-hidden">
      <div className="px-6 py-4 border-b border-gray-200">
        <h2 className="text-lg font-medium">Последние заказы</h2>
      </div>
      <div className="overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Клиент</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Дата</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Статус</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Сумма</th>
              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Действия</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {orders.map((order) => (
              <tr key={order.id}>
                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#{order.id}</td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{order.user_name || `Пользователь #${order.user_id}`}</td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  {new Date(order.created_at).toLocaleDateString('ru-RU')}
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                    ${order.status === 'delivered' ? 'bg-green-100 text-green-800' : 
                      order.status === 'processing' ? 'bg-yellow-100 text-yellow-800' : 
                      order.status === 'shipped' ? 'bg-blue-100 text-blue-800' : 
                      'bg-purple-100 text-purple-800'}`}>
                    {order.status === 'delivered' ? 'Доставлен' : 
                     order.status === 'processing' ? 'В обработке' : 
                     order.status === 'shipped' ? 'Отправлен' : 
                     order.status === 'paid' ? 'Оплачен' : 
                     order.status}
                  </span>
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  {order.total.toLocaleString('ru-RU')} ₽
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                  <Link href={`/admin/orders/${order.id}`} className="text-indigo-600 hover:text-indigo-900">
                    Подробнее
                  </Link>
                </td>
              </tr>
            ))}
            {orders.length === 0 && (
              <tr>
                <td colSpan={6} className="px-6 py-4 text-center text-sm text-gray-500">
                  Заказы не найдены
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
      <div className="px-6 py-4 border-t border-gray-200">
        <Link href="/admin/orders" className="text-sm font-medium text-indigo-600 hover:text-indigo-500">
          Посмотреть все заказы →
        </Link>
      </div>
    </div>
  );
};

// Компонент популярных товаров
const PopularProducts = ({ products, loading, error }) => {
  if (loading) {
    return (
      <div className="bg-white rounded-lg shadow p-6">
        <div className="animate-pulse flex space-x-4">
          <div className="flex-1 space-y-4 py-1">
            <div className="h-4 bg-gray-200 rounded w-3/4"></div>
            <div className="space-y-2">
              <div className="h-4 bg-gray-200 rounded"></div>
              <div className="h-4 bg-gray-200 rounded"></div>
              <div className="h-4 bg-gray-200 rounded"></div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="bg-white rounded-lg shadow p-6">
        <div className="text-red-500">Ошибка при загрузке товаров: {error}</div>
      </div>
    );
  }

  return (
    <div className="bg-white rounded-lg shadow overflow-hidden">
      <div className="px-6 py-4 border-b border-gray-200">
        <h2 className="text-lg font-medium">Популярные товары</h2>
      </div>
      <div className="overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Товар</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Категория</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Продажи</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Остаток</th>
              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Действия</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {products.map((product) => (
              <tr key={product.id}>
                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{product.name}</td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{product.category?.name || 'Без категории'}</td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{product.sales || 0}</td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                    ${product.stock > 20 ? 'bg-green-100 text-green-800' : 
                      product.stock > 10 ? 'bg-yellow-100 text-yellow-800' : 
                      'bg-red-100 text-red-800'}`}>
                    {product.stock}
                  </span>
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                  <Link href={`/admin/products/${product.id}`} className="text-indigo-600 hover:text-indigo-900">
                    Редактировать
                  </Link>
                </td>
              </tr>
            ))}
            {products.length === 0 && (
              <tr>
                <td colSpan={5} className="px-6 py-4 text-center text-sm text-gray-500">
                  Товары не найдены
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
      <div className="px-6 py-4 border-t border-gray-200">
        <Link href="/admin/products" className="text-sm font-medium text-indigo-600 hover:text-indigo-500">
          Посмотреть все товары →
        </Link>
      </div>
    </div>
  );
};

export default function AdminDashboard() {
  const [stats, setStats] = useState({
    ordersCount: 0,
    totalSales: 0,
    customersCount: 0,
    productsCount: 0
  });
  const [recentOrders, setRecentOrders] = useState<Order[]>([]);
  const [popularProducts, setPopularProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState({
    stats: true,
    orders: true,
    products: true
  });
  const [error, setError] = useState({
    stats: null,
    orders: null,
    products: null
  });

  // Загрузка данных при монтировании компонента
  useEffect(() => {
    const fetchDashboardData = async () => {
      try {
        setLoading(prev => ({ ...prev, stats: true }));
        // В реальном приложении здесь будет запрос к API для получения статистики
        // Например: const statsData = await analyticsService.getReport('dashboard');
        
        // Для демонстрации используем моковые данные
        setTimeout(() => {
          setStats({
            ordersCount: 1248,
            totalSales: 2456789,
            customersCount: 3456,
            productsCount: 867
          });
          setLoading(prev => ({ ...prev, stats: false }));
        }, 1000);
      } catch (err) {
        console.error('Ошибка при загрузке статистики:', err);
        setError(prev => ({ ...prev, stats: 'Не удалось загрузить статистику' }));
        setLoading(prev => ({ ...prev, stats: false }));
      }

      try {
        setLoading(prev => ({ ...prev, orders: true }));
        // Загружаем последние заказы
        const orders = await orderService.getOrders({ limit: 4 });
        setRecentOrders(orders);
        setError(prev => ({ ...prev, orders: null }));
      } catch (err) {
        console.error('Ошибка при загрузке заказов:', err);
        setError(prev => ({ ...prev, orders: 'Не удалось загрузить заказы' }));
      } finally {
        setLoading(prev => ({ ...prev, orders: false }));
      }

      try {
        setLoading(prev => ({ ...prev, products: true }));
        // Загружаем популярные товары
        // В реальном API должен быть эндпоинт для получения популярных товаров
        // Здесь просто получаем первые 4 товара
        const products = await productService.getProducts({ limit: 4 });
        setPopularProducts(products);
        setError(prev => ({ ...prev, products: null }));
      } catch (err) {
        console.error('Ошибка при загрузке товаров:', err);
        setError(prev => ({ ...prev, products: 'Не удалось загрузить товары' }));
      } finally {
        setLoading(prev => ({ ...prev, products: false }));
      }
    };

    fetchDashboardData();
  }, []);

  return (
    <AdminLayout title="Панель управления">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <StatCard 
          title="Всего заказов" 
          value={loading.stats ? "..." : stats.ordersCount.toLocaleString('ru-RU')} 
          icon={<ShoppingBag className="h-6 w-6 text-white" />} 
          color="bg-blue-500"
        />
        <StatCard 
          title="Всего продаж" 
          value={loading.stats ? "..." : `₽${stats.totalSales.toLocaleString('ru-RU')}`} 
          icon={<BarChart3 className="h-6 w-6 text-white" />} 
          color="bg-green-500"
        />
        <StatCard 
          title="Клиентов" 
          value={loading.stats ? "..." : stats.customersCount.toLocaleString('ru-RU')} 
          icon={<Users className="h-6 w-6 text-white" />} 
          color="bg-purple-500"
        />
        <StatCard 
          title="Товаров" 
          value={loading.stats ? "..." : stats.productsCount.toLocaleString('ru-RU')} 
          icon={<Package className="h-6 w-6 text-white" />} 
          color="bg-orange-500"
        />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <RecentOrders 
          orders={recentOrders} 
          loading={loading.orders} 
          error={error.orders} 
        />
        <PopularProducts 
          products={popularProducts} 
          loading={loading.products} 
          error={error.products} 
        />
      </div>
    </AdminLayout>
  );
} 