import React, { useState } from 'react';
import { Building, DomaApplication } from '../../types';
import { PerformanceCard } from './PerformanceCard';
import { Search, Filter } from 'lucide-react';

interface Props {
    buildings: Building[];
    applications: DomaApplication[];
    onSelectBuilding: (b: Building) => void;
}

export const BuildingsRegistry: React.FC<Props> = ({ buildings, applications, onSelectBuilding }) => {
    const [search, setSearch] = useState('');

    const filtered = buildings.filter(b => 
        b.passport.address.toLowerCase().includes(search.toLowerCase())
    );

    const getAppsForBuilding = (building: Building) => {
        return applications.filter(app => app.address === building.passport.address);
    };

    return (
        <div className="space-y-4 animate-fade-in">
            <div className="flex gap-4">
                <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="Поиск по адресу дома..." 
                        value={search}
                        onChange={e => setSearch(e.target.value)}
                        className="w-full pl-9 pr-4 py-2.5 bg-white border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500 shadow-sm"
                    />
                </div>
                <button className="p-2.5 bg-white border border-slate-200 rounded-xl text-slate-500"><Filter className="w-5 h-5"/></button>
            </div>

            <div className="grid grid-cols-1 gap-3">
                {filtered.map(b => (
                    <PerformanceCard
                        key={b.id}
                        title={b.passport.address}
                        subtitle={`${b.passport.general.floors} эт. • ${b.passport.general.totalArea} м²`}
                        applications={getAppsForBuilding(b)}
                        onClick={() => onSelectBuilding(b)}
                        type="building"
                    />
                ))}
                {filtered.length === 0 && <p className="py-10 text-center text-slate-400 text-sm">Дома не найдены</p>}
            </div>
        </div>
    );
};