import React from 'react';
import { FileText, Receipt, CreditCard, Upload, FolderOpen, Users } from 'lucide-react';

interface ReportType {
  id: string;
  name: string;
  description: string;
  icon: React.ReactNode;
  color: string;
  bgColor: string;
  borderColor: string;
  reportType: 'salary' | 'balance_sheet_20' | 'balance_sheet_76' | 'balance_sheet' | 'bank_statement' | 'debtors';
}

interface ReportTypesGridProps {
  onReportTypeClick: (reportType: ReportType) => void;
  onViewReportsClick?: () => void;
  totalReportsCount?: number;
}

const reportTypes: ReportType[] = [
  {
    id: 'salary',
    name: 'Ведомость ЗП',
    description: 'Загрузка ведомости заработной платы из 1С',
    icon: <FileText className="w-8 h-8" />,
    color: 'text-purple-700',
    bgColor: 'bg-purple-50',
    borderColor: 'border-purple-200',
    reportType: 'salary'
  },
  {
    id: 'balance_sheet_20',
    name: 'Оборотно-сальдовая счет 20',
    description: 'Загрузка оборотно-сальдовой ведомости по счету 20',
    icon: <Receipt className="w-8 h-8" />,
    color: 'text-blue-700',
    bgColor: 'bg-blue-50',
    borderColor: 'border-blue-200',
    reportType: 'balance_sheet_20'
  },
  {
    id: 'balance_sheet_76',
    name: 'Оборотно-сальдовая счет 76 субконто ЛС',
    description: 'Загрузка оборотно-сальдовой ведомости по счету 76',
    icon: <Receipt className="w-8 h-8" />,
    color: 'text-indigo-700',
    bgColor: 'bg-indigo-50',
    borderColor: 'border-indigo-200',
    reportType: 'balance_sheet_76'
  },
  {
    id: 'balance_sheet',
    name: 'Оборотно-сальдовая ведомость',
    description: 'Загрузка общей оборотно-сальдовой ведомости',
    icon: <Receipt className="w-8 h-8" />,
    color: 'text-cyan-700',
    bgColor: 'bg-cyan-50',
    borderColor: 'border-cyan-200',
    reportType: 'balance_sheet'
  },
  {
    id: 'debtors',
    name: 'Отчёт по должникам',
    description: 'Загрузка отчёта по задолженности (лицевые счета, долги)',
    icon: <Users className="w-8 h-8" />,
    color: 'text-red-700',
    bgColor: 'bg-red-50',
    borderColor: 'border-red-200',
    reportType: 'debtors'
  },
  {
    id: 'bank_statement',
    name: 'Выписка из банка',
    description: 'Загрузка банковской выписки',
    icon: <CreditCard className="w-8 h-8" />,
    color: 'text-emerald-700',
    bgColor: 'bg-emerald-50',
    borderColor: 'border-emerald-200',
    reportType: 'bank_statement'
  }
];

export const ReportTypesGrid: React.FC<ReportTypesGridProps> = ({ 
  onReportTypeClick,
  onViewReportsClick,
  totalReportsCount
}) => {
  return (
    <div className="space-y-6 animate-fade-in">
      {/* Кнопка просмотра загруженных отчетов */}
      {onViewReportsClick && (
        <div className="flex justify-end">
          <button
            onClick={onViewReportsClick}
            className="bg-slate-600 text-white px-6 py-3 rounded-xl shadow-lg shadow-slate-500/30 flex items-center gap-2 font-bold hover:bg-slate-700 transition-all active:scale-95"
          >
            <FolderOpen className="w-5 h-5" />
            Загруженные отчеты
            {totalReportsCount !== undefined && totalReportsCount > 0 && (
              <span className="bg-white/20 px-2 py-0.5 rounded-full text-xs">
                {totalReportsCount}
              </span>
            )}
          </button>
        </div>
      )}

      {/* Сетка типов отчетов для загрузки */}
      <div>
        <h3 className="text-lg font-bold text-slate-800 mb-4">
          Загрузка отчетов из 1С / Банка
        </h3>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {reportTypes.map((reportType) => (
            <button
              key={reportType.id}
              onClick={() => onReportTypeClick(reportType)}
              className={`${reportType.bgColor} ${reportType.borderColor} border-2 rounded-xl p-6 text-left hover:shadow-lg transition-all group`}
            >
              <div className="flex items-start justify-between mb-4">
                <div className={`${reportType.color}`}>
                  {reportType.icon}
                </div>
                <Upload className={`w-5 h-5 ${reportType.color} opacity-0 group-hover:opacity-100 transition-opacity`} />
              </div>
              
              <h4 className={`font-bold text-lg mb-2 ${reportType.color}`}>
                {reportType.name}
              </h4>
              
              <p className="text-sm text-slate-600">
                {reportType.description}
              </p>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};
