import React, { useState, useEffect } from 'react';
import { LegalContract, ContractStatus } from '../../types';
import { Search, FileText, FileSignature, CheckCircle2, Clock, ChevronRight, Archive, Inbox, Plus, X, Loader2, Paperclip, History, ExternalLink } from 'lucide-react';
import { authFetch } from '../../services/apiClient';

const STATUS_OPTIONS: { value: ContractStatus; label: string }[] = [
    { value: 'draft', label: 'Черновик' },
    { value: 'finance_approval', label: 'Согл. Фин.' },
    { value: 'counterparty_approval', label: 'Согл. Контр.' },
    { value: 'signing', label: 'На подписи' },
    { value: 'active', label: 'Подписан' },
    { value: 'archived', label: 'Архив' },
];

const STATUS_MAP: Record<ContractStatus, { label: string, color: string, bg: string }> = {
    draft: { label: 'Черновик', color: 'text-slate-600', bg: 'bg-slate-100' },
    finance_approval: { label: 'Согл. Фин.', color: 'text-amber-600', bg: 'bg-amber-100' },
    counterparty_approval: { label: 'Согл. Контр.', color: 'text-blue-600', bg: 'bg-blue-100' },
    signing: { label: 'На подписи', color: 'text-purple-600', bg: 'bg-purple-100' },
    active: { label: 'Подписан', color: 'text-emerald-600', bg: 'bg-emerald-100' },
    archived: { label: 'Архив', color: 'text-slate-400', bg: 'bg-slate-50' },
};

