import React, { useState, useEffect } from 'react';
import { Candidate, Vacancy } from '../../types';
import { User, Search, Filter, Phone, Mail, Briefcase, Calendar, Plus, Edit, Trash2, X, AlertCircle, FileText, CheckCircle, Clock, UserCheck, History } from 'lucide-react';
import { CandidateFormModal } from './CandidateFormModal';
import { CandidateEventsTimeline } from './CandidateEventsTimeline';
import { authFetch } from '../../services/apiClient';

export const CandidatesRegistry: React.FC = () => {
    const [candidates, setCandidates] = useState<Candidate[]>([]);
    const [vacancies, setVacancies] = useState<Vacancy[]>([]);
    const [loading, setLoading] = useState(true);
    const [searchQuery, setSearchQuery] = useState('');
    const [stageFilter, setStageFilter] = useState<string[]>([]);
    const [vacancyFilter, setVacancyFilter] = useState<string | null>(null);
    const [isFormModalOpen, setIsFormModalOpen] = useState(false);
    const [editingCandidate, setEditingCandidate] = useState<Candidate | null>(null);
    const [selectedVacancyId, setSelectedVacancyId] = useState<string | null>(null);
    const [selectedCandidateForEvents, setSelectedCandidateForEvents] = useState<Candidate | null>(null);
    const [error, setError] = useState<string | null>(null);

    useEffect(() => {
        fetchCandidates();
        fetchVacancies();
    }, []);

    const fetchCandidates = async () => {
        try {
            setLoading(true);
            setError(null);
            const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
            const apiUrl = (import.meta.env.DEV || !apiBaseUrl) 
                ? '/api/candidates?includeEvents=true' 
                : `${apiBaseUrl}/candidates?includeEvents=true`;
            const response = await authFetch(apiUrl);
            if (response.ok) {
                const data = await response.json();
                setCandidates(data);
            } else {
                const errorData = await response.json().catch(() => ({ error: 'Unknown error' }));
                const errorMessage = errorData.message || errorData.error || `HTTP ${response.status}: ${response.statusText}`;
                setError(errorMessage);
                console.error('Error fetching candidates:', errorMessage, errorData);
            }
        } catch (error) {
            const errorMessage = error instanceof Error ? error.message : 'Failed to fetch candidates';
            setError(errorMessage);
            console.error('Error fetching candidates:', error);
        } finally {
            setLoading(false);
        }
    };

    const fetchVacancies = async () => {
        try {
            const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
            const apiUrl = (import.meta.env.DEV || !apiBaseUrl) 
                ? '/api/vacancies' 
                : `${apiBaseUrl}/vacancies`;
            const response = await authFetch(apiUrl);
            if (response.ok) {
                const data = await response.json();
                setVacancies(data);
            }
        } catch (error) {
            console.error('Error fetching vacancies:', error);
        }
    };

    const handleCreateCandidate = (vacancyId?: string | null) => {
        setEditingCandidate(null);
        setSelectedVacancyId(vacancyId || null);
        setIsFormModalOpen(true);
    };

    const handleEditCandidate = (candidate: Candidate) => {
        setEditingCandidate(candidate);
        setSelectedVacancyId(null);
        setIsFormModalOpen(true);
    };

    const handleDeleteCandidate = async (candidate: Candidate) => {
        if (!confirm(`Удалить кандидата "${candidate.name}"?`)) return;

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

    const handleSaveCandidate = async (candidate: Candidate) => {
        await fetchCandidates();
        setIsFormModalOpen(false);
        setEditingCandidate(null);
        setSelectedVacancyId(null);
    };

    const toggleStageFilter = (stage: string) => {
        setStageFilter(prev => 
            prev.includes(stage) 
                ? prev.filter(s => s !== stage)
                : [...prev, stage]
        );
    };

    const filteredCandidates = candidates.filter(c => {
        const query = searchQuery.toLowerCase();
        const matchesSearch = c.name.toLowerCase().includes(query) || 
                             c.position.toLowerCase().includes(query) ||
                             (c.phone && c.phone.toLowerCase().includes(query)) ||
                             (c.email && c.email.toLowerCase().includes(query));
        
        const matchesStage = stageFilter.length === 0 || stageFilter.includes(c.stage);
        const matchesVacancy = !vacancyFilter || c.vacancyId === vacancyFilter;
        
        return matchesSearch && matchesStage && matchesVacancy;
    });

    const getStageLabel = (stage: string) => {
        switch (stage) {
            case 'new': return 'Новый';
            case 'interview': return 'Собеседование';
            case 'probation': return 'Испытательный срок';
            case 'hired': return 'Трудоустроен';
            case 'rejected': return 'Отклонен';
            default: return stage;
        }
    };

    const getStageColor = (stage: string) => {
        switch (stage) {
            case 'new': return 'bg-blue-50 text-blue-600';
            case 'interview': return 'bg-amber-50 text-amber-600';
            case 'probation': return 'bg-purple-50 text-purple-600';
            case 'hired': return 'bg-emerald-50 text-emerald-600';
            case 'rejected': return 'bg-red-50 text-red-600';
            default: return 'bg-slate-50 text-slate-600';
        }
    };

    const getStageIcon = (stage: string) => {
        switch (stage) {
            case 'new': return <Clock className="w-4 h-4" />;
            case 'interview': return <Calendar className="w-4 h-4" />;
            case 'probation': return <UserCheck className="w-4 h-4" />;
            case 'hired': return <CheckCircle className="w-4 h-4" />;
            case 'rejected': return <X className="w-4 h-4" />;
            default: return <User className="w-4 h-4" />;
        }
    };

    const getVacancyName = (vacancyId?: string) => {
        if (!vacancyId) return 'Без вакансии';
        const vacancy = vacancies.find(v => v.id === vacancyId);
        return vacancy ? vacancy.position : 'Неизвестная вакансия';
    };

    const stats = {
        total: candidates.length,
        new: candidates.filter(c => c.stage === 'new').length,
        interview: candidates.filter(c => c.stage === 'interview').length,
        probation: candidates.filter(c => c.stage === 'probation').length,
        hired: candidates.filter(c => c.stage === 'hired').length,
        rejected: candidates.filter(c => c.stage === 'rejected').length,
    };

    return (
        <div className="space-y-6 animate-fade-in">
            {/* Toolbar */}
            <div className="flex gap-4">
                <div className="relative flex-1">
                    <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                    <input 
                        type="text" 
                        placeholder="Поиск кандидатов по имени, позиции, телефону..." 
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                        className="w-full pl-11 pr-4 py-3 bg-white border border-slate-200 rounded-2xl text-sm outline-none focus:ring-2 focus:ring-primary-500 shadow-sm"
                    />
                </div>
                <button className="p-3 bg-white border border-slate-200 rounded-2xl text-slate-500 hover:bg-slate-50 transition-all shadow-sm">
                    <Filter className="w-5 h-5"/>
                </button>
            </div>

            {/* Stats Header */}
            <div className="bg-slate-900 rounded-[2.5rem] p-8 text-white shadow-xl relative overflow-hidden">
                <User className="absolute -bottom-4 -right-4 w-48 h-48 opacity-10 rotate-12" />
                <div className="relative z-10">
                    <div className="flex items-center gap-2 text-primary-400 mb-2">
                        <Briefcase className="w-5 h-5"/>
                        <span className="text-[10px] font-black uppercase tracking-widest">Кандидаты</span>
                    </div>
                    <h3 className="text-3xl font-black mb-2">База кандидатов</h3>
                    <p className="text-xs text-slate-400 font-medium mb-8 max-w-md">
                        Всего {stats.total} кандидатов в базе. Активных на собеседовании: {stats.interview + stats.probation}.
                    </p>
                    
                    <div className="flex gap-4 flex-wrap">
                        <div className="bg-white/10 px-4 py-2 rounded-xl border border-white/10">
                            <p className="text-[10px] text-slate-400 font-bold uppercase mb-0.5">Новые</p>
                            <p className="text-xl font-black text-white">{stats.new}</p>
                        </div>
                        <div className="bg-white/10 px-4 py-2 rounded-xl border border-white/10">
                            <p className="text-[10px] text-slate-400 font-bold uppercase mb-0.5">Собеседование</p>
                            <p className="text-xl font-black text-white">{stats.interview}</p>
                        </div>
                        <div className="bg-white/10 px-4 py-2 rounded-xl border border-white/10">
                            <p className="text-[10px] text-slate-400 font-bold uppercase mb-0.5">Испытательный срок</p>
                            <p className="text-xl font-black text-white">{stats.probation}</p>
                        </div>
                        <div className="bg-white/10 px-4 py-2 rounded-xl border border-white/10">
                            <p className="text-[10px] text-slate-400 font-bold uppercase mb-0.5">Трудоустроены</p>
                            <p className="text-xl font-black text-white">{stats.hired}</p>
                        </div>
                    </div>
                </div>
            </div>

            {/* Filters */}
            <div className="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {/* Фильтр по статусу */}
                    <div>
                        <label className="text-[10px] font-black text-slate-500 uppercase tracking-wider mb-2 block">
                            Статус
                        </label>
                        <div className="flex flex-wrap gap-2">
                            {['new', 'interview', 'probation', 'hired', 'rejected'].map(stage => (
                                <button
                                    key={stage}
                                    onClick={() => toggleStageFilter(stage)}
                                    className={`px-3 py-1.5 rounded-xl text-[10px] font-black uppercase transition-all ${
                                        stageFilter.includes(stage)
                                            ? getStageColor(stage)
                                            : 'bg-slate-50 text-slate-400 hover:bg-slate-100'
                                    }`}
                                >
                                    {getStageLabel(stage)}
                                </button>
                            ))}
                        </div>
                    </div>
                    {/* Фильтр по вакансии */}
                    <div>
                        <label className="text-[10px] font-black text-slate-500 uppercase tracking-wider mb-2 block">
                            Вакансия
                        </label>
                        <select
                            value={vacancyFilter || ''}
                            onChange={(e) => setVacancyFilter(e.target.value || null)}
                            className="w-full p-3 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-primary-500 outline-none"
                        >
                            <option value="">Все вакансии</option>
                            <option value="null">Без вакансии</option>
                            {vacancies.map(vacancy => (
                                <option key={vacancy.id} value={vacancy.id}>
                                    {vacancy.position} ({vacancy.department})
                                </option>
                            ))}
                        </select>
                    </div>
                </div>
            </div>

            {/* Кнопка создания кандидата */}
            <button
                onClick={() => handleCreateCandidate()}
                className="w-full py-4 bg-primary-600 text-white rounded-2xl text-sm font-black uppercase flex items-center justify-center gap-2 shadow-lg shadow-primary-500/20 hover:bg-primary-700 active:scale-95 transition-all"
            >
                <Plus className="w-5 h-5"/> Создать нового кандидата
            </button>

            {/* Error Message */}
            {error && (
                <div className="bg-red-50 border border-red-200 rounded-2xl p-4 flex items-start gap-3">
                    <AlertCircle className="w-5 h-5 text-red-500 shrink-0 mt-0.5" />
                    <div className="flex-1">
                        <h4 className="font-bold text-red-800 mb-1">Ошибка загрузки кандидатов</h4>
                        <p className="text-sm text-red-700">{error}</p>
                        <button
                            onClick={fetchCandidates}
                            className="mt-3 text-sm font-medium text-red-600 hover:text-red-800 underline"
                        >
                            Попробовать снова
                        </button>
                    </div>
                </div>
            )}

            {/* List of Candidates */}
            {loading ? (
                <div className="text-center py-10 text-slate-400">Загрузка...</div>
            ) : error ? null : filteredCandidates.length === 0 ? (
                <div className="text-center py-10 text-slate-400">
                    {searchQuery || stageFilter.length > 0 || vacancyFilter ? 'Кандидаты не найдены' : 'Нет кандидатов. Создайте первого кандидата.'}
                </div>
            ) : (
                <div className="grid grid-cols-1 gap-4">
                    {filteredCandidates.map(candidate => (
                        <div key={candidate.id} className="bg-white p-6 rounded-[2.5rem] border border-slate-200 shadow-sm hover:shadow-lg hover:border-primary-300 transition-all group relative overflow-hidden">
                            {/* Status Vertical Line */}
                            <div className={`absolute left-0 top-1/4 bottom-1/4 w-1.5 rounded-r-full ${
                                candidate.stage === 'new' ? 'bg-blue-500' :
                                candidate.stage === 'interview' ? 'bg-amber-500' :
                                candidate.stage === 'probation' ? 'bg-purple-500' :
                                candidate.stage === 'hired' ? 'bg-emerald-500' :
                                'bg-red-500'
                            }`}/>

                            <div className="flex flex-col md:flex-row justify-between gap-6">
                                <div className="flex-1 min-w-0">
                                    <div className="flex items-center gap-2 mb-2 flex-wrap">
                                        <span className={`text-[9px] font-black px-2 py-0.5 rounded-full uppercase tracking-tighter flex items-center gap-1 ${getStageColor(candidate.stage)}`}>
                                            {getStageIcon(candidate.stage)}
                                            {getStageLabel(candidate.stage)}
                                        </span>
                                        {candidate.vacancyId && (
                                            <span className="text-[9px] font-black text-slate-400 uppercase tracking-widest px-2 py-0.5 bg-slate-50 rounded-full border border-slate-100">
                                                {getVacancyName(candidate.vacancyId)}
                                            </span>
                                        )}
                                        {!candidate.vacancyId && (
                                            <span className="text-[9px] font-black text-slate-300 uppercase tracking-widest px-2 py-0.5 bg-slate-50 rounded-full border border-slate-100">
                                                Без вакансии
                                            </span>
                                        )}
                                    </div>
                                    <h4 className="text-xl font-black text-slate-800 leading-tight group-hover:text-primary-600 transition-colors mb-2">{candidate.name}</h4>
                                    <p className="text-xs text-slate-500 font-medium leading-relaxed mb-3">{candidate.position}</p>
                                    <div className="flex flex-wrap gap-4 text-xs text-slate-600">
                                        {candidate.phone && (
                                            <div className="flex items-center gap-1.5">
                                                <Phone className="w-3.5 h-3.5 text-slate-400"/>
                                                <span>{candidate.phone}</span>
                                            </div>
                                        )}
                                        {candidate.email && (
                                            <div className="flex items-center gap-1.5">
                                                <Mail className="w-3.5 h-3.5 text-slate-400"/>
                                                <span>{candidate.email}</span>
                                            </div>
                                        )}
                                        {candidate.interviewDate && (
                                            <div className="flex items-center gap-1.5">
                                                <Calendar className="w-3.5 h-3.5 text-slate-400"/>
                                                <span>Собеседование: {new Date(candidate.interviewDate).toLocaleDateString('ru-RU')}</span>
                                            </div>
                                        )}
                                        {candidate.hiredDate && (
                                            <div className="flex items-center gap-1.5">
                                                <CheckCircle className="w-3.5 h-3.5 text-emerald-500"/>
                                                <span>Трудоустроен: {new Date(candidate.hiredDate).toLocaleDateString('ru-RU')}</span>
                                            </div>
                                        )}
                                    </div>
                                    {candidate.interviewNotes && (
                                        <div className="mt-3 p-3 bg-slate-50 rounded-xl border border-slate-100">
                                            <p className="text-[10px] font-black text-slate-400 uppercase mb-1">Заметки с собеседования</p>
                                            <p className="text-xs text-slate-600">{candidate.interviewNotes}</p>
                                        </div>
                                    )}
                                    {candidate.events && candidate.events.length > 0 && (
                                        <div className="mt-3 p-3 bg-primary-50 rounded-xl border border-primary-100">
                                            <p className="text-[10px] font-black text-primary-600 uppercase mb-1 flex items-center gap-1">
                                                <History className="w-3 h-3"/> Последнее событие
                                            </p>
                                            <p className="text-xs text-primary-700 font-medium">
                                                {(() => {
                                                    const lastEvent = candidate.events[0];
                                                    const eventDate = new Date(lastEvent.eventDate);
                                                    const eventLabels: Record<string, string> = {
                                                        call: 'Созвон',
                                                        interview_1: 'Первое собеседование',
                                                        interview_2: 'Второе собеседование',
                                                        interview_3: 'Третье собеседование',
                                                        test_task: 'Тестовое задание',
                                                        offer: 'Оффер',
                                                        offer_accepted: 'Оффер принят',
                                                        offer_rejected: 'Оффер отклонен',
                                                        probation_start: 'Начало испытательного срока',
                                                        hired: 'Трудоустроен',
                                                        rejected: 'Отклонен',
                                                        other: 'Другое'
                                                    };
                                                    return `${eventLabels[lastEvent.eventType] || lastEvent.eventType} - ${eventDate.toLocaleDateString('ru-RU')}`;
                                                })()}
                                            </p>
                                        </div>
                                    )}
                                </div>

                                <div className="text-right flex flex-col justify-between items-end min-w-[150px]">
                                    <div className="flex gap-2">
                                        <button 
                                            onClick={() => setSelectedCandidateForEvents(candidate)}
                                            className="p-2 text-slate-300 hover:text-purple-600 transition-colors"
                                            title="История событий"
                                        >
                                            <History className="w-5 h-5"/>
                                        </button>
                                        <button 
                                            onClick={() => handleEditCandidate(candidate)}
                                            className="p-2 text-slate-300 hover:text-primary-600 transition-colors"
                                            title="Редактировать"
                                        >
                                            <Edit className="w-5 h-5"/>
                                        </button>
                                        <button 
                                            onClick={() => handleDeleteCandidate(candidate)}
                                            className="p-2 text-slate-300 hover:text-red-600 transition-colors"
                                            title="Удалить"
                                        >
                                            <Trash2 className="w-5 h-5"/>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            )}

            {/* Модальное окно создания/редактирования кандидата */}
            {isFormModalOpen && (
                <CandidateFormModal
                    candidate={editingCandidate}
                    vacancyId={selectedVacancyId}
                    vacancies={vacancies}
                    onClose={() => {
                        setIsFormModalOpen(false);
                        setEditingCandidate(null);
                        setSelectedVacancyId(null);
                    }}
                    onSave={handleSaveCandidate}
                />
            )}

            {/* Модальное окно истории событий кандидата */}
            {selectedCandidateForEvents && (
                <div 
                    className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-fade-in" 
                    onClick={() => setSelectedCandidateForEvents(null)}
                >
                    <div 
                        className="bg-white rounded-2xl w-full max-w-4xl 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">
                                <div>
                                    <h3 className="text-2xl font-bold text-slate-800">История событий</h3>
                                    <p className="text-sm text-slate-500 mt-1">{selectedCandidateForEvents.name}</p>
                                </div>
                                <button 
                                    onClick={() => setSelectedCandidateForEvents(null)} 
                                    className="p-2 hover:bg-slate-100 rounded-full transition-colors"
                                >
                                    <X className="w-5 h-5 text-slate-500"/>
                                </button>
                            </div>
                        </div>
                        <div className="p-6">
                            <CandidateEventsTimeline
                                candidate={selectedCandidateForEvents}
                                onEventAdded={() => {
                                    fetchCandidates();
                                }}
                                onEventUpdated={() => {
                                    fetchCandidates();
                                }}
                                onCandidateUpdated={(updatedCandidate) => {
                                    // Обновляем кандидата в списке
                                    setCandidates(prev => 
                                        prev.map(c => c.id === updatedCandidate.id ? updatedCandidate : c)
                                    );
                                    // Обновляем выбранного кандидата
                                    setSelectedCandidateForEvents(updatedCandidate);
                                    fetchCandidates();
                                }}
                            />
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};