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

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

const ComercializadoraCard: React.FC<Props> = ({
  comercializadora,
  onConsultar,
  onEditar,
  onActivar,
  onSuspender,
}) => {
  const nombre = comercializadora?.RazSocCom || comercializadora?.NomComCom || '—';
  const cif = comercializadora?.NumCifCom || '—';
  const telefono = comercializadora?.TelFijCom || '—';
  const email = comercializadora?.EmaCom || '—';
  const activo = comercializadora?.EstCom === 1;

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

export default ComercializadoraCard;