# 🔗 Интеграция фронтенда с API

## ✅ Реализованные функции

### 1. **🔐 Авторизация (AuthTab)**
- ✅ Регистрация: `POST /api/login/register`
- ✅ Вход: `POST /api/login`
- ✅ Сохранение JWT токена в `localStorage`
- ✅ Автоматическая проверка сессии

**Данные отправляются:**
```javascript
{
  login: string,
  password: string,
  firstName?: string,
  lastName?: string,
  phone?: string,
  email?: string
}
```

**Ответ:** JWT токен сохраняется как `jwt_token`

---

### 2. **📋 Каталог (CatalogTab)**
- ✅ Загрузка всех залов: `GET /api/halls`
- ✅ Сортировка: по названию, цене (возрастание/убывание)
- ✅ Фильтрация: по максимальной цене
- ✅ Добавление в корзину с указанием даты/времени
- ✅ Функционал избранного: `GET/POST /api/favorites`
- ✅ Кнопка сердца для добавления в избранное (требует авторизации)

**API запросы:**
```javascript
// Добавить в избранное
POST /api/favorites
Headers: { Authorization: "Bearer {token}" }
Body: { hall_id: number, photographer_id: null }

// Получить избранное
GET /api/favorites
Headers: { Authorization: "Bearer {token}" }
```

---

### 3. **🔍 Поиск (SearchTab)**
- ✅ Клиентский поиск по названию и описанию залов
- ✅ Фильтрация по категориям
- ✅ Отображение результатов в реальном времени
- ✅ Загрузка всех залов при монтировании

**Как работает:**
1. При загрузке запрашиваются все залы: `GET /api/halls`
2. Поиск и фильтрация выполняются на клиенте
3. Результаты обновляются при вводе текста

---

### 4. **🛒 Корзина (CartTab)**
- ✅ Добавление/удаление товаров
- ✅ Изменение количества часов
- ✅ Расчет итоговой суммы
- ✅ Сохранение бронирований: `POST /api/booking` (требует авторизации)
- ✅ Показ красного бэйджа с количеством товаров

**Бронирование отправляется:**
```javascript
POST /api/booking
Headers: {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer {token}'
}
Body: {
  clientId: number,      // из JWT токена
  hallId: number,
  startTime: ISO string,
  endTime: ISO string,
  totalCost: number,
  status: 'pending'
}
```

---

### 5. **👤 Профиль (ProfileTab)**
- ✅ Отображение данных пользователя из JWT
- ✅ Меню с функциями (в разработке)
- ✅ Выход из аккаунта (удаление токена)

**JWT структура:**
```javascript
{
  id: number,        // client_id
  firstName: string
}
```

---

### 6. **🏠 Главная (HomeTab)**
- ✅ Динамическое приветствие с именем пользователя
- ✅ Быстрые ссылки на разделы
- ✅ Промо-баннер со скидкой

---

## 📡 API Endpoints

| Метод | Endpoint | Требует Auth | Описание |
|-------|----------|---|----------|
| GET | `/api/halls` | ❌ | Получить все залы |
| GET | `/api/services` | ❌ | Получить все услуги |
| POST | `/api/login` | ❌ | Вход пользователя |
| POST | `/api/login/register` | ❌ | Регистрация |
| GET | `/api/favorites` | ✅ | Получить избранное пользователя |
| POST | `/api/favorites` | ✅ | Добавить в избранное |
| GET | `/api/booking` | ❌ | Получить все бронирования |
| POST | `/api/booking` | ✅ | Создать бронирование |
| PATCH | `/api/booking/:id` | ✅ | Обновить бронирование |
| DELETE | `/api/booking/:id` | ✅ | Удалить бронирование |

---

## 🔑 Важные детали

### JWT Token
- Сохраняется в `localStorage.jwt_token`
- Используется як `Bearer ${token}` в headers
- Содержит `id` (client_id) и `firstName`
- Может быть декодирован на клиенте: `token.split('.')[1]` → `atob()` → `JSON.parse()`

### Обработка ошибок
- При 401 (неавторизован): предложить вход
- При 500 (ошибка сервера): показать сообщение об ошибке
- Все ошибки логируются в console

### Загрузка изображений
- Путь к изображениям: `/HallsImages/${studio.imageURL}`
- Базовый URL: `http://localhost:3000`
- Fallback при ошибке загрузки: placeholder из `via.placeholder.com`

---

## 🚀 Как запустить

### Frontend:
```bash
cd Site
npm install
npm run dev
```

### Backend:
```bash
cd Api
npm install
node app.js
```

Backend запустится на `http://localhost:3000`
Frontend на `http://localhost:5173` (Vite)

---

## 📝 Примечания

1. **Поиск** - работает только с загруженными на клиента залами
2. **Избранное** - требует авторизации и JWT токена
3. **Бронирование** - автоматически создаёт start_time и end_time на основе количества часов
4. **Корзина** - сохраняется в памяти браузера (обнуляется при перезагрузке)

---

## 🎯 Возможные улучшения

- [ ] Локальное хранилище для корзины (localStorage/IndexedDB)
- [ ] История просмотра залов
- [ ] Фильтрация по категориям на сервере
- [ ] Система рейтинга и отзывов
- [ ] Расширенный поиск с фильтрами
- [ ] Уведомления о статусе бронирования