import React, { useState, useEffect } from 'react';
import { authFetch } from '../../services/apiClient';
import { Calendar, Clock, Users, MapPin, Plus, CheckCircle2, AlertCircle, X, Edit, Save, Play, Square, UserPlus, Calendar as CalendarIcon, FileText, MessageSquare, Building2 } from 'lucide-react';
import { Meeting, MeetingRoom, MeetingBooking } from '../../types';
import { CURRENT_USER_MOCK } from '../../constants';

export const MeetingsAndRooms: React.FC = () => {
  const [meetings, setMeetings] = useState<Meeting[]>([]);
  const [rooms, setRooms] = useState<MeetingRoom[]>([]);
  const [bookings, setBookings] = useState<MeetingBooking[]>([]);
  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [showCreateRoomModal, setShowCreateRoomModal] = useState(false);
  const [editingRoom, setEditingRoom] = useState<MeetingRoom | null>(null);
  const [showRescheduleModal, setShowRescheduleModal] = useState(false);
  const [selectedMeeting, setSelectedMeeting] = useState<Meeting | null>(null);
  const [showEditModal, setShowEditModal] = useState(false);
  const [rescheduleData, setRescheduleData] = useState({
    date: '',
    startTime: '',
    endTime: ''
  });
  const [roomFormData, setRoomFormData] = useState({
    name: '',
    capacity: 10,
    location: '',
    description: '',
    equipment: [] as string[],
    isActive: true
  });
  const [showMeetingCard, setShowMeetingCard] = useState(false);
  const [meetingCardData, setMeetingCardData] = useState({
    notes: '',
    conclusions: '',
    questions: '',
    theses: ''
  });
  const [employees, setEmployees] = useState<Array<{ id: string; name: string }>>([]);
  const [formData, setFormData] = useState({
    title: '',
    description: '',
    roomId: '',
    startTime: '',
    endTime: '',
    participantIds: [] as string[],
    agenda: ''
  });
  const [editData, setEditData] = useState({
    notes: '',
    conclusions: ''
  });

  useEffect(() => {
    fetchMeetings();
    fetchRooms();
    fetchBookings();
  }, [selectedDate]);

  useEffect(() => {
    const fetchEmployees = async () => {
      try {
        const res = await authFetch('/api/employees/list');
        if (res.ok) {
          const data = await res.json();
          setEmployees(Array.isArray(data) ? data : []);
        }
      } catch (e) {
        console.error('Ошибка загрузки списка сотрудников:', e);
      }
    };
    fetchEmployees();
  }, []);

  const fetchMeetings = async () => {
    try {
      const response = await authFetch(`/api/office/meetings?startDate=${selectedDate}&endDate=${selectedDate}`);
      if (response.ok) {
        const data = await response.json();
        // Нормализуем данные из API
        const normalizedData = data.map((meeting: any) => ({
          id: meeting.id,
          title: meeting.title || '',
          description: meeting.description,
          organizer: meeting.organizer || '',
          startTime: meeting.start_time || meeting.startTime,
          endTime: meeting.end_time || meeting.endTime,
          roomId: meeting.room_id || meeting.roomId,
          room: meeting.room_name ? {
            id: meeting.room_id,
            name: meeting.room_name,
            capacity: meeting.room_capacity
          } : meeting.room,
          participants: Array.isArray(meeting.participants) ? meeting.participants : (typeof meeting.participants === 'string' ? JSON.parse(meeting.participants || '[]') : []),
          agenda: meeting.agenda,
          notes: meeting.notes || null,
          conclusions: meeting.conclusions || null,
          status: meeting.status || 'scheduled',
          reminderSent: meeting.reminder_sent || meeting.reminderSent || false,
          reminderTime: meeting.reminder_time || meeting.reminderTime,
          attachments: Array.isArray(meeting.attachments) ? meeting.attachments : (typeof meeting.attachments === 'string' ? JSON.parse(meeting.attachments || '[]') : []),
          createdAt: meeting.created_at || meeting.createdAt,
          updatedAt: meeting.updated_at || meeting.updatedAt
        }));
        setMeetings(normalizedData);
      }
    } catch (error) {
      console.error('Ошибка загрузки совещаний:', error);
    }
  };

  const fetchRooms = async () => {
    try {
      const response = await authFetch('/api/office/meeting-rooms?all=true');
      if (response.ok) {
        const data = await response.json();
        // Нормализуем данные из API
        const normalizedData = data.map((room: any) => ({
          id: room.id,
          name: room.name || '',
          capacity: room.capacity || 0,
          location: room.location,
          equipment: Array.isArray(room.equipment) ? room.equipment : (typeof room.equipment === 'string' ? JSON.parse(room.equipment || '[]') : []),
          description: room.description,
          isActive: room.is_active !== undefined ? room.is_active : (room.isActive !== undefined ? room.isActive : true),
          createdAt: room.created_at || room.createdAt,
          updatedAt: room.updated_at || room.updatedAt
        }));
        setRooms(normalizedData);
      }
    } catch (error) {
      console.error('Ошибка загрузки переговорных:', error);
    }
  };

  const handleCreateMeeting = async () => {
    try {
      if (!formData.title || !formData.title.trim()) {
        alert('Пожалуйста, укажите название совещания');
        return;
      }
      if (!formData.startTime) {
        alert('Пожалуйста, укажите время начала');
        return;
      }
      if (!formData.endTime) {
        alert('Пожалуйста, укажите время окончания');
        return;
      }

      const startDateTime = new Date(`${selectedDate}T${formData.startTime}`);
      const endDateTime = new Date(`${selectedDate}T${formData.endTime}`);

      if (endDateTime <= startDateTime) {
        alert('Время окончания должно быть позже времени начала');
        return;
      }

      const participantsArray = formData.participantIds
        .map(id => employees.find(e => e.id === id)?.name)
        .filter((n): n is string => !!n);

      const response = await authFetch('/api/office/meetings', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          title: formData.title,
          description: formData.description || null,
          organizer: CURRENT_USER_MOCK.name,
          startTime: startDateTime.toISOString(),
          endTime: endDateTime.toISOString(),
          roomId: formData.roomId ? parseInt(formData.roomId) : null,
          participants: participantsArray,
          agenda: formData.agenda || null
        })
      });

      if (response.ok) {
        const newMeeting = await response.json();
        // Нормализуем данные
        const normalizedMeeting = {
          id: newMeeting.id,
          title: newMeeting.title || formData.title,
          description: newMeeting.description || formData.description,
          organizer: newMeeting.organizer || CURRENT_USER_MOCK.name,
          startTime: newMeeting.start_time || startDateTime.toISOString(),
          endTime: newMeeting.end_time || endDateTime.toISOString(),
          roomId: newMeeting.room_id || (formData.roomId ? parseInt(formData.roomId) : null),
          room: rooms.find(r => r.id === (formData.roomId ? parseInt(formData.roomId) : null)),
          participants: participantsArray,
          agenda: newMeeting.agenda || formData.agenda,
          notes: newMeeting.notes,
          conclusions: newMeeting.conclusions,
          status: newMeeting.status || 'scheduled',
          reminderSent: false,
          attachments: [],
          createdAt: newMeeting.created_at,
          updatedAt: newMeeting.updated_at
        };
        // Устанавливаем выбранную дату на дату созданного совещания, чтобы оно отобразилось
        const meetingDate = new Date(normalizedMeeting.startTime).toISOString().split('T')[0];
        setSelectedDate(meetingDate);
        // Обновляем список (useEffect автоматически вызовет fetchMeetings при изменении selectedDate)
        setShowCreateModal(false);
        setFormData({
          title: '',
          description: '',
          roomId: '',
          startTime: '',
          endTime: '',
          participantIds: [],
          agenda: ''
        });
      } else {
        const errorData = await response.json().catch(() => ({ error: 'Неизвестная ошибка' }));
        alert(`Ошибка создания совещания: ${errorData.error || 'Неизвестная ошибка'}`);
      }
    } catch (error: any) {
      console.error('Ошибка создания совещания:', error);
      alert(`Ошибка создания совещания: ${error.message || 'Неизвестная ошибка'}`);
    }
  };

  const handleOpenEditModal = (meeting: Meeting) => {
    setSelectedMeeting(meeting);
    setEditData({
      notes: meeting.notes || '',
      conclusions: meeting.conclusions || ''
    });
    setShowEditModal(true);
  };

  const handleSaveMeeting = async () => {
    if (!selectedMeeting) return;

    try {
      const response = await authFetch(`/api/office/meetings/${selectedMeeting.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          notes: editData.notes,
          conclusions: editData.conclusions
        })
      });

      if (response.ok) {
        const updatedMeeting = await response.json();
        // Обновляем в списке
        setMeetings(meetings.map(m => 
          m.id === selectedMeeting.id 
            ? { ...m, notes: updatedMeeting.notes || editData.notes, conclusions: updatedMeeting.conclusions || editData.conclusions }
            : m
        ));
        setShowEditModal(false);
        setSelectedMeeting(null);
        fetchMeetings(); // Обновляем список
      } else {
        const errorData = await response.json().catch(() => ({ error: 'Неизвестная ошибка' }));
        alert(`Ошибка сохранения: ${errorData.error || 'Неизвестная ошибка'}`);
      }
    } catch (error: any) {
      console.error('Ошибка сохранения совещания:', error);
      alert(`Ошибка сохранения: ${error.message || 'Неизвестная ошибка'}`);
    }
  };

  const handleStartMeeting = async () => {
    if (!selectedMeeting) return;

    try {
      const response = await authFetch(`/api/office/meetings/${selectedMeeting.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          status: 'in_progress'
        })
      });

      if (response.ok) {
        fetchMeetings();
        if (selectedMeeting) {
          setSelectedMeeting({ ...selectedMeeting, status: 'in_progress' });
        }
        alert('Совещание начато');
      } else {
        const errorData = await response.json().catch(() => ({ error: 'Неизвестная ошибка' }));
        alert(`Ошибка: ${errorData.error || 'Неизвестная ошибка'}`);
      }
    } catch (error: any) {
      console.error('Ошибка начала совещания:', error);
      alert(`Ошибка: ${error.message || 'Неизвестная ошибка'}`);
    }
  };

  const handleEndMeeting = async () => {
    if (!selectedMeeting) return;

    try {
      const response = await authFetch(`/api/office/meetings/${selectedMeeting.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          status: 'completed',
          notes: meetingCardData.notes,
          conclusions: meetingCardData.conclusions
        })
      });

      if (response.ok) {
        fetchMeetings();
        if (selectedMeeting) {
          setSelectedMeeting({ ...selectedMeeting, status: 'completed' });
        }
        alert('Совещание завершено');
      } else {
        const errorData = await response.json().catch(() => ({ error: 'Неизвестная ошибка' }));
        alert(`Ошибка: ${errorData.error || 'Неизвестная ошибка'}`);
      }
    } catch (error: any) {
      console.error('Ошибка завершения совещания:', error);
      alert(`Ошибка: ${error.message || 'Неизвестная ошибка'}`);
    }
  };

  const handleSaveMeetingCard = async () => {
    if (!selectedMeeting) return;

    try {
      const response = await authFetch(`/api/office/meetings/${selectedMeeting.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          notes: meetingCardData.notes,
          conclusions: meetingCardData.conclusions
        })
      });

      if (response.ok) {
        fetchMeetings();
        alert('Данные сохранены');
      } else {
        const errorData = await response.json().catch(() => ({ error: 'Неизвестная ошибка' }));
        alert(`Ошибка сохранения: ${errorData.error || 'Неизвестная ошибка'}`);
      }
    } catch (error: any) {
      console.error('Ошибка сохранения:', error);
      alert(`Ошибка: ${error.message || 'Неизвестная ошибка'}`);
    }
  };

  const handleRescheduleMeeting = async () => {
    if (!selectedMeeting) return;

    if (!rescheduleData.date || !rescheduleData.startTime || !rescheduleData.endTime) {
      alert('Заполните все поля для переноса');
      return;
    }

    try {
      const newStartDateTime = new Date(`${rescheduleData.date}T${rescheduleData.startTime}`);
      const newEndDateTime = new Date(`${rescheduleData.date}T${rescheduleData.endTime}`);

      if (newEndDateTime <= newStartDateTime) {
        alert('Время окончания должно быть позже времени начала');
        return;
      }

      const response = await authFetch(`/api/office/meetings/${selectedMeeting.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          startTime: newStartDateTime.toISOString(),
          endTime: newEndDateTime.toISOString()
        })
      });

      if (response.ok) {
        fetchMeetings();
        setSelectedDate(rescheduleData.date);
        setShowRescheduleModal(false);
        setShowMeetingCard(false);
        alert('Совещание перенесено');
      } else {
        const errorData = await response.json().catch(() => ({ error: 'Неизвестная ошибка' }));
        alert(`Ошибка: ${errorData.error || 'Неизвестная ошибка'}`);
      }
    } catch (error: any) {
      console.error('Ошибка переноса совещания:', error);
      alert(`Ошибка: ${error.message || 'Неизвестная ошибка'}`);
    }
  };

  const handleOpenEditRoom = (room: MeetingRoom) => {
    setEditingRoom(room);
    setRoomFormData({
      name: room.name,
      capacity: room.capacity,
      location: room.location || '',
      description: room.description || '',
      equipment: Array.isArray(room.equipment) ? [...room.equipment] : [],
      isActive: room.isActive !== false
    });
    setShowCreateRoomModal(true);
  };

  const handleCreateRoom = async () => {
    try {
      if (!roomFormData.name || !roomFormData.name.trim()) {
        alert('Пожалуйста, укажите название переговорной');
        return;
      }

      if (editingRoom) {
        const response = await authFetch(`/api/office/meeting-rooms/${editingRoom.id}`, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            name: roomFormData.name,
            capacity: roomFormData.capacity,
            location: roomFormData.location || null,
            description: roomFormData.description || null,
            equipment: roomFormData.equipment,
            isActive: roomFormData.isActive !== false
          })
        });
        if (response.ok) {
          fetchRooms();
          setShowCreateRoomModal(false);
          setEditingRoom(null);
          setRoomFormData({ name: '', capacity: 10, location: '', description: '', equipment: [], isActive: true });
          alert('Переговорная обновлена');
        } else {
          const errorData = await response.json().catch(() => ({ error: 'Неизвестная ошибка' }));
          alert(`Ошибка сохранения: ${errorData.error || 'Неизвестная ошибка'}`);
        }
        return;
      }

      const response = await authFetch('/api/office/meeting-rooms', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: roomFormData.name,
          capacity: roomFormData.capacity,
          location: roomFormData.location || null,
          description: roomFormData.description || null,
          equipment: roomFormData.equipment
        })
      });

      if (response.ok) {
        fetchRooms();
        setShowCreateRoomModal(false);
        setRoomFormData({
          name: '',
          capacity: 10,
          location: '',
          description: '',
          equipment: [],
          isActive: true
        });
        alert('Переговорная комната успешно создана');
      } else {
        const errorData = await response.json().catch(() => ({ error: 'Неизвестная ошибка' }));
        alert(`Ошибка создания переговорной: ${errorData.error || 'Неизвестная ошибка'}`);
      }
    } catch (error: any) {
      console.error('Ошибка создания переговорной:', error);
      alert(`Ошибка создания переговорной: ${error.message || 'Неизвестная ошибка'}`);
    }
  };

  const handleAddParticipants = async (newParticipants: string[]) => {
    if (!selectedMeeting) return;

    try {
      const currentParticipants = selectedMeeting.participants || [];
      const updatedParticipants = [...new Set([...currentParticipants, ...newParticipants])];

      const response = await authFetch(`/api/office/meetings/${selectedMeeting.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          participants: updatedParticipants
        })
      });

      if (response.ok) {
        fetchMeetings();
        if (selectedMeeting) {
          setSelectedMeeting({ ...selectedMeeting, participants: updatedParticipants });
        }
        alert('Участники добавлены');
      } else {
        const errorData = await response.json().catch(() => ({ error: 'Неизвестная ошибка' }));
        alert(`Ошибка: ${errorData.error || 'Неизвестная ошибка'}`);
      }
    } catch (error: any) {
      console.error('Ошибка добавления участников:', error);
      alert(`Ошибка: ${error.message || 'Неизвестная ошибка'}`);
    }
  };

  const fetchBookings = async () => {
    try {
      const response = await authFetch(`/api/office/meeting-bookings?startDate=${selectedDate}&endDate=${selectedDate}`);
      if (response.ok) {
        const data = await response.json();
        const normalized = (Array.isArray(data) ? data : []).map((b: any) => ({
          id: b.id,
          roomId: b.room_id ?? b.roomId,
          meetingId: b.meeting_id ?? b.meetingId,
          bookedBy: b.booked_by ?? b.bookedBy,
          startTime: b.start_time ?? b.startTime,
          endTime: b.end_time ?? b.endTime,
          purpose: b.purpose,
          status: b.status ?? 'active',
          room: b.room_name ? { id: b.room_id, name: b.room_name, capacity: 0, isActive: true, createdAt: '', updatedAt: '' } : b.room,
          meeting: b.meeting_title ? { id: 0, title: b.meeting_title, organizer: '', startTime: b.start_time, endTime: b.end_time, participants: [], status: 'scheduled', reminderSent: false, createdAt: '', updatedAt: '' } : b.meeting,
          createdAt: b.created_at ?? b.createdAt,
          updatedAt: b.updated_at ?? b.updatedAt
        }));
        setBookings(normalized);
      }
    } catch (error) {
      console.error('Ошибка загрузки бронирований:', error);
    }
  };

  return (
    <div className="space-y-6 animate-fade-in">
      <div className="flex justify-between items-center">
        <h3 className="text-lg font-bold text-slate-800">Совещания и переговорные</h3>
        <button
          onClick={() => {
            setShowCreateModal(true);
            // Устанавливаем время по умолчанию
            const now = new Date();
            const defaultStart = new Date(now.getTime() + 60 * 60 * 1000); // Через час
            const defaultEnd = new Date(defaultStart.getTime() + 60 * 60 * 1000); // Через 2 часа
            setFormData(prev => ({
              ...prev,
              startTime: defaultStart.toTimeString().slice(0, 5),
              endTime: defaultEnd.toTimeString().slice(0, 5)
            }));
          }}
          className="bg-primary-600 text-white px-4 py-2 rounded-lg text-sm font-bold hover:bg-primary-700 transition-colors flex items-center gap-2"
        >
          <Plus className="w-4 h-4" />
          Новое совещание
        </button>
      </div>

      {/* Выбор даты */}
      <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-4">
        <div className="flex items-center gap-4">
          <label className="text-sm font-medium text-slate-700">Дата:</label>
          <input
            type="date"
            value={selectedDate}
            onChange={(e) => setSelectedDate(e.target.value)}
            className="px-3 py-2 border border-slate-300 rounded-lg text-sm"
          />
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Совещания */}
        <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
          <h4 className="font-bold text-slate-800 mb-4 flex items-center gap-2">
            <Calendar className="w-5 h-5" />
            Совещания
          </h4>
          {meetings.length > 0 ? (
            <div className="space-y-3">
              {meetings.map((meeting) => (
                <div
                  key={meeting.id}
                  className="p-4 bg-slate-50 rounded-lg border border-slate-200 cursor-pointer hover:border-primary-300 transition-colors"
                  onClick={() => {
                    setSelectedMeeting(meeting);
                    setMeetingCardData({
                      notes: meeting.notes || '',
                      conclusions: meeting.conclusions || '',
                      questions: '',
                      theses: ''
                    });
                    setShowMeetingCard(true);
                  }}
                >
                  <div className="flex justify-between items-start mb-2">
                    <h5 className="font-bold text-slate-800">{meeting.title}</h5>
                    {(meeting.notes || meeting.conclusions) && (
                      <span className="text-xs text-emerald-600 font-bold flex items-center gap-1">
                        <Edit className="w-3 h-3" />
                        Есть записи
                      </span>
                    )}
                  </div>
                  <div className="space-y-1 text-sm text-slate-600">
                    <div className="flex items-center gap-2">
                      <Clock className="w-4 h-4" />
                      {new Date(meeting.startTime).toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })} - {new Date(meeting.endTime).toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })}
                    </div>
                    {meeting.room && (
                      <div className="flex items-center gap-2">
                        <MapPin className="w-4 h-4" />
                        {meeting.room.name}
                      </div>
                    )}
                    <div className="flex items-center gap-2">
                      <Users className="w-4 h-4" />
                      {(meeting.participants || []).length} участников
                    </div>
                    <div className="flex gap-2 mt-2">
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          setSelectedMeeting(meeting);
                          // Инициализируем данные карточки из совещания
                          setMeetingCardData({
                            notes: meeting.notes || '',
                            conclusions: meeting.conclusions || '',
                            questions: '', // Пока нет поля в БД, можно добавить позже
                            theses: '' // Пока нет поля в БД, можно добавить позже
                          });
                          setShowMeetingCard(true);
                        }}
                        className="px-3 py-1.5 bg-blue-50 text-blue-600 rounded-lg text-xs font-bold hover:bg-blue-100 transition-colors flex items-center gap-1"
                        title="Открыть карточку совещания"
                      >
                        <CheckCircle2 className="w-3 h-3" />
                        Карточка
                      </button>
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          handleOpenEditModal(meeting);
                        }}
                        className="px-3 py-1.5 bg-emerald-50 text-emerald-600 rounded-lg text-xs font-bold hover:bg-emerald-100 transition-colors flex items-center gap-1"
                        title="Редактировать заметки и заключения"
                      >
                        <Edit className="w-3 h-3" />
                        Заметки
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <p className="text-slate-500 text-sm">Нет совещаний на выбранную дату</p>
          )}
        </div>

        {/* Переговорные */}
        <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
          <div className="flex justify-between items-center mb-4">
            <h4 className="font-bold text-slate-800">Переговорные комнаты</h4>
            <button
              onClick={() => {
                setEditingRoom(null);
                setRoomFormData({
                  name: '',
                  capacity: 10,
                  location: '',
                  description: '',
                  equipment: [],
                  isActive: true
                });
                setShowCreateRoomModal(true);
              }}
              className="px-3 py-1.5 bg-primary-600 text-white rounded-lg text-xs font-bold hover:bg-primary-700 transition-colors flex items-center gap-1"
            >
              <Plus className="w-3 h-3" />
              Создать
            </button>
          </div>
          {rooms.length > 0 ? (
            <div className="space-y-3">
              {rooms.map((room) => {
                const roomBookings = bookings.filter(b => b.roomId === room.id);
                const activeBookings = roomBookings
                  .filter(b => b.status === 'active')
                  .sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime());
                const isFree = room.isActive !== false && activeBookings.length === 0;
                return (
                  <div
                    key={room.id}
                    className={`p-4 rounded-lg border ${room.isActive === false ? 'bg-slate-100 border-slate-200' : 'bg-slate-50 border-slate-200'}`}
                  >
                    <div className="flex items-start justify-between gap-2 mb-2">
                      <div className="min-w-0">
                        <h5 className="font-bold text-slate-800">{room.name}</h5>
                        {room.isActive === false && (
                          <span className="text-xs text-amber-600 font-medium">Неактивна</span>
                        )}
                      </div>
                      <div className="flex items-center gap-1 flex-shrink-0">
                        {room.isActive !== false && (
                          <button
                            onClick={(e) => { e.stopPropagation(); handleOpenEditRoom(room); }}
                            className="p-1.5 text-slate-500 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors"
                            title="Редактировать переговорную"
                          >
                            <Edit className="w-4 h-4" />
                          </button>
                        )}
                        <span className={`px-2 py-1 rounded text-xs ${
                          room.isActive === false
                            ? 'bg-slate-200 text-slate-600'
                            : isFree
                              ? 'bg-emerald-100 text-emerald-700'
                              : 'bg-amber-100 text-amber-700'
                        }`}>
                          {room.isActive === false ? 'Неактивна' : isFree ? 'Свободна' : 'Занята'}
                        </span>
                      </div>
                    </div>
                    <p className="text-sm text-slate-600 mb-2">
                      Вместимость: {room.capacity} чел.
                      {room.location && ` · ${room.location}`}
                    </p>
                    {room.isActive !== false && (
                      <div className="mt-2">
                        {activeBookings.length > 0 ? (
                          <div className="space-y-1.5">
                            <p className="text-xs font-medium text-slate-500">Занято:</p>
                            {activeBookings.map((booking) => (
                              <div key={booking.id} className="text-xs text-slate-600 flex items-center gap-2">
                                <Clock className="w-3.5 h-3.5 flex-shrink-0" />
                                {new Date(booking.startTime).toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })}–{new Date(booking.endTime).toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })}
                                {(booking.purpose || booking.meeting?.title) && (
                                  <span className="text-slate-500">
                                    · {booking.meeting?.title ? `Совещание: ${booking.meeting.title}` : booking.purpose}
                                  </span>
                                )}
                              </div>
                            ))}
                          </div>
                        ) : (
                          <p className="text-xs text-emerald-600">На выбранную дату свободна весь день</p>
                        )}
                      </div>
                    )}
                    {room.isActive === false && (
                      <button
                        onClick={(e) => { e.stopPropagation(); handleOpenEditRoom(room); }}
                        className="mt-2 text-xs text-primary-600 hover:underline"
                      >
                        Редактировать
                      </button>
                    )}
                  </div>
                );
              })}
            </div>
          ) : (
            <p className="text-slate-500 text-sm">Нет переговорных комнат</p>
          )}
        </div>
      </div>

      {/* Meeting Card Modal */}
      {showMeetingCard && selectedMeeting && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl p-6 max-w-4xl w-full max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center mb-4">
              <div>
                <h3 className="text-lg font-bold text-slate-800">{selectedMeeting.title}</h3>
                <p className="text-sm text-slate-500 mt-1">
                  {new Date(selectedMeeting.startTime).toLocaleString('ru-RU')} - {new Date(selectedMeeting.endTime).toLocaleString('ru-RU')}
                </p>
              </div>
              <button
                onClick={() => {
                  setShowMeetingCard(false);
                  setSelectedMeeting(null);
                }}
                className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            {/* Статус и действия */}
            <div className="mb-6 p-4 bg-slate-50 rounded-lg">
              <div className="flex items-center justify-between mb-4">
                <div className="flex items-center gap-3">
                  <span className={`px-3 py-1 rounded-lg text-xs font-bold ${
                    selectedMeeting.status === 'in_progress' ? 'bg-emerald-100 text-emerald-700' :
                    selectedMeeting.status === 'completed' ? 'bg-blue-100 text-blue-700' :
                    selectedMeeting.status === 'canceled' ? 'bg-red-100 text-red-700' :
                    'bg-slate-100 text-slate-700'
                  }`}>
                    {selectedMeeting.status === 'in_progress' ? 'Идет' :
                     selectedMeeting.status === 'completed' ? 'Завершено' :
                     selectedMeeting.status === 'canceled' ? 'Отменено' :
                     'Запланировано'}
                  </span>
                  {selectedMeeting.room && (
                    <span className="text-sm text-slate-600 flex items-center gap-1">
                      <MapPin className="w-4 h-4" />
                      {selectedMeeting.room.name}
                    </span>
                  )}
                </div>
                <div className="flex gap-2">
                  {selectedMeeting.status === 'scheduled' && (
                    <button
                      onClick={handleStartMeeting}
                      className="px-4 py-2 bg-emerald-600 text-white rounded-lg text-sm font-bold hover:bg-emerald-700 transition-colors flex items-center gap-2"
                    >
                      <Play className="w-4 h-4" />
                      Начать совещание
                    </button>
                  )}
                  {selectedMeeting.status === 'in_progress' && (
                    <button
                      onClick={handleEndMeeting}
                      className="px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-bold hover:bg-red-700 transition-colors flex items-center gap-2"
                    >
                      <Square className="w-4 h-4" />
                      Завершить совещание
                    </button>
                  )}
                </div>
              </div>

              {/* Информация о совещании */}
              <div className="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <span className="text-slate-600">Организатор:</span>
                  <span className="ml-2 font-medium">{selectedMeeting.organizer}</span>
                </div>
                <div>
                  <span className="text-slate-600">Участников:</span>
                  <span className="ml-2 font-medium">{(selectedMeeting.participants || []).length}</span>
                </div>
                {selectedMeeting.agenda && (
                  <div className="col-span-2">
                    <span className="text-slate-600">Повестка:</span>
                    <p className="mt-1 text-slate-800">{selectedMeeting.agenda}</p>
                  </div>
                )}
                {selectedMeeting.description && (
                  <div className="col-span-2">
                    <span className="text-slate-600">Описание:</span>
                    <p className="mt-1 text-slate-800">{selectedMeeting.description}</p>
                  </div>
                )}
              </div>
            </div>

            {/* Участники */}
            <div className="mb-6">
              <div className="flex justify-between items-center mb-2">
                <h4 className="font-bold text-slate-800 flex items-center gap-2">
                  <Users className="w-4 h-4" />
                  Участники
                </h4>
                <button
                  onClick={() => {
                    const newParticipant = prompt('Введите имя участника:');
                    if (newParticipant && newParticipant.trim()) {
                      handleAddParticipants([newParticipant.trim()]);
                    }
                  }}
                  className="px-3 py-1.5 bg-primary-50 text-primary-600 rounded-lg text-xs font-bold hover:bg-primary-100 transition-colors flex items-center gap-1"
                >
                  <UserPlus className="w-3 h-3" />
                  Добавить
                </button>
              </div>
              <div className="flex flex-wrap gap-2">
                {(selectedMeeting.participants || []).map((participant, index) => (
                  <span key={index} className="px-3 py-1 bg-slate-100 text-slate-700 rounded-lg text-sm">
                    {participant}
                  </span>
                ))}
                {(!selectedMeeting.participants || selectedMeeting.participants.length === 0) && (
                  <span className="text-sm text-slate-400">Нет участников</span>
                )}
              </div>
            </div>

            {/* Тезисы */}
            <div className="mb-6">
              <h4 className="font-bold text-slate-800 mb-2 flex items-center gap-2">
                <FileText className="w-4 h-4" />
                Тезисы
              </h4>
              <textarea
                value={meetingCardData.theses}
                onChange={(e) => setMeetingCardData({ ...meetingCardData, theses: e.target.value })}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                rows={4}
                placeholder="Введите тезисы совещания..."
              />
            </div>

            {/* Вопросы */}
            <div className="mb-6">
              <h4 className="font-bold text-slate-800 mb-2 flex items-center gap-2">
                <MessageSquare className="w-4 h-4" />
                Вопросы
              </h4>
              <textarea
                value={meetingCardData.questions}
                onChange={(e) => setMeetingCardData({ ...meetingCardData, questions: e.target.value })}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                rows={4}
                placeholder="Введите вопросы для обсуждения..."
              />
            </div>

            {/* Заметки */}
            <div className="mb-6">
              <h4 className="font-bold text-slate-800 mb-2">Заметки / Протокол</h4>
              <textarea
                value={meetingCardData.notes}
                onChange={(e) => setMeetingCardData({ ...meetingCardData, notes: e.target.value })}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                rows={6}
                placeholder="Введите заметки или протокол совещания..."
              />
            </div>

            {/* Заключения */}
            <div className="mb-6">
              <h4 className="font-bold text-slate-800 mb-2">Заключения</h4>
              <textarea
                value={meetingCardData.conclusions}
                onChange={(e) => setMeetingCardData({ ...meetingCardData, conclusions: e.target.value })}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                rows={6}
                placeholder="Введите заключения совещания, принятые решения, задачи..."
              />
            </div>

            {/* Кнопки действий */}
            <div className="flex gap-3 pt-4 border-t border-slate-200">
              <button
                onClick={() => {
                  setRescheduleData({
                    date: new Date(selectedMeeting.startTime).toISOString().split('T')[0],
                    startTime: new Date(selectedMeeting.startTime).toTimeString().slice(0, 5),
                    endTime: new Date(selectedMeeting.endTime).toTimeString().slice(0, 5)
                  });
                  setShowRescheduleModal(true);
                }}
                className="px-4 py-2 bg-amber-50 text-amber-600 rounded-lg text-sm font-bold hover:bg-amber-100 transition-colors flex items-center gap-2"
              >
                <CalendarIcon className="w-4 h-4" />
                Перенести
              </button>
              <button
                onClick={handleSaveMeetingCard}
                className="flex-1 bg-primary-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-primary-700 transition-colors flex items-center justify-center gap-2"
              >
                <Save className="w-4 h-4" />
                Сохранить
              </button>
              <button
                onClick={() => {
                  setShowMeetingCard(false);
                  setSelectedMeeting(null);
                }}
                className="px-4 py-2 bg-slate-100 text-slate-600 rounded-lg font-bold text-sm hover:bg-slate-200 transition-colors"
              >
                Закрыть
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Edit Meeting Modal (Notes & Conclusions) */}
      {showEditModal && selectedMeeting && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center mb-4">
              <div>
                <h3 className="text-lg font-bold text-slate-800">Заметки и заключения</h3>
                <p className="text-sm text-slate-500 mt-1">{selectedMeeting.title}</p>
              </div>
              <button
                onClick={() => {
                  setShowEditModal(false);
                  setSelectedMeeting(null);
                }}
                className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Заметки / Протокол</label>
                <textarea
                  value={editData.notes}
                  onChange={(e) => setEditData({ ...editData, notes: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                  rows={8}
                  placeholder="Введите заметки или протокол совещания..."
                />
                <p className="text-xs text-slate-400 mt-1">Заметки во время совещания, протокол</p>
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Заключения</label>
                <textarea
                  value={editData.conclusions}
                  onChange={(e) => setEditData({ ...editData, conclusions: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                  rows={6}
                  placeholder="Введите заключения совещания, принятые решения, задачи..."
                />
                <p className="text-xs text-slate-400 mt-1">Заключения, решения, задачи по итогам совещания</p>
              </div>

              <div className="flex gap-3 pt-4">
                <button
                  onClick={handleSaveMeeting}
                  className="flex-1 bg-primary-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-primary-700 transition-colors flex items-center justify-center gap-2"
                >
                  <Save className="w-4 h-4" />
                  Сохранить
                </button>
                <button
                  onClick={() => {
                    setShowEditModal(false);
                    setSelectedMeeting(null);
                  }}
                  className="px-4 py-2 bg-slate-100 text-slate-600 rounded-lg font-bold text-sm hover:bg-slate-200 transition-colors"
                >
                  Отмена
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Create Meeting Modal */}
      {showCreateModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl p-6 max-w-md w-full max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-bold text-slate-800">Создать совещание</h3>
              <button
                onClick={() => setShowCreateModal(false)}
                className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Название *</label>
                <input
                  type="text"
                  value={formData.title}
                  onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                  placeholder="Введите название совещания"
                  required
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Дата</label>
                <input
                  type="date"
                  value={selectedDate}
                  onChange={(e) => setSelectedDate(e.target.value)}
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                  required
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Время начала *</label>
                  <input
                    type="time"
                    value={formData.startTime}
                    onChange={(e) => setFormData({ ...formData, startTime: e.target.value })}
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                    required
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Время окончания *</label>
                  <input
                    type="time"
                    value={formData.endTime}
                    onChange={(e) => setFormData({ ...formData, endTime: e.target.value })}
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                    required
                  />
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Переговорная</label>
                <select
                  value={formData.roomId}
                  onChange={(e) => setFormData({ ...formData, roomId: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                >
                  <option value="">Без переговорной</option>
                  {rooms.filter((r) => r.isActive !== false).map((room) => (
                    <option key={room.id} value={room.id.toString()}>
                      {room.name} (вместимость: {room.capacity})
                    </option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Участники</label>
                <div className="border border-slate-300 rounded-lg p-2 max-h-40 overflow-y-auto bg-slate-50/50">
                  {employees.length === 0 ? (
                    <p className="text-xs text-slate-500 py-2">Список сотрудников пуст</p>
                  ) : (
                    <div className="space-y-1">
                      {employees.map((emp) => (
                        <label key={emp.id} className="flex items-center gap-2 py-1 px-2 rounded hover:bg-white cursor-pointer">
                          <input
                            type="checkbox"
                            checked={formData.participantIds.includes(emp.id)}
                            onChange={(e) => {
                              if (e.target.checked) {
                                setFormData({ ...formData, participantIds: [...formData.participantIds, emp.id] });
                              } else {
                                setFormData({ ...formData, participantIds: formData.participantIds.filter(id => id !== emp.id) });
                              }
                            }}
                            className="w-4 h-4 text-primary-600 border-slate-300 rounded"
                          />
                          <span className="text-sm text-slate-700">{emp.name}</span>
                        </label>
                      ))}
                    </div>
                  )}
                </div>
                {formData.participantIds.length > 0 && (
                  <p className="text-xs text-slate-600 mt-1">Выбрано: {formData.participantIds.length}</p>
                )}
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Описание</label>
                <textarea
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                  rows={3}
                  placeholder="Описание совещания..."
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Повестка дня</label>
                <textarea
                  value={formData.agenda}
                  onChange={(e) => setFormData({ ...formData, agenda: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                  rows={3}
                  placeholder="Повестка дня..."
                />
              </div>

              <div className="flex gap-3 pt-4">
                <button
                  onClick={handleCreateMeeting}
                  disabled={!formData.title || !formData.startTime || !formData.endTime}
                  className="flex-1 bg-primary-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-primary-700 transition-colors disabled:bg-slate-300 disabled:cursor-not-allowed"
                >
                  Создать
                </button>
                <button
                  onClick={() => setShowCreateModal(false)}
                  className="px-4 py-2 bg-slate-100 text-slate-600 rounded-lg font-bold text-sm hover:bg-slate-200 transition-colors"
                >
                  Отмена
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Reschedule Meeting Modal */}
      {showRescheduleModal && selectedMeeting && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl p-6 max-w-md w-full">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-bold text-slate-800">Перенести совещание</h3>
              <button
                onClick={() => {
                  setShowRescheduleModal(false);
                }}
                className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Название совещания</label>
                <input
                  type="text"
                  value={selectedMeeting.title}
                  disabled
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm bg-slate-50"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Новая дата *</label>
                <input
                  type="date"
                  value={rescheduleData.date}
                  onChange={(e) => setRescheduleData({ ...rescheduleData, date: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                  required
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Время начала *</label>
                  <input
                    type="time"
                    value={rescheduleData.startTime}
                    onChange={(e) => setRescheduleData({ ...rescheduleData, startTime: e.target.value })}
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                    required
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Время окончания *</label>
                  <input
                    type="time"
                    value={rescheduleData.endTime}
                    onChange={(e) => setRescheduleData({ ...rescheduleData, endTime: e.target.value })}
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                    required
                  />
                </div>
              </div>

              <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 text-xs text-blue-800">
                <p className="font-bold mb-1">ℹ️ Текущее время:</p>
                <p>
                  {new Date(selectedMeeting.startTime).toLocaleString('ru-RU')} - {new Date(selectedMeeting.endTime).toLocaleString('ru-RU')}
                </p>
              </div>

              <div className="flex gap-3 pt-4">
                <button
                  onClick={handleRescheduleMeeting}
                  disabled={!rescheduleData.date || !rescheduleData.startTime || !rescheduleData.endTime}
                  className="flex-1 bg-amber-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-amber-700 transition-colors disabled:bg-slate-300 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                >
                  <CalendarIcon className="w-4 h-4" />
                  Перенести
                </button>
                <button
                  onClick={() => {
                    setShowRescheduleModal(false);
                  }}
                  className="px-4 py-2 bg-slate-100 text-slate-600 rounded-lg font-bold text-sm hover:bg-slate-200 transition-colors"
                >
                  Отмена
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Create / Edit Room Modal */}
      {showCreateRoomModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl p-6 max-w-md w-full max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-bold text-slate-800">
                {editingRoom ? 'Редактировать переговорную' : 'Создать переговорную'}
              </h3>
              <button
                onClick={() => {
                  setShowCreateRoomModal(false);
                  setEditingRoom(null);
                }}
                className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Название *</label>
                <input
                  type="text"
                  value={roomFormData.name}
                  onChange={(e) => setRoomFormData({ ...roomFormData, name: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                  placeholder="Например: Переговорная №1"
                  required
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Вместимость *</label>
                  <input
                    type="number"
                    value={roomFormData.capacity}
                    onChange={(e) => setRoomFormData({ ...roomFormData, capacity: parseInt(e.target.value) || 10 })}
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                    min="1"
                    required
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Местоположение</label>
                  <input
                    type="text"
                    value={roomFormData.location}
                    onChange={(e) => setRoomFormData({ ...roomFormData, location: e.target.value })}
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                    placeholder="Например: 3 этаж"
                  />
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Оборудование</label>
                <div className="space-y-2">
                  {['projector', 'whiteboard', 'video_conference', 'screen', 'microphone'].map((eq) => (
                    <label key={eq} className="flex items-center gap-2 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={roomFormData.equipment.includes(eq)}
                        onChange={(e) => {
                          if (e.target.checked) {
                            setRoomFormData({ ...roomFormData, equipment: [...roomFormData.equipment, eq] });
                          } else {
                            setRoomFormData({ ...roomFormData, equipment: roomFormData.equipment.filter(item => item !== eq) });
                          }
                        }}
                        className="w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500"
                      />
                      <span className="text-sm text-slate-700">
                        {eq === 'projector' ? 'Проектор' :
                         eq === 'whiteboard' ? 'Доска' :
                         eq === 'video_conference' ? 'Видеоконференция' :
                         eq === 'screen' ? 'Экран' :
                         eq === 'microphone' ? 'Микрофон' : eq}
                      </span>
                    </label>
                  ))}
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Описание</label>
                <textarea
                  value={roomFormData.description}
                  onChange={(e) => setRoomFormData({ ...roomFormData, description: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                  rows={3}
                  placeholder="Дополнительная информация о переговорной..."
                />
              </div>

              {editingRoom && (
                <div>
                  <label className="flex items-center gap-2 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={roomFormData.isActive}
                      onChange={(e) => setRoomFormData({ ...roomFormData, isActive: e.target.checked })}
                      className="w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500"
                    />
                    <span className="text-sm font-medium text-slate-700">Активна (доступна для бронирования)</span>
                  </label>
                  <p className="text-xs text-slate-500 mt-1">Неактивные комнаты не отображаются в списке при создании совещания</p>
                </div>
              )}

              <div className="flex gap-3 pt-4">
                <button
                  onClick={handleCreateRoom}
                  disabled={!roomFormData.name || !roomFormData.name.trim() || !roomFormData.capacity || roomFormData.capacity <= 0}
                  className="flex-1 bg-primary-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-primary-700 transition-colors disabled:bg-slate-300 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                >
                  <Building2 className="w-4 h-4" />
                  {editingRoom ? 'Сохранить' : 'Создать'}
                </button>
                <button
                  onClick={() => {
                    setShowCreateRoomModal(false);
                    setEditingRoom(null);
                  }}
                  className="px-4 py-2 bg-slate-100 text-slate-600 rounded-lg font-bold text-sm hover:bg-slate-200 transition-colors"
                >
                  Отмена
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};