import React, { useState, useEffect, useRef } from 'react';
import { PaymentInvoice, UserRole } from '../../types';
import { apiClient } from '../../services/apiClient';
import { ArrowLeft, Check, X, Calendar, Clock, FileText, Building2, MapPin, Briefcase, Users, Calculator, History, CheckCircle2, Paperclip, Download, PartyPopper, Wallet, Banknote } from 'lucide-react';
import { PaymentStatusModal, PaymentStatusModalPayload } from './PaymentStatusModal';

interface PaymentInvoiceDetailProps {
  invoice: PaymentInvoice;
  currentUserId: string;
  onBack: () => void;
  onUpdate: () => void;
}

const StatusConfig: Record<PaymentInvoice['status'], { label: string; color: string; bg: string }> = {
  draft: { label: 'Черновик', color: 'text-slate-500', bg: 'bg-slate-100' },
  pending_manager_approval: { label: 'На согласовании у руководителя', color: 'text-amber-600', bg: 'bg-amber-50' },
  pending_finance_manager_approval: { label: 'На согласовании у финансового руководителя', color: 'text-blue-600', bg: 'bg-blue-50' },
  approved: { label: 'Согласован', color: 'text-indigo-600', bg: 'bg-indigo-50' },
  scheduled: { label: 'В графике платежей', color: 'text-purple-600', bg: 'bg-purple-50' },
  paid: { label: 'Оплачен', color: 'text-emerald-600', bg: 'bg-emerald-50' },
  postponed: { label: 'Отложен', color: 'text-orange-600', bg: 'bg-orange-50' },
  cancelled: { label: 'Отменен', color: 'text-red-600', bg: 'bg-red-50' },
  rejected: { label: 'Отклонен', color: 'text-red-600', bg: 'bg-red-50' },
  completed: { label: 'Выполнено', color: 'text-green-600', bg: 'bg-green-50' }
};

const PurposeTypeIcons: Record<PaymentInvoice['purposeType'], any> = {
  building: Building2,
  district: MapPin,
  legal: Briefcase,
  office: FileText,
  hr: Users,
  event: PartyPopper,
  other: FileText
};

