import React, { useState, useEffect } from 'react';
import { CandidateEvent, Candidate } from '../../types';
import { Phone, Calendar, FileText, CheckCircle, X, Clock, User, MapPin, Plus, Edit, Trash2, AlertCircle, Building2 } from 'lucide-react';
import { BookMeetingRoomModal } from '../office/BookMeetingRoomModal';
import { authFetch } from '../../services/apiClient';

interface CandidateEventsTimelineProps {
    candidate: Candidate;
    onEventAdded?: () => void;
    onEventUpdated?: () => void;
    onCandidateUpdated?: (updatedCandidate: Candidate) => void;
}

interface EventFormData {
    eventType: CandidateEvent['eventType'];
    eventDate: string;
    eventTime: string;
    notes?: string;
    result?: CandidateEvent['result'];
    interviewer?: string;
    location?: string;
    durationMinutes?: number;
}

export const CandidateEventsTimeline: React.FC<CandidateEventsTimelineProps> = ({ 
    candidate, 
    onEventAdded,
    onEventUpdated,
    onCandidateUpdated
}) => {
    const [events, setEvents] = useState<CandidateEvent[]>(candidate.events || []);
    const [isFormOpen, setIsFormOpen] = useState(false);
    const [editingEvent, setEditingEvent] = useState<CandidateEvent | null>(null);
    const [loading, setLoading] = useState(false);
    const [showBookRoomModal, setShowBookRoomModal] = useState(false);

    useEffect(() => {
        fetchEvents();
    }, [candidate.id]);

    const fetchEvents = async () => {
        try {
            setLoading(true);
            const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
            const apiUrl = (import.meta.env.DEV || !apiBaseUrl) 
                ? `/api/candidates/${candidate.id}/events` 
                : `${apiBaseUrl}/candidates/${candidate.id}/events`;
            const response = await authFetch(apiUrl);
            if (response.ok) {
                const data = await response.json();
                // Убеждаемся, что данные правильно маппятся
                const mappedEvents = data.map((event: any) => ({
                    ...event,
                    eventType: event.eventType || event.event_type,
                    eventDate: event.eventDate || event.event_date,
                    candidateId: event.candidateId || event.candidate_id,
                    durationMinutes: event.durationMinutes || event.duration_minutes,
                    createdAt: event.createdAt || event.created_at,
                    updatedAt: event.updatedAt || event.updated_at
                }));
                setEvents(mappedEvents);
            }
            
            // Также обновляем данные кандидата, так как статус мог измениться
            const candidateUrl = (import.meta.env.DEV || !apiBaseUrl) 
                ? `/api/candidates/${candidate.id}` 
                : `${apiBaseUrl}/candidates/${candidate.id}`;
            const candidateResponse = await authFetch(candidateUrl);
            if (candidateResponse.ok) {
                const updatedCandidate = await candidateResponse.json();
                onCandidateUpdated?.(updatedCandidate);
            }
        } catch (error) {
            console.error('Error fetching events:', error);
        } finally {
            setLoading(false);
        }
    };

    const handleAddEvent = () => {
        setEditingEvent(null);
        setIsFormOpen(true);
    };

    const handleEditEvent = (event: CandidateEvent) => {
        setEditingEvent(event);
        setIsFormOpen(true);
    };

    const handleDeleteEvent = async (event: CandidateEvent) => {
        if (!confirm(`Удалить событие "${getEventTypeLabel(event.eventType)}"?`)) return;

        try {
            const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
            const apiUrl = (import.meta.env.DEV || !apiBaseUrl) 
                ? `/api/candidates/${candidate.id}/events/${event.id}` 
                : `${apiBaseUrl}/candidates/${candidate.id}/events/${event.id}`;
            const response = await authFetch(apiUrl, { method: 'DELETE' });
            if (response.ok) {
                await fetchEvents();
                onEventUpdated?.();
            } else {
                alert('Ошибка при удалении события');
            }
        } catch (error) {
            console.error('Error deleting event:', error);
            alert('Ошибка при удалении события');
        }
    };

    const getEventTypeLabel = (type: CandidateEvent['eventType'] | string | undefined) => {
        if (!type) return 'Неизвестное событие';
        const labels: Record<string, string> = {
            call: 'Созвон',
            interview_1: 'Первое собеседование',
            interview_2: 'Второе собеседование',
            interview_3: 'Третье собеседование',
            test_task: 'Тестовое задание',
            offer: 'Оффер',
            offer_accepted: 'Оффер принят',
            offer_rejected: 'Оффер отклонен',
            probation_start: 'Начало испытательного срока',
            hired: 'Трудоустроен',
            rejected: 'Отклонен',
            other: 'Другое'
        };
        return labels[type] || `Событие: ${type}`;
    };

    const getEventTypeIcon = (type: CandidateEvent['eventType'] | string | undefined) => {
        if (!type) return <Clock className="w-4 h-4" />;
        switch (type) {
            case 'call': return <Phone className="w-4 h-4" />;
            case 'interview_1':
            case 'interview_2':
            case 'interview_3': return <Calendar className="w-4 h-4" />;
            case 'test_task': return <FileText className="w-4 h-4" />;
            case 'offer':
            case 'offer_accepted': return <CheckCircle className="w-4 h-4" />;
            case 'offer_rejected':
            case 'rejected': return <X className="w-4 h-4" />;
            case 'probation_start':
            case 'hired': return <User className="w-4 h-4" />;
            default: return <Clock className="w-4 h-4" />;
        }
    };

    const getEventTypeColor = (type: CandidateEvent['eventType'] | string | undefined) => {
        if (!type) return 'bg-slate-50 text-slate-600 border-slate-200';
        switch (type) {
            case 'call': return 'bg-blue-50 text-blue-600 border-blue-200';
            case 'interview_1':
            case 'interview_2':
            case 'interview_3': return 'bg-amber-50 text-amber-600 border-amber-200';
            case 'test_task': return 'bg-purple-50 text-purple-600 border-purple-200';
            case 'offer':
            case 'offer_accepted': return 'bg-emerald-50 text-emerald-600 border-emerald-200';
            case 'offer_rejected':
            case 'rejected': return 'bg-red-50 text-red-600 border-red-200';
            case 'probation_start':
            case 'hired': return 'bg-green-50 text-green-600 border-green-200';
            default: return 'bg-slate-50 text-slate-600 border-slate-200';
        }
    };

    const getResultColor = (result?: CandidateEvent['result']) => {
        switch (result) {
            case 'success': return 'bg-emerald-50 text-emerald-600';
            case 'failed': return 'bg-red-50 text-red-600';
            case 'cancelled': return 'bg-slate-50 text-slate-600';
            default: return 'bg-amber-50 text-amber-600';
        }
    };

    const getResultLabel = (result?: CandidateEvent['result']) => {
        switch (result) {
            case 'success': return 'Успешно';
            case 'failed': return 'Неудачно';
            case 'cancelled': return 'Отменено';
            default: return 'Ожидается';
        }
    };

    const sortedEvents = [...events].sort((a, b) => 
        new Date(b.eventDate).getTime() - new Date(a.eventDate).getTime()
    );

    return (
        <div className="space-y-4">
            <div className="flex items-center justify-between flex-wrap gap-2">
                <h4 className="text-sm font-black text-slate-400 uppercase tracking-wider flex items-center gap-2">
                    <Clock className="w-4 h-4"/> История событий
                </h4>
                <div className="flex items-center gap-2">
                    {candidate.stage === 'interview' && (
                        <button
                            type="button"
                            onClick={(e) => {
                                e.preventDefault();
                                e.stopPropagation();
                                setTimeout(() => setShowBookRoomModal(true), 0);
                            }}
                            className="px-3 py-1.5 bg-amber-500 text-white rounded-xl text-[10px] font-black uppercase flex items-center gap-1.5 hover:bg-amber-600 transition-all"
                            title="Забронировать переговорную для собеседования"
                        >
                            <Building2 className="w-3.5 h-3.5"/> Забронировать переговорную
                        </button>
                    )}
                    <button
                        onClick={handleAddEvent}
                        className="px-3 py-1.5 bg-primary-600 text-white rounded-xl text-[10px] font-black uppercase flex items-center gap-1.5 hover:bg-primary-700 transition-all"
                    >
                        <Plus className="w-3.5 h-3.5"/> Добавить событие
                    </button>
                </div>
            </div>

            {showBookRoomModal && (
                <BookMeetingRoomModal
                    purpose={`Собеседование: ${candidate.name}`}
                    onBooked={() => setShowBookRoomModal(false)}
                    onClose={() => setShowBookRoomModal(false)}
                />
            )}

            {loading ? (
                <div className="text-center py-8 text-slate-400 text-sm">Загрузка событий...</div>
            ) : sortedEvents.length === 0 ? (
                <div className="text-center py-8 text-slate-400 text-sm bg-slate-50 rounded-xl border border-slate-100">
                    Нет событий. Добавьте первое событие для кандидата.
                </div>
            ) : (
                <div className="space-y-3">
                    {sortedEvents.map((event, index) => {
                        let eventDate: Date | null = null;
                        let isPast = false;
                        let dateString = 'Дата не указана';
                        
                        // Отладочная информация
                        if (!event.eventType) {
                            console.warn('Событие без типа:', event);
                        }
                        
                        try {
                            if (event.eventDate) {
                                eventDate = new Date(event.eventDate);
                                if (!isNaN(eventDate.getTime())) {
                                    isPast = eventDate < new Date();
                                    // Форматируем дату и время отдельно для лучшей читаемости
                                    const datePart = eventDate.toLocaleDateString('ru-RU', { 
                                        day: 'numeric', 
                                        month: 'long', 
                                        year: 'numeric'
                                    });
                                    const timePart = eventDate.toLocaleTimeString('ru-RU', { 
                                        hour: '2-digit',
                                        minute: '2-digit'
                                    });
                                    dateString = `${datePart} в ${timePart}`;
                                } else {
                                    console.warn('Невалидная дата события:', event.eventDate);
                                }
                            }
                        } catch (e) {
                            console.error('Ошибка парсинга даты:', event.eventDate, e);
                        }
                        
                        return (
                            <div 
                                key={event.id} 
                                className={`bg-white p-4 rounded-xl border-2 ${getEventTypeColor(event.eventType)} relative`}
                            >
                                <div className="flex items-start justify-between gap-4">
                                    <div className="flex-1 min-w-0">
                                        <div className="flex items-center gap-2 mb-3 flex-wrap">
                                            <div className={`p-2 rounded-lg ${getEventTypeColor(event.eventType)} shrink-0`}>
                                                {getEventTypeIcon(event.eventType)}
                                            </div>
                                            <div className="flex items-center gap-2 flex-wrap">
                                                <h5 className="font-black text-slate-800 text-base leading-tight min-w-[150px]">
                                                    {getEventTypeLabel(event.eventType || event.event_type || 'other')}
                                                </h5>
                                                {event.result && (
                                                    <span className={`text-[9px] font-black px-2 py-0.5 rounded-full uppercase ${getResultColor(event.result)}`}>
                                                        {getResultLabel(event.result)}
                                                    </span>
                                                )}
                                            </div>
                                        </div>
                                        
                                        <div className="space-y-1.5 text-xs text-slate-600">
                                            <div className="flex items-center gap-2 flex-wrap">
                                                <Calendar className="w-3.5 h-3.5 text-slate-400 shrink-0"/>
                                                <span className="font-medium">{dateString}</span>
                                                {!isPast && eventDate && !isNaN(eventDate.getTime()) && (
                                                    <span className="text-amber-600 font-bold text-[10px]">(Запланировано)</span>
                                                )}
                                            </div>
                                            
                                            {event.interviewer && (
                                                <div className="flex items-center gap-2">
                                                    <User className="w-3.5 h-3.5 text-slate-400"/>
                                                    <span>Проводит: {event.interviewer}</span>
                                                </div>
                                            )}
                                            
                                            {event.location && (
                                                <div className="flex items-center gap-2">
                                                    <MapPin className="w-3.5 h-3.5 text-slate-400"/>
                                                    <span>{event.location}</span>
                                                </div>
                                            )}
                                            
                                            {event.durationMinutes && (
                                                <div className="flex items-center gap-2">
                                                    <Clock className="w-3.5 h-3.5 text-slate-400"/>
                                                    <span>Длительность: {event.durationMinutes} мин.</span>
                                                </div>
                                            )}
                                            
                                            {event.notes && (
                                                <div className="mt-2 p-2 bg-slate-50 rounded-lg border border-slate-100">
                                                    <p className="text-xs text-slate-600 whitespace-pre-wrap">{event.notes}</p>
                                                </div>
                                            )}
                                        </div>
                                    </div>
                                    
                                    <div className="flex gap-1">
                                        <button
                                            onClick={() => handleEditEvent(event)}
                                            className="p-1.5 text-slate-400 hover:text-primary-600 transition-colors"
                                            title="Редактировать"
                                        >
                                            <Edit className="w-4 h-4"/>
                                        </button>
                                        <button
                                            onClick={() => handleDeleteEvent(event)}
                                            className="p-1.5 text-slate-400 hover:text-red-600 transition-colors"
                                            title="Удалить"
                                        >
                                            <Trash2 className="w-4 h-4"/>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        );
                    })}
                </div>
            )}

            {/* Модальное окно создания/редактирования события */}
            {isFormOpen && (
                <CandidateEventFormModal
                    candidate={candidate}
                    event={editingEvent}
                    onClose={() => {
                        setIsFormOpen(false);
                        setEditingEvent(null);
                    }}
                    onSave={async () => {
                        await fetchEvents();
                        setIsFormOpen(false);
                        setEditingEvent(null);
                        onEventAdded?.();
                        onEventUpdated?.();
                    }}
                />
            )}
        </div>
    );
};

