import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import { ArrowLeft, Mail, Phone, MapPin, Calendar, ShoppingBag, CreditCard, Clock, Check, X } from 'lucide-react';
import AdminLayout from '../../../components/admin/AdminLayout';
import { userService, User, Address } from '../../../services/users';
import { orderService, Order } from '../../../services/orders';

// Компонент для отображения статуса заказа
const OrderStatus = ({ status }) => {
  let bgColor = 'bg-gray-100';
  let textColor = 'text-gray-800';

  switch (status) {
    case 'pending':
      bgColor = 'bg-yellow-100';
      textColor = 'text-yellow-800';
      break;
    case 'paid':
      bgColor = 'bg-blue-100';
      textColor = 'text-blue-800';
      break;
    case 'processing':
      bgColor = 'bg-purple-100';
      textColor = 'text-purple-800';
      break;
    case 'shipped':
      bgColor = 'bg-indigo-100';
      textColor = 'text-indigo-800';
      break;
    case 'delivered':
      bgColor = 'bg-green-100';
      textColor = 'text-green-800';
      break;
    case 'cancelled':
      bgColor = 'bg-red-100';
      textColor = 'text-red-800';
      break;
  }

  const statusText = {
    pending: 'Ожидает оплаты',
    paid: 'Оплачен',
    processing: 'В обработке',
    shipped: 'Отправлен',
    delivered: 'Доставлен',
    cancelled: 'Отменен'
  };

  return (
    <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${bgColor} ${textColor}`}>
      {statusText[status] || status}
    </span>
  );
};

export default function CustomerDetailPage() {
  const router = useRouter();
  const { id } = router.query;
  const [user, setUser] = useState<User | null>(null);
  const [orders, setOrders] = useState<Order[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [stats, setStats] = useState({
    ordersCount: 0,
    totalSpent: 0,
    lastOrderDate: ''
  });
  
  // Загрузка данных пользователя
  useEffect(() => {
    const fetchUserData = async () => {
      if (!id) return;
      
      try {
        setLoading(true);
        const userData = await userService.getUserById(Number(id));
        setUser(userData);
        
        // Загрузка заказов пользователя
        try {
          // Предполагаем, что в API есть эндпоинт для получения заказов пользователя
          const response = await fetch(`/api/users/${id}/orders`);
          if (!response.ok) {
            throw new Error('Ошибка при загрузке заказов');
          }
          const ordersData = await response.json();
          setOrders(ordersData);
          
          // Расчет статистики
          if (ordersData.length > 0) {
            const totalSpent = ordersData.reduce((sum, order) => sum + order.total, 0);
            const lastOrder = ordersData.sort((a, b) => 
              new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
            )[0];
            
            setStats({
              ordersCount: ordersData.length,
              totalSpent: totalSpent,
              lastOrderDate: lastOrder.created_at
            });
          }
        } catch (err) {
          console.error('Ошибка при загрузке заказов:', err);
          // Продолжаем работу даже если не удалось загрузить заказы
        }
        
        setError('');
      } catch (err) {
        console.error('Ошибка при загрузке данных пользователя:', err);
        setError('Не удалось загрузить данные клиента. Пожалуйста, попробуйте позже.');
      } finally {
        setLoading(false);
      }
    };

    fetchUserData();
  }, [id]);

  // Форматирование даты для отображения
  const formatDate = (dateString) => {
    if (!dateString) return '-';
    const date = new Date(dateString);
    return date.toLocaleDateString('ru-RU', { 
      year: 'numeric', 
      month: 'long', 
      day: 'numeric' 
    });
  };

  // Форматирование суммы для отображения
  const formatCurrency = (amount) => {
    return new Intl.NumberFormat('ru-RU', { 
      style: 'currency', 
      currency: 'RUB',
      minimumFractionDigits: 0
    }).format(amount);
  };

  // Получение полного имени пользователя
  const getFullName = (user: User) => {
    return `${user.first_name} ${user.last_name}`.trim() || 'Нет имени';
  };

  return (
    <AdminLayout title={loading ? 'Загрузка...' : `Клиент: ${user ? getFullName(user) : ''}`}>
      <div className="mb-6 flex items-center">
        <Link href="/admin/customers" className="inline-flex items-center mr-4 text-indigo-600 hover:text-indigo-800">
          <ArrowLeft className="h-4 w-4 mr-1" />
          Назад к списку
        </Link>
        <h2 className="text-xl font-semibold text-gray-800">
          {loading ? 'Загрузка...' : `Информация о клиенте: ${user ? getFullName(user) : ''}`}
        </h2>
      </div>

      {error && (
        <div className="bg-red-50 border-l-4 border-red-500 p-4 mb-6">
          <div className="flex">
            <div className="flex-shrink-0">
              <X className="h-5 w-5 text-red-500" />
            </div>
            <div className="ml-3">
              <p className="text-sm text-red-700">{error}</p>
            </div>
          </div>
        </div>
      )}

      {loading ? (
        <div className="flex justify-center py-12">
          <svg className="animate-spin h-8 w-8 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
        </div>
      ) : user ? (
        <>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            {/* Основная информация */}
            <div className="bg-white rounded-lg shadow p-6 col-span-2">
              <h3 className="text-lg font-medium text-gray-900 mb-4">Основная информация</h3>
              <div className="space-y-4">
                <div>
                  <h4 className="text-sm font-medium text-gray-500">Имя</h4>
                  <p className="mt-1 text-sm text-gray-900">{getFullName(user)}</p>
                </div>
                <div className="flex items-center">
                  <Mail className="h-4 w-4 text-gray-400 mr-2" />
                  <h4 className="text-sm font-medium text-gray-500 mr-2">Email:</h4>
                  <a href={`mailto:${user.email}`} className="text-sm text-indigo-600 hover:text-indigo-800">
                    {user.email}
                  </a>
                </div>
                {user.phone && (
                  <div className="flex items-center">
                    <Phone className="h-4 w-4 text-gray-400 mr-2" />
                    <h4 className="text-sm font-medium text-gray-500 mr-2">Телефон:</h4>
                    <a href={`tel:${user.phone}`} className="text-sm text-indigo-600 hover:text-indigo-800">
                      {user.phone}
                    </a>
                  </div>
                )}
                <div className="flex items-center">
                  <Calendar className="h-4 w-4 text-gray-400 mr-2" />
                  <h4 className="text-sm font-medium text-gray-500 mr-2">Дата регистрации:</h4>
                  <p className="text-sm text-gray-900">{formatDate(user.created_at)}</p>
                </div>
              </div>
            </div>

            {/* Статистика */}
            <div className="bg-white rounded-lg shadow p-6">
              <h3 className="text-lg font-medium text-gray-900 mb-4">Статистика</h3>
              <div className="space-y-4">
                <div>
                  <h4 className="text-sm font-medium text-gray-500">Всего заказов</h4>
                  <p className="mt-1 text-lg font-semibold text-gray-900">{stats.ordersCount}</p>
                </div>
                <div>
                  <h4 className="text-sm font-medium text-gray-500">Общая сумма покупок</h4>
                  <p className="mt-1 text-lg font-semibold text-indigo-600">{formatCurrency(stats.totalSpent)}</p>
                </div>
                <div>
                  <h4 className="text-sm font-medium text-gray-500">Последний заказ</h4>
                  <p className="mt-1 text-sm text-gray-900">{formatDate(stats.lastOrderDate)}</p>
                </div>
              </div>
            </div>
          </div>

          {/* Адреса */}
          {user.addresses && user.addresses.length > 0 && (
            <div className="bg-white rounded-lg shadow p-6 mb-8">
              <div className="flex justify-between items-center mb-4">
                <h3 className="text-lg font-medium text-gray-900">Адреса</h3>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {user.addresses.map((address) => (
                  <div key={address.id} className="border rounded-lg p-4 relative">
                    {address.is_default && (
                      <span className="absolute top-2 right-2 bg-green-100 text-green-800 text-xs px-2 py-1 rounded">
                        По умолчанию
                      </span>
                    )}
                    <div className="flex items-start mb-2">
                      <MapPin className="h-5 w-5 text-gray-400 mr-2 mt-0.5" />
                      <div>
                        <h4 className="text-sm font-medium text-gray-900">{address.type}</h4>
                        <p className="text-sm text-gray-600">
                          {address.address}, {address.city}, {address.postal_code}, {address.country}
                        </p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* История заказов */}
          <div className="bg-white rounded-lg shadow overflow-hidden">
            <div className="px-6 py-4 border-b border-gray-200">
              <h3 className="text-lg font-medium text-gray-900">История заказов</h3>
            </div>
            <div className="overflow-x-auto">
              {orders.length === 0 ? (
                <div className="p-6 text-center text-gray-500">
                  У клиента пока нет заказов
                </div>
              ) : (
                <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-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} className="hover:bg-gray-50">
                        <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">
                          <div className="flex items-center">
                            <Clock className="h-4 w-4 text-gray-400 mr-1" />
                            {formatDate(order.created_at)}
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <OrderStatus status={order.status} />
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{formatCurrency(order.total)}</td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                          <div className="flex items-center">
                            <CreditCard className="h-4 w-4 text-gray-400 mr-1" />
                            {order.payment_method}
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                          <div className="flex items-center">
                            <ShoppingBag className="h-4 w-4 text-gray-400 mr-1" />
                            {order.items.length}
                          </div>
                        </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>
                    ))}
                  </tbody>
                </table>
              )}
            </div>
          </div>
        </>
      ) : (
        <div className="bg-white rounded-lg shadow p-6 text-center">
          <p className="text-gray-500">Клиент не найден</p>
        </div>
      )}
    </AdminLayout>
  );
} 