import React, { useState } from 'react';
import { Card, Button, Badge, Collapse } from 'react-bootstrap';
import { FileText, FileImage, FileArchive, File, Clock, ChevronDown, ChevronRight, Trash2, Download } from 'lucide-react';
import { formatCalendarDateEs, isCalendarDateBeforeToday } from '../../../utils/serverCalendarDate';

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" />;
  }
}

interface DocumentoVersion {
  id: number;
  uuid: string;
  nombre_original: string;
  fecha_carga: string;
  vence: boolean;
  fecha_vencimiento?: string | null;
}

interface DocumentoCliente {
  id: number;
  uuid: string;
  nombre_original: string;
  fecha_carga: string;
  vence: boolean;
  fecha_vencimiento?: string | null;
  tipo_documento?: {
    DesTipDoc: string;
  };
  versiones?: DocumentoVersion[];
}

interface DocumentoCardProps {
  doc: DocumentoCliente;
  onDelete?: (uuid: string) => void;
}

const DocumentoCard: React.FC<DocumentoCardProps> = ({ doc, onDelete }) => {
  const [open, setOpen] = useState(false);
  const title = doc.tipo_documento?.DesTipDoc || 'Documento';

  return (
    <Card className="shadow-sm border-0 mb-2 w-100">
      <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(doc.nombre_original)}
            <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>{doc.nombre_original}</span>
                <span>•</span>
                <span>{doc.fecha_carga ? formatCalendarDateEs(doc.fecha_carga) : ''}</span>
              </div>
              {doc.vence && (
                 <div className="mt-1">
                   <Badge bg={
                     doc.fecha_vencimiento && isCalendarDateBeforeToday(doc.fecha_vencimiento) ? 'danger' : 'warning'
                   }>
                     {doc.fecha_vencimiento && isCalendarDateBeforeToday(doc.fecha_vencimiento) ? 'Vencido' : 'Vence'}: {doc.fecha_vencimiento ? formatCalendarDateEs(doc.fecha_vencimiento) : 'Sin fecha'}
                   </Badge>
                 </div>
              )}
            </div>
            
            <div className="d-flex align-items-center gap-2">
               <Button
                variant="outline-primary"
                size="sm"
                href={`/clientes/documento/descargar/${doc.uuid}`}
                target="_blank"
                rel="noopener noreferrer"
                className="d-flex align-items-center gap-1"
              >
                <Download size={14} />
              </Button>
              {onDelete && (
                <Button
                  variant="outline-danger"
                  size="sm"
                  onClick={() => onDelete(doc.uuid)}
                  title="Borrar documento"
                  className="d-flex align-items-center gap-1"
                >
                  <Trash2 size={14} />
                </Button>
              )}
              {doc.versiones && doc.versiones.length > 0 && (
                <Button 
                    variant="link" 
                    className="p-0 text-muted ms-2" 
                    onClick={() => setOpen(!open)}
                    aria-controls={`versiones-${doc.id}`}
                    aria-expanded={open}
                >
                  {open ? <ChevronDown size={20} /> : <ChevronRight size={20} />}
                </Button>
              )}
            </div>
          </div>
        </div>

        {/* Versiones Anteriores (Tree/Accordion) */}
        {doc.versiones && doc.versiones.length > 0 && (
          <Collapse in={open}>
            <div id={`versiones-${doc.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} /> Historial de versiones 
               </h6>
               <div className="d-flex flex-column gap-2">
                 {doc.versiones.map((ver) => (
                    <div key={ver.id} 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={ver.nombre_original}>{ver.nombre_original}</span>
                         <div className="small text-muted d-flex align-items-center gap-2">
                           <span>{ver.fecha_carga ? new Date(ver.fecha_carga).toLocaleString() : ''}</span>
                           {ver.vence && (
                              <Badge bg="secondary" className="fw-normal" style={{fontSize: '0.65rem'}}>
                                Vencimiento: {ver.fecha_vencimiento ? formatCalendarDateEs(ver.fecha_vencimiento) : 'N/A'}
                              </Badge>
                           )}
                         </div>
                      </div>
                      <Button
                        variant="light"
                        size="sm"
                        className="btn-sm px-2 text-primary bg-transparent text-nowrap d-flex align-items-center gap-1"
                        href={`/clientes/documento/descargar/${ver.uuid}`}
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <Download size={12} /> Descargar
                      </Button>
                      {onDelete && (
                        <Button
                          variant="light"
                          size="sm"
                          className="btn-sm px-2 text-danger bg-transparent text-nowrap ms-1 d-flex align-items-center gap-1"
                          onClick={() => onDelete(ver.uuid)}
                          title="Borrar versión"
                        >
                          <Trash2 size={12} /> Borrar
                        </Button>
                      )}
                    </div>
                 ))}
               </div>
            </div>
          </Collapse>
        )}
      </Card.Body>
    </Card>
  );
};

export default DocumentoCard;