import React, { useState, useMemo, useEffect } from 'react';
import { Building, MeterCheckRound, PersonalAccount, AccountMeter, MeterReading } from '../../types';
import { 
    ClipboardCheck, 
    Plus, 
    ChevronRight, 
    Search, 
    DoorClosed, 
    CheckCircle2, 
    RotateCcw,
    X,
    ArrowLeft,
    Gauge,
    AlertTriangle,
    Activity,
    User,
    ShieldAlert,
    TrendingUp,
    Zap,
    Droplets,
    Flame
} from 'lucide-react';
import { storageService } from '../../services/storageService';
import { backendApi } from '../../services/apiClient';

// ====================================================================================
// UTILS
// ====================================================================================
const getMeterIcon = (type: string) => {
    const t = type.toLowerCase();
    if (t.includes('гвс') || t.includes('хвс') || t.includes('вод')) return Droplets;
    if (t.includes('эл') || t.includes('э/э')) return Zap;
    if (t.includes('газ')) return Flame;
    return Gauge;
};

/** При завершении обхода записывает показания в ОДПУ (passport.meters) и квартирные ПУ (accounts[].meters). */
function applyRoundReadingsToBuilding(building: Building, round: MeterCheckRound): Building {
    const today = new Date().toISOString().slice(0, 10);
    const b: Building = { ...building };
    b.passport = { ...b.passport, meters: [...(b.passport?.meters || [])] };
    b.accounts = [...(b.accounts || [])];

    const addReading = (prevVal: number, curVal: number): MeterReading => ({
        date: today,
        value: curVal,
        consumption: Math.max(0, curVal - prevVal),
        source: 'manual'
    });

    round.odpuMeters?.forEach((om) => {
        if (om.status !== 'verified' || om.currentValue == null) return;
        const idx = om.meterIndex;
        const m = b.passport!.meters![idx];
        if (!m) return;
        const reading = addReading(om.previousValue ?? 0, om.currentValue);
        const readings = [...(m.readings || []), reading].sort((a, b) => b.date.localeCompare(a.date));
        b.passport!.meters![idx] = { ...m, readings, currentReading: om.currentValue };
    });

    const accMap = new Map<string, PersonalAccount>();
    b.accounts.forEach((a) => accMap.set(a.apartmentNumber, a));

    round.apartments?.forEach((apt) => {
        if (apt.status !== 'verified') return;
        const acc = accMap.get(apt.apartmentNumber);
        if (!acc || !acc.meters?.length) return;
        let newMeters = [...acc.meters];
        apt.readings.forEach((r) => {
            if (r.currentValue == null) return;
            const mi = newMeters.findIndex((m) => m.id === r.meterId);
            if (mi < 0) return;
            const meter = newMeters[mi];
            const reading = addReading(r.previousValue ?? 0, r.currentValue);
            const meterReadings = [...(meter.readings || []), reading].sort((a, b) => b.date.localeCompare(a.date));
            newMeters[mi] = { ...meter, readings: meterReadings, currentReading: r.currentValue };
        });
        accMap.set(apt.apartmentNumber, { ...acc, meters: newMeters });
    });

    b.accounts = b.accounts.map((a) => accMap.get(a.apartmentNumber) ?? a);

    const rounds = [...(b.meterCheckRounds || [])];
    const ri = rounds.findIndex((r) => r.id === round.id);
    if (ri >= 0) rounds[ri] = round;
    else rounds.unshift(round);
    b.meterCheckRounds = rounds;

    return b;
}

/** Сохраняет здание в localStorage и в БД (backend). */
async function persistBuilding(updated: Building): Promise<void> {
    storageService.saveBuildingData(updated);
    try {
        await backendApi.updateBuilding(updated);
    } catch (e) {
        console.warn('[MeterCheckView] Не удалось синхронизировать с БД:', e);
    }
}

// ====================================================================================
// ANALYTICS SUB-COMPONENT
// ====================================================================================
const RoundAnalytics: React.FC<{ round: MeterCheckRound }> = ({ round }) => {
    const issues = useMemo(() => {
        const results = {
            suspicious: [] as any[],
            noReadings: [] as any[],
            bigGap: [] as any[]
        };

        // Анализ квартир
        round.apartments?.forEach(apt => {
            if (apt.status === 'verified') {
                apt.readings.forEach(r => {
                    const diff = (r.currentValue || 0) - r.previousValue;
                    // Example logic: if user reading was suspiciously low or gap is huge
                    if (diff > 50) results.bigGap.push({ apt: apt.apartmentNumber, type: r.meterType, val: diff });
                    if (r.currentValue === r.previousValue && r.previousValue !== 0) {
                        results.suspicious.push({ apt: apt.apartmentNumber, type: r.meterType });
                    }
                });
            }
            if (apt.status === 'no_access') {
                results.noReadings.push(apt.apartmentNumber);
            }
        });

        // Анализ ОДПУ
        round.odpuMeters?.forEach(meter => {
            if (meter.status === 'verified') {
                const diff = (meter.currentValue || 0) - meter.previousValue;
                if (diff > 50) results.bigGap.push({ apt: meter.meterName, type: meter.meterType, val: diff });
                if (meter.currentValue === meter.previousValue && meter.previousValue !== 0) {
                    results.suspicious.push({ apt: meter.meterName, type: meter.meterType });
                }
            }
            if (meter.status === 'no_access') {
                results.noReadings.push(meter.meterName);
            }
        });

        return results;
    }, [round]);

    return (
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
            <div className="bg-red-50 p-4 rounded-2xl border border-red-100">
                <div className="flex items-center gap-2 text-red-600 mb-2">
                    <ShieldAlert className="w-5 h-5"/>
                    <h4 className="text-xs font-black uppercase tracking-wider">Аномальный расход</h4>
                </div>
                <p className="text-2xl font-black text-red-700">{issues.bigGap.length}</p>
                <p className="text-[10px] text-red-500 font-bold mt-1">Разница {'>'} 50 ед. от прошлого периода</p>
            </div>
            <div className="bg-amber-50 p-4 rounded-2xl border border-amber-100">
                <div className="flex items-center gap-2 text-amber-600 mb-2">
                    <Activity className="w-5 h-5"/>
                    <h4 className="text-xs font-black uppercase tracking-wider">Подозрение на магнит</h4>
                </div>
                <p className="text-2xl font-black text-amber-700">{issues.suspicious.length}</p>
                <p className="text-[10px] text-amber-500 font-bold mt-1">Нулевое потребление при наличии жильцов</p>
            </div>
            <div className="bg-slate-50 p-4 rounded-2xl border border-slate-100">
                <div className="flex items-center gap-2 text-slate-600 mb-2">
                    <DoorClosed className="w-5 h-5"/>
                    <h4 className="text-xs font-black uppercase tracking-wider">Недопуск</h4>
                </div>
                <p className="text-2xl font-black text-slate-700">{issues.noReadings.length}</p>
                <p className="text-[10px] text-slate-500 font-bold mt-1">Требуется повторный вызов или уведомление</p>
            </div>
        </div>
    );
};

