import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import { User, Package, Heart, LogOut, MapPin, Plus, Edit, Trash, Check, Home } from 'lucide-react';
import authService from '../../services/auth';
import { userService, Address } from '../../services/users';

export default function AddressesPage() {
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [addresses, setAddresses] = useState<Address[]>([]);
  const [user, setUser] = useState(null);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');
  const [showAddForm, setShowAddForm] = useState(false);
  const [editingAddressId, setEditingAddressId] = useState<number | null>(null);
  const [formData, setFormData] = useState({
    type: 'shipping',
    address: '',
    city: '',
    postal_code: '',
    country: 'Россия',
    is_default: false
  });

  useEffect(() => {
    // Проверяем, авторизован ли пользователь
    if (!authService.isAuthenticated()) {
      router.push('/login?redirect=/account/addresses');
      return;
    }

    // Загружаем данные пользователя и адреса
    const fetchData = async () => {
      try {
        const userData = await userService.getCurrentUser();
        setUser(userData);
        
        // Если у пользователя есть адреса, загружаем их
        if (userData.addresses) {
          setAddresses(userData.addresses);
        }
      } catch (err) {
        console.error('Ошибка при загрузке данных:', err);
        setError('Не удалось загрузить данные');
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [router]);

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }));
  };

  const resetForm = () => {
    setFormData({
      type: 'shipping',
      address: '',
      city: '',
      postal_code: '',
      country: 'Россия',
      is_default: false
    });
    setShowAddForm(false);
    setEditingAddressId(null);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    setSuccess('');

    try {
      if (editingAddressId) {
        // Обновляем существующий адрес
        await userService.updateAddress(editingAddressId, formData);
        setSuccess('Адрес успешно обновлен');
      } else {
        // Добавляем новый адрес
        await userService.addAddress(formData);
        setSuccess('Адрес успешно добавлен');
      }

      // Обновляем список адресов
      const userData = await userService.getCurrentUser();
      if (userData.addresses) {
        setAddresses(userData.addresses);
      }

      // Сбрасываем форму
      resetForm();
    } catch (err) {
      console.error('Ошибка при сохранении адреса:', err);
      setError('Не удалось сохранить адрес');
    }
  };

  const handleEdit = (address: Address) => {
    setFormData({
      type: address.type,
      address: address.address,
      city: address.city,
      postal_code: address.postal_code,
      country: address.country,
      is_default: address.is_default
    });
    setEditingAddressId(address.id);
    setShowAddForm(true);
  };

  const handleDelete = async (addressId: number) => {
    if (!confirm('Вы уверены, что хотите удалить этот адрес?')) {
      return;
    }

    setError('');
    setSuccess('');

    try {
      await userService.deleteAddress(addressId);
      setSuccess('Адрес успешно удален');

      // Обновляем список адресов
      const userData = await userService.getCurrentUser();
      if (userData.addresses) {
        setAddresses(userData.addresses);
      } else {
        setAddresses([]);
      }
    } catch (err) {
      console.error('Ошибка при удалении адреса:', err);
      setError('Не удалось удалить адрес');
    }
  };

  const handleSetDefault = async (addressId: number) => {
    setError('');
    setSuccess('');

    try {
      await userService.updateAddress(addressId, { is_default: true });
      setSuccess('Адрес по умолчанию изменен');

      // Обновляем список адресов
      const userData = await userService.getCurrentUser();
      if (userData.addresses) {
        setAddresses(userData.addresses);
      }
    } catch (err) {
      console.error('Ошибка при установке адреса по умолчанию:', err);
      setError('Не удалось установить адрес по умолчанию');
    }
  };

  const handleLogout = () => {
    authService.logout();
    router.push('/');
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 pt-20 pb-12">
        <div className="container mx-auto px-4 py-8">
          <div className="flex justify-center">
            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-500"></div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 pt-20 pb-12">
      <div className="container mx-auto px-4 py-8">
        <h1 className="text-3xl font-bold mb-8">Личный кабинет</h1>
        
        {error && (
          <div className="mb-6 bg-red-50 border-l-4 border-red-500 p-4">
            <div className="flex">
              <div className="ml-3">
                <p className="text-sm text-red-700">{error}</p>
              </div>
            </div>
          </div>
        )}

        {success && (
          <div className="mb-6 bg-green-50 border-l-4 border-green-500 p-4">
            <div className="flex">
              <div className="ml-3">
                <p className="text-sm text-green-700">{success}</p>
              </div>
            </div>
          </div>
        )}

        <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
          {/* Боковая панель навигации */}
          <div className="bg-white rounded-lg shadow p-6">
            <div className="flex flex-col space-y-4">
              <Link href="/account" className="flex items-center space-x-2 text-gray-600 hover:text-indigo-600 transition-colors">
                <User className="h-5 w-5" />
                <span>Профиль</span>
              </Link>
              <Link href="/account/orders" className="flex items-center space-x-2 text-gray-600 hover:text-indigo-600 transition-colors">
                <Package className="h-5 w-5" />
                <span>Мои заказы</span>
              </Link>
              <Link href="/account/addresses" className="flex items-center space-x-2 text-indigo-600 font-medium">
                <MapPin className="h-5 w-5" />
                <span>Мои адреса</span>
              </Link>
              <Link href="/favorites" className="flex items-center space-x-2 text-gray-600 hover:text-indigo-600 transition-colors">
                <Heart className="h-5 w-5" />
                <span>Избранное</span>
              </Link>
              <Link href="/" className="flex items-center space-x-2 text-gray-600 hover:text-indigo-600 transition-colors">
                <Home className="h-5 w-5" />
                <span>На главную</span>
              </Link>
              <button 
                onClick={handleLogout}
                className="flex items-center space-x-2 text-gray-600 hover:text-indigo-600 transition-colors"
              >
                <LogOut className="h-5 w-5" />
                <span>Выйти</span>
              </button>
            </div>
          </div>

          {/* Основное содержимое */}
          <div className="md:col-span-3 space-y-6">
            <div className="bg-white rounded-lg shadow p-6">
              <div className="flex justify-between items-center mb-6">
                <div>
                  <h2 className="text-xl font-semibold">Мои адреса</h2>
                  <p className="text-gray-600 mt-1">Управление адресами доставки</p>
                </div>
                <button
                  onClick={() => setShowAddForm(!showAddForm)}
                  className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                >
                  {showAddForm ? 'Отменить' : (
                    <>
                      <Plus className="h-4 w-4 mr-1" />
                      Добавить адрес
                    </>
                  )}
                </button>
              </div>

              {showAddForm && (
                <div className="mb-8 border border-gray-200 rounded-lg p-4">
                  <h3 className="text-lg font-medium mb-4">
                    {editingAddressId ? 'Редактирование адреса' : 'Добавление нового адреса'}
                  </h3>
                  <form onSubmit={handleSubmit} className="space-y-4">
                    <div>
                      <label htmlFor="type" className="block text-sm font-medium text-gray-700">
                        Тип адреса
                      </label>
                      <select
                        id="type"
                        name="type"
                        value={formData.type}
                        onChange={handleChange}
                        className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
                      >
                        <option value="shipping">Адрес доставки</option>
                        <option value="billing">Адрес для выставления счета</option>
                      </select>
                    </div>

                    <div>
                      <label htmlFor="address" className="block text-sm font-medium text-gray-700">
                        Адрес
                      </label>
                      <textarea
                        id="address"
                        name="address"
                        rows={3}
                        value={formData.address}
                        onChange={handleChange}
                        required
                        className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                        placeholder="Улица, дом, квартира"
                      />
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <label htmlFor="city" className="block text-sm font-medium text-gray-700">
                          Город
                        </label>
                        <input
                          type="text"
                          id="city"
                          name="city"
                          value={formData.city}
                          onChange={handleChange}
                          required
                          className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                        />
                      </div>

                      <div>
                        <label htmlFor="postal_code" className="block text-sm font-medium text-gray-700">
                          Почтовый индекс
                        </label>
                        <input
                          type="text"
                          id="postal_code"
                          name="postal_code"
                          value={formData.postal_code}
                          onChange={handleChange}
                          required
                          className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                        />
                      </div>
                    </div>

                    <div>
                      <label htmlFor="country" className="block text-sm font-medium text-gray-700">
                        Страна
                      </label>
                      <input
                        type="text"
                        id="country"
                        name="country"
                        value={formData.country}
                        onChange={handleChange}
                        required
                        className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                      />
                    </div>

                    <div className="flex items-center">
                      <input
                        id="is_default"
                        name="is_default"
                        type="checkbox"
                        checked={formData.is_default}
                        onChange={handleChange}
                        className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                      />
                      <label htmlFor="is_default" className="ml-2 block text-sm text-gray-900">
                        Использовать как адрес по умолчанию
                      </label>
                    </div>

                    <div className="flex justify-end space-x-3">
                      <button
                        type="button"
                        onClick={resetForm}
                        className="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                      >
                        Отмена
                      </button>
                      <button
                        type="submit"
                        className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                      >
                        {editingAddressId ? 'Сохранить изменения' : 'Добавить адрес'}
                      </button>
                    </div>
                  </form>
                </div>
              )}

              {addresses.length === 0 ? (
                <div className="text-center py-8">
                  <MapPin className="h-12 w-12 mx-auto text-gray-400" />
                  <p className="mt-2 text-gray-500">У вас пока нет сохраненных адресов</p>
                  {!showAddForm && (
                    <button
                      onClick={() => setShowAddForm(true)}
                      className="mt-4 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"
                    >
                      <Plus className="h-4 w-4 mr-1" />
                      Добавить адрес
                    </button>
                  )}
                </div>
              ) : (
                <div className="space-y-4">
                  {addresses.map((address) => (
                    <div key={address.id} className="border border-gray-200 rounded-lg p-4">
                      <div className="flex justify-between items-start">
                        <div>
                          <div className="flex items-center">
                            <h3 className="text-lg font-medium">
                              {address.type === 'shipping' ? 'Адрес доставки' : 'Адрес для выставления счета'}
                            </h3>
                            {address.is_default && (
                              <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                По умолчанию
                              </span>
                            )}
                          </div>
                          <p className="text-gray-600 mt-1">{address.address}</p>
                          <p className="text-gray-600">{address.city}, {address.postal_code}</p>
                          <p className="text-gray-600">{address.country}</p>
                        </div>
                        <div className="flex space-x-2">
                          {!address.is_default && (
                            <button
                              onClick={() => handleSetDefault(address.id)}
                              className="text-indigo-600 hover:text-indigo-900"
                              title="Сделать адресом по умолчанию"
                            >
                              <Check className="h-5 w-5" />
                            </button>
                          )}
                          <button
                            onClick={() => handleEdit(address)}
                            className="text-blue-600 hover:text-blue-900"
                            title="Редактировать"
                          >
                            <Edit className="h-5 w-5" />
                          </button>
                          <button
                            onClick={() => handleDelete(address.id)}
                            className="text-red-600 hover:text-red-900"
                            title="Удалить"
                          >
                            <Trash className="h-5 w-5" />
                          </button>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
} 