// Компонент формы для создания/редактирования события
interface CandidateEventFormModalProps {
    candidate: Candidate;
    event?: CandidateEvent | null;
    onClose: () => void;
    onSave: () => void;
}

const CandidateEventFormModal: React.FC<CandidateEventFormModalProps> = ({ 
    candidate, 
    event, 
    onClose, 
    onSave 
}) => {
    const isEditMode = !!event;
    
    const [formData, setFormData] = useState<EventFormData>({
        eventType: event?.eventType || 'call',
        eventDate: event?.eventDate ? new Date(event.eventDate).toISOString().split('T')[0] : new Date().toISOString().split('T')[0],
        eventTime: event?.eventDate ? new Date(event.eventDate).toTimeString().slice(0, 5) : '10:00',
        notes: event?.notes || '',
        result: event?.result || 'pending',
        interviewer: event?.interviewer || '',
        location: event?.location || '',
        durationMinutes: event?.durationMinutes?.toString() || '',
    });

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        
        if (!formData.eventDate || !formData.eventTime) {
            alert('Заполните дату и время события');
            return;
        }

        try {
            const eventDateTime = new Date(`${formData.eventDate}T${formData.eventTime}`);
            const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
            const apiUrl = (import.meta.env.DEV || !apiBaseUrl) 
                ? `/api/candidates/${candidate.id}/events${isEditMode ? `/${event.id}` : ''}` 
                : `${apiBaseUrl}/candidates/${candidate.id}/events${isEditMode ? `/${event.id}` : ''}`;
            
            const method = isEditMode ? 'PUT' : 'POST';
            const body = {
                eventType: formData.eventType,
                eventDate: eventDateTime.toISOString(),
                notes: formData.notes?.trim() || null,
                result: formData.result,
                interviewer: formData.interviewer?.trim() || null,
                location: formData.location?.trim() || null,
                durationMinutes: formData.durationMinutes ? parseInt(formData.durationMinutes) : null,
            };

            const response = await authFetch(apiUrl, {
                method,
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(body)
            });

            if (!response.ok) {
                let errorMessage = `Ошибка ${response.status}: ${response.statusText}`;
                try {
                    const errorData = await response.json();
                    errorMessage = errorData.error || errorData.details || errorMessage;
                } catch (e) {
                    const text = await response.text().catch(() => '');
                    if (text) errorMessage = text;
                }
                throw new Error(errorMessage);
            }

            const savedEvent = await response.json();
            onSave();
        } catch (error) {
            console.error('Error saving event:', error);
            const errorMessage = error instanceof Error ? error.message : 'Ошибка при сохранении события';
            alert(errorMessage);
        }
    };

    return (
        <div 
            className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-fade-in" 
            onClick={onClose}
        >
            <div 
                className="bg-white rounded-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto shadow-2xl animate-slide-up" 
                onClick={e => e.stopPropagation()}
            >
                <div className="sticky top-0 bg-white border-b border-slate-200 p-6 rounded-t-2xl z-10">
                    <div className="flex justify-between items-center">
                        <h3 className="text-xl font-bold text-slate-800">
                            {isEditMode ? 'Редактирование события' : 'Создание события'}
                        </h3>
                        <button 
                            onClick={onClose} 
                            className="p-2 hover:bg-slate-100 rounded-full transition-colors"
                        >
                            <X className="w-5 h-5 text-slate-500"/>
                        </button>
                    </div>
                </div>

                <form onSubmit={handleSubmit} className="p-6 space-y-4">
                    <div>
                        <label className="block text-[10px] text-slate-400 font-bold uppercase mb-1">
                            Тип события *
                        </label>
                        <select
                            value={formData.eventType}
                            onChange={(e) => setFormData({ ...formData, eventType: e.target.value as CandidateEvent['eventType'] })}
                            className="w-full p-3 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-primary-500 outline-none"
                            required
                        >
                            <option value="call">Созвон</option>
                            <option value="interview_1">Первое собеседование</option>
                            <option value="interview_2">Второе собеседование</option>
                            <option value="interview_3">Третье собеседование</option>
                            <option value="test_task">Тестовое задание</option>
                            <option value="offer">Оффер</option>
                            <option value="offer_accepted">Оффер принят</option>
                            <option value="offer_rejected">Оффер отклонен</option>
                            <option value="probation_start">Начало испытательного срока</option>
                            <option value="hired">Трудоустроен</option>
                            <option value="rejected">Отклонен</option>
                            <option value="other">Другое</option>
                        </select>
                    </div>

                    <div className="grid grid-cols-2 gap-4">
                        <div>
                            <label className="block text-[10px] text-slate-400 font-bold uppercase mb-1">
                                Дата *
                            </label>
                            <input
                                type="date"
                                value={formData.eventDate}
                                onChange={(e) => setFormData({ ...formData, eventDate: e.target.value })}
                                className="w-full p-3 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-primary-500 outline-none"
                                required
                            />
                        </div>
                        <div>
                            <label className="block text-[10px] text-slate-400 font-bold uppercase mb-1">
                                Время *
                            </label>
                            <input
                                type="time"
                                value={formData.eventTime}
                                onChange={(e) => setFormData({ ...formData, eventTime: e.target.value })}
                                className="w-full p-3 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-primary-500 outline-none"
                                required
                            />
                        </div>
                    </div>

                    <div>
                        <label className="block text-[10px] text-slate-400 font-bold uppercase mb-1">
                            Результат
                        </label>
                        <select
                            value={formData.result}
                            onChange={(e) => setFormData({ ...formData, result: e.target.value as CandidateEvent['result'] })}
                            className="w-full p-3 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-primary-500 outline-none"
                        >
                            <option value="pending">Ожидается</option>
                            <option value="success">Успешно</option>
                            <option value="failed">Неудачно</option>
                            <option value="cancelled">Отменено</option>
                        </select>
                    </div>

                    {(formData.eventType.includes('interview') || formData.eventType === 'test_task') && (
                        <>
                            <div>
                                <label className="block text-[10px] text-slate-400 font-bold uppercase mb-1">
                                    Кто проводит
                                </label>
                                <input
                                    type="text"
                                    value={formData.interviewer}
                                    onChange={(e) => setFormData({ ...formData, interviewer: e.target.value })}
                                    placeholder="ФИО интервьюера"
                                    className="w-full p-3 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-primary-500 outline-none"
                                />
                            </div>
                            <div>
                                <label className="block text-[10px] text-slate-400 font-bold uppercase mb-1">
                                    Место проведения
                                </label>
                                <input
                                    type="text"
                                    value={formData.location}
                                    onChange={(e) => setFormData({ ...formData, location: e.target.value })}
                                    placeholder="Офис, онлайн, адрес..."
                                    className="w-full p-3 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-primary-500 outline-none"
                                />
                            </div>
                            <div>
                                <label className="block text-[10px] text-slate-400 font-bold uppercase mb-1">
                                    Длительность (минуты)
                                </label>
                                <input
                                    type="number"
                                    value={formData.durationMinutes}
                                    onChange={(e) => setFormData({ ...formData, durationMinutes: e.target.value })}
                                    placeholder="60"
                                    className="w-full p-3 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-primary-500 outline-none"
                                />
                            </div>
                        </>
                    )}

                    <div>
                        <label className="block text-[10px] text-slate-400 font-bold uppercase mb-1">
                            Заметки
                        </label>
                        <textarea
                            value={formData.notes}
                            onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
                            placeholder="Заметки о событии..."
                            rows={4}
                            className="w-full p-3 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-primary-500 outline-none"
                        />
                    </div>

                    <div className="flex gap-3 pt-4 border-t border-slate-200">
                        <button
                            type="button"
                            onClick={onClose}
                            className="flex-1 py-3 bg-slate-50 text-slate-700 rounded-xl text-xs font-black uppercase hover:bg-slate-100 transition-all"
                        >
                            Отмена
                        </button>
                        <button
                            type="submit"
                            className="flex-1 py-3 bg-primary-600 text-white rounded-xl text-xs font-black uppercase shadow-lg shadow-primary-500/20 hover:bg-primary-700 active:scale-95 transition-all"
                        >
                            {isEditMode ? 'Сохранить' : 'Создать событие'}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
};