import React from 'react';
import { DomaApplication } from '../../types';
// Added CheckCircle2 to the imports from lucide-react
import { AlertTriangle, MapPin, Phone, User, Clock, ChevronRight, Siren, ShieldAlert, CheckCircle2 } from 'lucide-react';

interface Props {
    applications: DomaApplication[];
}

export const DispatcherControl: React.FC<Props> = ({ applications }) => {
    const overdue = applications.filter(a => a.status !== 'done' && a.status !== 'canceled' && new Date(a.deadlineAt) < new Date());

    return (
        <div className="space-y-6 animate-fade-in">
            {/* Urgent Alert Bar */}
            <div className="bg-red-600 rounded-[2rem] p-6 text-white shadow-xl shadow-red-500/20 flex items-center justify-between">
                <div className="flex items-center gap-4">
                    <div className="p-3 bg-white/20 rounded-2xl animate-pulse">
                        <Siren className="w-8 h-8 text-white"/>
                    </div>
                    <div>
                        <h3 className="text-xl font-black leading-none">Внимание: Просрочка</h3>
                        <p className="text-red-100 text-xs mt-1 font-medium opacity-80">Требуется немедленное вмешательство в {overdue.length} заявках</p>
                    </div>
                </div>
                <button className="bg-white text-red-600 px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest shadow-lg active:scale-95 transition-all">
                    Связаться со всеми
                </button>
            </div>

            {/* Overdue List */}
            <div className="space-y-4">
                <h4 className="font-black text-slate-500 text-[10px] uppercase tracking-[0.2em] px-1">Журнал инцидентов</h4>
                {overdue.map(app => (
                    <div key={app.id} className="bg-white p-5 rounded-[2rem] border-2 border-red-100 shadow-sm flex flex-col md:flex-row justify-between gap-6 hover:border-red-300 transition-all">
                        <div className="flex items-start gap-4">
                            <div className="p-4 bg-red-50 text-red-600 rounded-2xl">
                                <ShieldAlert className="w-7 h-7"/>
                            </div>
                            <div>
                                <div className="flex items-center gap-2 mb-1">
                                    <span className="text-[10px] font-black text-red-600 bg-red-100 px-2 py-0.5 rounded uppercase">SLA Breach</span>
                                    <span className="text-[10px] font-bold text-slate-400">№ {app.number}</span>
                                </div>
                                <h4 className="font-black text-slate-800 text-base">{app.address}, кв. {app.apartment}</h4>
                                <p className="text-xs text-slate-500 mt-1 font-medium italic">«{app.description}»</p>
                            </div>
                        </div>

                        <div className="flex items-center justify-between md:justify-end gap-6 border-t md:border-t-0 border-slate-50 pt-4 md:pt-0">
                            <div className="text-right">
                                <p className="text-red-600 font-black text-sm">Просрочено на 4ч.</p>
                                <p className="text-[9px] text-slate-400 font-bold uppercase mt-1">Дедлайн: {new Date(app.deadlineAt).toLocaleTimeString()}</p>
                            </div>
                            <div className="flex gap-2">
                                <button className="p-3 bg-slate-900 text-white rounded-xl hover:bg-slate-800 transition-colors shadow-lg">
                                    <Phone className="w-4 h-4"/>
                                </button>
                                <button className="p-3 bg-slate-50 text-slate-400 rounded-xl hover:text-primary-600 transition-colors">
                                    <ChevronRight className="w-4 h-4"/>
                                </button>
                            </div>
                        </div>
                    </div>
                ))}
                {overdue.length === 0 && (
                    <div className="py-20 text-center text-slate-400">
                        {/* FIX: CheckCircle2 is now imported correctly from lucide-react */}
                        <CheckCircle2 className="w-12 h-12 mx-auto mb-3 opacity-20 text-emerald-500"/>
                        <p className="font-bold uppercase tracking-widest text-xs">Все заявки в рамках нормативов</p>
                    </div>
                )}
            </div>
        </div>
    );
};