import React from 'react';
import { Card } from 'react-bootstrap';
import { CheckCircle, Edit, Eye, FileText, Flame, PauseCircle, Zap } from 'lucide-react';
import styles from './AnexoProductoCard.module.css';

interface Props {
  anexo: any;
  onConsultar: (a: any) => void;
  onEditar: (a: any) => void;
  onActivar: (a: any, disparador?: HTMLElement) => void;
  onSuspender: (a: any, disparador?: HTMLElement) => void;
}

const AnexoProductoCard: React.FC<Props> = ({ anexo, onConsultar, onEditar, onActivar, onSuspender }) => {
  const nombre = anexo?.DesAnePro || '—';
  const producto = anexo?.producto?.DesPro || '—';
  const comercializadora = anexo?.producto?.comercializadora?.RazSocCom || '—';
  const activo = anexo?.EstAne === 1;

  return (
    <Card
      className={`${styles.tarjeta} shadow-sm border-0 card-3d`}
      role="button"
      tabIndex={0}
      onClick={() => onConsultar(anexo)}
      onKeyDown={(e) => {
        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onConsultar(anexo); }
      }}
      aria-label={`Consultar anexo ${nombre}`}
    >
      <Card.Header className={styles.cabecera}>
        <h3 className={styles.titulo}>
          <FileText size={14} className={styles.icono} aria-hidden="true" />
          <span>{nombre}</span>
        </h3>
        <span className={`badge ${activo ? 'bg-success' : 'bg-secondary'} ${styles.badgeEstado}`}>{activo ? 'Activo' : 'Inactivo'}</span>
      </Card.Header>
      <Card.Body className={styles.cuerpo}>
        <div className={styles.contenido}>
          <div className={styles.fila}>Producto: <strong>{producto}</strong></div>
          <div className={styles.fila}>Comercializadora: <strong>{comercializadora}</strong></div>
          <div className={styles.fila}>Tipo precio: <strong>{anexo?.TipPre || '—'}</strong></div>
          <div className={styles.badgesServicio}>
            {anexo?.SerEle === 1 && <span className="badge bg-warning text-dark"><Zap size={12} className="me-1" aria-hidden="true" />Eléctrico</span>}
            {anexo?.SerGas === 1 && <span className="badge bg-info text-dark"><Flame size={12} className="me-1" aria-hidden="true" />Gas</span>}
          </div>
        </div>
      </Card.Body>
      <Card.Footer className={styles.pie}>
        <button type="button" className="btn btn-sm btn-black" aria-label={`Ver anexo ${nombre}`} onClick={(e) => { e.stopPropagation(); onConsultar(anexo); }}><Eye size={14} aria-hidden="true" /></button>
        <button type="button" className="btn btn-sm btn-black" aria-label={`Editar anexo ${nombre}`} onClick={(e) => { e.stopPropagation(); onEditar(anexo); }}><Edit size={14} aria-hidden="true" /></button>
        <button type="button" className="btn btn-sm btn-black" aria-label={`Activar anexo ${nombre}`} disabled={activo} onClick={(e) => { e.stopPropagation(); onActivar(anexo, e.currentTarget); }}><CheckCircle size={14} aria-hidden="true" /></button>
        <button type="button" className="btn btn-sm btn-black" aria-label={`Suspender anexo ${nombre}`} disabled={!activo} onClick={(e) => { e.stopPropagation(); onSuspender(anexo, e.currentTarget); }}><PauseCircle size={14} aria-hidden="true" /></button>
      </Card.Footer>
    </Card>
  );
};

export default AnexoProductoCard;