import React, { useState, useEffect } from 'react';
import { PREvent, PREventPhoto, Building, District, Employee } from '../../types';
import { backendApi } from '../../services/apiClient';
import { readCache, saveCache } from '../../hooks/useCachedFetch';
import { REFRESH_EVENTS, EVENT_SMM_POST_FROM_EVENT } from '../../constants/refreshEvents';
import {
  Calendar, MapPin, Users, Coffee, PartyPopper, TreePine, GraduationCap, ChevronRight, Plus, X,
  FileText, Megaphone, UserPlus, Camera, Banknote, Filter, List, LayoutGrid, Download, Copy
} from 'lucide-react';

const UPLOADS_BASE = (import.meta.env.VITE_API_BASE_URL || 'http://localhost:4000/api').replace(/\/api\/?$/, '') || 'http://localhost:4000';

const CATEGORY_LABELS: Record<PREvent['category'], string> = {
  holiday: 'Праздник',
  eco: 'Эко',
  sport: 'Спорт',
  training: 'Обучение',
  meeting: 'Встреча'
};
const STATUS_LABELS: Record<PREvent['status'], string> = {
  planned: 'Запланировано',
  in_progress: 'В процессе',
  completed: 'Проведено',
  canceled: 'Отменено'
};

const CACHE_KEY = 'mkd_pr_events_cache';

interface EventsRegistryProps {
  onNavigate?: (tab: string) => void;
}