export const PaymentInvoiceDetail: React.FC<PaymentInvoiceDetailProps> = ({
  invoice,
  currentUserId,
  onBack,
  onUpdate
}) => {
  const [userRoles, setUserRoles] = useState<string[]>([]);
  const [loading, setLoading] = useState(false);
  const [rejectionReason, setRejectionReason] = useState('');
  const [approvalComment, setApprovalComment] = useState('');
  const [scheduledDate, setScheduledDate] = useState(invoice.scheduledDate || '');
  const [closingDocsUpdating, setClosingDocsUpdating] = useState(false);
  const closingDocsFileInputRef = useRef<HTMLInputElement | null>(null);
  const [closingDocsUploading, setClosingDocsUploading] = useState(false);
  const [showPayModal, setShowPayModal] = useState<'default' | 'cash' | null>(null);

  useEffect(() => {
    fetchUserRoles();
  }, [currentUserId]);

  const fetchUserRoles = async () => {
    try {
      const roles = await apiClient.get<UserRole[]>(`/finance/user-roles?userId=${currentUserId}`);
      setUserRoles(roles.map(r => r.role));
    } catch (err) {
      console.error('Error fetching user roles:', err);
    }
  };

  const canApprove = () => {
    // Проверка прав на согласование
    const TOP_MANAGEMENT_ROLES = ['finance_director', 'director', 'top_management'];
    const statusConfig: Record<string, { role?: string }> = {
      pending_manager_approval: { role: 'manager' },
      pending_finance_manager_approval: { role: 'finance_manager' }
    };
    const config = statusConfig[invoice.status];
    if (!config || !config.role) return false;
    
    // Если требуется роль manager, но пользователь из высшего звена - может согласовать
    if (config.role === 'manager' && userRoles.some(role => TOP_MANAGEMENT_ROLES.includes(role))) {
      return true;
    }
    
    return userRoles.includes(config.role);
  };

  const canSchedule = () => {
    // Ставить в график может финансист ИЛИ финансовый руководитель.
    // В демо, если ролей нет, считаем текущего пользователя финансовым блоком.
    const canScheduleRole =
      userRoles.includes('financier') ||
      userRoles.includes('finance_manager') ||
      userRoles.length === 0;

    if (!canScheduleRole) return false;

    // Для постоплаты можем поставить в график после согласования или после выполнения
    if (invoice.paymentFormat === 'postpayment') {
      return ['approved', 'completed'].includes(invoice.status);
    }

    // Для предоплаты и аванса ставим в график первый платеж после согласования
    if (invoice.paymentFormat === 'prepayment' || invoice.paymentFormat === 'advance') {
      return invoice.status === 'approved';
    }

    return invoice.status === 'approved';
  };

  const canMarkCompleted = () => {
    if (invoice.paymentFormat === 'postpayment') {
      return ['approved', 'scheduled'].includes(invoice.status) && !invoice.isCompleted;
    } else if (invoice.paymentFormat === 'prepayment' || invoice.paymentFormat === 'advance') {
      return invoice.status === 'paid' && !invoice.isCompleted;
    }
    return false;
  };

  const handleApprove = async () => {
    try {
      setLoading(true);
      await apiClient.post(`/finance/payment-invoices/${invoice.id}/approve`, {
        userId: currentUserId,
        comment: approvalComment
      });
      setApprovalComment('');
      onUpdate();
    } catch (err) {
      console.error('Error approving invoice:', err);
      alert('Ошибка при согласовании счета');
    } finally {
      setLoading(false);
    }
  };

  const handleReject = async () => {
    if (!rejectionReason.trim()) {
      alert('Укажите причину отклонения');
      return;
    }
    try {
      setLoading(true);
      await apiClient.post(`/finance/payment-invoices/${invoice.id}/reject`, {
        userId: currentUserId,
        reason: rejectionReason
      });
      setRejectionReason('');
      onUpdate();
    } catch (err) {
      console.error('Error rejecting invoice:', err);
      alert('Ошибка при отклонении счета');
    } finally {
      setLoading(false);
    }
  };

  const handleSchedule = async () => {
    if (!scheduledDate) {
      alert('Укажите дату для графика платежей');
      return;
    }
    try {
      setLoading(true);
      await apiClient.post(`/finance/payment-invoices/${invoice.id}/schedule`, {
        userId: currentUserId,
        scheduledDate
      });
      onUpdate();
    } catch (err) {
      console.error('Error scheduling invoice:', err);
      alert('Ошибка при постановке в график');
    } finally {
      setLoading(false);
    }
  };

  const handleMarkCompleted = async () => {
    try {
      setLoading(true);
      await apiClient.post(`/finance/payment-invoices/${invoice.id}/mark-completed`);
      onUpdate();
    } catch (err) {
      console.error('Error marking as completed:', err);
      alert('Ошибка при отметке выполнения');
    } finally {
      setLoading(false);
    }
  };

  const handleClosingDocsReceived = async () => {
    try {
      setClosingDocsUpdating(true);
      await apiClient.post(`/finance/payment-invoices/${invoice.id}/closing-docs`, {
        received: true
      });
      onUpdate();
    } catch (err) {
      console.error('Error updating closing docs flag:', err);
      alert('Ошибка при отметке закрывающих документов');
    } finally {
      setClosingDocsUpdating(false);
    }
  };

  const handleMarkPaid = async (payload: PaymentStatusModalPayload) => {
    try {
      setLoading(true);
      await apiClient.post(`/finance/payment-invoices/${invoice.id}/update-payment-status`, {
        status: 'paid',
        paymentDate: payload.paymentDate,
        paymentRef: payload.paymentRef,
        isCash: payload.isCash
      });
      setShowPayModal(null);
      onUpdate();
    } catch (err) {
      console.error('Error marking invoice as paid:', err);
      alert('Ошибка при отметке оплаты');
    } finally {
      setLoading(false);
    }
  };

  const handleClosingDocsFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    try {
      setClosingDocsUploading(true);

      // Загружаем файл на сервер (как для обычных счетов)
      const formData = new FormData();
      formData.append('file', file);

      const uploadResponse = await fetch('/api/finance/payment-invoices/upload', {
        method: 'POST',
        body: formData
      });

      if (!uploadResponse.ok) {
        throw new Error('Ошибка загрузки файла');
      }

      const data = await uploadResponse.json();
      const fileInfo = data.file;

      // Привязываем файл к счету как закрывающий документ и помечаем, что закрывашки получены
      await apiClient.post(`/finance/payment-invoices/${invoice.id}/closing-docs`, {
        received: true,
        files: [fileInfo]
      });

      onUpdate();
    } catch (err) {
      console.error('Error uploading closing docs file:', err);
      alert('Ошибка при загрузке файла закрывающих документов');
    } finally {
      setClosingDocsUploading(false);
      if (closingDocsFileInputRef.current) {
        closingDocsFileInputRef.current.value = '';
      }
    }
  };

  const PurposeIcon = PurposeTypeIcons[invoice.purposeType] || FileText;
  const statusInfo = StatusConfig[invoice.status];

  return (
    <div className="space-y-6 animate-fade-in">
      {/* Заголовок */}
      <div className="flex items-center justify-between">
        <button
          onClick={onBack}
          className="flex items-center gap-2 text-primary-600 hover:text-primary-700 font-medium"
        >
          <ArrowLeft className="w-4 h-4" />
          Назад к списку
        </button>
        <div className={`px-3 py-1 rounded-lg ${statusInfo.bg} ${statusInfo.color}`}>
          <span className="text-sm font-bold">{statusInfo.label}</span>
        </div>
      </div>

      {/* Основная информация */}
      <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
        <div className="flex items-start justify-between mb-6">
          <div>
            <h2 className="text-xl font-bold text-slate-800 mb-1">Счет № {invoice.invoiceNumber}</h2>
            <p className="text-sm text-slate-500">
              Создан {new Date(invoice.createdAt).toLocaleDateString('ru-RU')} пользователем {invoice.createdBy}
            </p>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Назначение */}
          <div>
            <h3 className="text-sm font-bold text-slate-700 mb-2 flex items-center gap-2">
              <PurposeIcon className="w-4 h-4" />
              Назначение
            </h3>
            <p className="text-slate-800">
              {invoice.purposeType === 'building' && invoice.purposeBuildingIds.length > 0 && (
                <>Дом ({invoice.purposeBuildingIds.length} шт.)</>
              )}
              {invoice.purposeType === 'district' && invoice.purposeDistrictIds.length > 0 && (
                <>Участок ({invoice.purposeDistrictIds.length} шт.)</>
              )}
              {['legal', 'office', 'hr'].includes(invoice.purposeType) && (
                <>{invoice.purposeType === 'legal' ? 'Юристы' : invoice.purposeType === 'office' ? 'Офис' : 'HR'}</>
              )}
              {invoice.purposeType === 'event' && (invoice.purposeDescription || 'Мероприятие')}
              {invoice.purposeType === 'other' && invoice.purposeDescription}
            </p>
          </div>

          {/* Формат оплаты */}
          <div>
            <h3 className="text-sm font-bold text-slate-700 mb-2 flex items-center gap-2">
              <Calculator className="w-4 h-4" />
              Формат оплаты
            </h3>
            <p className="text-slate-800">
              {invoice.paymentFormat === 'prepayment' && 'Предоплата'}
              {invoice.paymentFormat === 'postpayment' && 'Постоплата'}
              {invoice.paymentFormat === 'advance' && 'Аванс'}
            </p>
          </div>

          {/* Подрядчик */}
          <div>
            <h3 className="text-sm font-bold text-slate-700 mb-2">Подрядчик</h3>
            <p className="text-slate-800 font-medium">{invoice.contractorName}</p>
            {invoice.contractorInn && (
              <p className="text-sm text-slate-500">ИНН: {invoice.contractorInn}</p>
            )}
          </div>

          {/* Сумма */}
          <div>
            <h3 className="text-sm font-bold text-slate-700 mb-2">Сумма</h3>
            <p className="text-2xl font-black text-slate-900">
              {invoice.totalAmount.toLocaleString('ru-RU', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ₽
            </p>
          </div>

          {/* Услуги или ТМЦ */}
          <div className="md:col-span-2">
            <h3 className="text-sm font-bold text-slate-700 mb-2">
              {invoice.itemType === 'service' ? 'Услуги' : 'ТМЦ (товарно-материальные ценности)'}
            </h3>
            
            {invoice.itemType === 'service' && invoice.serviceItems && invoice.serviceItems.length > 0 ? (
              <div className="space-y-2">
                {invoice.serviceItems.map((item, index) => (
                  <div key={index} className="flex justify-between items-center p-2 bg-slate-50 rounded-lg">
                    <span className="text-slate-800 font-medium">{item.name}</span>
                    <span className="text-slate-900 font-bold">
                      {item.amount.toLocaleString('ru-RU', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ₽
                    </span>
                  </div>
                ))}
              </div>
            ) : invoice.itemType === 'materials' && invoice.materialItems && invoice.materialItems.length > 0 ? (
              <div className="space-y-2">
                {invoice.materialItems.map((item, index) => (
                  <div key={index} className="p-2 bg-slate-50 rounded-lg">
                    <div className="flex justify-between items-center mb-1">
                      <span className="text-slate-800 font-medium">{item.name}</span>
                      <span className="text-slate-900 font-bold">
                        {item.amount.toLocaleString('ru-RU', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ₽
                      </span>
                    </div>
                    <div className="text-xs text-slate-500">
                      {item.quantity} {item.unit} × {item.pricePerUnit.toLocaleString('ru-RU', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ₽
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <p className="text-slate-800">{invoice.serviceDescription || 'Нет данных'}</p>
            )}
          </div>

        </div>

        {/* Даты */}
        <div className="mt-6 pt-6 border-t border-slate-200 grid grid-cols-1 md:grid-cols-3 gap-4">
          {invoice.scheduledDate && (
            <div>
              <p className="text-xs text-slate-500 mb-1">Дата в графике</p>
              <p className="text-sm font-medium text-slate-800">
                {new Date(invoice.scheduledDate).toLocaleDateString('ru-RU')}
              </p>
            </div>
          )}
          {invoice.paymentDate && (
            <div>
              <p className="text-xs text-slate-500 mb-1">Дата оплаты</p>
              <p className="text-sm font-medium text-slate-800">
                {new Date(invoice.paymentDate).toLocaleDateString('ru-RU')}
              </p>
            </div>
          )}
          {invoice.status === 'paid' && invoice.paymentRef && (
            <div>
              <p className="text-xs text-slate-500 mb-1">Номер платежки</p>
              <p className="text-sm font-medium text-slate-800">{invoice.paymentRef}</p>
            </div>
          )}
          {invoice.status === 'paid' && invoice.isCash && (
            <div>
              <p className="text-xs text-slate-500 mb-1">Способ оплаты</p>
              <p className="text-sm font-medium text-amber-700 flex items-center gap-1">
                <Banknote className="w-4 h-4" /> Оплата наличными
              </p>
            </div>
          )}
          {invoice.isCompleted && (
            <div>
              <p className="text-xs text-slate-500 mb-1">Статус выполнения</p>
              <p className="text-sm font-medium text-emerald-600 flex items-center gap-1">
                <CheckCircle2 className="w-4 h-4" />
                Выполнено
              </p>
            </div>
          )}
          {(invoice.paymentFormat === 'prepayment' || invoice.paymentFormat === 'advance') && (
            <div>
              <p className="text-xs text-slate-500 mb-1">Закрывающие документы</p>
              <p className="text-sm font-medium text-slate-800">
                {invoice.closingDocsReceived ? 'Получены' : 'Не получены'}
              </p>
            </div>
          )}
        </div>

        {/* Загруженные файлы (физические счета) */}
        {invoice.fileUrls && invoice.fileUrls.length > 0 && (
          <div className="mt-6 pt-6 border-t border-slate-200">
            <h3 className="text-sm font-bold text-slate-700 mb-4 flex items-center gap-2">
              <Paperclip className="w-4 h-4" />
              Физические счета
            </h3>
            <div className="space-y-2">
              {invoice.fileUrls.map((fileUrl, index) => {
                // fileUrl может быть строкой или объектом с информацией о файле
                const fileInfo = typeof fileUrl === 'string' 
                  ? { url: fileUrl, filename: fileUrl.split('/').pop() || 'Файл' }
                  : fileUrl;
                
                return (
                  <div key={index} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg border border-slate-200">
                    <div className="flex items-center gap-2 flex-1 min-w-0">
                      <FileText className="w-4 h-4 text-slate-500 flex-shrink-0" />
                      <span className="text-sm text-slate-700 truncate" title={fileInfo.filename || fileInfo.url}>
                        {fileInfo.filename || fileInfo.url}
                      </span>
                      {fileInfo.size && (
                        <span className="text-xs text-slate-500 flex-shrink-0">
                          ({(fileInfo.size / 1024).toFixed(1)} KB)
                        </span>
                      )}
                    </div>
                    <a
                      href={fileInfo.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="flex items-center gap-1 px-3 py-1.5 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors text-sm font-medium"
                    >
                      <Download className="w-4 h-4" />
                      Скачать
                    </a>
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {/* Файлы закрывающих документов (сканы/фото) */}
        {invoice.closingDocsFiles && invoice.closingDocsFiles.length > 0 && (
          <div className="mt-6 pt-6 border-t border-slate-200">
            <h3 className="text-sm font-bold text-slate-700 mb-4 flex items-center gap-2">
              <Paperclip className="w-4 h-4" />
              Закрывающие документы
            </h3>
            <div className="space-y-2">
              {invoice.closingDocsFiles.map((file: any, index: number) => {
                const fileInfo = file || {};
                return (
                  <div key={index} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg border border-slate-200">
                    <div className="flex items-center gap-2 flex-1 min-w-0">
                      <FileText className="w-4 h-4 text-slate-500 flex-shrink-0" />
                      <span className="text-sm text-slate-700 truncate" title={fileInfo.filename || fileInfo.url}>
                        {fileInfo.filename || fileInfo.url || 'Файл'}
                      </span>
                      {fileInfo.size && (
                        <span className="text-xs text-slate-500 flex-shrink-0">
                          ({(fileInfo.size / 1024).toFixed(1)} KB)
                        </span>
                      )}
                    </div>
                    {fileInfo.url && (
                      <a
                        href={fileInfo.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="flex items-center gap-1 px-3 py-1.5 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors text-sm font-medium"
                      >
                        <Download className="w-4 h-4" />
                        Скачать
                      </a>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {/* Примечания */}
        {invoice.notes && (
          <div className="mt-6 pt-6 border-t border-slate-200">
            <h3 className="text-sm font-bold text-slate-700 mb-2">Примечания</h3>
            <p className="text-slate-800">{invoice.notes}</p>
          </div>
        )}

        {/* История согласований */}
        {invoice.approvalHistory && invoice.approvalHistory.length > 0 && (
          <div className="mt-6 pt-6 border-t border-slate-200">
            <h3 className="text-sm font-bold text-slate-700 mb-4 flex items-center gap-2">
              <History className="w-4 h-4" />
              История согласований
            </h3>
            <div className="space-y-3">
              {invoice.approvalHistory.map((entry, index) => (
                <div key={index} className="flex items-start gap-3 p-3 bg-slate-50 rounded-lg">
                  <div className={`p-1.5 rounded ${
                    entry.action === 'approve' ? 'bg-emerald-100 text-emerald-600' :
                    entry.action === 'reject' ? 'bg-red-100 text-red-600' :
                    'bg-amber-100 text-amber-600'
                  }`}>
                    {entry.action === 'approve' ? (
                      <Check className="w-4 h-4" />
                    ) : entry.action === 'reject' ? (
                      <X className="w-4 h-4" />
                    ) : (
                      <Clock className="w-4 h-4" />
                    )}
                  </div>
                  <div className="flex-1">
                    <p className="text-sm font-medium text-slate-800">
                      {entry.action === 'approve' ? 'Согласовано' : 
                       entry.action === 'reject' ? 'Отклонено' : 'На доработку'}
                    </p>
                    <p className="text-xs text-slate-500">
                      {entry.userRole} • {new Date(entry.date).toLocaleString('ru-RU')}
                    </p>
                    {entry.comment && (
                      <p className="text-sm text-slate-700 mt-1">{entry.comment}</p>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Причина отклонения */}
        {invoice.status === 'rejected' && invoice.rejectionReason && (
          <div className="mt-6 pt-6 border-t border-slate-200">
            <h3 className="text-sm font-bold text-red-700 mb-2">Причина отклонения</h3>
            <p className="text-red-600">{invoice.rejectionReason}</p>
          </div>
        )}

        {/* Причина отмены */}
        {invoice.status === 'cancelled' && invoice.cancelReason && (
          <div className="mt-6 pt-6 border-t border-slate-200">
            <h3 className="text-sm font-bold text-slate-700 mb-2">Причина отмены</h3>
            <p className="text-slate-600">{invoice.cancelReason}</p>
          </div>
        )}
      </div>

      {/* Действия */}
      <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
        <h3 className="text-sm font-bold text-slate-700 mb-4">Действия</h3>
        
        {canApprove() && (
          <div className="space-y-4 mb-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-2">Комментарий (необязательно)</label>
              <textarea
                value={approvalComment}
                onChange={(e) => setApprovalComment(e.target.value)}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
                rows={2}
                placeholder="Добавьте комментарий..."
              />
            </div>
            <div className="flex gap-3">
              <button
                onClick={handleApprove}
                disabled={loading}
                className="flex-1 px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 disabled:bg-slate-300 disabled:cursor-not-allowed flex items-center justify-center gap-2"
              >
                <Check className="w-4 h-4" />
                Согласовать
              </button>
              <button
                onClick={() => {
                  const reason = prompt('Укажите причину отклонения:');
                  if (reason) {
                    setRejectionReason(reason);
                    setTimeout(() => handleReject(), 100);
                  }
                }}
                disabled={loading}
                className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:bg-slate-300 disabled:cursor-not-allowed flex items-center justify-center gap-2"
              >
                <X className="w-4 h-4" />
                Отклонить
              </button>
            </div>
          </div>
        )}

        {canSchedule() && (
          <div className="space-y-4 mb-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-2">Дата в графике платежей *</label>
              <input
                type="date"
                value={scheduledDate}
                onChange={(e) => setScheduledDate(e.target.value)}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
              />
            </div>
            <button
              onClick={handleSchedule}
              disabled={loading || !scheduledDate}
              className="w-full px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:bg-slate-300 disabled:cursor-not-allowed flex items-center justify-center gap-2"
            >
              <Calendar className="w-4 h-4" />
              Поставить в график платежей
            </button>
          </div>
        )}

        {invoice.status === 'scheduled' && (
          <div className="space-y-2 mb-4">
            <button
              onClick={() => setShowPayModal('default')}
              disabled={loading}
              className="w-full px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 disabled:bg-slate-300 disabled:cursor-not-allowed flex items-center justify-center gap-2"
            >
              <Wallet className="w-4 h-4" />
              Оплатить
            </button>
            <button
              onClick={() => setShowPayModal('cash')}
              disabled={loading}
              className="w-full px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 disabled:bg-slate-300 disabled:cursor-not-allowed flex items-center justify-center gap-2"
            >
              <Banknote className="w-4 h-4" />
              Оплата наличкой
            </button>
          </div>
        )}

        {canMarkCompleted() && (
          <button
            onClick={handleMarkCompleted}
            disabled={loading}
            className="w-full px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:bg-slate-300 disabled:cursor-not-allowed flex items-center justify-center gap-2"
          >
            <CheckCircle2 className="w-4 h-4" />
            {invoice.itemType === 'materials' ? 'Отметить полученным (ТМЦ)' : 'Отметить выполненным'}
          </button>
        )}

        {(invoice.paymentFormat === 'prepayment' || invoice.paymentFormat === 'advance') &&
          invoice.isCompleted && (
          <div className="mt-4 space-y-3">
            {!invoice.closingDocsReceived && (
              <button
                onClick={handleClosingDocsReceived}
                disabled={closingDocsUpdating}
                className="w-full px-4 py-2 bg-sky-600 text-white rounded-lg hover:bg-sky-700 disabled:bg-slate-300 disabled:cursor-not-allowed flex items-center justify-center gap-2"
              >
                <Check className="w-4 h-4" />
                Подтвердить получение закрывающих документов
              </button>
            )}

            <div className="flex flex-col sm:flex-row gap-2 items-stretch sm:items-center">
              <input
                ref={closingDocsFileInputRef}
                type="file"
                className="hidden"
                accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.webp,.txt,.zip,.rar"
                onChange={handleClosingDocsFileChange}
              />
              <button
                type="button"
                onClick={() => closingDocsFileInputRef.current?.click()}
                disabled={closingDocsUploading}
                className="flex-1 px-4 py-2 border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 disabled:bg-slate-100 disabled:text-slate-400 flex items-center justify-center gap-2 text-sm"
              >
                <Paperclip className="w-4 h-4" />
                {closingDocsUploading ? 'Загрузка файла...' : 'Прикрепить скан/фото закрывающих'}
              </button>
            </div>
          </div>
        )}
      </div>

      {showPayModal !== null && (
        <PaymentStatusModal
          action="paid"
          invoiceLabel={`${invoice.contractorName} — ${invoice.totalAmount.toLocaleString('ru-RU')} ₽`}
          defaultIsCash={showPayModal === 'cash'}
          onConfirm={handleMarkPaid}
          onCancel={() => setShowPayModal(null)}
        />
      )}
    </div>
  );
};