// ====================================================================================
// ROUND DETAILS
// ====================================================================================
const RoundDetails: React.FC<{ 
    round: MeterCheckRound, 
    onSave: (round: MeterCheckRound) => void, 
    onBack: () => void,
    building: Building
}> = ({ round, onSave, onBack, building }) => {
    const [data, setData] = useState<MeterCheckRound>(round);
    const [selectedApt, setSelectedApt] = useState<string | null>(null);
    const [selectedOdpuMeter, setSelectedOdpuMeter] = useState<string | null>(null);
    const [searchTerm, setSearchTerm] = useState('');
    const [viewMode, setViewMode] = useState<'list' | 'stats'>('list');
    /** Локальные значения показаний в модалке квартиры (meterId -> currentValue) для корректного сохранения. */
    const [aptModalValues, setAptModalValues] = useState<Record<string, number>>({});

    const currentApt = data.apartments?.find(a => a.apartmentNumber === selectedApt);
    const currentOdpuMeter = data.odpuMeters?.find(m => m.meterId === selectedOdpuMeter);

    useEffect(() => {
        if (!selectedApt || !currentApt) {
            setAptModalValues({});
            return;
        }
        const v: Record<string, number> = {};
        currentApt.readings.forEach(r => {
            if (r.currentValue != null) v[r.meterId] = r.currentValue;
        });
        setAptModalValues(v);
    }, [selectedApt, currentApt?.apartmentNumber]);

    const handleUpdateApt = (aptNumber: string, status: 'verified' | 'no_access', readings?: any) => {
        setData(prev => ({
            ...prev,
            apartments: prev.apartments?.map(a => 
                a.apartmentNumber === aptNumber 
                    ? { ...a, status, checkedAt: new Date().toISOString(), readings: readings || a.readings } 
                    : a
            ) || []
        }));
        setSelectedApt(null);
    };

    const handleUpdateOdpuMeter = (meterId: string, status: 'verified' | 'no_access', currentValue?: number) => {
        setData(prev => ({
            ...prev,
            odpuMeters: prev.odpuMeters?.map(m => 
                m.meterId === meterId 
                    ? { ...m, status, checkedAt: new Date().toISOString(), currentValue: currentValue || m.currentValue } 
                    : m
            ) || []
        }));
        setSelectedOdpuMeter(null);
    };

    const stats = {
        total: (data.apartments?.length || 0) + (data.odpuMeters?.length || 0),
        verified: (data.apartments?.filter(a => a.status === 'verified').length || 0) + (data.odpuMeters?.filter(m => m.status === 'verified').length || 0),
        noAccess: (data.apartments?.filter(a => a.status === 'no_access').length || 0) + (data.odpuMeters?.filter(m => m.status === 'no_access').length || 0),
        apartments: {
            total: data.apartments?.length || 0,
            verified: data.apartments?.filter(a => a.status === 'verified').length || 0,
            noAccess: data.apartments?.filter(a => a.status === 'no_access').length || 0,
        },
        odpu: {
            total: data.odpuMeters?.length || 0,
            verified: data.odpuMeters?.filter(m => m.status === 'verified').length || 0,
            noAccess: data.odpuMeters?.filter(m => m.status === 'no_access').length || 0,
        }
    };

    const filteredApts = data.apartments?.filter(a => 
        a.apartmentNumber.includes(searchTerm)
    ) || [];

    const filteredOdpuMeters = data.odpuMeters?.filter(m => 
        m.meterName.toLowerCase().includes(searchTerm.toLowerCase()) || 
        m.meterType.toLowerCase().includes(searchTerm.toLowerCase())
    ) || [];

    return (
        <div className="animate-fade-in space-y-6">
            <div className="flex items-center justify-between sticky top-[70px] bg-slate-50/95 py-2 z-30 -mx-4 px-4 md:-mx-8 md:px-8 border-b border-slate-200 backdrop-blur-md">
                <div className="flex items-center gap-3">
                    <button onClick={onBack} className="p-2 hover:bg-slate-200 rounded-full text-slate-500">
                        <ArrowLeft className="w-5 h-5"/>
                    </button>
                    <div>
                        <h2 className="font-bold text-slate-800 leading-none">Обход {data.date}</h2>
                        <div className="text-xs text-slate-500 mt-1">
                            <p>
                                {data.roundType === 'odpu' ? 'Только ОДПУ' : 
                                 data.roundType === 'apartments' ? 'По квартирно' : 
                                 'Все счетчики'}
                            </p>
                            {(data.selectedEntrances && data.selectedEntrances.length > 0) && (
                                <p className="mt-1">Подъезды: {data.selectedEntrances.sort((a, b) => a - b).join(', ')}</p>
                            )}
                            {(data.selectedFloors && data.selectedFloors.length > 0) && (
                                <p className="mt-1">Этажи: {data.selectedFloors.sort((a, b) => a - b).join(', ')}</p>
                            )}
                        </div>
                        <div className="flex gap-2 mt-1">
                            <button onClick={() => setViewMode('list')} className={`text-[10px] font-black uppercase ${viewMode === 'list' ? 'text-primary-600' : 'text-slate-400'}`}>Список</button>
                            <button onClick={() => setViewMode('stats')} className={`text-[10px] font-black uppercase ${viewMode === 'stats' ? 'text-primary-600' : 'text-slate-400'}`}>Аналитика</button>
                        </div>
                    </div>
                </div>
                <button 
                    onClick={() => onSave({...data, status: 'completed'})}
                    className="bg-slate-900 text-white px-5 py-2 rounded-xl text-xs font-bold shadow-xl active:scale-95 transition-all"
                >
                    Завершить
                </button>
            </div>

            {viewMode === 'stats' ? (
                <div className="animate-fade-in">
                    <RoundAnalytics round={data} />
                    <div className="bg-white p-6 rounded-3xl border border-slate-200 shadow-sm">
                        <h3 className="font-bold text-slate-800 mb-4">Журнал выявленных расхождений</h3>
                        <div className="space-y-3">
                            {/* Расхождения по квартирам */}
                            {data.apartments?.filter(a => a.status === 'verified').map(apt => (
                                apt.readings.map(r => {
                                    const diff = (r.currentValue || 0) - r.previousValue;
                                    if (diff > 40) {
                                        return (
                                            <div key={`${apt.apartmentNumber}-${r.meterId}`} className="flex items-center justify-between p-3 bg-red-50 rounded-xl border border-red-100">
                                                <div className="flex items-center gap-3">
                                                    <span className="w-8 h-8 rounded-lg bg-white flex items-center justify-center font-bold text-red-600">Кв.{apt.apartmentNumber}</span>
                                                    <div>
                                                        <p className="text-xs font-bold text-slate-800">{r.meterType}</p>
                                                        <p className="text-[10px] text-red-500">Расход: +{diff} ед.</p>
                                                    </div>
                                                </div>
                                                <button className="text-[10px] font-bold text-white bg-red-600 px-3 py-1 rounded-lg">Выписать акт</button>
                                            </div>
                                        );
                                    }
                                    return null;
                                })
                            ))}
                            {/* Расхождения по ОДПУ */}
                            {data.odpuMeters?.filter(m => m.status === 'verified').map(meter => {
                                const diff = (meter.currentValue || 0) - meter.previousValue;
                                if (diff > 40) {
                                    return (
                                        <div key={meter.meterId} className="flex items-center justify-between p-3 bg-red-50 rounded-xl border border-red-100">
                                            <div className="flex items-center gap-3">
                                                <span className="w-8 h-8 rounded-lg bg-white flex items-center justify-center font-bold text-red-600">
                                                    <Gauge className="w-4 h-4"/>
                                                </span>
                                                <div>
                                                    <p className="text-xs font-bold text-slate-800">{meter.meterName}</p>
                                                    <p className="text-[10px] text-red-500">Расход: +{diff.toLocaleString('ru-RU')} ед.</p>
                                                </div>
                                            </div>
                                            <button className="text-[10px] font-bold text-white bg-red-600 px-3 py-1 rounded-lg">Выписать акт</button>
                                        </div>
                                    );
                                }
                                return null;
                            })}
                            {((data.apartments?.filter(a => a.status === 'verified').length || 0) === 0 && 
                               (data.odpuMeters?.filter(m => m.status === 'verified').length || 0) === 0) && (
                                <p className="text-sm text-slate-400 text-center py-4">Нет выявленных расхождений</p>
                            )}
                        </div>
                    </div>
                </div>
            ) : (
                <>
                    <div className="flex gap-4 items-center">
                        <div className="relative flex-1">
                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                            <input 
                                type="text" placeholder={data.roundType === 'odpu' ? "Поиск ПУ..." : data.roundType === 'all' ? "Поиск квартиры или ПУ..." : "Поиск квартиры..."} 
                                value={searchTerm} onChange={e => setSearchTerm(e.target.value)}
                                className="w-full pl-10 pr-4 py-3 rounded-2xl border border-slate-200 bg-white focus:ring-2 focus:ring-primary-500 outline-none shadow-sm"
                            />
                        </div>
                        <div className="bg-white px-4 py-3 rounded-2xl border border-slate-200 text-xs font-black text-slate-500 whitespace-nowrap shadow-sm">
                            {stats.verified} / {stats.total} <span className="text-[10px] text-slate-300 ml-1 uppercase">Готово</span>
                        </div>
                    </div>

                    {/* ОДПУ секция */}
                    {(data.roundType === 'odpu' || data.roundType === 'all') && data.odpuMeters && data.odpuMeters.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>
                            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                                {filteredOdpuMeters.map(meter => (
                                    <div 
                                        key={meter.meterId}
                                        onClick={() => setSelectedOdpuMeter(meter.meterId)}
                                        className={`bg-white p-4 rounded-3xl border transition-all cursor-pointer relative group ${
                                            meter.status === 'verified' ? 'border-emerald-200 hover:border-emerald-300' :
                                            meter.status === 'no_access' ? 'border-red-200 hover:border-red-300' :
                                            'border-slate-100 hover:border-primary-300 shadow-sm'
                                        }`}
                                    >
                                        <div className="flex justify-between items-start mb-2">
                                            <h4 className="text-lg font-black text-slate-800 leading-none">{meter.meterName}</h4>
                                            {meter.status === 'verified' ? (
                                                <div className="w-6 h-6 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center">
                                                    <CheckCircle2 className="w-4 h-4"/>
                                                </div>
                                            ) : meter.status === 'no_access' ? (
                                                <div className="w-6 h-6 rounded-full bg-red-100 text-red-600 flex items-center justify-center">
                                                    <DoorClosed className="w-4 h-4"/>
                                                </div>
                                            ) : null}
                                        </div>
                        <div className="text-xs text-slate-500 mt-2">
                            <p>Предыдущее: <span className="font-bold text-slate-800">{meter.previousValue.toLocaleString('ru-RU')}</span></p>
                            {meter.currentValue !== undefined && (
                                <p className="mt-1">Текущее: <span className="font-bold text-slate-800">{meter.currentValue.toLocaleString('ru-RU')}</span></p>
                            )}
                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}

                    {/* Квартиры секция */}
                    {(data.roundType === 'apartments' || data.roundType === 'all') && data.apartments && data.apartments.length > 0 && (
                        <div>
                            <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>
                            {/* Группировка по подъездам и этажам, если есть фильтры */}
                            {(() => {
                                // Если выбраны подъезды, группируем по подъездам
                                if (data.selectedEntrances && data.selectedEntrances.length > 0) {
                                    return data.selectedEntrances.sort((a, b) => a - b).map(entranceNum => {
                                        let entranceApts = filteredApts.filter(apt => apt.entranceNumber === entranceNum);
                                        
                                        // Если также выбраны этажи, дополнительно фильтруем
                                        if (data.selectedFloors && data.selectedFloors.length > 0) {
                                            entranceApts = entranceApts.filter(apt => apt.floor && data.selectedFloors!.includes(apt.floor));
                                        }
                                        
                                        if (entranceApts.length === 0) return null;
                                        
                                        // Группируем по этажам внутри подъезда, если выбраны этажи
                                        if (data.selectedFloors && data.selectedFloors.length > 0) {
                                            return (
                                                <div key={entranceNum} className="mb-6">
                                                    <h4 className="font-bold text-slate-700 text-sm mb-3 uppercase">Подъезд {entranceNum}</h4>
                                                    {data.selectedFloors.sort((a, b) => a - b).map(floorNum => {
                                                        const floorApts = entranceApts.filter(apt => apt.floor === floorNum);
                                                        if (floorApts.length === 0) return null;
                                                        return (
                                                            <div key={floorNum} className="mb-4">
                                                                <h5 className="font-bold text-slate-600 text-xs mb-2 ml-2">Этаж {floorNum}</h5>
                                                                <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
                                                                    {floorApts.map(apt => (
                                                                        <div 
                                                                            key={apt.apartmentNumber}
                                                                            onClick={() => setSelectedApt(apt.apartmentNumber)}
                                                                            className={`bg-white p-4 rounded-3xl border transition-all cursor-pointer relative group ${
                                                                                apt.status === 'verified' ? 'border-emerald-200 hover:border-emerald-300' :
                                                                                apt.status === 'no_access' ? 'border-red-200 hover:border-red-300' :
                                                                                'border-slate-100 hover:border-primary-300 shadow-sm'
                                                                            }`}
                                                                        >
                                                                            <div className="flex justify-between items-start mb-2">
                                                                                <h4 className="text-xl font-black text-slate-800 leading-none">Кв. {apt.apartmentNumber}</h4>
                                                                                {apt.status === 'verified' ? (
                                                                                    <div className="w-6 h-6 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center">
                                                                                        <CheckCircle2 className="w-4 h-4"/>
                                                                                    </div>
                                                                                ) : apt.status === 'no_access' ? (
                                                                                    <div className="w-6 h-6 rounded-full bg-red-100 text-red-600 flex items-center justify-center">
                                                                                        <DoorClosed className="w-4 h-4"/>
                                                                                    </div>
                                                                                ) : null}
                                                                            </div>
                                                                            <div className="flex gap-1.5 mt-3">
                                                                                {apt.readings.map(r => {
                                                                                    const Icon = getMeterIcon(r.meterType);
                                                                                    return <div key={r.meterId} className="p-1.5 bg-slate-50 rounded-lg text-slate-400 group-hover:text-primary-500 transition-colors"><Icon className="w-3.5 h-3.5"/></div>
                                                                                })}
                                                                            </div>
                                                                        </div>
                                                                    ))}
                                                                </div>
                                                            </div>
                                                        );
                                                    })}
                                                </div>
                                            );
                                        }
                                        
                                        // Только подъезды без группировки по этажам
                                        return (
                                            <div key={entranceNum} className="mb-6">
                                                <h4 className="font-bold text-slate-700 text-xs mb-2 uppercase">Подъезд {entranceNum}</h4>
                                                <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
                                                    {entranceApts.map(apt => (
                                                    <div 
                                                        key={apt.apartmentNumber}
                                                        onClick={() => setSelectedApt(apt.apartmentNumber)}
                                                        className={`bg-white p-4 rounded-3xl border transition-all cursor-pointer relative group ${
                                                            apt.status === 'verified' ? 'border-emerald-200 hover:border-emerald-300' :
                                                            apt.status === 'no_access' ? 'border-red-200 hover:border-red-300' :
                                                            'border-slate-100 hover:border-primary-300 shadow-sm'
                                                        }`}
                                                    >
                                                        <div className="flex justify-between items-start mb-2">
                                                            <h4 className="text-xl font-black text-slate-800 leading-none">Кв. {apt.apartmentNumber}</h4>
                                                            {apt.status === 'verified' ? (
                                                                <div className="w-6 h-6 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center">
                                                                    <CheckCircle2 className="w-4 h-4"/>
                                                                </div>
                                                            ) : apt.status === 'no_access' ? (
                                                                <div className="w-6 h-6 rounded-full bg-red-100 text-red-600 flex items-center justify-center">
                                                                    <DoorClosed className="w-4 h-4"/>
                                                                </div>
                                                            ) : null}
                                                        </div>
                                                        <div className="flex gap-1.5 mt-3">
                                                            {apt.readings.map(r => {
                                                                const Icon = getMeterIcon(r.meterType);
                                                                return <div key={r.meterId} className="p-1.5 bg-slate-50 rounded-lg text-slate-400 group-hover:text-primary-500 transition-colors"><Icon className="w-3.5 h-3.5"/></div>
                                                            })}
                                                        </div>
                                                    </div>
                                                ))}
                                            </div>
                                        </div>
                                        );
                                    });
                                }
                                
                                // Если выбраны только этажи (без подъездов)
                                if (data.selectedFloors && data.selectedFloors.length > 0) {
                                    return data.selectedFloors.sort((a, b) => a - b).map(floorNum => {
                                        const floorApts = filteredApts.filter(apt => apt.floor === floorNum);
                                        if (floorApts.length === 0) return null;
                                        return (
                                            <div key={floorNum} className="mb-6">
                                                <h4 className="font-bold text-slate-700 text-xs mb-2 uppercase">Этаж {floorNum}</h4>
                                                <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
                                                    {floorApts.map(apt => (
                                                        <div 
                                                            key={apt.apartmentNumber}
                                                            onClick={() => setSelectedApt(apt.apartmentNumber)}
                                                            className={`bg-white p-4 rounded-3xl border transition-all cursor-pointer relative group ${
                                                                apt.status === 'verified' ? 'border-emerald-200 hover:border-emerald-300' :
                                                                apt.status === 'no_access' ? 'border-red-200 hover:border-red-300' :
                                                                'border-slate-100 hover:border-primary-300 shadow-sm'
                                                            }`}
                                                        >
                                                            <div className="flex justify-between items-start mb-2">
                                                                <h4 className="text-xl font-black text-slate-800 leading-none">Кв. {apt.apartmentNumber}</h4>
                                                                {apt.status === 'verified' ? (
                                                                    <div className="w-6 h-6 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center">
                                                                        <CheckCircle2 className="w-4 h-4"/>
                                                                    </div>
                                                                ) : apt.status === 'no_access' ? (
                                                                    <div className="w-6 h-6 rounded-full bg-red-100 text-red-600 flex items-center justify-center">
                                                                        <DoorClosed className="w-4 h-4"/>
                                                                    </div>
                                                                ) : null}
                                                            </div>
                                                            <div className="flex gap-1.5 mt-3">
                                                                {apt.readings.map(r => {
                                                                    const Icon = getMeterIcon(r.meterType);
                                                                    return <div key={r.meterId} className="p-1.5 bg-slate-50 rounded-lg text-slate-400 group-hover:text-primary-500 transition-colors"><Icon className="w-3.5 h-3.5"/></div>
                                                                })}
                                                            </div>
                                                        </div>
                                                    ))}
                                                </div>
                                            </div>
                                        );
                                    });
                                }
                                
                                // Нет фильтров - показываем все квартиры
                                return (
                                <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
                                    {filteredApts.map(apt => (
                            <div 
                                key={apt.apartmentNumber}
                                onClick={() => setSelectedApt(apt.apartmentNumber)}
                                className={`bg-white p-4 rounded-3xl border transition-all cursor-pointer relative group ${
                                    apt.status === 'verified' ? 'border-emerald-200 hover:border-emerald-300' :
                                    apt.status === 'no_access' ? 'border-red-200 hover:border-red-300' :
                                    'border-slate-100 hover:border-primary-300 shadow-sm'
                                }`}
                            >
                                <div className="flex justify-between items-start mb-2">
                                    <h4 className="text-xl font-black text-slate-800 leading-none">Кв. {apt.apartmentNumber}</h4>
                                    {apt.status === 'verified' ? (
                                        <div className="w-6 h-6 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center">
                                            <CheckCircle2 className="w-4 h-4"/>
                                        </div>
                                    ) : apt.status === 'no_access' ? (
                                        <div className="w-6 h-6 rounded-full bg-red-100 text-red-600 flex items-center justify-center">
                                            <DoorClosed className="w-4 h-4"/>
                                        </div>
                                    ) : null}
                                </div>
                                <div className="flex gap-1.5 mt-3">
                                    {apt.readings.map(r => {
                                        const Icon = getMeterIcon(r.meterType);
                                        return <div key={r.meterId} className="p-1.5 bg-slate-50 rounded-lg text-slate-400 group-hover:text-primary-500 transition-colors"><Icon className="w-3.5 h-3.5"/></div>
                                    })}
                                </div>
                            </div>
                                ))}
                            </div>
                                );
                            })()}
                        </div>
                    )}
                </>
            )}

            {/* ODPU Meter Verification Modal */}
            {currentOdpuMeter && (() => {
                const meters = building.passport?.meters || [];
                const actualMeter = meters[currentOdpuMeter.meterIndex];
                const Icon = getMeterIcon(currentOdpuMeter.meterType);
                const currentInput = currentOdpuMeter.currentValue || 0;
                const diff = currentInput ? currentInput - currentOdpuMeter.previousValue : 0;
                const isWarning = diff > 30 || diff < 0;
                const unit = actualMeter?.unit || (currentOdpuMeter.meterType === 'Electricity' ? 'кВт⋅ч' : 'м³');

                return (
                    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/80 backdrop-blur-md animate-fade-in" onClick={() => setSelectedOdpuMeter(null)}>
                        <div className="bg-white rounded-[2.5rem] w-full max-w-md p-8 shadow-2xl animate-slide-up" onClick={e => e.stopPropagation()}>
                            <div className="flex justify-between items-start mb-8">
                                <div>
                                    <h3 className="text-3xl font-black text-slate-900 leading-none">{currentOdpuMeter.meterName}</h3>
                                    <p className="text-xs text-slate-500 mt-2 font-bold uppercase tracking-widest">ОДПУ - Акт сверки показаний</p>
                                </div>
                                <button onClick={() => setSelectedOdpuMeter(null)} className="p-2 hover:bg-slate-100 rounded-full"><X className="w-6 h-6 text-slate-300"/></button>
                            </div>

                            <div className="space-y-6">
                                <div className="space-y-3 p-4 bg-slate-50 rounded-2xl border border-slate-100">
                                    <div className="flex justify-between items-center">
                                        <label className="text-[10px] font-black text-slate-400 uppercase flex items-center gap-1.5">
                                            <Icon className="w-3.5 h-3.5 text-primary-500"/> {currentOdpuMeter.meterType}
                                        </label>
                                        <div className="flex items-center gap-2">
                                            <span className="text-[10px] font-bold text-slate-400">Предыдущее: <b className="text-slate-800">{currentOdpuMeter.previousValue}</b></span>
                                            {isWarning && diff > 0 && <AlertTriangle className="w-4 h-4 text-red-500 animate-pulse"/>}
                                        </div>
                                    </div>
                                    <input 
                                        type="number"
                                        placeholder="Текущее значение"
                                        defaultValue={currentOdpuMeter.currentValue}
                                        onChange={e => {
                                            const val = Number(e.target.value);
                                            const updated = data.odpuMeters?.map(m => 
                                                m.meterId === currentOdpuMeter.meterId 
                                                    ? { ...m, currentValue: val }
                                                    : m
                                            ) || [];
                                            setData(prev => ({ ...prev, odpuMeters: updated }));
                                        }}
                                        className={`w-full p-4 bg-white border-2 rounded-2xl text-2xl font-black text-slate-900 outline-none transition-all ${isWarning ? 'border-red-200 focus:border-red-500' : 'border-slate-100 focus:border-primary-500'}`}
                                    />
                                    {diff > 0 && (
                                        <div className={`flex items-center justify-between text-[10px] font-black uppercase px-1 ${isWarning ? 'text-red-500' : 'text-emerald-500'}`}>
                                            <span>Потребление за период:</span>
                                            <span className="flex items-center gap-1">+{diff.toLocaleString('ru-RU')} {unit} {isWarning ? <TrendingUp className="w-3 h-3"/> : <CheckCircle2 className="w-3 h-3"/>}</span>
                                        </div>
                                    )}
                                </div>
                            </div>

                            <div className="mt-10 grid grid-cols-2 gap-4">
                                <button 
                                    onClick={() => handleUpdateOdpuMeter(currentOdpuMeter.meterId, 'no_access')}
                                    className="py-5 bg-slate-100 text-slate-500 rounded-[1.5rem] font-black text-xs uppercase flex flex-col items-center justify-center gap-1 hover:bg-red-50 hover:text-red-600 transition-all"
                                >
                                    <DoorClosed className="w-5 h-5"/> Нет доступа
                                </button>
                                <button 
                                    onClick={() => {
                                        const meter = data.odpuMeters?.find(m => m.meterId === currentOdpuMeter.meterId);
                                        if (meter) {
                                            handleUpdateOdpuMeter(currentOdpuMeter.meterId, 'verified', meter.currentValue);
                                        }
                                    }}
                                    className="py-5 bg-primary-600 text-white rounded-[1.5rem] font-black text-xs uppercase flex flex-col items-center justify-center gap-1 shadow-xl shadow-primary-500/20 active:scale-95 transition-all"
                                >
                                    <CheckCircle2 className="w-5 h-5"/> Сохранить
                                </button>
                            </div>
                        </div>
                    </div>
                );
            })()}

            {/* Apartment Verification Modal */}
            {currentApt && (
                <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/80 backdrop-blur-md animate-fade-in" onClick={() => setSelectedApt(null)}>
                    <div className="bg-white rounded-[2.5rem] w-full max-w-md p-8 shadow-2xl animate-slide-up" onClick={e => e.stopPropagation()}>
                        <div className="flex justify-between items-start mb-8">
                            <div>
                                <h3 className="text-3xl font-black text-slate-900 leading-none">Квартира {currentApt.apartmentNumber}</h3>
                                <p className="text-xs text-slate-500 mt-2 font-bold uppercase tracking-widest">Акт сверки показаний</p>
                            </div>
                            <button onClick={() => setSelectedApt(null)} className="p-2 hover:bg-slate-100 rounded-full"><X className="w-6 h-6 text-slate-300"/></button>
                        </div>

                        <div className="space-y-6">
                            {currentApt.readings.map((meter) => {
                                const Icon = getMeterIcon(meter.meterType);
                                const currentInput = aptModalValues[meter.meterId] ?? meter.currentValue ?? 0;
                                const numInput = typeof currentInput === 'number' && !Number.isNaN(currentInput) ? currentInput : 0;
                                const diff = numInput > 0 ? numInput - meter.previousValue : 0;
                                const isWarning = diff > 30 || diff < 0;

                                return (
                                    <div key={meter.meterId} className="space-y-3 p-4 bg-slate-50 rounded-2xl border border-slate-100">
                                        <div className="flex justify-between items-center">
                                            <label className="text-[10px] font-black text-slate-400 uppercase flex items-center gap-1.5">
                                                <Icon className="w-3.5 h-3.5 text-primary-500"/> {meter.meterType}
                                            </label>
                                            <div className="flex items-center gap-2">
                                                <span className="text-[10px] font-bold text-slate-400">Предыдущее: <b className="text-slate-800">{meter.previousValue}</b></span>
                                                {isWarning && diff > 0 && <AlertTriangle className="w-4 h-4 text-red-500 animate-pulse"/>}
                                            </div>
                                        </div>
                                        <input 
                                            type="number"
                                            placeholder="Текущее значение"
                                            value={numInput || ''}
                                            onChange={e => {
                                                const val = e.target.value === '' ? 0 : Number(e.target.value);
                                                setAptModalValues(prev => ({ ...prev, [meter.meterId]: val }));
                                            }}
                                            className={`w-full p-4 bg-white border-2 rounded-2xl text-2xl font-black text-slate-900 outline-none transition-all ${isWarning ? 'border-red-200 focus:border-red-500' : 'border-slate-100 focus:border-primary-500'}`}
                                        />
                                        {diff > 0 && (
                                            <div className={`flex items-center justify-between text-[10px] font-black uppercase px-1 ${isWarning ? 'text-red-500' : 'text-emerald-500'}`}>
                                                <span>Потребление за период:</span>
                                                <span className="flex items-center gap-1">+{diff} ед. {isWarning ? <TrendingUp className="w-3 h-3"/> : <CheckCircle2 className="w-3 h-3"/>}</span>
                                            </div>
                                        )}
                                    </div>
                                );
                            })}
                        </div>

                        <div className="mt-10 grid grid-cols-2 gap-4">
                            <button 
                                onClick={() => handleUpdateApt(currentApt.apartmentNumber, 'no_access')}
                                className="py-5 bg-slate-100 text-slate-500 rounded-[1.5rem] font-black text-xs uppercase flex flex-col items-center justify-center gap-1 hover:bg-red-50 hover:text-red-600 transition-all"
                            >
                                <DoorClosed className="w-5 h-5"/> Нет доступа
                            </button>
                            <button 
                                onClick={() => {
                                    const readings = currentApt.readings.map(r => ({
                                        ...r,
                                        currentValue: aptModalValues[r.meterId] ?? r.currentValue
                                    }));
                                    handleUpdateApt(currentApt.apartmentNumber, 'verified', readings);
                                }}
                                className="py-5 bg-primary-600 text-white rounded-[1.5rem] font-black text-xs uppercase flex flex-col items-center justify-center gap-1 shadow-xl shadow-primary-500/20 active:scale-95 transition-all"
                            >
                                <CheckCircle2 className="w-5 h-5"/> Сохранить
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

// Модальное окно выбора типа обхода с фильтрами
const RoundTypeModal: React.FC<{
    isOpen: boolean;
    onClose: () => void;
    onSelect: (type: 'odpu' | 'apartments' | 'all', filters?: { entrances?: number[], floors?: number[] }) => void;
    building: Building;
}> = ({ isOpen, onClose, onSelect, building }) => {
    const [selectedType, setSelectedType] = useState<'odpu' | 'apartments' | 'all' | null>(null);
    const [selectedEntrances, setSelectedEntrances] = useState<number[]>([]);
    const [selectedFloors, setSelectedFloors] = useState<number[]>([]);

    const entrancesCount = building.passport?.general?.entrancesCount || building.entrances?.length || 0;
    const floorsCount = building.passport?.general?.floors || 0;

    const toggleEntrance = (num: number) => {
        setSelectedEntrances(prev => 
            prev.includes(num) 
                ? prev.filter(n => n !== num)
                : [...prev, num]
        );
    };

    const toggleFloor = (num: number) => {
        setSelectedFloors(prev => 
            prev.includes(num) 
                ? prev.filter(n => n !== num)
                : [...prev, num]
        );
    };

    const handleConfirm = () => {
        if (!selectedType) return;
        const filters: { entrances?: number[], floors?: number[] } = {};
        if (selectedEntrances.length > 0) filters.entrances = selectedEntrances;
        if (selectedFloors.length > 0) filters.floors = selectedFloors;
        onSelect(selectedType, Object.keys(filters).length > 0 ? filters : undefined);
        onClose();
        // Сброс
        setSelectedType(null);
        setSelectedEntrances([]);
        setSelectedFloors([]);
    };

    if (!isOpen) return null;

    return (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-fade-in" onClick={onClose}>
            <div className="bg-white rounded-2xl w-full max-w-lg p-6 shadow-2xl animate-slide-up max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
                <div className="flex justify-between items-center mb-6">
                    <h3 className="text-xl font-bold text-slate-800">Выберите тип обхода</h3>
                    <button onClick={onClose} className="p-2 hover:bg-slate-100 rounded-full">
                        <X className="w-5 h-5 text-slate-500"/>
                    </button>
                </div>
                
                <div className="space-y-4">
                    {/* Выбор типа обхода */}
                    <div>
                        <label className="text-xs font-bold text-slate-500 uppercase block mb-2">Тип обхода</label>
                        <div className="space-y-2">
                            <button
                                onClick={() => setSelectedType('odpu')}
                                className={`w-full p-4 border-2 rounded-xl transition-all text-left ${
                                    selectedType === 'odpu'
                                        ? 'bg-primary-50 border-primary-500'
                                        : 'bg-slate-50 border-slate-200 hover:border-primary-300'
                                }`}
                            >
                                <div className="flex items-center gap-3">
                                    <div className="p-2 bg-primary-100 rounded-lg">
                                        <Gauge className="w-5 h-5 text-primary-600"/>
                                    </div>
                                    <div>
                                        <p className="font-bold text-slate-800">Только общедомовые ПУ (ОДПУ)</p>
                                        <p className="text-xs text-slate-500 mt-1">Обход только общедомовых приборов учета</p>
                                    </div>
                                </div>
                            </button>
                            <button
                                onClick={() => setSelectedType('apartments')}
                                className={`w-full p-4 border-2 rounded-xl transition-all text-left ${
                                    selectedType === 'apartments'
                                        ? 'bg-primary-50 border-primary-500'
                                        : 'bg-slate-50 border-slate-200 hover:border-primary-300'
                                }`}
                            >
                                <div className="flex items-center gap-3">
                                    <div className="p-2 bg-primary-100 rounded-lg">
                                        <DoorClosed className="w-5 h-5 text-primary-600"/>
                                    </div>
                                    <div>
                                        <p className="font-bold text-slate-800">По квартирно (индивидуальные ПУ)</p>
                                        <p className="text-xs text-slate-500 mt-1">Обход индивидуальных приборов учета по квартирам</p>
                                    </div>
                                </div>
                            </button>
                            <button
                                onClick={() => setSelectedType('all')}
                                className={`w-full p-4 border-2 rounded-xl transition-all text-left ${
                                    selectedType === 'all'
                                        ? 'bg-primary-50 border-primary-500'
                                        : 'bg-slate-50 border-slate-200 hover:border-primary-300'
                                }`}
                            >
                                <div className="flex items-center gap-3">
                                    <div className="p-2 bg-primary-100 rounded-lg">
                                        <ClipboardCheck className="w-5 h-5 text-primary-600"/>
                                    </div>
                                    <div>
                                        <p className="font-bold text-slate-800">Все счетчики</p>
                                        <p className="text-xs text-slate-500 mt-1">Обход всех приборов учета (ОДПУ + индивидуальные)</p>
                                    </div>
                                </div>
                            </button>
                        </div>
                    </div>

                    {/* Фильтры (только для квартир) */}
                    {selectedType === 'apartments' || selectedType === 'all' ? (
                        <>
                            {entrancesCount > 0 && (
                                <div>
                                    <label className="text-xs font-bold text-slate-500 uppercase block mb-2">
                                        Подъезды (оставьте пустым для всех)
                                    </label>
                                    <div className="flex flex-wrap gap-2">
                                        {Array.from({ length: entrancesCount }, (_, i) => i + 1).map(num => (
                                            <button
                                                key={num}
                                                onClick={() => toggleEntrance(num)}
                                                className={`px-4 py-2 rounded-lg font-bold text-sm transition-all ${
                                                    selectedEntrances.includes(num)
                                                        ? 'bg-primary-600 text-white shadow-lg'
                                                        : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
                                                }`}
                                            >
                                                {num}
                                            </button>
                                        ))}
                                    </div>
                                </div>
                            )}

                            {floorsCount > 0 && (
                                <div>
                                    <label className="text-xs font-bold text-slate-500 uppercase block mb-2">
                                        Этажи (оставьте пустым для всех)
                                    </label>
                                    <div className="flex flex-wrap gap-2">
                                        {Array.from({ length: floorsCount }, (_, i) => i + 1).map(num => (
                                            <button
                                                key={num}
                                                onClick={() => toggleFloor(num)}
                                                className={`px-4 py-2 rounded-lg font-bold text-sm transition-all ${
                                                    selectedFloors.includes(num)
                                                        ? 'bg-primary-600 text-white shadow-lg'
                                                        : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
                                                }`}
                                            >
                                                {num}
                                            </button>
                                        ))}
                                    </div>
                                </div>
                            )}
                        </>
                    ) : null}

                    {/* Кнопка подтверждения */}
                    <div className="flex gap-3 pt-4 border-t border-slate-200">
                        <button
                            onClick={handleConfirm}
                            disabled={!selectedType}
                            className="flex-1 bg-primary-600 text-white px-6 py-3 rounded-xl font-bold text-sm hover:bg-primary-700 transition-all disabled:bg-slate-300 disabled:cursor-not-allowed"
                        >
                            Создать обход
                        </button>
                        <button
                            onClick={onClose}
                            className="px-6 py-3 bg-slate-100 text-slate-600 rounded-xl font-bold text-sm hover:bg-slate-200 transition-all"
                        >
                            Отмена
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
};

export const MeterCheckView: React.FC<{ 
    building: Building, 
    setBuilding: React.Dispatch<React.SetStateAction<Building>> 
}> = ({ building, setBuilding }) => {
    const [activeRoundId, setActiveRoundId] = useState<string | null>(null);
    const [showRoundTypeModal, setShowRoundTypeModal] = useState(false);

    const handleCreateRound = (roundType: 'odpu' | 'apartments' | 'all', filters?: { entrances?: number[], floors?: number[] }) => {
        const meters = building.passport?.meters || [];
        const odpuMeters = meters.filter(m => m.hasMeter).map((meter, idx) => {
            const lastReading = meter.readings && meter.readings.length > 0 
                ? meter.readings[0].value 
                : (meter.currentReading || 0);
            return {
                meterId: `odpu-${idx}`,
                meterIndex: meters.findIndex(m => m === meter),
                meterType: meter.resource || 'Other',
                meterName: meter.name || meter.resource || 'ПУ',
                previousValue: lastReading,
                status: 'pending' as const,
            };
        });

        // Фильтруем квартиры по подъездам и этажам
        let filteredAccounts = building.accounts;
        
        // Функция для определения подъезда квартиры
        const getEntranceForApartment = (acc: any): number | undefined => {
            // Сначала проверяем, есть ли явное поле entranceNumber
            if (acc.entranceNumber) return acc.entranceNumber;
            
            // Пытаемся найти в building.entrances
            const entrance = building.entrances?.find(e => 
                e.sections?.some(s => s.elements.some(el => el.name.includes(acc.apartmentNumber)))
            );
            if (entrance) return entrance.number;
            
            // Если есть несколько подъездов, пытаемся определить по номеру квартиры
            // (обычно квартиры распределяются по подъездам примерно равномерно)
            const entrancesCount = building.passport?.general?.entrancesCount || building.entrances?.length || 0;
            if (entrancesCount > 0) {
                // Простая эвристика: делим квартиры по подъездам
                const aptNum = parseInt(acc.apartmentNumber) || 0;
                if (aptNum > 0) {
                    // Предполагаем, что квартиры распределены примерно равномерно
                    // Например, если 3 подъезда и квартиры 1-90, то подъезд 1 = 1-30, подъезд 2 = 31-60, подъезд 3 = 61-90
                    const totalApts = building.accounts.length;
                    const aptsPerEntrance = Math.ceil(totalApts / entrancesCount);
                    const calculatedEntrance = Math.ceil(aptNum / aptsPerEntrance);
                    if (calculatedEntrance >= 1 && calculatedEntrance <= entrancesCount) {
                        return calculatedEntrance;
                    }
                }
            }
            
            return undefined;
        };
        
        if (filters?.entrances && filters.entrances.length > 0) {
            filteredAccounts = filteredAccounts.filter(acc => {
                const entranceNum = getEntranceForApartment(acc);
                return entranceNum && filters.entrances!.includes(entranceNum);
            });
        }
        
        if (filters?.floors && filters.floors.length > 0) {
            filteredAccounts = filteredAccounts.filter(acc => 
                acc.floor && filters.floors!.includes(acc.floor)
            );
        }

        const apartments = filteredAccounts.map(acc => ({
            apartmentNumber: acc.apartmentNumber,
            entranceNumber: getEntranceForApartment(acc),
            floor: acc.floor || undefined,
            status: 'pending' as const,
            readings: acc.meters.map(m => ({
                meterId: m.id,
                meterType: m.type,
                previousValue: m.readings[0]?.value || 0
            }))
        }));

        const newRound: MeterCheckRound = {
            id: `round-${Date.now()}`,
            date: new Date().toLocaleDateString('ru-RU'),
            inspector: 'Алексей Петров',
            status: 'active',
            buildingId: building.id,
            roundType,
            selectedEntrances: filters?.entrances,
            selectedFloors: filters?.floors,
            ...(roundType === 'odpu' || roundType === 'all' ? { odpuMeters } : {}),
            ...(roundType === 'apartments' || roundType === 'all' ? { apartments } : {}),
        };

        const next: Building = {
            ...building,
            meterCheckRounds: [newRound, ...(building.meterCheckRounds || [])]
        };
        setBuilding(next);
        persistBuilding(next);
        setActiveRoundId(newRound.id);
    };

    const handleUpdateRound = (updatedRound: MeterCheckRound) => {
        let next: Building;
        if (updatedRound.status === 'completed') {
            next = applyRoundReadingsToBuilding(building, updatedRound);
        } else {
            next = {
                ...building,
                meterCheckRounds: (building.meterCheckRounds || []).map(r =>
                    r.id === updatedRound.id ? updatedRound : r
                )
            };
        }
        setBuilding(next);
        persistBuilding(next);
        setActiveRoundId(null);
    };

    const activeRound = building.meterCheckRounds?.find(r => r.id === activeRoundId);

    if (activeRound) {
        return <RoundDetails round={activeRound} onSave={handleUpdateRound} onBack={() => setActiveRoundId(null)} building={building} />;
    }

    return (
        <div className="space-y-6 animate-fade-in">
            <div className="bg-white p-6 rounded-[2rem] border border-slate-200 shadow-sm relative overflow-hidden group">
                <div className="absolute top-0 right-0 p-10 opacity-5 rotate-12 group-hover:rotate-0 transition-transform">
                    <ShieldAlert className="w-40 h-40 text-primary-600"/>
                </div>
                <div className="relative z-10 max-w-md">
                    <h3 className="text-2xl font-black text-slate-800 mb-2">Обходы и Контроль ПУ</h3>
                    <p className="text-xs text-slate-500 font-medium mb-6">Инструмент для выявления занижений показаний и контроля состояния индивидуальных приборов учета.</p>
                    <button 
                        onClick={() => setShowRoundTypeModal(true)}
                        className="bg-primary-600 text-white px-6 py-3 rounded-2xl font-black text-xs uppercase flex items-center gap-3 shadow-xl shadow-primary-500/20 active:scale-95 transition-all"
                    >
                        <ClipboardCheck className="w-5 h-5"/> Сформировать новый обход
                    </button>
                    <RoundTypeModal
                        isOpen={showRoundTypeModal}
                        onClose={() => setShowRoundTypeModal(false)}
                        onSelect={handleCreateRound}
                        building={building}
                    />
                </div>
            </div>

            <div className="space-y-4">
                <h3 className="font-black text-slate-500 text-[10px] uppercase tracking-[0.2em] px-1">Архив обходов и сверок</h3>
                {(!building.meterCheckRounds || building.meterCheckRounds.length === 0) && (
                    <div className="py-20 bg-slate-50 rounded-[2rem] border-2 border-dashed border-slate-200 flex flex-col items-center justify-center text-slate-400">
                        <RotateCcw className="w-12 h-12 mb-4 opacity-20"/>
                        <p className="text-sm font-bold uppercase tracking-widest">Нет записей</p>
                    </div>
                )}
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    {building.meterCheckRounds?.map(round => {
                        const totalCount = (round.apartments?.length || 0) + (round.odpuMeters?.length || 0);
                        const verifiedCount = (round.apartments?.filter(a => a.status === 'verified').length || 0) + (round.odpuMeters?.filter(m => m.status === 'verified').length || 0);
                        const progress = totalCount > 0 ? (verifiedCount / totalCount) * 100 : 0;
                        
                        const roundTypeLabel = round.roundType === 'odpu' ? 'ОДПУ' : 
                                               round.roundType === 'apartments' ? 'Квартиры' : 
                                               'Все';
                        
                        return (
                            <div 
                                key={round.id} 
                                onClick={() => setActiveRoundId(round.id)}
                                className="bg-white p-5 rounded-3xl border border-slate-200 shadow-sm hover:shadow-lg hover:border-primary-200 transition-all cursor-pointer group"
                            >
                                <div className="flex justify-between items-start mb-4">
                                    <div className="p-3 rounded-2xl bg-slate-50 text-slate-400 group-hover:bg-primary-50 group-hover:text-primary-600 transition-colors">
                                        <ClipboardCheck className="w-6 h-6"/>
                                    </div>
                                    <span className={`text-[10px] font-black px-2 py-1 rounded-lg uppercase ${round.status === 'completed' ? 'bg-emerald-50 text-emerald-600' : 'bg-amber-50 text-amber-600 animate-pulse'}`}>
                                        {round.status === 'completed' ? 'Завершен' : 'В процессе'}
                                    </span>
                                </div>
                                <h4 className="font-black text-slate-800 text-lg leading-tight">Сверка от {round.date}</h4>
                                <div className="flex items-center gap-2 mt-1 text-xs text-slate-400 font-bold">
                                    <User className="w-3 h-3"/> {round.inspector}
                                </div>
                                <div className="mt-2 flex flex-wrap gap-1">
                                    <span className="text-[10px] font-bold text-primary-600 bg-primary-50 px-2 py-0.5 rounded uppercase">{roundTypeLabel}</span>
                                    {round.selectedEntrances && round.selectedEntrances.length > 0 && (
                                        <span className="text-[10px] font-bold text-slate-600 bg-slate-100 px-2 py-0.5 rounded">
                                            Подъезды: {round.selectedEntrances.sort((a, b) => a - b).join(', ')}
                                        </span>
                                    )}
                                    {round.selectedFloors && round.selectedFloors.length > 0 && (
                                        <span className="text-[10px] font-bold text-slate-600 bg-slate-100 px-2 py-0.5 rounded">
                                            Этажи: {round.selectedFloors.sort((a, b) => a - b).join(', ')}
                                        </span>
                                    )}
                                </div>
                                
                                <div className="mt-6 space-y-2">
                                    <div className="flex justify-between items-end text-[10px] font-black uppercase text-slate-400">
                                        <span>Прогресс</span>
                                        <span className="text-slate-700">{verifiedCount} / {totalCount}</span>
                                    </div>
                                    <div className="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden">
                                        <div className="h-full bg-primary-500 transition-all duration-1000" style={{ width: `${progress}%` }}/>
                                    </div>
                                </div>
                            </div>
                        );
                    })}
                </div>
            </div>
        </div>
    );
};