import React, { useState, useMemo } from 'react';
import { Card, Badge, Button, Collapse } from 'react-bootstrap';
import { Download, Eye, FileText, Send, Trash2, FileArchive, FileImage, File, Clock, ChevronDown, ChevronRight } from 'lucide-react';
import { EmptyState } from './EmptyState';

/**
 * Props para el componente DocumentosTramitadosTable
 */
interface DocumentosTramitadosTableProps {
  /** Array de documentos tramitados (se espera la estructura de documentos_propuestas) */
  documentos: any[];
  /** Callback para descargar un documento (se le pasará la Ruta si existe, si no el id) */
  onDescargar: (documentoIdOrPath: string) => void;
  /** Callback opcional para enviar/asociar un documento a contratos en comercializadora */
  onEnviarComercializadora?: (documento: any) => void;
  /** Callback opcional para visualizar un documento (se le pasará la Ruta si existe, si no el id) */
  onVisualizar?: (documentoIdOrPath: string) => void;
  /** Callback opcional para borrar un documento (se le pasará el id y opcionalmente el nombre del archivo) */
  onBorrar?: (documentoId: number | string, nombreArchivo?: string) => void;
  /** Indica si está cargando */
  isLoading?: boolean;
}

function getIconByExtension(filename: string | undefined) {
  const ext = filename ? filename.split('.').pop()?.toLowerCase() : '';
  switch (ext) {
    case 'pdf': return <FileArchive size={24} color="#e63946" />; 
    case 'jpg':
    case 'jpeg':
    case 'png':
    case 'gif': return <FileImage size={24} color="#457b9d" />;
    case 'doc':
    case 'docx': return <FileText size={24} color="#1d3557" />; 
    default: return <File size={24} color="#6c757d" />;
  }
}

const formatearFecha = (fecha: string | Date): string => {
  if (!fecha) return 'N/A';

  const date = typeof fecha === 'string' ? new Date(fecha) : fecha;
  return new Intl.DateTimeFormat('es-ES', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  }).format(date);
};

// Helpers específicos para la estructura `documentos_propuestas`
const getId = (doc: any) => doc.id ?? doc.Id ?? String(Math.random());
const getNombreArchivo = (doc: any) => doc.NombreArchivo ?? doc.nombre ?? '—';
const getNombrePlantilla = (doc: any) => doc.NombrePlantilla ?? doc.Titulo ?? '—';
const getProducto = (doc: any) => doc.Producto ?? 'General';
const getTarifa = (doc: any) => doc.Tarifa ?? 'General';
const getTipoEnergia = (doc: any) => doc.TipoEnergia ?? 'General';
const getRuta = (doc: any) => doc.Ruta ?? doc.ruta ?? doc.path ?? '';
const getFecha = (doc: any) => doc.created_at ?? doc.updated_at ?? doc.fecha ?? 0;

interface DocumentoGroupCardProps {
  grupoKey: string;
  documentos: any[];
  onDescargar: (id: string) => void;
  onVisualizar?: (id: string) => void;
  onBorrar?: (id: string | number, name: string) => void;
  onEnviarComercializadora?: (doc: any) => void;
}

