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

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

const ProductoCard: React.FC<Props> = ({ producto, onConsultar, onEditar, onActivar, onSuspender }) => {
  const nombre = producto?.DesPro || '—';
  const codigo = producto?.CodPro || '—';
  const comercializadora = producto?.comercializadora?.RazSocCom || '—';
  const activo = producto?.EstPro === 1;

  return (
    <Card
      className={`${styles.tarjeta} shadow-sm border-0 card-3d`}
      role="button"
      tabIndex={0}
      onClick={() => onConsultar(producto)}
      onKeyDown={(e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          onConsultar(producto);
        }
      }}
      aria-label={`Consultar producto ${nombre}`}
    >
      <Card.Header className={styles.cabecera}>
        <h3 className={styles.titulo}>
          <Box 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}>
            Código: <strong>{codigo}</strong>
          </div>
          <div className={styles.fila}>
            Servicio: <strong>{producto?.CodigoServicio || '—'}</strong>
          </div>
          <div className={styles.filaContacto}>
            <Building2 size={14} className={styles.icono} aria-hidden="true" />
            <span className="fw-semibold">{comercializadora}</span>
          </div>
          <div className={styles.badgesServicio}>
            {producto?.SerEle === 1 && (
              <span className="badge bg-warning text-dark">
                <Zap size={12} className="me-1" aria-hidden="true" />
                Eléctrico
              </span>
            )}
            {producto?.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 producto ${nombre}`} onClick={(e) => { e.stopPropagation(); onConsultar(producto); }}>
          <Eye size={14} aria-hidden="true" />
        </button>
        <button type="button" className="btn btn-sm btn-black" aria-label={`Editar producto ${nombre}`} onClick={(e) => { e.stopPropagation(); onEditar(producto); }}>
          <Edit size={14} aria-hidden="true" />
        </button>
        <button type="button" className="btn btn-sm btn-black" aria-label={`Activar producto ${nombre}`} disabled={activo} onClick={(e) => { e.stopPropagation(); onActivar(producto, e.currentTarget); }}>
          <CheckCircle size={14} aria-hidden="true" />
        </button>
        <button type="button" className="btn btn-sm btn-black" aria-label={`Suspender producto ${nombre}`} disabled={!activo} onClick={(e) => { e.stopPropagation(); onSuspender(producto, e.currentTarget); }}>
          <PauseCircle size={14} aria-hidden="true" />
        </button>
      </Card.Footer>
    </Card>
  );
};

export default ProductoCard;