import React from 'react';
import { Building } from '../../types';
import { PassportView } from './PassportView';
import { ResidentsView } from './ResidentsView';

export const Passport: React.FC<{ 
    building: Building, 
    isEditing: boolean, 
    setBuilding: React.Dispatch<React.SetStateAction<Building>> 
}> = ({ building, isEditing, setBuilding }) => {

    const updatePassport = (section: keyof Building['passport'], field: string, value: any) => {
        setBuilding(prev => {
            try {
                const sectionData = prev.passport[section] as any;
                
                // Если это массив (lifts, meters), заменяем весь массив
                if (Array.isArray(sectionData)) {
                    return {
                        ...prev,
                        passport: {
                            ...prev.passport,
                            [section]: value
                        }
                    };
                }
                
                // Иначе обновляем поле в объекте
                // Проверяем, что sectionData существует, иначе создаем пустой объект
                const currentSectionData = sectionData || {};
                
                return {
                    ...prev,
                    passport: {
                        ...prev.passport,
                        [section]: {
                            ...currentSectionData,
                            [field]: value
                        }
                    }
                };
            } catch (error) {
                console.error('Error in updatePassport:', error, { section, field, value });
                return prev; // Возвращаем предыдущее состояние при ошибке
            }
        });
    };

    const updatePassportArray = (section: 'meters' | 'lifts', index: number, field: string, value: any) => {
        setBuilding(prev => {
            const newArray = [...prev.passport[section]];
            // @ts-ignore
            newArray[index] = { ...newArray[index], [field]: value };
            return {
                ...prev,
                passport: {
                    ...prev.passport,
                    [section]: newArray
                }
            };
        });
    };

    return (
        <div className="space-y-8 animate-fade-in">
            {/* Technical Passport Sheet */}
            <PassportView 
                building={building} 
                isEditing={isEditing} 
                updatePassport={updatePassport} 
                updatePassportArray={updatePassportArray} 
            />

            {/* Resident Asset Sheet (Merged into Passport as per 8-tab logic) */}
            <div className="pt-6 border-t border-slate-200">
                <h3 className="font-black text-slate-800 text-[10px] uppercase tracking-[0.2em] mb-6 px-1">
                    Совет дома и Контакты
                </h3>
                <ResidentsView building={building} setBuilding={setBuilding} isEditing={isEditing} />
            </div>
        </div>
    );
};