import React, { useState, useEffect } from 'react';
import { District, Employee } from '../../types';
import { backendApi } from '../../services/apiClient';
import { X } from 'lucide-react';

const UNASSIGNED_MANAGER = 'Не назначен';

interface Props {
    district: District | null;
    onClose: () => void;
    onSaved: () => void;
    employees: Employee[];
}

export const EditDistrictModal: React.FC<Props> = ({ district, onClose, onSaved, employees }) => {
    const [name, setName] = useState('');
    const [managerName, setManagerName] = useState(UNASSIGNED_MANAGER);
    const [saving, setSaving] = useState(false);

    useEffect(() => {
        if (district) {
            setName(district.name);
            setManagerName(district.managerName?.trim() || UNASSIGNED_MANAGER);
        }
    }, [district]);

    const eligibleManagers = employees.filter(emp => {
        if (emp.status !== 'active') return false;
        const positionLower = (emp.position || '').toLowerCase();
        return positionLower.includes('мастер') || positionLower.includes('начальник участка');
    });

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!district || !name.trim()) return;
        try {
            setSaving(true);
            await backendApi.updateDistrict(district.id, {
                name: name.trim(),
                managerName: managerName === '' ? UNASSIGNED_MANAGER : managerName.trim(),
            });
            onSaved();
            onClose();
        } catch (err) {
            console.error(err);
            alert('Ошибка сохранения участка');
        } finally {
            setSaving(false);
        }
    };

    if (!district) return null;

    return (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/80 backdrop-blur-md" onClick={onClose}>
            <div
                className="bg-white rounded-2xl w-full max-w-md shadow-2xl"
                onClick={e => e.stopPropagation()}
            >
                <div className="flex justify-between items-center px-6 py-4 border-b border-slate-200">
                    <h2 className="text-lg font-black text-slate-800">Редактировать участок</h2>
                    <button type="button" onClick={onClose} className="p-2 hover:bg-slate-100 rounded-xl">
                        <X className="w-5 h-5 text-slate-400" />
                    </button>
                </div>
                <form onSubmit={handleSubmit} className="p-6 space-y-4">
                    <div>
                        <label className="block text-[10px] font-black uppercase text-slate-500 mb-1">Название участка</label>
                        <input
                            value={name}
                            onChange={e => setName(e.target.value)}
                            className="w-full border border-slate-200 rounded-xl px-3 py-2 text-sm focus:ring-2 focus:ring-primary-500 outline-none"
                            required
                        />
                    </div>
                    <div>
                        <label className="block text-[10px] font-black uppercase text-slate-500 mb-1">Начальник участка</label>
                        <select
                            value={managerName}
                            onChange={e => setManagerName(e.target.value)}
                            className="w-full border border-slate-200 rounded-xl px-3 py-2 text-sm focus:ring-2 focus:ring-primary-500 outline-none bg-white"
                        >
                            <option value={UNASSIGNED_MANAGER}>Не назначен</option>
                            {eligibleManagers.map(emp => (
                                <option key={emp.id} value={emp.name}>{emp.name} — {emp.position}</option>
                            ))}
                        </select>
                    </div>
                    <div className="flex justify-end gap-2 pt-2">
                        <button type="button" onClick={onClose} className="px-4 py-2 rounded-xl border border-slate-200 text-slate-600 text-sm font-bold hover:bg-slate-50">
                            Отмена
                        </button>
                        <button type="submit" disabled={saving} className="px-4 py-2 rounded-xl bg-primary-600 text-white text-sm font-bold hover:bg-primary-700 disabled:opacity-50">
                            {saving ? 'Сохранение...' : 'Сохранить'}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
};