const DocumentoGroupCard: React.FC<DocumentoGroupCardProps> = ({
  grupoKey,
  documentos,
  onDescargar,
  onVisualizar,
  onBorrar,
  onEnviarComercializadora
}) => {
  const [open, setOpen] = useState(false);
  const currentDoc = documentos[0];
  const versiones = documentos.slice(1);
  const title = getNombrePlantilla(currentDoc);
  const nombreArchivo = getNombreArchivo(currentDoc);
  const id = getId(currentDoc);
  const ruta = getRuta(currentDoc);

  return (
    <Card className="shadow-sm border-0 mb-3 w-100">
      <Card.Header className="bg-light border-bottom border-secondary-subtle py-2 d-flex justify-content-between align-items-center">
        <div className="fw-bold text-dark small">
          <span className="text-muted">Grupo:</span> {grupoKey}
        </div>
        <Badge bg="secondary" className="fw-normal">{documentos.length} documento{documentos.length !== 1 ? 's' : ''}</Badge>
      </Card.Header>
      <Card.Body className="d-flex flex-column p-3">
        {/* Documento Principal */}
        <div className="d-flex justify-content-between align-items-center">
          <div className="d-flex align-items-center gap-3 w-100">
            {getIconByExtension(nombreArchivo)}
            <div className="flex-grow-1 overflow-hidden">
              <div className="fw-semibold text-truncate" title={title}>{title}</div>
              <div className="small text-muted d-flex align-items-center flex-wrap gap-2 mt-1">
                <span>{nombreArchivo}</span>
                <span>•</span>
                <span>{formatearFecha(getFecha(currentDoc))}</span>
              </div>
            </div>
            
            <div className="d-flex align-items-center gap-2">
              {onVisualizar && (
                <Button
                  variant="outline-primary"
                  size="sm"
                  onClick={() => onVisualizar(ruta || String(id))}
                  title="Visualizar documento"
                  className="d-flex align-items-center gap-1"
                >
                  <Eye size={14} />
                </Button>
              )}
              <Button
                variant="outline-success"
                size="sm"
                onClick={() => onDescargar(ruta || String(id))}
                title="Descargar documento"
                className="d-flex align-items-center gap-1"
              >
                <Download size={14} />
              </Button>
              {onEnviarComercializadora && (
                <Button
                  variant="outline-secondary"
                  size="sm"
                  onClick={() => onEnviarComercializadora(currentDoc)}
                  title="Enviar a Comercializadora"
                  className="d-flex align-items-center gap-1"
                >
                  <Send size={14} />
                </Button>
              )}
              {onBorrar && (
                <Button
                  variant="outline-danger"
                  size="sm"
                  onClick={() => onBorrar(id, nombreArchivo)}
                  title="Eliminar documento"
                  className="d-flex align-items-center gap-1"
                >
                  <Trash2 size={14} />
                </Button>
              )}
              {versiones.length > 0 && (
                <Button 
                    variant="link" 
                    className="p-0 text-muted ms-2" 
                    onClick={() => setOpen(!open)}
                    aria-controls={`versiones-${id}`}
                    aria-expanded={open}
                >
                  {open ? <ChevronDown size={20} /> : <ChevronRight size={20} />}
                </Button>
              )}
            </div>
          </div>
        </div>

        {/* Versiones Anteriores (Tree/Accordion) */}
        {versiones.length > 0 && (
          <Collapse in={open}>
            <div id={`versiones-${id}`} className="mt-3 pt-3 border-top border-secondary-subtle ps-4">
               <h6 className="text-muted small fw-bold mb-2 d-flex align-items-center gap-1">
                 <Clock size={14} /> Versiones anteriores 
               </h6>
               <div className="d-flex flex-column gap-2">
                 {versiones.map((ver) => {
                    const verId = getId(ver);
                    const verRuta = getRuta(ver);
                    const verName = getNombreArchivo(ver);
                    return (
                      <div key={verId} className="d-flex justify-content-between align-items-center border-start border-3 ps-2 py-1" style={{ borderColor: '#dee2e6' }}>
                        <div className="d-flex flex-column overflow-hidden pe-3">
                           <span className="small text-dark text-truncate" title={verName}>{verName}</span>
                           <div className="small text-muted d-flex align-items-center gap-2">
                             <span>{formatearFecha(getFecha(ver))}</span>
                           </div>
                        </div>
                        
                        <div className="d-flex align-items-center gap-1">
                          {onVisualizar && (
                            <Button
                              variant="light"
                              size="sm"
                              className="btn-sm px-2 text-primary bg-transparent text-nowrap d-flex align-items-center gap-1"
                              onClick={() => onVisualizar(verRuta || String(verId))}
                              title="Visualizar versión"
                            >
                              <Eye size={12} />
                            </Button>
                          )}
                          <Button
                            variant="light"
                            size="sm"
                            className="btn-sm px-2 text-success bg-transparent text-nowrap d-flex align-items-center gap-1"
                            onClick={() => onDescargar(verRuta || String(verId))}
                            title="Descargar versión"
                          >
                            <Download size={12} /> Descargar
                          </Button>
                          {onEnviarComercializadora && (
                            <Button
                              variant="light"
                              size="sm"
                              className="btn-sm px-2 text-secondary bg-transparent text-nowrap d-flex align-items-center gap-1"
                              onClick={() => onEnviarComercializadora(ver)}
                              title="Enviar versión a Comercializadora"
                            >
                              <Send size={12} /> Enviar
                            </Button>
                          )}
                          {onBorrar && (
                            <Button
                              variant="light"
                              size="sm"
                              className="btn-sm px-2 text-danger bg-transparent text-nowrap d-flex align-items-center gap-1"
                              onClick={() => onBorrar(verId, verName)}
                              title="Borrar versión"
                            >
                              <Trash2 size={12} /> Borrar
                            </Button>
                          )}
                        </div>
                      </div>
                    );
                 })}
               </div>
            </div>
          </Collapse>
        )}
      </Card.Body>
    </Card>
  );
};

/**
 * Componente para mostrar la lista de documentos tramitados, agrupados y con versionamiento
 */
export const DocumentosTramitadosTable: React.FC<DocumentosTramitadosTableProps> = ({
  documentos,
  onDescargar,
  onEnviarComercializadora,
  onVisualizar,
  onBorrar,
  isLoading = false,
}) => {
  // Si no hay documentos, mostrar estado vacío
  if (!documentos || documentos.length === 0) {
    return <EmptyState type="documentos" />;
  }

  // Agrupación de documentos
  const groupedDocs = useMemo(() => {
    const groups: Record<string, any[]> = {};
    documentos.forEach(doc => {
        const prod = getProducto(doc);
        const tar = getTarifa(doc);
        const ener = getTipoEnergia(doc);
        const key = `${prod} | ${tar} | ${ener}`;
        if (!groups[key]) groups[key] = [];
        groups[key].push(doc);
    });

    // Ordenar cada grupo por fecha descendente
    Object.keys(groups).forEach(key => {
        groups[key].sort((a, b) => {
            const dateA = new Date(getFecha(a)).getTime();
            const dateB = new Date(getFecha(b)).getTime();
            return dateB - dateA;
        });
    });
    return groups;
  }, [documentos]);

  return (
    <div className="d-flex flex-column">
      {Object.entries(groupedDocs).map(([key, docs]) => (
        <DocumentoGroupCard 
          key={key}
          grupoKey={key}
          documentos={docs}
          onDescargar={onDescargar}
          onVisualizar={onVisualizar}
          onBorrar={onBorrar}
          onEnviarComercializadora={onEnviarComercializadora}
        />
      ))}
    </div>
  );
};