import React, { useState } from 'react';
import { InspectionSection, InspectionCommonSection, InspectionMKDElement, Building } from '../../types';
import {
    FLOOR_ELEMENT_NAMES,
    ENTRANCE_ELEMENT_NAMES,
    COMMON_SECTION_ELEMENTS,
    buildElementsFromNames
} from '../../inspectionElementTemplates';
import { 
    ChevronDown, 
    ChevronUp, 
    Plus, 
    X, 
    Trash2, 
    Camera, 
    Image as ImageIcon,
    Gauge,
    DoorClosed,
    Building2,
    Save,
    Layers,
    Paperclip,
    ListPlus
} from 'lucide-react';

interface DynamicInspectionSectionsProps {
    sections: InspectionSection[];
    commonSections: InspectionCommonSection[];
    building: Building;
    onUpdateSections: (sections: InspectionSection[]) => void;
    onUpdateCommonSections: (commonSections: InspectionCommonSection[]) => void;
    onSaveToBuilding?: (entranceData: any, floorData: any) => void; // Сохранение данных в building
}

export const DynamicInspectionSections: React.FC<DynamicInspectionSectionsProps> = ({
    sections,
    commonSections,
    building,
    onUpdateSections,
    onUpdateCommonSections,
    onSaveToBuilding
}) => {
    const [activeTab, setActiveTab] = useState<string | null>(sections.length > 0 ? sections[0].id : null);
    const [editingElement, setEditingElement] = useState<{ sectionId: string; elementId: string | null } | null>(null);
    const [editingEntranceTech, setEditingEntranceTech] = useState<number | null>(null); // Редактирование тех. характеристик подъезда

    // Группируем секции по типу
    const entranceSections = sections.filter(s => s.type === 'entrance');
    const floorSections = sections.filter(s => s.type === 'floor');
    const liftSections = sections.filter(s => s.type === 'lift');

    const handleAddElement = (sectionId: string, isCommon: boolean = false) => {
        const newElement: InspectionMKDElement = {
            id: `element-${Date.now()}`,
            name: '',
            generalStatus: 'NOT_SELECTED',
            electroStatus: 'NOT_SELECTED',
            weldingStatus: 'NOT_SELECTED',
            repairType: '',
            mainPhoto: undefined,
            additionalPhotos: []
        };

        if (isCommon) {
            const updated = commonSections.map(s => 
                s.id === sectionId 
                    ? { ...s, elements: [...s.elements, newElement] }
                    : s
            );
            onUpdateCommonSections(updated);
        } else {
            const updated = sections.map(s => 
                s.id === sectionId 
                    ? { ...s, elements: [...s.elements, newElement] }
                    : s
            );
            onUpdateSections(updated);
            
            // Сохраняем элементы этажа в building, если это секция этажа
            const section = sections.find(s => s.id === sectionId);
            if (section && section.type === 'floor') {
                const match = sectionId.match(/entrance-(\d+)-floor-(\d+)/);
                if (match && onSaveToBuilding) {
                    const entranceNum = parseInt(match[1]);
                    const floorNum = parseInt(match[2]);
                    const updatedSection = updated.find(s => s.id === sectionId);
                    if (updatedSection) {
                        onSaveToBuilding(null, {
                            entranceNumber: entranceNum,
                            floorNumber: floorNum,
                            elements: updatedSection.elements
                        });
                    }
                }
            }
        }
        setEditingElement({ sectionId, elementId: newElement.id });
    };

    const handleAddFromTemplate = (sectionId: string, isCommon: boolean = false) => {
        const existingNames = new Set(
            isCommon
                ? (commonSections.find(s => s.id === sectionId)?.elements || []).map(e => e.name)
                : (sections.find(s => s.id === sectionId)?.elements || []).map(e => e.name)
        );
        let namesToAdd: string[] = [];
        let prefix = sectionId;
        if (isCommon) {
            const section = commonSections.find(s => s.id === sectionId);
            if (section) {
                const templateNames = COMMON_SECTION_ELEMENTS[section.title];
                if (templateNames) namesToAdd = templateNames.filter(n => !existingNames.has(n));
            }
        } else {
            const section = sections.find(s => s.id === sectionId);
            if (section) {
                if (section.type === 'floor') {
                    const match = sectionId.match(/entrance-(\d+)-floor-(\d+)/);
                    if (match) {
                        namesToAdd = FLOOR_ELEMENT_NAMES.filter(n => !existingNames.has(n));
                        prefix = `entrance-${match[1]}-floor-${match[2]}`;
                    }
                } else if (section.type === 'entrance') {
                    namesToAdd = ENTRANCE_ELEMENT_NAMES.filter(n => !existingNames.has(n));
                    prefix = sectionId;
                }
            }
        }
        if (namesToAdd.length === 0) return;
        const newElements = buildElementsFromNames(namesToAdd, prefix);
        if (isCommon) {
            const updated = commonSections.map(s =>
                s.id === sectionId ? { ...s, elements: [...s.elements, ...newElements] } : s
            );
            onUpdateCommonSections(updated);
        } else {
            const updated = sections.map(s =>
                s.id === sectionId ? { ...s, elements: [...s.elements, ...newElements] } : s
            );
            onUpdateSections(updated);
            const section = sections.find(s => s.id === sectionId);
            if (section?.type === 'floor') {
                const match = sectionId.match(/entrance-(\d+)-floor-(\d+)/);
                if (match && onSaveToBuilding) {
                    const entranceNum = parseInt(match[1]);
                    const floorNum = parseInt(match[2]);
                    const updatedSection = updated.find(s => s.id === sectionId);
                    if (updatedSection) {
                        onSaveToBuilding(null, {
                            entranceNumber: entranceNum,
                            floorNumber: floorNum,
                            elements: updatedSection.elements
                        });
                    }
                }
            }
        }
    };

    const handleUpdateElement = (sectionId: string, elementId: string, updates: Partial<InspectionMKDElement>, isCommon: boolean = false) => {
        if (isCommon) {
            const updated = commonSections.map(s => 
                s.id === sectionId 
                    ? {
                        ...s,
                        elements: s.elements.map(el => 
                            el.id === elementId ? { ...el, ...updates } : el
                        )
                    }
                    : s
            );
            onUpdateCommonSections(updated);
        } else {
            const updated = sections.map(s => 
                s.id === sectionId 
                    ? {
                        ...s,
                        elements: s.elements.map(el => 
                            el.id === elementId ? { ...el, ...updates } : el
                        )
                    }
                    : s
            );
            onUpdateSections(updated);
            
            // Сохраняем элементы этажа в building, если это секция этажа
            const section = sections.find(s => s.id === sectionId);
            if (section && section.type === 'floor') {
                // Извлекаем номер подъезда и этажа из sectionId (формат: entrance-{num}-floor-{floor})
                const match = sectionId.match(/entrance-(\d+)-floor-(\d+)/);
                if (match && onSaveToBuilding) {
                    const entranceNum = parseInt(match[1]);
                    const floorNum = parseInt(match[2]);
                    const updatedSection = updated.find(s => s.id === sectionId);
                    if (updatedSection) {
                        onSaveToBuilding(null, {
                            entranceNumber: entranceNum,
                            floorNumber: floorNum,
                            elements: updatedSection.elements
                        });
                    }
                }
            }
        }
    };

    const handleDeleteElement = (sectionId: string, elementId: string, isCommon: boolean = false) => {
        if (isCommon) {
            const updated = commonSections.map(s => 
                s.id === sectionId 
                    ? { ...s, elements: s.elements.filter(el => el.id !== elementId) }
                    : s
            );
            onUpdateCommonSections(updated);
        } else {
            const updated = sections.map(s => 
                s.id === sectionId 
                    ? { ...s, elements: s.elements.filter(el => el.id !== elementId) }
                    : s
            );
            onUpdateSections(updated);
            
            // Сохраняем элементы этажа в building, если это секция этажа
            const section = sections.find(s => s.id === sectionId);
            if (section && section.type === 'floor') {
                const match = sectionId.match(/entrance-(\d+)-floor-(\d+)/);
                if (match && onSaveToBuilding) {
                    const entranceNum = parseInt(match[1]);
                    const floorNum = parseInt(match[2]);
                    const updatedSection = updated.find(s => s.id === sectionId);
                    if (updatedSection) {
                        onSaveToBuilding(null, {
                            entranceNumber: entranceNum,
                            floorNumber: floorNum,
                            elements: updatedSection.elements
                        });
                    }
                }
            }
        }
    };

    const handleToggleSection = (sectionId: string, isCommon: boolean = false) => {
        if (isCommon) {
            const updated = commonSections.map(s => 
                s.id === sectionId ? { ...s, isCollapsed: !s.isCollapsed } : s
            );
            onUpdateCommonSections(updated);
        } else {
            const updated = sections.map(s => 
                s.id === sectionId ? { ...s, isCollapsed: !s.isCollapsed } : s
            );
            onUpdateSections(updated);
        }
    };

    const renderElement = (element: InspectionMKDElement, sectionId: string, isCommon: boolean = false) => {
        const isEditing = editingElement?.sectionId === sectionId && editingElement?.elementId === element.id;

        return (
            <div key={element.id} className="bg-slate-50 p-4 rounded-xl border border-slate-200 shadow-sm transition-all mb-3">
                <div className="flex justify-between items-start mb-3">
                    {isEditing ? (
                        <input
                            type="text"
                            value={element.name}
                            onChange={(e) => handleUpdateElement(sectionId, element.id, { name: e.target.value }, isCommon)}
                            placeholder="Название элемента МКД"
                            className="flex-1 px-3 py-2 bg-white border border-slate-200 rounded-xl text-sm font-bold focus:ring-2 focus:ring-primary-500 outline-none"
                            autoFocus
                        />
                    ) : (
                        <div className="flex items-center gap-2 flex-1">
                            <h4 className="font-bold text-sm text-slate-800 flex items-center gap-2">
                                <Layers className="w-4 h-4 text-slate-400"/>
                                {element.name || 'Новый элемент'}
                            </h4>
                            <button
                                onClick={() => setEditingElement({ sectionId, elementId: element.id })}
                                className="text-xs text-primary-600 hover:text-primary-700 font-bold px-2 py-1 hover:bg-primary-50 rounded-lg transition-colors"
                            >
                                + Изменить
                            </button>
                        </div>
                    )}
                    <button
                        onClick={() => handleDeleteElement(sectionId, element.id, isCommon)}
                        className="text-red-500 hover:text-red-700 p-1 hover:bg-red-50 rounded-lg transition-colors"
                    >
                        <Trash2 className="w-4 h-4" />
                    </button>
                </div>

                <div className="grid grid-cols-3 gap-3 mb-3">
                    <div>
                        <label className="text-[10px] text-slate-500 font-bold uppercase block mb-1">Общий строй</label>
                        <select
                            value={element.generalStatus}
                            onChange={(e) => handleUpdateElement(sectionId, element.id, { generalStatus: e.target.value as any }, isCommon)}
                            className="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-primary-500 outline-none"
                        >
                            <option value="NOT_SELECTED">Выбрать</option>
                            <option value="OK">Удовлет</option>
                            <option value="WARNING">Неуд</option>
                            <option value="CRITICAL">Критично</option>
                        </select>
                    </div>
                    <div>
                        <label className="text-[10px] text-slate-500 font-bold uppercase block mb-1">Электроснабжение</label>
                        <select
                            value={element.electroStatus}
                            onChange={(e) => handleUpdateElement(sectionId, element.id, { electroStatus: e.target.value as any }, isCommon)}
                            className="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-primary-500 outline-none"
                        >
                            <option value="NOT_SELECTED">Выбрать</option>
                            <option value="OK">Удовлет</option>
                            <option value="WARNING">Неуд</option>
                            <option value="CRITICAL">Критично</option>
                        </select>
                    </div>
                    <div>
                        <label className="text-[10px] text-slate-500 font-bold uppercase block mb-1">Слесарные, сварочные</label>
                        <select
                            value={element.weldingStatus}
                            onChange={(e) => handleUpdateElement(sectionId, element.id, { weldingStatus: e.target.value as any }, isCommon)}
                            className="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-primary-500 outline-none"
                        >
                            <option value="NOT_SELECTED">Выбрать</option>
                            <option value="OK">Удовлет</option>
                            <option value="WARNING">Неуд</option>
                            <option value="CRITICAL">Критично</option>
                        </select>
                    </div>
                </div>

                <div className="mb-3">
                    <label className="text-[10px] text-slate-500 font-bold uppercase block mb-1">Вид требуемого ремонта</label>
                    <textarea
                        value={element.repairType || ''}
                        onChange={(e) => handleUpdateElement(sectionId, element.id, { repairType: e.target.value }, isCommon)}
                        placeholder="Опишите требуемый ремонт..."
                        className="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs min-h-[60px] focus:ring-2 focus:ring-primary-500 outline-none"
                    />
                </div>

                <div className="mt-2 space-y-2">
                    <div className="flex items-center justify-between">
                        <span className="text-[10px] text-slate-400 font-bold uppercase tracking-tight">Фотофиксация состояния:</span>
                        <div className="flex gap-2">
                            <button className="flex items-center gap-1.5 px-3 py-1 bg-white border border-slate-200 rounded-lg text-[10px] font-bold text-slate-600 hover:text-primary-600 hover:border-primary-200 transition-colors shadow-sm">
                                <Camera className="w-3.5 h-3.5 text-primary-500"/> Гл. фото
                            </button>
                            <button className="flex items-center gap-1.5 px-3 py-1 bg-white border border-slate-200 rounded-lg text-[10px] font-bold text-slate-600 hover:text-primary-600 hover:border-primary-200 transition-colors shadow-sm">
                                <Camera className="w-3.5 h-3.5 text-primary-500"/> Доп. фото
                            </button>
                        </div>
                    </div>

                    {(element.mainPhoto || (element.additionalPhotos && element.additionalPhotos.length > 0)) && (
                        <div className="flex gap-2 overflow-x-auto no-scrollbar py-1">
                            {element.mainPhoto && (
                                <div className="w-16 h-16 rounded-lg relative flex-shrink-0 group overflow-hidden border border-slate-200 bg-slate-200">
                                    <img src={element.mainPhoto} alt="Main photo" className="w-full h-full object-cover" />
                                    <button 
                                        onClick={() => handleUpdateElement(sectionId, element.id, { mainPhoto: undefined }, isCommon)}
                                        className="absolute top-0.5 right-0.5 p-1 bg-red-500/80 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
                                    >
                                        <X className="w-2.5 h-2.5"/>
                                    </button>
                                </div>
                            )}
                            {element.additionalPhotos?.map((photo, pIdx) => (
                                <div key={pIdx} className="w-16 h-16 rounded-lg relative flex-shrink-0 group overflow-hidden border border-slate-200 bg-slate-200">
                                    <img src={photo} alt="Additional photo" className="w-full h-full object-cover" />
                                    <button 
                                        onClick={() => {
                                            const updated = element.additionalPhotos?.filter((_, i) => i !== pIdx) || [];
                                            handleUpdateElement(sectionId, element.id, { additionalPhotos: updated }, isCommon);
                                        }}
                                        className="absolute top-0.5 right-0.5 p-1 bg-red-500/80 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
                                    >
                                        <X className="w-2.5 h-2.5"/>
                                    </button>
                                </div>
                            ))}
                        </div>
                    )}
                </div>
            </div>
        );
    };

    return (
        <div className="space-y-4">
            {/* Табы для подъездов */}
            {entranceSections.length > 0 && (
                <div className="mb-6">
                    <h3 className="font-bold text-slate-800 text-sm mb-3 flex items-center gap-2">
                        <DoorClosed className="w-4 h-4 text-primary-500" /> Парадная
                    </h3>
                    <div className="flex gap-2 overflow-x-auto pb-2">
                        {entranceSections.map(section => (
                            <button
                                key={section.id}
                                onClick={() => setActiveTab(section.id)}
                                className={`px-4 py-2 rounded-lg font-bold text-sm whitespace-nowrap transition-all ${
                                    activeTab === section.id
                                        ? 'bg-primary-600 text-white shadow-lg'
                                        : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
                                }`}
                            >
                                {section.number}
                            </button>
                        ))}
                    </div>
                    {activeTab && entranceSections.find(s => s.id === activeTab) && (() => {
                        const currentSection = entranceSections.find(s => s.id === activeTab)!;
                        const entrance = building.entrances?.find(e => e.number === currentSection.number);
                        const techChars = entrance?.technicalCharacteristics || {};
                        
                        return (
                            <div className="mt-4 space-y-4">
                                {/* Технические характеристики подъезда */}
                                <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm mb-4">
                                    <div className="flex justify-between items-center mb-4">
                                        <h4 className="font-bold text-slate-800 text-sm">
                                            ТЕХНИЧЕСКИЕ ХАРАКТЕРИСТИКИ ПОДЪЕЗДА {currentSection.number}
                                        </h4>
                                        <button
                                            onClick={() => setEditingEntranceTech(editingEntranceTech === currentSection.number ? null : currentSection.number)}
                                            className="text-primary-600 hover:text-primary-700 text-xs font-bold"
                                        >
                                            {editingEntranceTech === currentSection.number ? 'Сохранить' : 'Редактировать'}
                                        </button>
                                    </div>
                                    <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
                                        <div>
                                            <label className="text-[10px] text-slate-500 font-bold uppercase block mb-1">Наличие подвала</label>
                                            {editingEntranceTech === currentSection.number ? (
                                                <select
                                                    value={techChars.hasBasement || 'NOT_SELECTED'}
                                                    onChange={(e) => {
                                                        if (onSaveToBuilding) {
                                                            onSaveToBuilding({
                                                                entranceNumber: currentSection.number,
                                                                technicalCharacteristics: {
                                                                    ...techChars,
                                                                    hasBasement: e.target.value as any
                                                                }
                                                            }, null);
                                                        }
                                                    }}
                                                    className="w-full px-2 py-1.5 border border-slate-300 rounded-lg text-xs"
                                                >
                                                    <option value="NOT_SELECTED">Выбрать</option>
                                                    <option value="YES">Да</option>
                                                    <option value="NO">Нет</option>
                                                </select>
                                            ) : (
                                                <p className="text-sm font-bold text-slate-800">{techChars.hasBasement === 'YES' ? 'Да' : techChars.hasBasement === 'NO' ? 'Нет' : '-'}</p>
                                            )}
                                        </div>
                                        <div>
                                            <label className="text-[10px] text-slate-500 font-bold uppercase block mb-1">Наличие тех. этажа</label>
                                            {editingEntranceTech === currentSection.number ? (
                                                <select
                                                    value={techChars.hasTechFloor || 'NOT_SELECTED'}
                                                    onChange={(e) => {
                                                        if (onSaveToBuilding) {
                                                            onSaveToBuilding({
                                                                entranceNumber: currentSection.number,
                                                                technicalCharacteristics: {
                                                                    ...techChars,
                                                                    hasTechFloor: e.target.value as any
                                                                }
                                                            }, null);
                                                        }
                                                    }}
                                                    className="w-full px-2 py-1.5 border border-slate-300 rounded-lg text-xs"
                                                >
                                                    <option value="NOT_SELECTED">Выбрать</option>
                                                    <option value="YES">Да</option>
                                                    <option value="NO">Нет</option>
                                                </select>
                                            ) : (
                                                <p className="text-sm font-bold text-slate-800">{techChars.hasTechFloor === 'YES' ? 'Да' : techChars.hasTechFloor === 'NO' ? 'Нет' : '-'}</p>
                                            )}
                                        </div>
                                        <div>
                                            <label className="text-[10px] text-slate-500 font-bold uppercase block mb-1">Наличие паркинга</label>
                                            {editingEntranceTech === currentSection.number ? (
                                                <select
                                                    value={techChars.hasParking || 'NOT_SELECTED'}
                                                    onChange={(e) => {
                                                        if (onSaveToBuilding) {
                                                            onSaveToBuilding({
                                                                entranceNumber: currentSection.number,
                                                                technicalCharacteristics: {
                                                                    ...techChars,
                                                                    hasParking: e.target.value as any
                                                                }
                                                            }, null);
                                                        }
                                                    }}
                                                    className="w-full px-2 py-1.5 border border-slate-300 rounded-lg text-xs"
                                                >
                                                    <option value="NOT_SELECTED">Выбрать</option>
                                                    <option value="YES">Да</option>
                                                    <option value="NO">Нет</option>
                                                </select>
                                            ) : (
                                                <p className="text-sm font-bold text-slate-800">{techChars.hasParking === 'YES' ? 'Да' : techChars.hasParking === 'NO' ? 'Нет' : '-'}</p>
                                            )}
                                        </div>
                                        <div>
                                            <label className="text-[10px] text-slate-500 font-bold uppercase block mb-1">Наличие чердака</label>
                                            {editingEntranceTech === currentSection.number ? (
                                                <select
                                                    value={techChars.hasAttic || 'NOT_SELECTED'}
                                                    onChange={(e) => {
                                                        if (onSaveToBuilding) {
                                                            onSaveToBuilding({
                                                                entranceNumber: currentSection.number,
                                                                technicalCharacteristics: {
                                                                    ...techChars,
                                                                    hasAttic: e.target.value as any
                                                                }
                                                            }, null);
                                                        }
                                                    }}
                                                    className="w-full px-2 py-1.5 border border-slate-300 rounded-lg text-xs"
                                                >
                                                    <option value="NOT_SELECTED">Выбрать</option>
                                                    <option value="YES">Да</option>
                                                    <option value="NO">Нет</option>
                                                </select>
                                            ) : (
                                                <p className="text-sm font-bold text-slate-800">{techChars.hasAttic === 'YES' ? 'Да' : techChars.hasAttic === 'NO' ? 'Нет' : '-'}</p>
                                            )}
                                        </div>
                                        <div>
                                            <label className="text-[10px] text-slate-500 font-bold uppercase block mb-1">Количество этажей</label>
                                            {editingEntranceTech === currentSection.number ? (
                                                <input
                                                    type="number"
                                                    value={techChars.floorsCount || entrance?.floors || ''}
                                                    onChange={(e) => {
                                                        if (onSaveToBuilding) {
                                                            onSaveToBuilding({
                                                                entranceNumber: currentSection.number,
                                                                technicalCharacteristics: {
                                                                    ...techChars,
                                                                    floorsCount: parseInt(e.target.value) || undefined
                                                                }
                                                            }, null);
                                                        }
                                                    }}
                                                    className="w-full px-2 py-1.5 border border-slate-300 rounded-lg text-xs"
                                                />
                                            ) : (
                                                <p className="text-sm font-bold text-slate-800">{techChars.floorsCount || entrance?.floors || '-'}</p>
                                            )}
                                        </div>
                                        <div>
                                            <label className="text-[10px] text-slate-500 font-bold uppercase block mb-1">Количество лифтов</label>
                                            {editingEntranceTech === currentSection.number ? (
                                                <input
                                                    type="number"
                                                    value={techChars.liftsCount || entrance?.liftsCount || ''}
                                                    onChange={(e) => {
                                                        if (onSaveToBuilding) {
                                                            onSaveToBuilding({
                                                                entranceNumber: currentSection.number,
                                                                technicalCharacteristics: {
                                                                    ...techChars,
                                                                    liftsCount: parseInt(e.target.value) || undefined
                                                                }
                                                            }, null);
                                                        }
                                                    }}
                                                    className="w-full px-2 py-1.5 border border-slate-300 rounded-lg text-xs"
                                                />
                                            ) : (
                                                <p className="text-sm font-bold text-slate-800">{techChars.liftsCount || entrance?.liftsCount || '-'}</p>
                                            )}
                                        </div>
                                        <div>
                                            <label className="text-[10px] text-slate-500 font-bold uppercase block mb-1">Наличие мансарды</label>
                                            {editingEntranceTech === currentSection.number ? (
                                                <select
                                                    value={techChars.hasMansard || 'NOT_SELECTED'}
                                                    onChange={(e) => {
                                                        if (onSaveToBuilding) {
                                                            onSaveToBuilding({
                                                                entranceNumber: currentSection.number,
                                                                technicalCharacteristics: {
                                                                    ...techChars,
                                                                    hasMansard: e.target.value as any
                                                                }
                                                            }, null);
                                                        }
                                                    }}
                                                    className="w-full px-2 py-1.5 border border-slate-300 rounded-lg text-xs"
                                                >
                                                    <option value="NOT_SELECTED">Выбрать</option>
                                                    <option value="YES">Да</option>
                                                    <option value="NO">Нет</option>
                                                </select>
                                            ) : (
                                                <p className="text-sm font-bold text-slate-800">{techChars.hasMansard === 'YES' ? 'Да' : techChars.hasMansard === 'NO' ? 'Нет' : '-'}</p>
                                            )}
                                        </div>
                                        <div>
                                            <label className="text-[10px] text-slate-500 font-bold uppercase block mb-1">Кол-во входных групп</label>
                                            {editingEntranceTech === currentSection.number ? (
                                                <input
                                                    type="number"
                                                    value={techChars.entranceGroupsCount || entrance?.entranceGroupsCount || ''}
                                                    onChange={(e) => {
                                                        if (onSaveToBuilding) {
                                                            onSaveToBuilding({
                                                                entranceNumber: currentSection.number,
                                                                technicalCharacteristics: {
                                                                    ...techChars,
                                                                    entranceGroupsCount: parseInt(e.target.value) || undefined
                                                                }
                                                            }, null);
                                                        }
                                                    }}
                                                    className="w-full px-2 py-1.5 border border-slate-300 rounded-lg text-xs"
                                                />
                                            ) : (
                                                <p className="text-sm font-bold text-slate-800">{techChars.entranceGroupsCount || entrance?.entranceGroupsCount || '-'}</p>
                                            )}
                                        </div>
                                    </div>
                                </div>
                                
                                {/* Элементы МКД подъезда */}
                                {currentSection.elements.map(el => renderElement(el, currentSection.id, false))}
                                <div className="flex gap-2">
                                    <button
                                        onClick={() => handleAddElement(currentSection.id, false)}
                                        className="flex-1 py-3 bg-primary-600 text-white rounded-xl font-bold text-sm flex items-center justify-center gap-2 shadow-lg shadow-primary-500/20 hover:bg-primary-700 transition-all"
                                    >
                                        <Plus className="w-4 h-4" /> ДОБАВИТЬ ЭЛЕМЕНТ МКД
                                    </button>
                                    <button
                                        type="button"
                                        onClick={() => handleAddFromTemplate(currentSection.id, false)}
                                        className="py-3 px-4 bg-white border border-slate-200 text-slate-700 rounded-xl font-bold text-sm flex items-center justify-center gap-2 hover:bg-slate-50 transition-all"
                                        title="Добавить недостающие пункты из типового чек-листа парадной"
                                    >
                                        <ListPlus className="w-4 h-4" /> Из шаблона
                                    </button>
                                </div>
                            </div>
                        );
                    })()}
                </div>
            )}

            {/* Табы для этажей */}
            {floorSections.length > 0 && (
                <div className="mb-6">
                    <h3 className="font-bold text-slate-800 text-sm mb-3 flex items-center gap-2">
                        <Building2 className="w-4 h-4 text-primary-500" /> Этажи
                    </h3>
                    <div className="flex gap-2 overflow-x-auto pb-2 flex-wrap">
                        {floorSections.map(section => {
                            const match = section.id.match(/entrance-(\d+)-floor-(\d+)/);
                            const entranceNum = match ? match[1] : '';
                            const floorNum = section.number ?? '';
                            const label = entranceNum ? `П${entranceNum} Этаж ${floorNum}` : `Этаж ${floorNum}`;
                            return (
                                <button
                                    key={section.id}
                                    onClick={() => setActiveTab(section.id)}
                                    className={`px-4 py-2 rounded-lg font-bold text-sm whitespace-nowrap transition-all ${
                                        activeTab === section.id
                                            ? 'bg-primary-600 text-white shadow-lg'
                                            : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
                                    }`}
                                >
                                    {label}
                                </button>
                            );
                        })}
                    </div>
                    {activeTab && floorSections.find(s => s.id === activeTab) && (() => {
                        const currentSection = floorSections.find(s => s.id === activeTab)!;
                        // Извлекаем номер подъезда из sectionId
                        const match = currentSection.id.match(/entrance-(\d+)-floor-(\d+)/);
                        const entranceNum = match ? parseInt(match[1]) : null;
                        const floorNum = currentSection.number;
                        
                        return (
                            <div className="mt-4 space-y-4">
                                <h4 className="font-bold text-slate-800 text-sm mb-2">
                                    ЭЛЕМЕНТЫ МКД ЭТАЖА {floorNum}{entranceNum ? ` (Подъезд ${entranceNum})` : ''}
                                </h4>
                                {currentSection.elements.map(el => renderElement(el, currentSection.id, false))}
                                <div className="flex gap-2">
                                    <button
                                        onClick={() => handleAddElement(currentSection.id, false)}
                                        className="flex-1 py-3 bg-primary-600 text-white rounded-xl font-bold text-sm flex items-center justify-center gap-2 shadow-lg shadow-primary-500/20 hover:bg-primary-700 transition-all"
                                    >
                                        <Plus className="w-4 h-4" /> ДОБАВИТЬ ЭЛЕМЕНТ МКД
                                    </button>
                                    <button
                                        type="button"
                                        onClick={() => handleAddFromTemplate(currentSection.id, false)}
                                        className="py-3 px-4 bg-white border border-slate-200 text-slate-700 rounded-xl font-bold text-sm flex items-center justify-center gap-2 hover:bg-slate-50 transition-all"
                                        title="Добавить недостающие пункты из типового чек-листа этажа"
                                    >
                                        <ListPlus className="w-4 h-4" /> Из шаблона
                                    </button>
                                </div>
                            </div>
                        );
                    })()}
                </div>
            )}

            {/* Секции для лифтов */}
            {liftSections.length > 0 && (
                <div className="mb-6">
                    <h3 className="font-bold text-slate-800 text-sm mb-3 flex items-center gap-2">
                        <Gauge className="w-4 h-4 text-primary-500" /> Лифт
                    </h3>
                    {liftSections.map(section => (
                        <div key={section.id} className="mb-4 bg-slate-50 p-4 rounded-xl border border-slate-200 shadow-sm">
                            <div className="flex justify-between items-center mb-4">
                                <h4 className="font-bold text-slate-800 text-lg">Лифт {section.number}</h4>
                                <button
                                    onClick={() => handleToggleSection(section.id, false)}
                                    className="text-slate-500 hover:text-slate-700 transition-colors"
                                >
                                    {section.isCollapsed ? <ChevronDown className="w-5 h-5" /> : <ChevronUp className="w-5 h-5" />}
                                </button>
                            </div>
                            {!section.isCollapsed && (
                                <div className="space-y-4">
                                    {section.elements.map(el => renderElement(el, section.id, false))}
                                    <button
                                        onClick={() => handleAddElement(section.id, false)}
                                        className="w-full py-3 bg-primary-600 text-white rounded-xl font-bold text-sm flex items-center justify-center gap-2 shadow-lg shadow-primary-500/20 hover:bg-primary-700 transition-all"
                                    >
                                        <Plus className="w-4 h-4" /> ДОБАВИТЬ ЭЛЕМЕНТ МКД
                                    </button>
                                </div>
                            )}
                        </div>
                    ))}
                </div>
            )}

            {/* Общие секции */}
            {commonSections.map(section => (
                <div key={section.id} className="bg-slate-50 p-4 rounded-xl border border-slate-200 shadow-sm mb-4">
                    <div className="flex justify-between items-center mb-4">
                        <h3 className="font-bold text-slate-800 text-sm">{section.title}</h3>
                        <button
                            onClick={() => handleToggleSection(section.id, true)}
                            className="text-slate-500 hover:text-slate-700 transition-colors"
                        >
                            {section.isCollapsed ? <ChevronDown className="w-5 h-5" /> : <ChevronUp className="w-5 h-5" />}
                        </button>
                    </div>
                    {!section.isCollapsed && (
                        <div className="space-y-4">
                            {section.elements.map(el => renderElement(el, section.id, true))}
                            <div className="flex gap-2">
                                <button
                                    onClick={() => handleAddElement(section.id, true)}
                                    className="flex-1 py-3 bg-primary-600 text-white rounded-xl font-bold text-sm flex items-center justify-center gap-2 shadow-lg shadow-primary-500/20 hover:bg-primary-700 transition-all"
                                >
                                    <Plus className="w-4 h-4" /> ДОБАВИТЬ ЭЛЕМЕНТ МКД
                                </button>
                                <button
                                    type="button"
                                    onClick={() => handleAddFromTemplate(section.id, true)}
                                    className="py-3 px-4 bg-white border border-slate-200 text-slate-700 rounded-xl font-bold text-sm flex items-center justify-center gap-2 hover:bg-slate-50 transition-all"
                                    title="Добавить недостающие пункты из типового чек-листа"
                                >
                                    <ListPlus className="w-4 h-4" /> Из шаблона
                                </button>
                            </div>
                        </div>
                    )}
                </div>
            ))}
        </div>
    );
};