import React, { useState, useEffect } from 'react';
import { Candidate, Vacancy } from '../../types';
import { X, User, Phone, Mail, FileText, Briefcase, Calendar, MessageSquare, DollarSign } from 'lucide-react';
import { CandidateEventsTimeline } from './CandidateEventsTimeline';
import { authFetch } from '../../services/apiClient';

interface CandidateFormModalProps {
    candidate?: Candidate | null;
    vacancyId?: string | null;
    vacancies?: Vacancy[];
    onClose: () => void;
    onSave: (candidate: Candidate) => void;
}

export const CandidateFormModal: React.FC<CandidateFormModalProps> = ({ 
    candidate, 
    vacancyId: initialVacancyId, 
    vacancies = [],
    onClose, 
    onSave 
}) => {
    const isEditMode = !!candidate;
    
    const [formData, setFormData] = useState({
        name: candidate?.name || '',
        position: candidate?.position || '',
        vacancyId: candidate?.vacancyId || initialVacancyId || '',
        stage: candidate?.stage || 'new' as 'new' | 'interview' | 'probation' | 'hired' | 'rejected',
        phone: candidate?.phone || '',
        email: candidate?.email || '',
        resumeUrl: candidate?.resumeUrl || '',
        coverLetter: candidate?.coverLetter || '',
        interviewDate: candidate?.interviewDate ? new Date(candidate.interviewDate).toISOString().split('T')[0] : '',
        interviewNotes: candidate?.interviewNotes || '',
        offerSalary: candidate?.offerSalary?.toString() || '',
        offerDate: candidate?.offerDate || '',
        hiredDate: candidate?.hiredDate || '',
        rejectedReason: candidate?.rejectedReason || '',
    });

    const [loadingVacancies, setLoadingVacancies] = useState(false);
    const [availableVacancies, setAvailableVacancies] = useState<Vacancy[]>(vacancies);

    // Загружаем вакансии если не переданы
    useEffect(() => {
        if (vacancies.length === 0) {
            const fetchVacancies = async () => {
                try {
                    setLoadingVacancies(true);
                    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();
                        setAvailableVacancies(data);
                    }
                } catch (error) {
                    console.error('Error fetching vacancies:', error);
                } finally {
                    setLoadingVacancies(false);
                }
            };
            fetchVacancies();
        }
    }, [vacancies.length]);

    // Обновляем позицию при выборе вакансии
    useEffect(() => {
        if (formData.vacancyId) {
            const selectedVacancy = availableVacancies.find(v => v.id === formData.vacancyId);
            if (selectedVacancy && !isEditMode) {
                setFormData(prev => ({ ...prev, position: selectedVacancy.position }));
            }
        }
    }, [formData.vacancyId, availableVacancies, isEditMode]);

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        
        if (!formData.name || !formData.position || !formData.phone) {
            alert('Заполните обязательные поля: ФИО, позиция и телефон');
            return;
        }

        try {
            const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
            const apiUrl = (import.meta.env.DEV || !apiBaseUrl) 
                ? `/api/candidates${isEditMode ? `/${candidate.id}` : ''}` 
                : `${apiBaseUrl}/candidates${isEditMode ? `/${candidate.id}` : ''}`;
            
            const method = isEditMode ? 'PUT' : 'POST';
            const body = {
                ...(isEditMode ? {} : { id: `cand-${Date.now()}-${Math.random().toString(36).substr(2, 9)}` }),
                name: formData.name.trim(),
                position: formData.position.trim(),
                vacancyId: formData.vacancyId && formData.vacancyId.trim() ? formData.vacancyId.trim() : null,
                stage: formData.stage,
                phone: formData.phone.trim(),
                email: formData.email.trim() || null,
                resumeUrl: formData.resumeUrl.trim() || null,
                coverLetter: formData.coverLetter.trim() || null,
                interviewDate: formData.interviewDate || null,
                interviewNotes: formData.interviewNotes.trim() || null,
                offerSalary: formData.offerSalary ? parseFloat(formData.offerSalary) : null,
                offerDate: formData.offerDate || null,
                hiredDate: formData.hiredDate || null,
                rejectedReason: formData.rejectedReason.trim() || 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 text = await response.text();
                    if (text) {
                        try {
                            const errorData = JSON.parse(text);
                            errorMessage = errorData.error || errorData.message || text;
                        } catch {
                            errorMessage = text;
                        }
                    }
                } catch (textError) {
                    console.error('Failed to read error response:', textError);
                }
                throw new Error(errorMessage);
            }

            const savedCandidate = await response.json();
            onSave(savedCandidate);
        } catch (error) {
            console.error('Error saving candidate:', error);
            let errorMessage = 'Ошибка при сохранении кандидата';
            
            if (error instanceof Error) {
                errorMessage = error.message;
                if (error.message.includes('Failed to fetch') || error.message.includes('NetworkError')) {
                    errorMessage = 'Ошибка сети. Проверьте подключение к серверу.';
                }
            }
            
            alert(errorMessage);
        }
    };

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

    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-3xl max-h-[90vh] overflow-y-auto shadow-2xl animate-slide-up" 
                onClick={e => e.stopPropagation()}
            >
                {/* Header */}
                <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-2xl 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 */}
                <form onSubmit={handleSubmit} className="p-6 space-y-6">
                    {/* Основная информация */}
                    <div>
                        <h4 className="text-sm font-black text-slate-400 uppercase tracking-wider mb-4 flex items-center gap-2">
                            <User className="w-4 h-4"/> Основная информация
                        </h4>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div className="md:col-span-2">
                                <label className="block text-[10px] text-slate-400 font-bold uppercase mb-1">
                                    ФИО *
                                </label>
                                <input
                                    type="text"
                                    value={formData.name}
                                    onChange={(e) => setFormData({ ...formData, name: 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"
                                    required
                                />
                            </div>
                            <div>
                                <label className="block text-[10px] text-slate-400 font-bold uppercase mb-1 flex items-center gap-1">
                                    <Phone className="w-3 h-3"/> Телефон *
                                </label>
                                <input
                                    type="tel"
                                    value={formData.phone}
                                    onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                                    placeholder="+7 (999) 123-45-67"
                                    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 flex items-center gap-1">
                                    <Mail className="w-3 h-3"/> Email
                                </label>
                                <input
                                    type="email"
                                    value={formData.email}
                                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                                    placeholder="ivanov@example.com"
                                    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>
                                <select
                                    value={formData.vacancyId || ''}
                                    onChange={(e) => setFormData({ ...formData, vacancyId: 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"
                                    disabled={loadingVacancies}
                                >
                                    <option value="">Без вакансии</option>
                                    {availableVacancies.map(vacancy => (
                                        <option key={vacancy.id} value={vacancy.id}>
                                            {vacancy.position} ({vacancy.department})
                                        </option>
                                    ))}
                                </select>
                            </div>
                            <div>
                                <label className="block text-[10px] text-slate-400 font-bold uppercase mb-1 flex items-center gap-1">
                                    <Briefcase className="w-3 h-3"/> Позиция *
                                </label>
                                <input
                                    type="text"
                                    value={formData.position}
                                    onChange={(e) => setFormData({ ...formData, position: 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"
                                    required
                                />
                            </div>
                            <div>
                                <label className="block text-[10px] text-slate-400 font-bold uppercase mb-1">
                                    Статус
                                </label>
                                <select
                                    value={formData.stage}
                                    onChange={(e) => setFormData({ ...formData, stage: e.target.value as any })}
                                    className="w-full p-3 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-primary-500 outline-none"
                                >
                                    <option value="new">Новый</option>
                                    <option value="interview">Собеседование</option>
                                    <option value="probation">Испытательный срок</option>
                                    <option value="hired">Трудоустроен</option>
                                    <option value="rejected">Отклонен</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    {/* Документы и материалы */}
                    <div>
                        <h4 className="text-sm font-black text-slate-400 uppercase tracking-wider mb-4 flex items-center gap-2">
                            <FileText className="w-4 h-4"/> Документы и материалы
                        </h4>
                        <div className="space-y-4">
                            <div>
                                <label className="block text-[10px] text-slate-400 font-bold uppercase mb-1">
                                    Ссылка на резюме
                                </label>
                                <input
                                    type="url"
                                    value={formData.resumeUrl}
                                    onChange={(e) => setFormData({ ...formData, resumeUrl: e.target.value })}
                                    placeholder="https://..."
                                    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.coverLetter}
                                    onChange={(e) => setFormData({ ...formData, coverLetter: e.target.value })}
                                    placeholder="Текст сопроводительного письма..."
                                    rows={3}
                                    className="w-full p-3 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-primary-500 outline-none"
                                />
                            </div>
                        </div>
                    </div>

                    {/* Собеседование */}
                    {(formData.stage === 'interview' || formData.stage === 'probation' || formData.stage === 'hired' || candidate?.interviewDate) && (
                        <div>
                            <h4 className="text-sm font-black text-slate-400 uppercase tracking-wider mb-4 flex items-center gap-2">
                                <Calendar className="w-4 h-4"/> Собеседование
                            </h4>
                            <div className="grid grid-cols-1 md: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.interviewDate}
                                        onChange={(e) => setFormData({ ...formData, interviewDate: 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"
                                    />
                                </div>
                            </div>
                            <div className="mt-4">
                                <label className="block text-[10px] text-slate-400 font-bold uppercase mb-1 flex items-center gap-1">
                                    <MessageSquare className="w-3 h-3"/> Заметки с собеседования
                                </label>
                                <textarea
                                    value={formData.interviewNotes}
                                    onChange={(e) => setFormData({ ...formData, interviewNotes: 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>
                    )}

                    {/* Предложение */}
                    {(formData.stage === 'probation' || formData.stage === 'hired' || candidate?.offerDate) && (
                        <div>
                            <h4 className="text-sm font-black text-slate-400 uppercase tracking-wider mb-4 flex items-center gap-2">
                                <DollarSign className="w-4 h-4"/> Предложение
                            </h4>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label className="block text-[10px] text-slate-400 font-bold uppercase mb-1">
                                        Предложенная зарплата
                                    </label>
                                    <input
                                        type="number"
                                        value={formData.offerSalary}
                                        onChange={(e) => setFormData({ ...formData, offerSalary: e.target.value })}
                                        placeholder="55000"
                                        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="date"
                                        value={formData.offerDate}
                                        onChange={(e) => setFormData({ ...formData, offerDate: 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"
                                    />
                                </div>
                            </div>
                        </div>
                    )}

                    {/* Трудоустройство */}
                    {formData.stage === 'hired' && (
                        <div>
                            <h4 className="text-sm font-black text-slate-400 uppercase tracking-wider mb-4 flex items-center gap-2">
                                <User className="w-4 h-4"/> Трудоустройство
                            </h4>
                            <div>
                                <label className="block text-[10px] text-slate-400 font-bold uppercase mb-1">
                                    Дата трудоустройства
                                </label>
                                <input
                                    type="date"
                                    value={formData.hiredDate}
                                    onChange={(e) => setFormData({ ...formData, hiredDate: 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"
                                />
                            </div>
                        </div>
                    )}

                    {/* Отказ */}
                    {formData.stage === 'rejected' && (
                        <div>
                            <h4 className="text-sm font-black text-slate-400 uppercase tracking-wider mb-4 flex items-center gap-2">
                                <X className="w-4 h-4"/> Отказ
                            </h4>
                            <div>
                                <label className="block text-[10px] text-slate-400 font-bold uppercase mb-1">
                                    Причина отказа
                                </label>
                                <textarea
                                    value={formData.rejectedReason}
                                    onChange={(e) => setFormData({ ...formData, rejectedReason: e.target.value })}
                                    placeholder="Причина отказа кандидату..."
                                    rows={3}
                                    className="w-full p-3 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-primary-500 outline-none"
                                />
                            </div>
                        </div>
                    )}

                    {/* История событий (только в режиме редактирования) */}
                    {isEditMode && candidate && (
                        <div className="pt-6 border-t border-slate-200">
                            <CandidateEventsTimeline
                                candidate={{
                                    ...candidate,
                                    id: candidate.id
                                }}
                                onEventAdded={() => {
                                    // Можно обновить данные кандидата если нужно
                                }}
                                onCandidateUpdated={(updatedCandidate) => {
                                    // Обновляем кандидата в форме
                                    // Это обновит отображаемые данные
                                }}
                            />
                        </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>
    );
};