import React, { useState, useMemo } from 'react';
import { Card, Button, Badge, Input, Select, Modal } from '../../ui';
import { Table } from '../../ui';
import type { 
  AnalyticsReport, 
  ReportsTableProps, 
  ExportFormat,
  ReportType,
  CustomAction 
} from './types';

const REPORT_TYPE_LABELS: Record<ReportType, string> = {
  sales: 'Ventas',
  production: 'Producción',
  inventory: 'Inventario',
  financial: 'Financiero',
  customer: 'Clientes',
  performance: 'Rendimiento',
};

const STATUS_COLORS = {
  active: 'bg-green-100 text-green-800 border-green-200',
  inactive: 'bg-yellow-100 text-yellow-800 border-yellow-200',
  archived: 'bg-gray-100 text-gray-800 border-gray-200',
};

const STATUS_LABELS = {
  active: 'Activo',
  inactive: 'Inactivo',
  archived: 'Archivado',
};

export const ReportsTable: React.FC<ReportsTableProps> = ({
  reports = [],
  loading = false,
  error,
  selectedReports = [],
  onSelectionChange,
  onReportClick,
  onEditReport,
  onDeleteReport,
  onScheduleReport,
  onShareReport,
  onExportReport,
  filters = [],
  onFiltersChange,
  sortable = true,
  pagination,
  bulkActions = false,
  customActions = [],
  tableConfig,
}) => {
  const [searchTerm, setSearchTerm] = useState('');
  const [typeFilter, setTypeFilter] = useState<ReportType | 'all'>('all');
  const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'inactive' | 'archived'>('all');
  const [sortField, setSortField] = useState<keyof AnalyticsReport>('updated_at');
  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
  const [reportToDelete, setReportToDelete] = useState<string | null>(null);
  const [isScheduleModalOpen, setIsScheduleModalOpen] = useState(false);
  const [reportToSchedule, setReportToSchedule] = useState<AnalyticsReport | null>(null);
  const [isShareModalOpen, setIsShareModalOpen] = useState(false);
  const [reportToShare, setReportToShare] = useState<AnalyticsReport | null>(null);

  const filteredAndSortedReports = useMemo(() => {
    let filtered = reports.filter(report => {
      const matchesSearch = !searchTerm || 
        report.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        report.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
        report.category.toLowerCase().includes(searchTerm.toLowerCase());
      
      const matchesType = typeFilter === 'all' || report.type === typeFilter;
      const matchesStatus = statusFilter === 'all' || report.status === statusFilter;
      
      return matchesSearch && matchesType && matchesStatus;
    });

    if (sortable && sortField) {
      filtered.sort((a, b) => {
        const aVal = a[sortField];
        const bVal = b[sortField];
        
        if (aVal === null || aVal === undefined) return 1;
        if (bVal === null || bVal === undefined) return -1;
        
        let comparison = 0;
        if (typeof aVal === 'string' && typeof bVal === 'string') {
          comparison = aVal.localeCompare(bVal);
        } else if (typeof aVal === 'number' && typeof bVal === 'number') {
          comparison = aVal - bVal;
        } else {
          comparison = String(aVal).localeCompare(String(bVal));
        }
        
        return sortDirection === 'asc' ? comparison : -comparison;
      });
    }

    return filtered;
  }, [reports, searchTerm, typeFilter, statusFilter, sortField, sortDirection, sortable]);

  const handleSort = (field: keyof AnalyticsReport) => {
    if (sortField === field) {
      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
    } else {
      setSortField(field);
      setSortDirection('asc');
    }
  };

  const handleSelectAll = (checked: boolean) => {
    if (onSelectionChange) {
      onSelectionChange(checked ? filteredAndSortedReports.map(r => r.id) : []);
    }
  };

  const handleSelectReport = (reportId: string, checked: boolean) => {
    if (onSelectionChange) {
      if (checked) {
        onSelectionChange([...selectedReports, reportId]);
      } else {
        onSelectionChange(selectedReports.filter(id => id !== reportId));
      }
    }
  };

  const handleDeleteConfirm = () => {
    if (reportToDelete && onDeleteReport) {
      onDeleteReport(reportToDelete);
    }
    setIsDeleteModalOpen(false);
    setReportToDelete(null);
  };

  const handleBulkDelete = () => {
    if (selectedReports.length > 0 && onDeleteReport) {
      selectedReports.forEach(id => onDeleteReport(id));
      if (onSelectionChange) {
        onSelectionChange([]);
      }
    }
  };

  const renderActionButton = (report: AnalyticsReport, action: string) => {
    switch (action) {
      case 'view':
        return (
          <Button
            variant="ghost"
            size="sm"
            onClick={() => onReportClick?.(report)}
            title="Ver reporte"
          >
            👁️
          </Button>
        );
      case 'edit':
        return (
          <Button
            variant="ghost"
            size="sm"
            onClick={() => onEditReport?.(report)}
            title="Editar reporte"
          >
            ✏️
          </Button>
        );
      case 'schedule':
        return (
          <Button
            variant="ghost"
            size="sm"
            onClick={() => {
              setReportToSchedule(report);
              setIsScheduleModalOpen(true);
            }}
            title="Programar reporte"
          >
            📅
          </Button>
        );
      case 'share':
        return (
          <Button
            variant="ghost"
            size="sm"
            onClick={() => {
              setReportToShare(report);
              setIsShareModalOpen(true);
            }}
            title="Compartir reporte"
          >
            📤
          </Button>
        );
      case 'export':
        return (
          <div className="flex items-center gap-1">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => onExportReport?.(report, 'pdf')}
              title="Exportar como PDF"
            >
              📄
            </Button>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => onExportReport?.(report, 'excel')}
              title="Exportar como Excel"
            >
              📊
            </Button>
          </div>
        );
      case 'delete':
        return (
          <Button
            variant="ghost"
            size="sm"
            onClick={() => {
              setReportToDelete(report.id);
              setIsDeleteModalOpen(true);
            }}
            title="Eliminar reporte"
            className="text-red-600 hover:text-red-800"
          >
            🗑️
          </Button>
        );
      default:
        return null;
    }
  };

  const tableColumns = [
    {
      key: 'select',
      title: (
        <input
          type="checkbox"
          checked={selectedReports.length === filteredAndSortedReports.length && filteredAndSortedReports.length > 0}
          onChange={(e) => handleSelectAll(e.target.checked)}
          className="rounded"
        />
      ),
      render: (report: AnalyticsReport) => (
        <input
          type="checkbox"
          checked={selectedReports.includes(report.id)}
          onChange={(e) => handleSelectReport(report.id, e.target.checked)}
          className="rounded"
        />
      ),
      width: 50,
      visible: bulkActions,
    },
    {
      key: 'name',
      title: 'Nombre',
      sortable: true,
      render: (report: AnalyticsReport) => (
        <div>
          <button
            onClick={() => onReportClick?.(report)}
            className="font-medium text-blue-600 hover:text-blue-800 text-left"
          >
            {report.name}
          </button>
          {report.description && (
            <p className="text-sm text-gray-500 mt-1">{report.description}</p>
          )}
        </div>
      ),
      minWidth: 200,
    },
    {
      key: 'type',
      title: 'Tipo',
      sortable: true,
      render: (report: AnalyticsReport) => (
        <Badge className="bg-blue-100 text-blue-800">
          {REPORT_TYPE_LABELS[report.type]}
        </Badge>
      ),
      width: 120,
    },
    {
      key: 'category',
      title: 'Categoría',
      sortable: true,
      width: 120,
    },
    {
      key: 'status',
      title: 'Estado',
      sortable: true,
      render: (report: AnalyticsReport) => (
        <Badge className={STATUS_COLORS[report.status]}>
          {STATUS_LABELS[report.status]}
        </Badge>
      ),
      width: 100,
    },
    {
      key: 'last_run',
      title: 'Última ejecución',
      sortable: true,
      render: (report: AnalyticsReport) => (
        report.last_run 
          ? new Date(report.last_run).toLocaleDateString('es-ES')
          : '-'
      ),
      width: 140,
    },
    {
      key: 'next_run',
      title: 'Próxima ejecución',
      sortable: true,
      render: (report: AnalyticsReport) => (
        report.next_run 
          ? new Date(report.next_run).toLocaleDateString('es-ES')
          : '-'
      ),
      width: 140,
    },
    {
      key: 'updated_at',
      title: 'Actualizado',
      sortable: true,
      render: (report: AnalyticsReport) => (
        new Date(report.updated_at).toLocaleDateString('es-ES')
      ),
      width: 120,
    },
    {
      key: 'actions',
      title: 'Acciones',
      render: (report: AnalyticsReport) => (
        <div className="flex items-center gap-1">
          {renderActionButton(report, 'view')}
          {renderActionButton(report, 'edit')}
          {renderActionButton(report, 'schedule')}
          {renderActionButton(report, 'export')}
          {renderActionButton(report, 'delete')}
        </div>
      ),
      width: 200,
    },
  ].filter(col => col.visible !== false);

  if (error) {
    return (
      <Card className="p-6">
        <div className="text-center">
          <p className="text-red-600 font-medium">Error al cargar los reportes</p>
          <p className="text-sm text-gray-500 mt-1">{error}</p>
        </div>
      </Card>
    );
  }

  return (
    <>
      <Card className="overflow-hidden">
        {/* Filters and Actions */}
        <div className="p-4 border-b border-gray-200 bg-gray-50">
          <div className="flex flex-col lg:flex-row gap-4">
            {/* Search */}
            {(tableConfig?.showSearch !== false) && (
              <div className="flex-1">
                <Input
                  type="text"
                  placeholder="Buscar reportes..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="w-full"
                />
              </div>
            )}

            {/* Filters */}
            <div className="flex gap-2">
              <Select
                value={typeFilter}
                onChange={(e) => setTypeFilter(e.target.value as ReportType | 'all')}
                className="w-40"
              >
                <option value="all">Todos los tipos</option>
                {Object.entries(REPORT_TYPE_LABELS).map(([value, label]) => (
                  <option key={value} value={value}>{label}</option>
                ))}
              </Select>

              <Select
                value={statusFilter}
                onChange={(e) => setStatusFilter(e.target.value as any)}
                className="w-32"
              >
                <option value="all">Todos</option>
                <option value="active">Activos</option>
                <option value="inactive">Inactivos</option>
                <option value="archived">Archivados</option>
              </Select>
            </div>

            {/* Bulk Actions */}
            {bulkActions && selectedReports.length > 0 && (
              <div className="flex gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={handleBulkDelete}
                  className="text-red-600 border-red-300 hover:bg-red-50"
                >
                  Eliminar seleccionados ({selectedReports.length})
                </Button>
              </div>
            )}
          </div>
        </div>

        {/* Table */}
        <div className="overflow-x-auto">
          <Table
            columns={tableColumns}
            data={filteredAndSortedReports}
            loading={loading}
            sortable={sortable}
            onSort={handleSort}
            currentSort={{ field: sortField as string, direction: sortDirection }}
            emptyMessage="No se encontraron reportes"
            className="min-w-full"
          />
        </div>

        {/* Pagination */}
        {pagination && (
          <div className="p-4 border-t border-gray-200 bg-gray-50">
            <div className="flex items-center justify-between">
              <p className="text-sm text-gray-700">
                Mostrando {Math.min(pagination.pageSize * (pagination.current - 1) + 1, pagination.total)} - {Math.min(pagination.pageSize * pagination.current, pagination.total)} de {pagination.total} reportes
              </p>
              
              <div className="flex items-center gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => pagination.onChange(pagination.current - 1, pagination.pageSize)}
                  disabled={pagination.current <= 1}
                >
                  Anterior
                </Button>
                
                <span className="text-sm font-medium">
                  Página {pagination.current} de {Math.ceil(pagination.total / pagination.pageSize)}
                </span>
                
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => pagination.onChange(pagination.current + 1, pagination.pageSize)}
                  disabled={pagination.current >= Math.ceil(pagination.total / pagination.pageSize)}
                >
                  Siguiente
                </Button>
              </div>
            </div>
          </div>
        )}
      </Card>

      {/* Delete Confirmation Modal */}
      <Modal
        isOpen={isDeleteModalOpen}
        onClose={() => {
          setIsDeleteModalOpen(false);
          setReportToDelete(null);
        }}
        title="Confirmar eliminación"
      >
        <div className="space-y-4">
          <p>¿Estás seguro de que deseas eliminar este reporte? Esta acción no se puede deshacer.</p>
          
          <div className="flex justify-end gap-2">
            <Button
              variant="outline"
              onClick={() => {
                setIsDeleteModalOpen(false);
                setReportToDelete(null);
              }}
            >
              Cancelar
            </Button>
            <Button
              variant="danger"
              onClick={handleDeleteConfirm}
            >
              Eliminar
            </Button>
          </div>
        </div>
      </Modal>

      {/* Schedule Modal */}
      <Modal
        isOpen={isScheduleModalOpen}
        onClose={() => {
          setIsScheduleModalOpen(false);
          setReportToSchedule(null);
        }}
        title="Programar reporte"
      >
        <div className="space-y-4">
          <p>Configurar programación para: <strong>{reportToSchedule?.name}</strong></p>
          
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Frecuencia
            </label>
            <Select>
              <option value="daily">Diario</option>
              <option value="weekly">Semanal</option>
              <option value="monthly">Mensual</option>
              <option value="quarterly">Trimestral</option>
            </Select>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Hora de ejecución
            </label>
            <Input type="time" defaultValue="09:00" />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Destinatarios (emails separados por coma)
            </label>
            <Input
              type="text"
              placeholder="ejemplo@empresa.com, otro@empresa.com"
            />
          </div>
          
          <div className="flex justify-end gap-2">
            <Button
              variant="outline"
              onClick={() => {
                setIsScheduleModalOpen(false);
                setReportToSchedule(null);
              }}
            >
              Cancelar
            </Button>
            <Button
              variant="primary"
              onClick={() => {
                if (reportToSchedule && onScheduleReport) {
                  onScheduleReport(reportToSchedule);
                }
                setIsScheduleModalOpen(false);
                setReportToSchedule(null);
              }}
            >
              Programar
            </Button>
          </div>
        </div>
      </Modal>

      {/* Share Modal */}
      <Modal
        isOpen={isShareModalOpen}
        onClose={() => {
          setIsShareModalOpen(false);
          setReportToShare(null);
        }}
        title="Compartir reporte"
      >
        <div className="space-y-4">
          <p>Compartir: <strong>{reportToShare?.name}</strong></p>
          
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Generar enlace de acceso
            </label>
            <div className="flex gap-2">
              <Input
                type="text"
                value={`${window.location.origin}/reports/${reportToShare?.id}/shared`}
                readOnly
                className="flex-1"
              />
              <Button
                variant="outline"
                size="sm"
                onClick={() => {
                  navigator.clipboard.writeText(`${window.location.origin}/reports/${reportToShare?.id}/shared`);
                }}
              >
                Copiar
              </Button>
            </div>
          </div>

          <div className="flex items-center gap-2">
            <input type="checkbox" id="expire-link" />
            <label htmlFor="expire-link" className="text-sm">
              El enlace expira en 7 días
            </label>
          </div>

          <div className="flex items-center gap-2">
            <input type="checkbox" id="password-protect" />
            <label htmlFor="password-protect" className="text-sm">
              Proteger con contraseña
            </label>
          </div>
          
          <div className="flex justify-end gap-2">
            <Button
              variant="outline"
              onClick={() => {
                setIsShareModalOpen(false);
                setReportToShare(null);
              }}
            >
              Cancelar
            </Button>
            <Button
              variant="primary"
              onClick={() => {
                if (reportToShare && onShareReport) {
                  onShareReport(reportToShare);
                }
                setIsShareModalOpen(false);
                setReportToShare(null);
              }}
            >
              Generar enlace
            </Button>
          </div>
        </div>
      </Modal>
    </>
  );
};

export default ReportsTable;