export const EventsRegistry: React.FC<EventsRegistryProps> = ({ onNavigate }) => {
  const cached = readCache<PREvent[]>(CACHE_KEY, []);
  const [events, setEvents] = useState<PREvent[]>(cached);
  const [loading, setLoading] = useState(cached.length === 0);
  const [formOpen, setFormOpen] = useState(false);
  const [detailEvent, setDetailEvent] = useState<PREvent | null>(null);
  const [editingEvent, setEditingEvent] = useState<PREvent | null>(null);
  const [buildings, setBuildings] = useState<Building[]>([]);
  const [employees, setEmployees] = useState<Employee[]>([]);
  const [districts, setDistricts] = useState<District[]>([]);
  const [filters, setFilters] = useState<{ status?: string; type?: string; buildingId?: string; districtId?: string; from?: string; to?: string }>({});
  const [filtersExpanded, setFiltersExpanded] = useState(false);
  const [viewMode, setViewMode] = useState<'list' | 'calendar'>('list');
  const [displayLimit, setDisplayLimit] = useState(20);

  const fetchEvents = async (showSpinner = true) => {
    try {
      if (showSpinner && cached.length === 0) setLoading(true);
      const list = await backendApi.getPREvents({
        limit: 100,
        ...(filters.status && { status: filters.status }),
        ...(filters.type && { type: filters.type }),
        ...(filters.buildingId && { buildingId: filters.buildingId }),
        ...(filters.districtId && { districtId: filters.districtId }),
        ...(filters.from && { from: filters.from }),
        ...(filters.to && { to: filters.to }),
      });
      const arr = Array.isArray(list) ? list : [];
      setEvents(arr);
      saveCache(CACHE_KEY, arr);
    } catch (e) {
      setEvents([]);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchEvents();
  }, [filters]);

  useEffect(() => {
    const onRefresh = () => fetchEvents(false);
    window.addEventListener(REFRESH_EVENTS.events, onRefresh);
    return () => window.removeEventListener(REFRESH_EVENTS.events, onRefresh);
  }, []);

  useEffect(() => {
    const interval = setInterval(() => fetchEvents(false), 10 * 1000);
    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    backendApi.getBuildings().then(setBuildings).catch(() => setBuildings([]));
    backendApi.getDistricts().then(setDistricts).catch(() => setDistricts([]));
  }, []);
  useEffect(() => {
    if (formOpen || detailEvent) {
      backendApi.getEmployees().then(setEmployees).catch(() => setEmployees([]));
    }
  }, [formOpen, detailEvent]);

  const clearFilters = () => setFilters({});
  const hasActiveFilters = Object.values(filters).some(Boolean);

  const displayedEvents = events.slice(0, displayLimit);
  const hasMore = events.length > displayLimit;

  useEffect(() => {
    setDisplayLimit(20);
  }, [filters]);

  const eventsByDate: Record<string, PREvent[]> = {};
  displayedEvents.forEach(ev => {
    const d = typeof ev.date === 'string' ? ev.date.slice(0, 10) : String(ev.date).slice(0, 10);
    if (!eventsByDate[d]) eventsByDate[d] = [];
    eventsByDate[d].push(ev);
  });
  const plannedCount = events.filter(e => e.status === 'planned' || e.status === 'in_progress').length;
  const completedCount = events.filter(e => e.status === 'completed').length;

  const handleExportCSV = () => {
    const headers = ['Название', 'Дата', 'Тип', 'Категория', 'Статус', 'Место', 'Участников', 'Бюджет (₽)', 'Участок/дома'];
    const rows = events.map(e => {
      const locPlace = e.locationPlaceType === 'district' && e.locationDistrictId
        ? (districts.find(d => d.id === e.locationDistrictId)?.name || 'Участок')
        : e.locationPlaceType === 'buildings' && e.locationBuildingIds?.length
          ? `${e.locationBuildingIds.length} домов`
          : '—';
      return [
        e.title || '',
        typeof e.date === 'string' ? e.date : String(e.date),
        e.type === 'resident' ? 'Жители' : 'Внутреннее',
        CATEGORY_LABELS[e.category] || '',
        STATUS_LABELS[e.status] || '',
        e.location || '—',
        String(e.attendeesCount ?? 0),
        e.budget != null ? Number(e.budget).toLocaleString('ru-RU') : '—',
        locPlace,
      ];
    });
    const csvContent = [headers.join(';'), ...rows.map(row => row.map(cell => `"${String(cell).replace(/"/g, '""')}"`).join(';'))].join('\n');
    const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = `мероприятия_${new Date().toISOString().split('T')[0]}.csv`;
    link.click();
    URL.revokeObjectURL(link.href);
  };

  const handleCreate = () => {
    setEditingEvent(null);
    setFormOpen(true);
  };

  const handleEdit = (event: PREvent) => {
    setEditingEvent(event);
    setFormOpen(true);
    setDetailEvent(null);
  };

  const handleSaveForm = async (payload: Partial<PREvent> & { title: string; date: string; type: PREvent['type']; category: PREvent['category']; assignedEmployeeIds?: string[] }) => {
    try {
      if (editingEvent && editingEvent.id != null) {
        await backendApi.updatePREvent(editingEvent.id, payload);
      } else {
        await backendApi.createPREvent(payload);
      }
      setFormOpen(false);
      setEditingEvent(null);
      window.dispatchEvent(new CustomEvent('mkd-events-changed'));
      fetchEvents();
    } catch (e) {
      console.error(e);
      throw e;
    }
  };

  const handleDelete = async (id: string | number) => {
    if (!confirm('Удалить мероприятие?')) return;
    try {
      await backendApi.deletePREvent(id);
      setDetailEvent(null);
      window.dispatchEvent(new CustomEvent('mkd-events-changed'));
      fetchEvents();
    } catch (e) {
      console.error(e);
    }
  };

  const handleCopyEvent = (ev: PREvent) => {
    const { id, ...rest } = ev as PREvent & { id?: unknown };
    setEditingEvent({
      ...rest,
      id: undefined as any,
      title: `${ev.title} (копия)`,
      status: 'planned',
      assignedEmployeeIds: ev.assignedEmployeeIds ?? [],
    } as PREvent);
    setFormOpen(true);
    setDetailEvent(null);
  };

  const handleStatusChange = async (ev: PREvent, newStatus: PREvent['status']) => {
    try {
      await backendApi.updatePREvent(ev.id, { status: newStatus });
      fetchEvents();
      if (detailEvent?.id === ev.id) {
        backendApi.getPREvent(ev.id).then(setDetailEvent).catch(() => setDetailEvent(null));
      }
    } catch (e) {
      console.error(e);
    }
  };

  const handleOpenInvoice = (event: PREvent) => {
    window.dispatchEvent(new CustomEvent('mkd-open-finance-invoice', {
      detail: {
        purposeType: 'event',
        purposeEventId: String(event.id),
        purposeDescription: event.title,
        totalAmount: event.budget ?? undefined
      }
    }));
    setDetailEvent(null);
  };

  return (
    <div className="space-y-6 animate-fade-in">
      <div className="flex justify-between items-center px-1 flex-wrap gap-3">
        <div className="flex items-center gap-3">
          <h3 className="font-black text-slate-500 text-[10px] uppercase tracking-[0.2em]">План мероприятий</h3>
          <div className="flex rounded-xl overflow-hidden border border-slate-200">
            <button
              type="button"
              onClick={() => setViewMode('list')}
              className={`px-3 py-1.5 text-[10px] font-bold ${viewMode === 'list' ? 'bg-primary-600 text-white' : 'bg-white text-slate-500 hover:bg-slate-50'}`}
            >
              <List className="w-3.5 h-3.5 inline mr-1"/> Список
            </button>
            <button
              type="button"
              onClick={() => setViewMode('calendar')}
              className={`px-3 py-1.5 text-[10px] font-bold ${viewMode === 'calendar' ? 'bg-primary-600 text-white' : 'bg-white text-slate-500 hover:bg-slate-50'}`}
            >
              <LayoutGrid className="w-3.5 h-3.5 inline mr-1"/> Календарь
            </button>
          </div>
          {(plannedCount > 0 || completedCount > 0) && (
            <div className="flex gap-2 text-[10px]">
              <span className="text-slate-500 font-bold">Запланировано: <span className="text-primary-600 font-black">{plannedCount}</span></span>
              <span className="text-slate-400">|</span>
              <span className="text-slate-500 font-bold">Проведено: <span className="text-emerald-600 font-black">{completedCount}</span></span>
            </div>
          )}
        </div>
        <div className="flex items-center gap-2">
          <button
            type="button"
            onClick={handleExportCSV}
            disabled={events.length === 0}
            className="px-3 py-2 border border-slate-200 rounded-xl text-[10px] font-bold text-slate-600 hover:bg-slate-50 disabled:opacity-50 flex items-center gap-1.5"
          >
            <Download className="w-4 h-4"/> CSV
          </button>
          <button
            onClick={handleCreate}
            className="bg-primary-600 text-white px-4 py-2 rounded-xl text-[10px] font-black uppercase flex items-center gap-2 shadow-lg shadow-primary-500/20 active:scale-95 transition-all"
          >
            <Plus className="w-4 h-4"/> Новое событие
          </button>
        </div>
      </div>

      {/* Фильтры */}
      <div className="bg-white rounded-2xl border border-slate-200 p-4">
        <button
          type="button"
          onClick={() => setFiltersExpanded(!filtersExpanded)}
          className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-wider text-slate-600 hover:text-slate-800"
        >
          <Filter className="w-4 h-4" />
          Фильтры {hasActiveFilters && `(${Object.values(filters).filter(Boolean).length})`}
        </button>
        {filtersExpanded && (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-3 mt-4">
            <div>
              <label className="block text-[10px] font-bold text-slate-500 mb-1">Статус</label>
              <select
                value={filters.status ?? ''}
                onChange={e => setFilters(f => ({ ...f, status: e.target.value || undefined }))}
                className="w-full border border-slate-200 rounded-lg px-2 py-1.5 text-sm"
              >
                <option value="">— Все —</option>
                {Object.entries(STATUS_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
              </select>
            </div>
            <div>
              <label className="block text-[10px] font-bold text-slate-500 mb-1">Тип</label>
              <select
                value={filters.type ?? ''}
                onChange={e => setFilters(f => ({ ...f, type: e.target.value || undefined }))}
                className="w-full border border-slate-200 rounded-lg px-2 py-1.5 text-sm"
              >
                <option value="">— Все —</option>
                <option value="resident">Жители</option>
                <option value="internal">Внутреннее</option>
              </select>
            </div>
            <div>
              <label className="block text-[10px] font-bold text-slate-500 mb-1">Дата с</label>
              <input
                type="date"
                value={filters.from ?? ''}
                onChange={e => setFilters(f => ({ ...f, from: e.target.value || undefined }))}
                className="w-full border border-slate-200 rounded-lg px-2 py-1.5 text-sm"
              />
            </div>
            <div>
              <label className="block text-[10px] font-bold text-slate-500 mb-1">Дата по</label>
              <input
                type="date"
                value={filters.to ?? ''}
                onChange={e => setFilters(f => ({ ...f, to: e.target.value || undefined }))}
                className="w-full border border-slate-200 rounded-lg px-2 py-1.5 text-sm"
              />
            </div>
            <div>
              <label className="block text-[10px] font-bold text-slate-500 mb-1">Дом</label>
              <select
                value={filters.buildingId ?? ''}
                onChange={e => setFilters(f => ({ ...f, buildingId: e.target.value || undefined }))}
                className="w-full border border-slate-200 rounded-lg px-2 py-1.5 text-sm"
              >
                <option value="">— Все —</option>
                {buildings.map(b => (
                  <option key={b.id} value={b.id}>{(b as any).data?.passport?.address || b.id}</option>
                ))}
              </select>
            </div>
            <div>
              <label className="block text-[10px] font-bold text-slate-500 mb-1">Участок</label>
              <select
                value={filters.districtId ?? ''}
                onChange={e => setFilters(f => ({ ...f, districtId: e.target.value || undefined }))}
                className="w-full border border-slate-200 rounded-lg px-2 py-1.5 text-sm"
              >
                <option value="">— Все —</option>
                {districts.map(d => (
                  <option key={d.id} value={d.id}>{d.name}</option>
                ))}
              </select>
            </div>
            {hasActiveFilters && (
              <div className="flex items-end">
                <button type="button" onClick={clearFilters} className="px-3 py-1.5 text-[10px] font-bold text-slate-500 hover:text-slate-700 border border-slate-200 rounded-lg">
                  Сбросить
                </button>
              </div>
            )}
          </div>
        )}
      </div>

      {loading ? (
        <p className="text-slate-500 py-8">Загрузка...</p>
      ) : viewMode === 'calendar' ? (
        <div className="space-y-4">
          {Object.keys(eventsByDate).sort().map(date => (
            <div key={date} className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
              <div className="bg-slate-50 px-4 py-2 border-b border-slate-200">
                <div className="flex items-center gap-2">
                  <Calendar className="w-4 h-4 text-primary-500" />
                  <span className="font-bold text-slate-800">{new Date(date).toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', weekday: 'short' })}</span>
                </div>
              </div>
              <div className="p-4 space-y-2">
                {eventsByDate[date].map(event => (
                  <EventCard key={String(event.id)} event={event} onOpen={() => setDetailEvent(event)} onStatusChange={(s) => handleStatusChange(event, s)} />
                ))}
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="space-y-4">
          {displayedEvents.map(event => (
            <EventCard
              key={String(event.id)}
              event={event}
              onOpen={() => setDetailEvent(event)}
              onStatusChange={(s) => handleStatusChange(event, s)}
            />
          ))}
          {hasMore && (
            <button
              type="button"
              onClick={() => setDisplayLimit(l => l + 20)}
              className="w-full py-3 text-[10px] font-bold uppercase text-slate-500 hover:text-primary-600 border border-dashed border-slate-200 rounded-2xl hover:border-primary-200"
            >
              Показать ещё ({events.length - displayLimit})
            </button>
          )}
        </div>
      )}

      {events.length === 0 && !loading && (
        <div className="bg-slate-100 rounded-[2.5rem] p-10 border-2 border-dashed border-slate-200 flex flex-col items-center justify-center text-slate-400">
          <Users className="w-10 h-10 mb-2 opacity-20"/>
          <p className="text-xs font-black uppercase tracking-widest">Нет мероприятий</p>
          <p className="text-[10px] mt-1">Создайте первое мероприятие</p>
        </div>
      )}

      {formOpen && (
        <EventFormModal
          event={editingEvent}
          buildings={buildings}
          districts={districts}
          employees={employees}
          onSave={handleSaveForm}
          onClose={() => { setFormOpen(false); setEditingEvent(null); }}
        />
      )}

      {detailEvent && (
        <EventDetailModal
          event={detailEvent}
          buildings={buildings}
          districts={districts}
          employees={employees}
          onClose={() => setDetailEvent(null)}
          onEdit={() => handleEdit(detailEvent)}
          onDelete={() => handleDelete(detailEvent.id)}
          onOpenInvoice={() => handleOpenInvoice(detailEvent)}
          onNotifySMM={() => {
            onNavigate?.('smm');
            setDetailEvent(null);
            setTimeout(() => {
              window.dispatchEvent(new CustomEvent(EVENT_SMM_POST_FROM_EVENT, { detail: { event: detailEvent } }));
            }, 100);
          }}
          onCopy={() => handleCopyEvent(detailEvent)}
          onPhotoUploaded={() => { fetchEvents(); setDetailEvent(prev => prev ? { ...prev } : null); }}
          onRefresh={() => backendApi.getPREvent(detailEvent.id).then(setDetailEvent).catch(() => setDetailEvent(null))}
        />
      )}
    </div>
  );
};

const EventCard: React.FC<{ event: PREvent; onOpen: () => void; onStatusChange?: (status: PREvent['status']) => void }> = ({ event, onOpen, onStatusChange }) => {
  const isResident = event.type === 'resident';
  const CategoryIcon = event.category === 'holiday' ? PartyPopper :
    event.category === 'eco' ? TreePine :
      event.category === 'training' ? GraduationCap : Coffee;
  const dateStr = typeof event.date === 'string' ? event.date : (event.date as unknown as string);

  return (
    <div className="bg-white p-5 rounded-[2.5rem] border border-slate-200 shadow-sm hover:shadow-md hover:border-primary-300 transition-all flex flex-col md:flex-row gap-6 relative group">
      <div className={`absolute left-0 top-0 bottom-0 w-1.5 rounded-l-full ${isResident ? 'bg-primary-500' : 'bg-violet-500'}`} />
      <div className="flex items-center gap-4 flex-1">
        <div className={`w-16 h-16 rounded-3xl flex items-center justify-center ${isResident ? 'bg-primary-50 text-primary-600' : 'bg-violet-50 text-violet-600'}`}>
          <CategoryIcon className="w-8 h-8"/>
        </div>
        <div>
          <div className="flex items-center gap-2 mb-1 flex-wrap">
            <span className={`text-[9px] font-black px-2 py-0.5 rounded-full uppercase tracking-tighter ${isResident ? 'bg-primary-100 text-primary-600' : 'bg-violet-100 text-violet-600'}`}>
              {isResident ? 'Жители' : 'Команда'}
            </span>
            <span className="text-[10px] text-slate-400 font-bold uppercase">{dateStr}</span>
            {onStatusChange ? (
              <select
                value={event.status || 'planned'}
                onChange={e => onStatusChange(e.target.value as PREvent['status'])}
                onClick={e => e.stopPropagation()}
                className="text-[9px] font-bold px-1.5 py-0.5 rounded border border-slate-200 bg-white text-slate-600 cursor-pointer"
              >
                {Object.entries(STATUS_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
              </select>
            ) : event.status ? (
              <span className="text-[9px] text-slate-500">{STATUS_LABELS[event.status]}</span>
            ) : null}
          </div>
          <h4 className="font-black text-slate-800 text-lg leading-tight group-hover:text-primary-600 transition-colors">{event.title}</h4>
          <div className="flex items-center gap-4 mt-2">
            <div className="flex items-center gap-1.5 text-[10px] text-slate-500 font-medium">
              <MapPin className="w-3.5 h-3.5 text-slate-400"/>
              {event.locationPlaceType === 'district' && event.locationDistrictId
                ? `Участок`
                : event.locationPlaceType === 'buildings' && event.locationBuildingIds?.length
                  ? `Дома (${event.locationBuildingIds.length})`
                  : (event.location || '—')}
            </div>
            <div className="flex items-center gap-1.5 text-[10px] text-slate-500 font-medium">
              <Users className="w-3.5 h-3.5 text-slate-400"/> {event.attendeesCount ?? 0} чел.
            </div>
          </div>
        </div>
      </div>
      <div className="flex items-center justify-between md:justify-end gap-3 border-t md:border-t-0 border-slate-50 pt-4 md:pt-0">
        <div className="text-right">
          <p className="text-[9px] text-slate-400 font-bold uppercase mb-1">Бюджет</p>
          <p className="text-sm font-black text-slate-900">{event.budget != null ? Number(event.budget).toLocaleString() : '—'} ₽</p>
        </div>
        <button onClick={onOpen} className="p-3 bg-slate-50 text-slate-300 rounded-2xl hover:text-primary-600 transition-colors">
          <ChevronRight className="w-5 h-5"/>
        </button>
      </div>
    </div>
  );
};

interface EventFormModalProps {
  event: PREvent | null;
  buildings: Building[];
  districts: District[];
  employees: Employee[];
  onSave: (payload: Partial<PREvent> & { title: string; date: string; type: PREvent['type']; category: PREvent['category']; assignedEmployeeIds?: string[] }) => Promise<void>;
  onClose: () => void;
}

const EventFormModal: React.FC<EventFormModalProps> = ({ event, buildings, districts, employees, onSave, onClose }) => {
  const [title, setTitle] = useState(event?.title ?? '');
  const [date, setDate] = useState(event?.date ?? '');
  const [type, setType] = useState<PREvent['type']>(event?.type ?? 'resident');
  const [category, setCategory] = useState<PREvent['category']>(event?.category ?? 'holiday');
  const [status, setStatus] = useState<PREvent['status']>(event?.status ?? 'planned');
  const [location, setLocation] = useState(event?.location ?? '');
  const [locationType, setLocationType] = useState<'building' | 'office' | ''>(event?.locationType ?? '');
  const [locationBuildingId, setLocationBuildingId] = useState(event?.locationBuildingId ?? '');
  const [locationPlaceType, setLocationPlaceType] = useState<'district' | 'buildings' | ''>(event?.locationPlaceType ?? '');
  const [locationDistrictId, setLocationDistrictId] = useState(event?.locationDistrictId ?? '');
  const [locationBuildingIds, setLocationBuildingIds] = useState<string[]>(event?.locationBuildingIds ?? []);
  const [attendeesCount, setAttendeesCount] = useState(event?.attendeesCount ?? 0);
  const [budget, setBudget] = useState(event?.budget ?? '');
  const [shortPlan, setShortPlan] = useState(event?.shortPlan ?? '');
  const [announcement, setAnnouncement] = useState(event?.announcement ?? '');
  const [assignedEmployeeIds, setAssignedEmployeeIds] = useState<string[]>(event?.assignedEmployeeIds ?? []);
  const [saving, setSaving] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!title.trim() || !date) return;
    setSaving(true);
    try {
      await onSave({
        title: title.trim(),
        date,
        type,
        category,
        status,
        location: location.trim() || undefined,
        locationType: type === 'internal' ? (locationType || undefined) : undefined,
        locationBuildingId: type === 'internal' ? (locationBuildingId || undefined) : undefined,
        locationPlaceType: type === 'resident' ? (locationPlaceType || undefined) : undefined,
        locationDistrictId: type === 'resident' ? (locationDistrictId || undefined) : undefined,
        locationBuildingIds: type === 'resident' && locationPlaceType === 'buildings' ? locationBuildingIds : undefined,
        attendeesCount: Number(attendeesCount) || 0,
        budget: budget === '' ? undefined : Number(budget),
        shortPlan: shortPlan.trim() || undefined,
        announcement: announcement.trim() || undefined,
        assignedEmployeeIds
      });
      onClose();
    } catch (_) {
      setSaving(false);
    }
  };

  const toggleBuilding = (buildingId: string) => {
    setLocationBuildingIds(prev => prev.includes(buildingId) ? prev.filter(x => x !== buildingId) : [...prev, buildingId]);
  };

  const toggleEmployee = (id: string) => {
    setAssignedEmployeeIds(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50" onClick={onClose}>
      <div className="bg-white rounded-2xl shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
        <div className="p-6 border-b border-slate-200 flex justify-between items-center">
          <h3 className="font-black text-slate-800">{event ? 'Редактировать мероприятие' : 'Новое мероприятие'}</h3>
          <button type="button" onClick={onClose} className="p-2 text-slate-400 hover:text-slate-600"><X className="w-5 h-5"/></button>
        </div>
        <form onSubmit={handleSubmit} className="p-6 space-y-4">
          <div>
            <label className="block text-xs font-bold text-slate-600 mb-1">Название *</label>
            <input type="text" value={title} onChange={e => setTitle(e.target.value)} className="w-full border border-slate-300 rounded-lg px-3 py-2" required />
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-xs font-bold text-slate-600 mb-1">Дата *</label>
              <input type="date" value={date} onChange={e => setDate(e.target.value)} className="w-full border border-slate-300 rounded-lg px-3 py-2" required />
            </div>
            <div>
              <label className="block text-xs font-bold text-slate-600 mb-1">Тип</label>
              <select value={type} onChange={e => setType(e.target.value as PREvent['type'])} className="w-full border border-slate-300 rounded-lg px-3 py-2">
                <option value="resident">Жители</option>
                <option value="internal">Внутреннее</option>
              </select>
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-xs font-bold text-slate-600 mb-1">Категория</label>
              <select value={category} onChange={e => setCategory(e.target.value as PREvent['category'])} className="w-full border border-slate-300 rounded-lg px-3 py-2">
                {Object.entries(CATEGORY_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
              </select>
            </div>
            <div>
              <label className="block text-xs font-bold text-slate-600 mb-1">Статус</label>
              <select value={status} onChange={e => setStatus(e.target.value as PREvent['status'])} className="w-full border border-slate-300 rounded-lg px-3 py-2">
                {Object.entries(STATUS_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
              </select>
            </div>
          </div>
          {type === 'resident' && (
            <div className="space-y-4">
              <div>
                <label className="block text-xs font-bold text-slate-600 mb-1">Место проведения</label>
                <select
                  value={locationPlaceType}
                  onChange={e => {
                    const v = e.target.value as 'district' | 'buildings' | '';
                    setLocationPlaceType(v);
                    if (v !== 'district') setLocationDistrictId('');
                    if (v !== 'buildings') setLocationBuildingIds([]);
                  }}
                  className="w-full border border-slate-300 rounded-lg px-3 py-2"
                >
                  <option value="">— Выберите —</option>
                  <option value="district">Участок</option>
                  <option value="buildings">Дома отдельно</option>
                </select>
              </div>
              {locationPlaceType === 'district' && (
                <div>
                  <label className="block text-xs font-bold text-slate-600 mb-1">Участок *</label>
                  <select value={locationDistrictId} onChange={e => setLocationDistrictId(e.target.value)} className="w-full border border-slate-300 rounded-lg px-3 py-2">
                    <option value="">— Выберите участок —</option>
                    {districts.map(d => (
                      <option key={d.id} value={d.id}>{d.name}</option>
                    ))}
                  </select>
                </div>
              )}
              {locationPlaceType === 'buildings' && (
                <div>
                  <label className="block text-xs font-bold text-slate-600 mb-1">Дома *</label>
                  <div className="border border-slate-300 rounded-lg p-3 max-h-40 overflow-y-auto space-y-1">
                    {buildings.map(b => (
                      <label key={b.id} className="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" checked={locationBuildingIds.includes(b.id)} onChange={() => toggleBuilding(b.id)} />
                        <span className="text-sm">{(b as any).data?.passport?.address || b.id}</span>
                      </label>
                    ))}
                    {buildings.length === 0 && <p className="text-slate-500 text-sm">Нет домов</p>}
                  </div>
                </div>
              )}
              <div>
                <label className="block text-xs font-bold text-slate-600 mb-1">Адрес (по желанию)</label>
                <input type="text" value={location} onChange={e => setLocation(e.target.value)} className="w-full border border-slate-300 rounded-lg px-3 py-2" placeholder="Например: двор, клубная комната" />
              </div>
            </div>
          )}
          {type === 'internal' && (
            <>
              <div>
                <label className="block text-xs font-bold text-slate-600 mb-1">Место проведения</label>
                <input type="text" value={location} onChange={e => setLocation(e.target.value)} className="w-full border border-slate-300 rounded-lg px-3 py-2" placeholder="Адрес или «Офис УК»" />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-bold text-slate-600 mb-1">Привязка</label>
                  <select value={locationType} onChange={e => { setLocationType(e.target.value as 'building' | 'office' | ''); if (e.target.value !== 'building') setLocationBuildingId(''); }} className="w-full border border-slate-300 rounded-lg px-3 py-2">
                    <option value="">—</option>
                    <option value="building">Дом</option>
                    <option value="office">Офис</option>
                  </select>
                </div>
                {locationType === 'building' && (
                  <div>
                    <label className="block text-xs font-bold text-slate-600 mb-1">Дом</label>
                    <select value={locationBuildingId} onChange={e => setLocationBuildingId(e.target.value)} className="w-full border border-slate-300 rounded-lg px-3 py-2">
                      <option value="">—</option>
                      {buildings.map(b => (
                        <option key={b.id} value={b.id}>{(b as any).data?.passport?.address || b.id}</option>
                      ))}
                    </select>
                  </div>
                )}
              </div>
            </>
          )}
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-xs font-bold text-slate-600 mb-1">Участников</label>
              <input type="number" min={0} value={attendeesCount} onChange={e => setAttendeesCount(Number(e.target.value) || 0)} className="w-full border border-slate-300 rounded-lg px-3 py-2" />
            </div>
            <div>
              <label className="block text-xs font-bold text-slate-600 mb-1">Бюджет (₽)</label>
              <input type="number" min={0} step={0.01} value={budget} onChange={e => setBudget(e.target.value)} className="w-full border border-slate-300 rounded-lg px-3 py-2" />
            </div>
          </div>
          <div>
            <label className="block text-xs font-bold text-slate-600 mb-1">Краткий план</label>
            <textarea value={shortPlan} onChange={e => setShortPlan(e.target.value)} rows={3} className="w-full border border-slate-300 rounded-lg px-3 py-2" placeholder="Цель, этапы, сроки" />
          </div>
          <div>
            <label className="block text-xs font-bold text-slate-600 mb-1">Текст объявления</label>
            <textarea value={announcement} onChange={e => setAnnouncement(e.target.value)} rows={3} className="w-full border border-slate-300 rounded-lg px-3 py-2" placeholder="Анонс для жителей/команды" />
          </div>
          <div>
            <label className="block text-xs font-bold text-slate-600 mb-1">Сотрудники для помощи</label>
            <div className="border border-slate-300 rounded-lg p-3 max-h-32 overflow-y-auto space-y-1">
              {employees.map(emp => (
                <label key={emp.id} className="flex items-center gap-2 cursor-pointer">
                  <input type="checkbox" checked={assignedEmployeeIds.includes(emp.id)} onChange={() => toggleEmployee(emp.id)} />
                  <span className="text-sm">{emp.name} {emp.position ? `— ${emp.position}` : ''}</span>
                </label>
              ))}
              {employees.length === 0 && <p className="text-slate-500 text-sm">Нет сотрудников</p>}
            </div>
          </div>
          <div className="flex justify-end gap-2 pt-4">
            <button type="button" onClick={onClose} className="px-4 py-2 border border-slate-300 rounded-lg text-slate-700">Отмена</button>
            <button type="submit" disabled={saving} className="px-4 py-2 bg-primary-600 text-white rounded-lg disabled:opacity-50">Сохранить</button>
          </div>
        </form>
      </div>
    </div>
  );
};

interface EventDetailModalProps {
  event: PREvent;
  buildings: Building[];
  districts: District[];
  employees: Employee[];
  onClose: () => void;
  onEdit: () => void;
  onDelete: () => void;
  onOpenInvoice: () => void;
  onNotifySMM: () => void;
  onCopy: () => void;
  onPhotoUploaded: () => void;
  onRefresh: () => void;
}

const EventDetailModal: React.FC<EventDetailModalProps> = ({
  event, buildings, districts, employees, onClose, onEdit, onDelete, onOpenInvoice, onNotifySMM, onCopy, onPhotoUploaded, onRefresh
}) => {
  const [photos, setPhotos] = useState<PREventPhoto[]>(event.photos ?? []);
  const [uploading, setUploading] = useState(false);
  const [uploadLocationType, setUploadLocationType] = useState<'building' | 'office'>('office');
  const [uploadBuildingId, setUploadBuildingId] = useState('');
  const [uploadCaption, setUploadCaption] = useState('');

  useEffect(() => {
    setPhotos(event.photos ?? []);
  }, [event.id, event.photos]);

  const assigneeNames = (event.assignedEmployeeIds ?? [])
    .map(id => employees.find(e => e.id === id)?.name)
    .filter(Boolean) as string[];

  const handleUploadPhoto = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file || !event.id) return;
    setUploading(true);
    try {
      const fd = new FormData();
      fd.append('photo', file);
      fd.append('locationType', uploadLocationType);
      if (uploadLocationType === 'building' && uploadBuildingId) fd.append('locationBuildingId', uploadBuildingId);
      if (uploadCaption.trim()) fd.append('caption', uploadCaption.trim());
      const photo = await backendApi.uploadPREventPhoto(event.id, fd);
      setPhotos(prev => [...prev, photo]);
      setUploadCaption('');
      onPhotoUploaded();
    } catch (err) {
      console.error(err);
    } finally {
      setUploading(false);
      e.target.value = '';
    }
  };

  const handleDeletePhoto = async (photoId: number) => {
    try {
      await backendApi.deletePREventPhoto(event.id, photoId);
      setPhotos(prev => prev.filter(p => p.id !== photoId));
      onPhotoUploaded();
    } catch (err) {
      console.error(err);
    }
  };

  const dateStr = typeof event.date === 'string' ? event.date : String(event.date);

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50" onClick={onClose}>
      <div className="bg-white rounded-2xl shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
        <div className="p-6 border-b border-slate-200 flex justify-between items-center">
          <h3 className="font-black text-slate-800">{event.title}</h3>
          <button type="button" onClick={onClose} className="p-2 text-slate-400 hover:text-slate-600"><X className="w-5 h-5"/></button>
        </div>
        <div className="p-6 space-y-6">
          <div className="flex flex-wrap gap-2">
            <span className="text-[10px] font-bold text-slate-500">{dateStr}</span>
            <span className="text-[10px] px-2 py-0.5 rounded-full bg-slate-100">{CATEGORY_LABELS[event.category]}</span>
            <span className="text-[10px] text-slate-500">{STATUS_LABELS[event.status]}</span>
            {event.locationPlaceType === 'district' && event.locationDistrictId && (
              <span className="text-[10px] text-slate-500 flex items-center gap-1">
                <MapPin className="w-3 h-3"/> Участок: {districts.find(d => d.id === event.locationDistrictId)?.name || event.locationDistrictId}
              </span>
            )}
            {event.locationPlaceType === 'buildings' && event.locationBuildingIds?.length ? (
              <span className="text-[10px] text-slate-500 flex items-center gap-1">
                <MapPin className="w-3 h-3"/> Дома: {event.locationBuildingIds.length} шт.
              </span>
            ) : event.location && (
              <span className="text-[10px] text-slate-500 flex items-center gap-1"><MapPin className="w-3 h-3"/>{event.location}</span>
            )}
          </div>
          {event.shortPlan && (
            <div>
              <p className="text-xs font-bold text-slate-600 mb-1 flex items-center gap-1"><FileText className="w-4 h-4"/> Краткий план</p>
              <p className="text-sm text-slate-700 whitespace-pre-wrap">{event.shortPlan}</p>
            </div>
          )}
          {event.announcement && (
            <div>
              <p className="text-xs font-bold text-slate-600 mb-1 flex items-center gap-1"><Megaphone className="w-4 h-4"/> Объявление</p>
              <p className="text-sm text-slate-700 whitespace-pre-wrap">{event.announcement}</p>
            </div>
          )}
          {assigneeNames.length > 0 && (
            <div>
              <p className="text-xs font-bold text-slate-600 mb-1 flex items-center gap-1"><UserPlus className="w-4 h-4"/> Сотрудники для помощи</p>
              <p className="text-sm text-slate-700">{assigneeNames.join(', ')}</p>
            </div>
          )}
          {(event.invoices?.length ?? 0) > 0 && (
            <div>
              <p className="text-xs font-bold text-slate-600 mb-1 flex items-center gap-1"><Banknote className="w-4 h-4"/> Счета</p>
              <ul className="text-sm space-y-1">
                {event.invoices!.map(inv => (
                  <li key={inv.id}>
                    <button
                      type="button"
                      className="text-primary-600 hover:underline"
                      onClick={() => {
                        window.dispatchEvent(new CustomEvent('mkd-open-finance-invoice', { detail: { invoiceId: inv.id } }));
                        onClose();
                      }}
                    >
                      {inv.invoiceNumber} — {inv.status}
                    </button>
                  </li>
                ))}
              </ul>
            </div>
          )}
          <div>
            <p className="text-xs font-bold text-slate-600 mb-2 flex items-center gap-1"><Camera className="w-4 h-4"/> Фотоотчёт</p>
            <div className="flex flex-wrap gap-2 mb-2">
              {event.type === 'internal' && (
                <>
                  <select value={uploadLocationType} onChange={e => setUploadLocationType(e.target.value as 'building' | 'office')} className="text-sm border rounded px-2 py-1">
                    <option value="office">Офис</option>
                    <option value="building">Дом</option>
                  </select>
                  {uploadLocationType === 'building' && (
                    <select value={uploadBuildingId} onChange={e => setUploadBuildingId(e.target.value)} className="text-sm border rounded px-2 py-1">
                      <option value="">—</option>
                      {buildings.map(b => (
                        <option key={b.id} value={b.id}>{(b as any).data?.passport?.address || b.id}</option>
                      ))}
                    </select>
                  )}
                </>
              )}
              <input
                type="text"
                value={uploadCaption}
                onChange={e => setUploadCaption(e.target.value)}
                placeholder="Подпись к фото"
                className="text-sm border border-slate-200 rounded-lg px-2 py-1.5 max-w-[140px]"
              />
              <label className="inline-flex items-center gap-1 px-3 py-1.5 bg-slate-100 rounded-lg text-sm cursor-pointer hover:bg-slate-200">
                <input type="file" accept="image/*" className="hidden" onChange={handleUploadPhoto} disabled={uploading} />
                {uploading ? 'Загрузка...' : 'Добавить фото'}
              </label>
            </div>
            <div className="grid grid-cols-3 gap-2">
              {photos.map(p => (
                <div key={p.id} className="relative group">
                  <img src={p.photoUrl.startsWith('http') ? p.photoUrl : `${UPLOADS_BASE}${p.photoUrl.startsWith('/') ? '' : '/'}${p.photoUrl}`} alt="" className="w-full h-24 object-cover rounded-lg" />
                  {p.caption && <p className="text-[10px] text-slate-500 truncate">{p.caption}</p>}
                  <button type="button" onClick={() => handleDeletePhoto(p.id)} className="absolute top-1 right-1 bg-red-500 text-white rounded p-1 opacity-0 group-hover:opacity-100 text-xs">×</button>
                </div>
              ))}
            </div>
          </div>
          <div className="flex flex-wrap gap-2 pt-4 border-t border-slate-200">
            <button type="button" onClick={onNotifySMM} className="px-4 py-2 bg-sky-600 text-white rounded-lg text-sm font-bold flex items-center gap-1">
              <Megaphone className="w-4 h-4"/> Оповестить в SMM
            </button>
            <button type="button" onClick={onOpenInvoice} className="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm font-bold flex items-center gap-1">
              <Banknote className="w-4 h-4"/> Выставить счёт
            </button>
            <button type="button" onClick={onCopy} className="px-4 py-2 border border-slate-300 rounded-lg text-sm flex items-center gap-1">
              <Copy className="w-4 h-4"/> Создать по образцу
            </button>
            <button type="button" onClick={onEdit} className="px-4 py-2 border border-slate-300 rounded-lg text-sm">Редактировать</button>
            <button type="button" onClick={onRefresh} className="px-4 py-2 border border-slate-300 rounded-lg text-sm">Обновить</button>
            <button type="button" onClick={onDelete} className="px-4 py-2 text-red-600 border border-red-300 rounded-lg text-sm">Удалить</button>
          </div>
        </div>
      </div>
    </div>
  );
};