import React, { useState } from 'react';
import { Building } from '../../types';
import { generateBuildingAudit } from '../../services/geminiService';
import { 
  Users, 
  Wallet, 
  Activity, 
  TrendingDown, 
  Bot, 
  Sparkles, 
  CheckCircle2, 
  Calendar 
} from 'lucide-react';

type TabType = 'overview' | 'finance' | 'inspections' | 'residents' | 'passport' | 'accounts';

export const OverviewView: React.FC<{ building: Building, onNavigate: (tab: TabType) => void }> = ({ building, onNavigate }) => {
    const [auditResult, setAuditResult] = useState<string | null>(null);
    const [loadingAudit, setLoadingAudit] = useState(false);
    
    const handleAudit = async () => {
        setLoadingAudit(true);
        const res = await generateBuildingAudit(building);
        setAuditResult(res);
        setLoadingAudit(false);
    };

    return (
        <div className="space-y-6 animate-fade-in">
             {/* Main Info Card */}
             <div className="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
                <div className="h-48 w-full bg-slate-200 relative">
                    <img src={building.imageUrl} alt="Building" className="w-full h-full object-cover" />
                    <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6">
                        <div className="flex justify-between items-end text-white">
                             <div>
                                <h2 className="text-2xl font-bold">{building.passport.address}</h2>
                                <p className="text-sm opacity-90">{building.passport.general.constructionYear} г. • {building.passport.general.floors} эт. • {building.passport.general.totalArea} м²</p>
                             </div>
                             <div className="text-right">
                                <p className="text-sm opacity-75">NPS</p>
                                <p className={`text-3xl font-black ${building.nps >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>{building.nps > 0 ? '+' : ''}{building.nps}</p>
                             </div>
                        </div>
                    </div>
                </div>
                <div className="p-4 grid grid-cols-2 md:grid-cols-4 gap-4 divide-x divide-slate-100">
                    <div className="text-center px-2 cursor-pointer hover:bg-slate-50 transition-colors rounded" onClick={() => onNavigate('residents')}>
                        <p className="text-slate-400 text-xs font-bold uppercase">Жителей</p>
                        <p className="text-xl font-black text-slate-800 flex items-center justify-center gap-1">
                            <Users className="w-4 h-4 text-slate-400"/> {building.accounts.reduce((sum, acc) => {
                                const count = acc.registered?.length || acc.registeredCount || 0;
                                return sum + (typeof count === 'number' ? count : 0);
                            }, 0)}
                        </p>
                    </div>
                    <div className="text-center px-2 cursor-pointer hover:bg-slate-50 transition-colors rounded" onClick={() => onNavigate('finance')}>
                        <p className="text-slate-400 text-xs font-bold uppercase">Баланс</p>
                        <p className={`text-xl font-black flex items-center justify-center gap-1 ${building.financials.balance >= 0 ? 'text-emerald-600' : 'text-red-600'}`}>
                            <Wallet className="w-4 h-4 text-slate-400"/> {(building.financials.balance / 1000).toFixed(0)}k
                        </p>
                    </div>
                    <div className="text-center px-2 cursor-pointer hover:bg-slate-50 transition-colors rounded" onClick={() => onNavigate('inspections')}>
                         <p className="text-slate-400 text-xs font-bold uppercase">Состояние</p>
                         <p className="text-xl font-black text-slate-800 flex items-center justify-center gap-1">
                             <Activity className="w-4 h-4 text-amber-500"/> Удовл.
                         </p>
                    </div>
                    <div className="text-center px-2 cursor-pointer hover:bg-slate-50 transition-colors rounded" onClick={() => onNavigate('passport')}>
                         <p className="text-slate-400 text-xs font-bold uppercase">Износ</p>
                         <p className="text-xl font-black text-slate-800 flex items-center justify-center gap-1">
                             <TrendingDown className="w-4 h-4 text-slate-400"/> 35%
                         </p>
                    </div>
                </div>
             </div>

             {/* AI Audit Section */}
             <div className="bg-gradient-to-br from-indigo-600 to-violet-700 rounded-2xl shadow-xl text-white p-6 relative overflow-hidden">
                 <div className="absolute top-0 right-0 p-8 opacity-10">
                     <Bot className="w-32 h-32" />
                 </div>
                 <h3 className="text-lg font-bold flex items-center gap-2 mb-2"><Sparkles className="w-5 h-5 text-yellow-300"/> Анализ Дома</h3>
                 <p className="text-indigo-100 text-sm mb-4 max-w-lg">Краткая сводка состояния дома, финансовых показателей и рекомендаций по эксплуатации на основе данных паспорта и истории осмотров.</p>
                 
                 {!auditResult ? (
                     <button 
                        onClick={handleAudit}
                        disabled={loadingAudit}
                        className="bg-white text-indigo-600 px-4 py-2 rounded-xl font-bold text-sm shadow-lg hover:bg-indigo-50 transition-transform active:scale-95 flex items-center gap-2 disabled:opacity-70"
                     >
                         {loadingAudit ? 'Анализирую...' : 'Сгенерировать отчет'}
                     </button>
                 ) : (
                     <div className="bg-white/10 backdrop-blur-md rounded-xl p-4 text-sm animate-fade-in border border-white/20">
                         <div className="prose prose-invert prose-sm max-w-none">
                             <pre className="whitespace-pre-wrap font-sans">{auditResult}</pre>
                         </div>
                         <button onClick={() => setAuditResult(null)} className="mt-3 text-xs text-indigo-200 hover:text-white underline">Скрыть отчет</button>
                     </div>
                 )}
             </div>

             {/* Tasks Widget */}
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div className="bg-white p-5 rounded-xl border border-slate-200 shadow-sm">
                     <h3 className="font-bold text-slate-700 mb-4 flex items-center gap-2"><CheckCircle2 className="w-5 h-5 text-primary-500"/> Текущие задачи</h3>
                     <div className="space-y-3">
                         {building.tasks.map(task => (
                             <div key={task.id} className="flex items-start gap-3 p-2 hover:bg-slate-50 rounded-lg transition-colors cursor-pointer">
                                 <div className={`mt-1 w-4 h-4 rounded-full border-2 ${task.status === 'done' ? 'bg-emerald-500 border-emerald-500' : 'border-slate-300'}`}></div>
                                 <div className="flex-1">
                                     <p className={`text-sm font-medium ${task.status === 'done' ? 'text-slate-400 line-through' : 'text-slate-800'}`}>{task.title}</p>
                                     <p className="text-xs text-slate-500 flex items-center gap-2 mt-1">
                                         <Calendar className="w-3 h-3"/> {task.deadline}
                                         <span className={`px-1.5 py-0.5 rounded text-[10px] font-bold uppercase ${task.priority === 'high' ? 'bg-red-100 text-red-600' : 'bg-slate-100 text-slate-500'}`}>{task.priority}</span>
                                     </p>
                                 </div>
                             </div>
                         ))}
                         <button className="w-full py-2 text-xs font-bold text-primary-600 border border-dashed border-primary-200 rounded-lg hover:bg-primary-50 mt-2">
                             + Добавить задачу
                         </button>
                     </div>
                 </div>

                 <div className="bg-white p-5 rounded-xl border border-slate-200 shadow-sm">
                     <h3 className="font-bold text-slate-700 mb-4 flex items-center gap-2"><Calendar className="w-5 h-5 text-primary-500"/> План работ (Май)</h3>
                     <div className="space-y-4">
                         {building.annualPlan.map(plan => (
                             <div key={plan.id}>
                                 <div className="flex justify-between text-xs mb-1">
                                     <span className="font-bold text-slate-700">{plan.workName}</span>
                                     <span className="text-slate-500">{plan.progress}%</span>
                                 </div>
                                 <div className="w-full bg-slate-100 rounded-full h-2">
                                     <div className={`h-2 rounded-full ${plan.progress === 100 ? 'bg-emerald-500' : 'bg-primary-500'}`} style={{ width: `${plan.progress}%` }}></div>
                                 </div>
                             </div>
                         ))}
                     </div>
                 </div>
             </div>
        </div>
    );
};