import React, { useState, useEffect } from 'react';
import { Building, BuildingTask, Employee } from '../../types';
import { 
  Users, 
  Wallet, 
  Activity, 
  TrendingDown, 
  CheckCircle2, 
  Calendar,
  User,
  Flag,
  Clock,
  MessageSquare,
  Camera,
  Image as ImageIcon
} from 'lucide-react';
import { TaskModal } from './TaskModal';
import { OutagesJournal } from '../applications/OutagesJournal';
import { backendApi } from '../../services/apiClient';
import { storageService } from '../../services/storageService';

export const Overview: React.FC<{ building: Building, onNavigate: (tab: any) => void, setBuilding?: React.Dispatch<React.SetStateAction<Building>> }> = ({ building, onNavigate, setBuilding }) => {
    const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
    const [selectedTask, setSelectedTask] = useState<BuildingTask | null>(null);
    const [employees, setEmployees] = useState<Employee[]>([]);

    useEffect(() => {
        fetchEmployees();
    }, []);

    const fetchEmployees = async () => {
        try {
            const fetchedEmployees = await backendApi.getEmployees();
            setEmployees(fetchedEmployees);
        } catch (error) {
            console.error('Failed to fetch employees:', error);
        }
    };

    const handleTaskClick = (task: BuildingTask) => {
        setSelectedTask(task);
        setIsTaskModalOpen(true);
    };

    const handleNewTask = () => {
        setSelectedTask(null);
        setIsTaskModalOpen(true);
    };

    const tasks = building.tasks ?? [];
    const handleSaveTask = (task: BuildingTask) => {
        const updatedTasks = task.id && tasks.find(t => t.id === task.id)
            ? tasks.map(t => t.id === task.id ? task : t)
            : [...tasks, task];
        
        const updatedBuilding = {
            ...building,
            tasks: updatedTasks,
            isDirty: true
        };

        if (setBuilding) {
            setBuilding(updatedBuilding);
        }
        
        // Сохраняем в localStorage
        storageService.saveBuildingData(updatedBuilding);
        
        // Пытаемся сохранить на сервер
        backendApi.updateBuilding(updatedBuilding).catch(err => {
            console.error('Failed to save task to backend:', err);
        });
    };

    const formatDate = (dateString: string) => {
        if (!dateString) return '—';
        const date = new Date(dateString);
        if (Number.isNaN(date.getTime())) return '—';
        return date.toLocaleDateString('ru-RU', { day: 'numeric', month: 'short' });
    };

    const getPriorityColor = (priority: BuildingTask['priority']) => {
        switch (priority) {
            case 'urgent': return 'bg-red-50 text-red-600';
            case 'high': return 'bg-amber-50 text-amber-600';
            case 'medium': return 'bg-blue-50 text-blue-600';
            case 'low': return 'bg-slate-100 text-slate-600';
            default: return 'bg-slate-100 text-slate-600';
        }
    };

    const getPriorityLabel = (priority: BuildingTask['priority']) => {
        switch (priority) {
            case 'urgent': return 'Срочно';
            case 'high': return 'Высокий';
            case 'medium': return 'Средний';
            case 'low': return 'Низкий';
            default: return priority;
        }
    };

    // Текущий месяц для блока «Статус работ»
    const MONTH_NAMES = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
    const now = new Date();
    const currentYear = now.getFullYear();
    const currentMonthIndex = now.getMonth();
    const currentMonthName = MONTH_NAMES[currentMonthIndex];
    const currentMonthNameLower = currentMonthName.charAt(0).toLowerCase() + currentMonthName.slice(1);
    const annualPlan = building.annualPlan ?? [];
    const plansForCurrentMonth = annualPlan.filter(
        p => (p.month === currentMonthName || p.month?.toLowerCase() === currentMonthNameLower) && (p.year === currentYear || p.year == null)
    );

    return (
        <div className="space-y-6 animate-fade-in">
             <div className="bg-white rounded-3xl shadow-sm border border-slate-200 overflow-hidden">
                <div className="h-56 w-full bg-slate-200 relative">
                    <img src={building.imageUrl} alt="Building" className="w-full h-full object-cover" />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent p-8 flex flex-col justify-end">
                        <h2 className="text-3xl font-black text-white leading-tight">{building.passport?.address ?? 'Адрес не указан'}</h2>
                        <p className="text-white/70 text-sm mt-1 font-bold uppercase tracking-widest">
                            {building.passport?.general?.constructionYear ?? '—'} г. • {building.passport?.general?.floors ?? '—'} эт. • {building.passport?.general?.totalArea ?? '—'} м²
                        </p>
                    </div>
                </div>
                <div className="p-6 grid grid-cols-2 md:grid-cols-4 gap-6 divide-x divide-slate-100 bg-white">
                    <div className="text-center px-2 cursor-pointer group" onClick={() => onNavigate('accounts')}>
                        <p className="text-slate-400 text-[10px] font-black uppercase tracking-widest mb-1">Жителей</p>
                        <p className="text-2xl font-black text-slate-800 group-hover:text-primary-600 transition-colors">
                            {(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-4 cursor-pointer group" onClick={() => onNavigate('finance')}>
                        <p className="text-slate-400 text-[10px] font-black uppercase tracking-widest mb-1">Баланс</p>
                        <p className={`text-2xl font-black group-hover:scale-105 transition-transform ${(building.financials?.balance ?? 0) >= 0 ? 'text-emerald-600' : 'text-red-600'}`}>
                            {((building.financials?.balance ?? 0) / 1000).toFixed(0)}k
                        </p>
                    </div>
                    <div className="text-center px-4 cursor-pointer group" onClick={() => onNavigate('inspections')}>
                         <p className="text-slate-400 text-[10px] font-black uppercase tracking-widest mb-1">Состояние</p>
                         <p className="text-2xl font-black text-slate-800 flex items-center justify-center gap-2">
                             <Activity className="w-5 h-5 text-amber-500"/> <span className="hidden sm:inline">Удовл.</span>
                         </p>
                    </div>
                    <div className="text-center px-4">
                         <p className="text-slate-400 text-[10px] font-black uppercase tracking-widest mb-1">NPS</p>
                         <p className={`text-2xl font-black ${(building.nps ?? 0) >= 0 ? 'text-emerald-500' : 'text-red-500'}`}>
                             {(building.nps ?? 0) > 0 ? '+' : ''}{building.nps ?? 0}
                         </p>
                    </div>
                </div>
             </div>


             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div className="bg-white p-6 rounded-[2rem] border border-slate-200 shadow-sm">
                     <h3 className="font-black text-slate-800 text-[10px] uppercase tracking-[0.2em] mb-6 flex items-center gap-2">
                        <CheckCircle2 className="w-4 h-4 text-primary-500"/> Оперативный план
                     </h3>
                     <div className="space-y-4">
                         {tasks.map(task => (
                             <div 
                                 key={task.id} 
                                 className="flex items-start gap-4 p-3 hover:bg-slate-50 rounded-2xl transition-colors border border-transparent hover:border-slate-100"
                             >
                                 <button
                                     onClick={(e) => {
                                         e.stopPropagation();
                                         const newStatus = task.status === 'done' ? 'new' : 'done';
                                         const updatedTask = {
                                             ...task,
                                             status: newStatus as BuildingTask['status'],
                                             updatedAt: new Date().toISOString()
                                         };
                                         handleSaveTask(updatedTask);
                                     }}
                                     className={`mt-1 w-5 h-5 rounded-full border-2 flex-shrink-0 cursor-pointer transition-all flex items-center justify-center ${
                                         task.status === 'done' 
                                             ? 'bg-emerald-500 border-emerald-500 hover:bg-emerald-600' 
                                             : 'border-slate-300 hover:border-primary-400 bg-white'
                                     }`}
                                     title={task.status === 'done' ? 'Отметить как невыполненную' : 'Отметить как выполненную'}
                                 >
                                     {task.status === 'done' && (
                                         <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                                         </svg>
                                     )}
                                 </button>
                                 <div 
                                     onClick={() => handleTaskClick(task)}
                                     className="flex-1 min-w-0 cursor-pointer"
                                 >
                                    <p className={`text-sm font-bold truncate ${task.status === 'done' ? 'text-slate-400 line-through' : 'text-slate-800'}`}>{task.title}</p>
                                    <div className="flex flex-wrap items-center gap-2 mt-1.5">
                                        <span className="text-[10px] text-slate-400 font-bold flex items-center gap-1" title="Крайняя дата">
                                            <Calendar className="w-3 h-3"/> {formatDate(task.deadline)}
                                        </span>
                                        <span className={`px-1.5 py-0.5 rounded text-[9px] font-black uppercase ${getPriorityColor(task.priority)}`}>
                                            {getPriorityLabel(task.priority)}
                                        </span>
                                        {task.assignedToName && (
                                            <span className="text-[10px] text-slate-500 font-bold flex items-center gap-1" title="Ответственный">
                                                <User className="w-3 h-3"/> {task.assignedToName}
                                            </span>
                                        )}
                                        {task.createdByName && (
                                            <span className="text-[10px] text-slate-500 font-bold flex items-center gap-1" title="Постановщик">
                                                {task.createdByName}
                                            </span>
                                        )}
                                        {task.estimatedHours && (
                                            <span className="text-[10px] text-slate-500 font-bold flex items-center gap-1">
                                                <Clock className="w-3 h-3"/> {task.estimatedHours}ч
                                            </span>
                                        )}
                                        {(task.comments?.length ?? 0) > 0 && (
                                            <span className="text-[10px] text-slate-500 font-bold flex items-center gap-1" title="Комментарии">
                                                <MessageSquare className="w-3 h-3"/> {task.comments!.length} коммент.
                                            </span>
                                        )}
                                        {task.requirePhotoReport !== false && (
                                            <span className="text-[10px] font-bold flex items-center gap-1" title={task.photoReportId ? 'Фото отчёт приложен' : 'Требуется фото отчёт'}>
                                                {task.photoReportId ? (
                                                    <ImageIcon className="w-3 h-3 text-emerald-600"/> 
                                                ) : (
                                                    <Camera className="w-3 h-3 text-amber-500"/>
                                                )}
                                                {task.photoReportId ? 'Фото приложен' : 'Нужен фото'}
                                            </span>
                                        )}
                                    </div>
                                 </div>
                             </div>
                         ))}
                         {tasks.length === 0 && (
                             <p className="text-center py-6 text-slate-400 italic text-sm">Нет задач</p>
                         )}
                         <button 
                             onClick={handleNewTask}
                             className="w-full py-3 text-[10px] font-black uppercase tracking-widest text-primary-600 border-2 border-dashed border-primary-100 rounded-2xl hover:bg-primary-50 transition-colors mt-2"
                         >
                             + Новая задача
                         </button>
                     </div>
                 </div>

                 <div className="bg-white p-6 rounded-[2rem] border border-slate-200 shadow-sm">
                     <h3 className="font-black text-slate-800 text-[10px] uppercase tracking-[0.2em] mb-6 flex items-center gap-2">
                        <Calendar className="w-4 h-4 text-primary-500"/> Статус работ за {currentMonthNameLower}
                     </h3>
                     <div className="space-y-6">
                         {plansForCurrentMonth.map(plan => (
                             <div key={plan.id}>
                                 <div className="flex justify-between items-end mb-2">
                                     <span className="font-bold text-slate-700 text-xs">{plan.workName}</span>
                                     <span className="text-[10px] font-black text-primary-600 bg-primary-50 px-1.5 rounded">{plan.progress}%</span>
                                 </div>
                                 <div className="w-full bg-slate-100 rounded-full h-1.5 overflow-hidden">
                                     <div className={`h-full transition-all duration-1000 ${plan.progress === 100 ? 'bg-emerald-500' : 'bg-primary-500'}`} style={{ width: `${Math.min(100, Math.max(0, plan.progress ?? 0))}%` }}></div>
                                 </div>
                             </div>
                         ))}
                         {plansForCurrentMonth.length === 0 && <p className="text-center py-10 text-slate-400 italic text-sm">Работ на {currentMonthNameLower} не запланировано</p>}
                     </div>
                 </div>

                 {/* Журнал отключений по дому */}
                 <div className="bg-white p-6 rounded-[2rem] border border-slate-200 shadow-sm">
                     <OutagesJournal buildingId={building.id} compact />
                 </div>
             </div>

            {isTaskModalOpen && (
                <TaskModal
                    isOpen={isTaskModalOpen}
                    onClose={() => {
                        setIsTaskModalOpen(false);
                        setSelectedTask(null);
                    }}
                    onSave={handleSaveTask}
                    task={selectedTask}
                    buildingId={building.id}
                    employees={employees}
                />
            )}
        </div>
    );
};