export const ContractsRegistry: React.FC = () => {
    const [viewMode, setViewMode] = useState<'active' | 'archive'>('active');
    const [statusFilter, setStatusFilter] = useState<string>('all');
    const [search, setSearch] = useState('');
    const [contracts, setContracts] = useState<LegalContract[]>([]);
    const [loading, setLoading] = useState(true);
    const [showModal, setShowModal] = useState(false);
    const [editingContract, setEditingContract] = useState<LegalContract | null>(null);

    useEffect(() => {
        loadContracts();
    }, [viewMode, statusFilter]);

    const loadContracts = async () => {
        try {
            setLoading(true);
            let url = `/api/legal/contracts?viewMode=${viewMode}&search=${encodeURIComponent(search)}`;
            if (statusFilter && statusFilter !== 'all') url += `&status=${encodeURIComponent(statusFilter)}`;
            const response = await authFetch(url);
            if (response.ok) {
                const data = await response.json();
                setContracts(data);
            }
        } catch (error) {
            console.error('Error loading contracts:', error);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        const timeoutId = setTimeout(() => {
            if (search !== undefined) {
                loadContracts();
            }
        }, 300);
        return () => clearTimeout(timeoutId);
    }, [search]);

    const uploadsBase = (import.meta.env.VITE_API_BASE_URL || '').replace(/\/api\/?$/, '') || '';

    const handleCreate = () => {
        setEditingContract(null);
        setShowModal(true);
    };

    const handleEdit = (contract: LegalContract) => {
        setEditingContract(contract);
        setShowModal(true);
    };

    const handleSave = async (contractData: Partial<LegalContract>) => {
        try {
            if (editingContract) {
                // Обновление
                const response = await authFetch(`/api/legal/contracts/${editingContract.id}`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(contractData)
                });
                if (response.ok) {
                    await loadContracts();
                    setShowModal(false);
                    setEditingContract(null);
                }
            } else {
                // Создание
                const response = await authFetch('/api/legal/contracts', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(contractData)
                });
                if (response.ok) {
                    await loadContracts();
                    setShowModal(false);
                }
            }
        } catch (error) {
            console.error('Error saving contract:', error);
            alert('Ошибка при сохранении договора');
        }
    };

    const filtered = contracts.filter(c => {
        const searchMatch = !search || 
            c.counterparty.toLowerCase().includes(search.toLowerCase()) || 
            c.number.toLowerCase().includes(search.toLowerCase());
        return searchMatch;
    });

    return (
        <div className="space-y-4 animate-fade-in">
            {/* Top Toggle & Search & Create Button */}
            <div className="flex flex-col md:flex-row gap-4">
                <div className="flex bg-slate-200/50 p-1 rounded-2xl w-fit">
                    <button 
                        onClick={() => setViewMode('active')}
                        className={`flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-black uppercase transition-all ${viewMode === 'active' ? 'bg-white shadow text-primary-600' : 'text-slate-500'}`}
                    >
                        <Inbox className="w-4 h-4"/> Реестр
                    </button>
                    <button 
                        onClick={() => setViewMode('archive')}
                        className={`flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-black uppercase transition-all ${viewMode === 'archive' ? 'bg-white shadow text-primary-600' : 'text-slate-500'}`}
                    >
                        <Archive className="w-4 h-4"/> Архив
                    </button>
                </div>
                <select
                    value={statusFilter}
                    onChange={(e) => setStatusFilter(e.target.value)}
                    className="px-4 py-2 border border-slate-200 rounded-xl text-xs font-bold bg-white text-slate-700 outline-none focus:ring-2 focus:ring-primary-500 w-fit"
                >
                    <option value="all">Все статусы</option>
                    {STATUS_OPTIONS.map((opt) => (
                        <option key={opt.value} value={opt.value}>{opt.label}</option>
                    ))}
                </select>
                <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={search}
                        onChange={e => setSearch(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 transition-all shadow-sm"
                    />
                </div>
                {viewMode === 'active' && (
                    <button
                        onClick={handleCreate}
                        className="bg-primary-600 text-white px-4 py-3 rounded-xl shadow-lg shadow-primary-500/30 flex items-center gap-2 text-xs font-black uppercase tracking-wider active:scale-95 transition-all"
                    >
                        <Plus className="w-4 h-4" /> Создать договор
                    </button>
                )}
            </div>

            {/* List */}
            {loading ? (
                <div className="flex items-center justify-center py-20">
                    <Loader2 className="w-6 h-6 animate-spin text-slate-400" />
                </div>
            ) : (
                <div className="space-y-3">
                    {filtered.map(contract => {
                        const status = STATUS_MAP[contract.status];
                        return (
                            <div 
                                key={contract.id} 
                                className="bg-white p-5 rounded-[2rem] border border-slate-200 shadow-sm hover:shadow-md hover:border-primary-300 transition-all cursor-pointer group"
                                onClick={() => handleEdit(contract)}
                            >
                                <div className="flex justify-between items-start mb-4">
                                    <div className="flex items-center gap-3">
                                        <div className={`p-3 rounded-2xl ${status.bg} ${status.color}`}>
                                            <FileSignature className="w-6 h-6"/>
                                        </div>
                                        <div>
                                            <div className="flex items-center gap-2 mb-0.5">
                                                <span className={`text-[10px] font-black px-2 py-0.5 rounded uppercase tracking-wider ${status.bg} ${status.color}`}>
                                                    {status.label}
                                                </span>
                                                <span className="text-[10px] text-slate-400 font-bold uppercase">№ {contract.number}</span>
                                            </div>
                                            <h4 className="font-black text-slate-800 text-base leading-tight group-hover:text-primary-600 transition-colors">{contract.counterparty}</h4>
                                        </div>
                                    </div>
                                    <div className="text-right">
                                        <p className="text-sm font-black text-slate-900">{contract.amount.toLocaleString()} ₽</p>
                                        <p className="text-[10px] text-slate-400 font-bold uppercase mt-1 italic">{contract.type}</p>
                                    </div>
                                </div>
                                
                                <div className="flex items-center justify-between pt-4 border-t border-slate-100">
                                    <div className="flex items-center gap-4 flex-wrap">
                                        <div className="flex items-center gap-1.5 text-xs text-slate-500 font-medium">
                                            <Clock className="w-3.5 h-3.5"/> до {contract.endDate}
                                        </div>
                                        {contract.autoProlongation && (
                                            <div className="flex items-center gap-1 text-[10px] font-black text-emerald-600 uppercase">
                                                <CheckCircle2 className="w-3 h-3"/> Автопролонгация
                                            </div>
                                        )}
                                        {contract.contractFileUrl && (
                                            <a
                                                href={uploadsBase ? `${uploadsBase}${contract.contractFileUrl}` : contract.contractFileUrl}
                                                target="_blank"
                                                rel="noopener noreferrer"
                                                onClick={(e) => e.stopPropagation()}
                                                className="inline-flex items-center gap-1 text-[10px] font-black text-primary-600 uppercase hover:text-primary-700"
                                            >
                                                <Paperclip className="w-3.5 h-3.5"/> Документ
                                            </a>
                                        )}
                                    </div>
                                    <div className="flex items-center gap-2 text-[10px] font-black text-primary-600 uppercase group-hover:translate-x-1 transition-transform">
                                        Открыть <ChevronRight className="w-4 h-4"/>
                                    </div>
                                </div>
                            </div>
                        );
                    })}
                    {filtered.length === 0 && (
                        <div className="py-20 text-center text-slate-400">
                            <FileText className="w-12 h-12 mx-auto mb-3 opacity-20"/>
                            <p className="font-bold uppercase tracking-widest text-xs">Договоры не найдены</p>
                            {viewMode === 'active' && (
                                <button
                                    onClick={handleCreate}
                                    className="mt-4 bg-primary-600 text-white px-6 py-2 rounded-xl text-xs font-black uppercase"
                                >
                                    Создать первый договор
                                </button>
                            )}
                        </div>
                    )}
                </div>
            )}

            {/* Contract Modal */}
            {showModal && (
                <ContractModal
                    contract={editingContract}
                    onClose={() => {
                        setShowModal(false);
                        setEditingContract(null);
                    }}
                    onSave={handleSave}
                />
            )}
        </div>
    );
};

interface ContractModalProps {
    contract: LegalContract | null;
    onClose: () => void;
    onSave: (data: Partial<LegalContract>) => Promise<void>;
}

interface ContractHistoryEntry {
    fromStatus: string | null;
    toStatus: string;
    changedBy: string;
    createdAt: string;
}

const ContractModal: React.FC<ContractModalProps> = ({ contract, onClose, onSave }) => {
    const [loading, setLoading] = useState(false);
    const [uploading, setUploading] = useState(false);
    const [history, setHistory] = useState<ContractHistoryEntry[]>([]);
    const [formData, setFormData] = useState({
        number: contract?.number || '',
        type: contract?.type || '',
        counterparty: contract?.counterparty || '',
        counterpartyInn: contract?.counterpartyInn ?? '',
        amount: contract?.amount || 0,
        startDate: contract?.startDate || '',
        endDate: contract?.endDate || '',
        autoProlongation: contract?.autoProlongation ?? false,
        manager: contract?.manager || '',
        notes: contract?.notes ?? '',
        status: (contract?.status || 'draft') as ContractStatus,
        hasDisagreements: contract?.hasDisagreements ?? false,
        contractFileUrl: contract?.contractFileUrl ?? '',
    });

    useEffect(() => {
        setFormData({
            number: contract?.number || '',
            type: contract?.type || '',
            counterparty: contract?.counterparty || '',
            counterpartyInn: contract?.counterpartyInn ?? '',
            amount: contract?.amount || 0,
            startDate: contract?.startDate || '',
            endDate: contract?.endDate || '',
            autoProlongation: contract?.autoProlongation ?? false,
            manager: contract?.manager || '',
            notes: contract?.notes ?? '',
            status: (contract?.status || 'draft') as ContractStatus,
            hasDisagreements: contract?.hasDisagreements ?? false,
            contractFileUrl: contract?.contractFileUrl ?? '',
        });
        if (contract?.id) {
            authFetch(`/api/legal/contracts/${contract.id}/history`)
                .then((r) => r.ok ? r.json() : [])
                .then(setHistory)
                .catch(() => setHistory([]));
        } else {
            setHistory([]);
        }
    }, [contract?.id]);

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setLoading(true);
        try {
            await onSave(formData);
        } finally {
            setLoading(false);
        }
    };

    const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (!file) return;
        setUploading(true);
        try {
            const fd = new FormData();
            fd.append('file', file);
            const res = await authFetch('/api/legal/contracts/upload', {
                method: 'POST',
                body: fd,
            });
            if (res.ok) {
                const data = await res.json();
                setFormData((prev) => ({ ...prev, contractFileUrl: data.fileUrl || '' }));
            }
        } catch (err) {
            console.error('Upload error:', err);
            alert('Ошибка загрузки файла');
        } finally {
            setUploading(false);
            e.target.value = '';
        }
    };

    const uploadsBase = (import.meta.env.VITE_API_BASE_URL || '').replace(/\/api\/?$/, '') || '';

    return (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 overflow-y-auto">
            <div className="bg-white rounded-2xl p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
                <div className="flex justify-between items-center mb-6">
                    <h3 className="text-xl font-black text-slate-800">
                        {contract ? 'Редактировать договор' : 'Создать договор'}
                    </h3>
                    <button onClick={onClose} className="p-2 text-slate-400 hover:text-slate-600">
                        <X className="w-5 h-5" />
                    </button>
                </div>

                <form onSubmit={handleSubmit} className="space-y-4">
                    <div className="grid grid-cols-2 gap-4">
                        <div>
                            <label className="block text-xs font-black text-slate-700 uppercase mb-1">Номер договора *</label>
                            <input
                                type="text"
                                value={formData.number}
                                onChange={(e) => setFormData({ ...formData, number: e.target.value })}
                                className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
                                required
                            />
                        </div>
                        <div>
                            <label className="block text-xs font-black text-slate-700 uppercase mb-1">Тип договора *</label>
                            <select
                                value={formData.type}
                                onChange={(e) => setFormData({ ...formData, type: e.target.value })}
                                className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
                                required
                            >
                                <option value="">Выберите тип</option>
                                <option value="Поставка">Поставка</option>
                                <option value="Услуги">Услуги</option>
                                <option value="Подряд">Подряд</option>
                                <option value="Аренда">Аренда</option>
                                <option value="Другое">Другое</option>
                            </select>
                        </div>
                    </div>

                    <div>
                        <label className="block text-xs font-black text-slate-700 uppercase mb-1">Контрагент *</label>
                        <input
                            type="text"
                            value={formData.counterparty}
                            onChange={(e) => setFormData({ ...formData, counterparty: e.target.value })}
                            className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
                            required
                        />
                    </div>

                    <div>
                        <label className="block text-xs font-black text-slate-700 uppercase mb-1">ИНН контрагента</label>
                        <input
                            type="text"
                            value={formData.counterpartyInn}
                            onChange={(e) => setFormData({ ...formData, counterpartyInn: e.target.value.replace(/\D/g, '') })}
                            className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
                            maxLength={12}
                            placeholder="10 или 12 цифр"
                        />
                    </div>

                    <div className="grid grid-cols-2 gap-4">
                        <div>
                            <label className="block text-xs font-black text-slate-700 uppercase mb-1">Сумма *</label>
                            <input
                                type="number"
                                value={formData.amount}
                                onChange={(e) => setFormData({ ...formData, amount: parseFloat(e.target.value) || 0 })}
                                className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
                                min="0"
                                step="0.01"
                                required
                            />
                        </div>
                        <div>
                            <label className="block text-xs font-black text-slate-700 uppercase mb-1">Менеджер *</label>
                            <input
                                type="text"
                                value={formData.manager}
                                onChange={(e) => setFormData({ ...formData, manager: e.target.value })}
                                className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
                                required
                            />
                        </div>
                    </div>

                    {contract && (
                        <div>
                            <label className="block text-xs font-black text-slate-700 uppercase mb-1">Статус</label>
                            <select
                                value={formData.status}
                                onChange={(e) => setFormData({ ...formData, status: e.target.value as ContractStatus })}
                                className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
                            >
                                {STATUS_OPTIONS.map((opt) => (
                                    <option key={opt.value} value={opt.value}>{opt.label}</option>
                                ))}
                            </select>
                        </div>
                    )}

                    <div className="grid grid-cols-2 gap-4">
                        <div>
                            <label className="block text-xs font-black text-slate-700 uppercase mb-1">Дата начала *</label>
                            <input
                                type="date"
                                value={formData.startDate}
                                onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
                                className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
                                required
                            />
                        </div>
                        <div>
                            <label className="block text-xs font-black text-slate-700 uppercase mb-1">Дата окончания *</label>
                            <input
                                type="date"
                                value={formData.endDate}
                                onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
                                className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
                                required
                            />
                        </div>
                    </div>

                    <div className="flex items-center gap-2">
                        <input
                            type="checkbox"
                            id="autoProlongation"
                            checked={formData.autoProlongation}
                            onChange={(e) => setFormData({ ...formData, autoProlongation: e.target.checked })}
                            className="w-4 h-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500"
                        />
                        <label htmlFor="autoProlongation" className="text-sm text-slate-700">
                            Автоматическая пролонгация
                        </label>
                    </div>

                    <div className="flex items-center gap-2">
                        <input
                            type="checkbox"
                            id="hasDisagreements"
                            checked={formData.hasDisagreements}
                            onChange={(e) => setFormData({ ...formData, hasDisagreements: e.target.checked })}
                            className="w-4 h-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500"
                        />
                        <label htmlFor="hasDisagreements" className="text-sm text-slate-700">
                            Есть разногласия
                        </label>
                    </div>

                    <div>
                        <label className="block text-xs font-black text-slate-700 uppercase mb-1">Файл договора</label>
                        {formData.contractFileUrl ? (
                            <div className="flex items-center gap-2 flex-wrap">
                                <a
                                    href={uploadsBase ? `${uploadsBase}${formData.contractFileUrl}` : formData.contractFileUrl}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="inline-flex items-center gap-1.5 text-primary-600 hover:text-primary-700 text-sm font-medium"
                                >
                                    <ExternalLink className="w-4 h-4" /> Открыть документ
                                </a>
                                <label className="inline-flex items-center gap-1.5 text-slate-600 text-sm cursor-pointer">
                                    <Paperclip className="w-4 h-4" />
                                    {uploading ? 'Загрузка...' : 'Заменить файл'}
                                    <input type="file" className="hidden" accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.txt,.zip,.rar" onChange={handleFileChange} disabled={uploading} />
                                </label>
                            </div>
                        ) : (
                            <label className="inline-flex items-center gap-2 px-3 py-2 border border-slate-200 rounded-xl text-sm text-slate-600 cursor-pointer hover:bg-slate-50">
                                <Paperclip className="w-4 h-4" />
                                {uploading ? 'Загрузка...' : 'Загрузить файл'}
                                <input type="file" className="hidden" accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.txt,.zip,.rar" onChange={handleFileChange} disabled={uploading} />
                            </label>
                        )}
                    </div>

                    <div>
                        <label className="block text-xs font-black text-slate-700 uppercase mb-1">Примечания</label>
                        <textarea
                            value={formData.notes || ''}
                            onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
                            rows={3}
                            className="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500"
                        />
                    </div>

                    {contract && history.length > 0 && (
                        <div className="border border-slate-200 rounded-xl p-4 bg-slate-50">
                            <div className="flex items-center gap-2 mb-2 text-xs font-black text-slate-700 uppercase">
                                <History className="w-4 h-4" /> История статусов
                            </div>
                            <ul className="space-y-1.5 text-sm">
                                {history.map((h, i) => (
                                    <li key={i} className="flex flex-wrap items-center gap-1 text-slate-600">
                                        <span className="text-slate-400">{new Date(h.createdAt).toLocaleString('ru')}</span>
                                        <span>{h.fromStatus ? STATUS_MAP[h.fromStatus as ContractStatus]?.label || h.fromStatus : '—'}</span>
                                        <span>→</span>
                                        <span className="font-medium">{STATUS_MAP[h.toStatus as ContractStatus]?.label || h.toStatus}</span>
                                        <span className="text-slate-500">({h.changedBy})</span>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    )}

                    <div className="flex gap-3 pt-4">
                        <button
                            type="button"
                            onClick={onClose}
                            className="flex-1 px-4 py-2.5 bg-slate-100 text-slate-700 rounded-xl text-xs font-black uppercase hover:bg-slate-200 transition-colors"
                        >
                            Отмена
                        </button>
                        <button
                            type="submit"
                            disabled={loading}
                            className="flex-1 px-4 py-2.5 bg-primary-600 text-white rounded-xl text-xs font-black uppercase hover:bg-primary-700 transition-colors disabled:opacity-50"
                        >
                            {loading ? 'Сохранение...' : 'Сохранить'}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
};