import React, { useState, useEffect } from 'react';
import { FileText, Calendar, User, AlertCircle, CheckCircle2, XCircle, Loader2, ArrowRight } from 'lucide-react';
import { FinancialReport } from '../../types';
import { authFetch } from '../../services/apiClient';
import { readCache, saveCache } from '../../hooks/useCachedFetch';
import { REFRESH_EVENTS } from '../../constants/refreshEvents';

interface ReportsGridProps {
  onReportClick: (report: FinancialReport) => void;
  reportTypeFilter?: string;
  onBack?: () => void;
}

const reportTypeLabels: Record<string, string> = {
  debtors: 'Должники',
  balance_sheet: 'Оборотная сальдовая ведомость',
  balance_sheet_76: 'Лицевые счета (ОСВ 76)',
  other: 'Другие отчеты'
};

const reportTypeColors: Record<string, string> = {
  debtors: 'bg-red-50 border-red-200 text-red-700',
  balance_sheet: 'bg-blue-50 border-blue-200 text-blue-700',
  balance_sheet_76: 'bg-violet-50 border-violet-200 text-violet-700',
  other: 'bg-slate-50 border-slate-200 text-slate-700'
};

const CACHE_KEY = 'mkd_finance_reports_cache';

export const ReportsGrid: React.FC<ReportsGridProps> = ({ 
  onReportClick, 
  reportTypeFilter,
  onBack 
}) => {
  const [filterType, setFilterType] = useState<string | null>(reportTypeFilter || null);
  const cached = readCache<FinancialReport[]>(CACHE_KEY, []);
  const [reports, setReports] = useState<FinancialReport[]>(cached);
  const [loading, setLoading] = useState(cached.length === 0);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (reportTypeFilter) setFilterType(reportTypeFilter);
  }, [reportTypeFilter]);

  useEffect(() => {
    fetchReports();
  }, [filterType]);

  useEffect(() => {
    const onRefresh = () => fetchReports(false);
    window.addEventListener(REFRESH_EVENTS.financeReports, onRefresh);
    return () => window.removeEventListener(REFRESH_EVENTS.financeReports, onRefresh);
  }, []);

  useEffect(() => {
    const interval = setInterval(() => fetchReports(false), 10 * 1000);
    return () => clearInterval(interval);
  }, []);

  const fetchReports = async (showSpinner = true) => {
    try {
      const c = readCache<FinancialReport[]>(CACHE_KEY, []);
      if (showSpinner && c.length === 0) setLoading(true);
      setError(null);
      const url = filterType 
        ? `/api/finance/reports?reportType=${encodeURIComponent(filterType)}`
        : '/api/finance/reports';
      
      console.log('Загрузка отчетов:', url);
      const response = await authFetch(url);
      
      if (!response.ok) {
        const errorData = await response.json().catch(() => ({ error: 'Неизвестная ошибка' }));
        console.error('Ошибка ответа сервера:', response.status, errorData);
        throw new Error(errorData.error || `Ошибка ${response.status}: Не удалось загрузить отчеты`);
      }
      
      const data = await response.json();
      console.log('Получены отчеты:', data);
      
      // Преобразуем snake_case из API в camelCase для TypeScript
      const formattedReports: FinancialReport[] = data.map((r: any) => ({
        id: r.id,
        filename: r.filename,
        fileType: r.file_type,
        reportType: r.report_type,
        uploadedAt: r.uploaded_at,
        uploadedBy: r.uploaded_by,
        status: r.status,
        totalRows: r.total_rows,
        processedRows: r.processed_rows,
        errorRows: r.error_rows,
        mappingId: r.mapping_id
      }));
      setReports(formattedReports);
      saveCache(CACHE_KEY, formattedReports);
      setError(null);
    } catch (err: any) {
      console.error('Ошибка загрузки отчетов:', err);
      setError(err.message || 'Не удалось загрузить отчеты');
    } finally {
      setLoading(false);
    }
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'completed':
        return <CheckCircle2 className="w-5 h-5 text-emerald-600" />;
      case 'failed':
        return <XCircle className="w-5 h-5 text-red-600" />;
      case 'processing':
        return <Loader2 className="w-5 h-5 text-primary-600 animate-spin" />;
      default:
        return <AlertCircle className="w-5 h-5 text-amber-600" />;
    }
  };

  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('ru-RU', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  };

  if (loading) {
    return (
      <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-12 text-center">
        <Loader2 className="w-8 h-8 animate-spin text-primary-600 mx-auto mb-4" />
        <p className="text-slate-600">Загрузка отчетов...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="bg-white rounded-2xl border border-red-200 shadow-sm p-6">
        <div className="flex items-center gap-2 text-red-600">
          <AlertCircle className="w-5 h-5" />
          <p className="font-medium">Ошибка: {error}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6 animate-fade-in">
      {/* Заголовок и кнопка назад */}
      {(onBack || reportTypeFilter) && (
        <div className="flex items-center justify-between">
          <h3 className="text-lg font-bold text-slate-800">
            {reportTypeFilter ? reportTypeLabels[reportTypeFilter] : 'Загруженные отчеты'}
          </h3>
          {onBack && (
            <button
              onClick={onBack}
              className="text-primary-600 hover:text-primary-700 font-medium text-sm flex items-center gap-2"
            >
              ← Назад к типам отчетов
            </button>
          )}
        </div>
      )}

      {/* Фильтры */}
      {!reportTypeFilter && (
        <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-4">
          <div className="flex flex-wrap gap-2">
            <button
              onClick={() => setFilterType(null)}
              className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
                filterType === null
                  ? 'bg-primary-600 text-white'
                  : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
              }`}
            >
              Все отчеты
            </button>
            <button
              onClick={() => setFilterType('debtors')}
              className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
                filterType === 'debtors'
                  ? 'bg-primary-600 text-white'
                  : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
              }`}
            >
              Должники
            </button>
            <button
              onClick={() => setFilterType('balance_sheet')}
              className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
                filterType === 'balance_sheet'
                  ? 'bg-primary-600 text-white'
                  : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
              }`}
            >
              Оборотная сальдовая ведомость
            </button>
            <button
              onClick={() => setFilterType('balance_sheet_76')}
              className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
                filterType === 'balance_sheet_76'
                  ? 'bg-primary-600 text-white'
                  : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
              }`}
            >
              Лицевые счета (ОСВ 76)
            </button>
            <button
              onClick={() => setFilterType('other')}
              className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
                filterType === 'other'
                  ? 'bg-primary-600 text-white'
                  : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
              }`}
            >
              Другие
            </button>
          </div>
        </div>
      )}

      {/* Сетка отчетов */}
      {reports.length === 0 ? (
        <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-12 text-center">
          <FileText className="w-12 h-12 text-slate-400 mx-auto mb-4" />
          <p className="text-slate-600 font-medium mb-2">Нет загруженных отчетов</p>
          <p className="text-sm text-slate-500">
            Загрузите первый отчет на вкладке "Загрузить отчеты из 1С"
          </p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {reports.map((report) => (
            <button
              key={report.id}
              onClick={() => onReportClick(report)}
              className="bg-white rounded-xl border-2 border-slate-200 hover:border-primary-400 hover:shadow-lg transition-all p-5 text-left group"
            >
              <div className="flex items-start justify-between mb-3">
                <div className="flex items-center gap-2">
                  <FileText className="w-5 h-5 text-primary-600" />
                  <span className={`px-2 py-1 rounded text-xs font-bold ${
                    reportTypeColors[report.reportType || 'other']
                  }`}>
                    {reportTypeLabels[report.reportType || 'other']}
                  </span>
                </div>
                {getStatusIcon(report.status)}
              </div>

              <h4 className="font-bold text-slate-800 mb-2 line-clamp-2 group-hover:text-primary-600 transition-colors">
                {report.filename}
              </h4>

              <div className="space-y-2 text-xs text-slate-600 mb-4">
                <div className="flex items-center gap-2">
                  <Calendar className="w-4 h-4" />
                  <span>{formatDate(report.uploadedAt)}</span>
                </div>
                {report.uploadedBy && (
                  <div className="flex items-center gap-2">
                    <User className="w-4 h-4" />
                    <span>{report.uploadedBy}</span>
                  </div>
                )}
                {report.totalRows && (
                  <div>
                    <span className="font-medium">Строк:</span> {report.totalRows} | 
                    <span className="text-emerald-600 font-medium ml-1">Обработано:</span> {report.processedRows}
                    {report.errorRows > 0 && (
                      <span className="text-red-600 font-medium ml-1">Ошибок: {report.errorRows}</span>
                    )}
                  </div>
                )}
              </div>

              <div className="flex items-center gap-2 text-primary-600 font-medium text-sm group-hover:gap-3 transition-all">
                <span>Открыть</span>
                <ArrowRight className="w-4 h-4" />
              </div>
            </button>
          ))}
        </div>
      )}
    </div>
  );
};