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

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

const TarifaCard: React.FC<Props> = ({ tarifa, onConsultar, onEditar, onActivar, onSuspender, onEliminar }) => {
  const esElectrica = tarifa?.tipo === 'electrica';
  const nombre = tarifa?.nombre || '—';
  const activa = tarifa?.activa === true || tarifa?.activa === 1;

  return (
    <Card
      className={`${styles.tarjeta} shadow-sm border-0 card-3d`}
      role="button"
      tabIndex={0}
      onClick={() => onConsultar(tarifa)}
      onKeyDown={(e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          onConsultar(tarifa);
        }
      }}
      aria-label={`Consultar tarifa ${nombre}`}
    >
      <Card.Header className={styles.cabecera}>
        <h3 className={styles.titulo}>
          {esElectrica ? <Zap size={14} className={styles.icono} aria-hidden="true" /> : <Flame size={14} className={styles.icono} aria-hidden="true" />}
          <span>{nombre}</span>
        </h3>
        <span className={`badge ${activa ? 'bg-success' : 'bg-secondary'} ${styles.badgeEstado}`}>{activa ? 'Activa' : 'Inactiva'}</span>
      </Card.Header>
      <Card.Body className={styles.cuerpo}>
        <div className={styles.contenido}>
          <div className={styles.fila}>
            Tipo: <strong>{esElectrica ? 'Eléctrica' : 'Gas'}</strong>
          </div>
          <div className={styles.fila}>
            Nombre alterno: <strong>{tarifa?.nombre_alterno || nombre || '—'}</strong>
          </div>
          {esElectrica && (
            <>
              <div className={styles.fila}>Tensión: <strong>{tarifa?.TipTen || '—'}</strong></div>
              <div className={styles.fila}>Periodos: <strong>{tarifa?.CanPerTar ?? '—'}</strong></div>
              <div className={styles.filaContacto}>
                <Gauge size={14} className={styles.icono} aria-hidden="true" />
                <span>Potencia: <strong>{tarifa?.MinPotCon ?? '—'} – {tarifa?.MaxPotCon ?? '—'} kW</strong></span>
              </div>
            </>
          )}
          {!esElectrica && (
            <div className={styles.filaContacto}>
              <Gauge size={14} className={styles.icono} aria-hidden="true" />
              <span>Consumo anual: <strong>{tarifa?.MinConAnu ?? '—'} – {tarifa?.MaxConAnu ?? '—'}</strong></span>
            </div>
          )}
        </div>
      </Card.Body>
      <Card.Footer className={styles.pie}>
        <button type="button" className="btn btn-sm btn-black" title="Ver tarifa" aria-label={`Ver tarifa ${nombre}`} onClick={(e) => { e.stopPropagation(); onConsultar(tarifa); }}>
          <Eye size={14} aria-hidden="true" />
        </button>
        <button type="button" className="btn btn-sm btn-black" title="Editar tarifa" aria-label={`Editar tarifa ${nombre}`} onClick={(e) => { e.stopPropagation(); onEditar(tarifa); }}>
          <Edit size={14} aria-hidden="true" />
        </button>
        <button type="button" className="btn btn-sm btn-black" title="Activar tarifa" aria-label={`Activar tarifa ${nombre}`} disabled={activa} onClick={(e) => { e.stopPropagation(); onActivar(tarifa, e.currentTarget); }}>
          <CheckCircle size={14} aria-hidden="true" />
        </button>
        <button type="button" className="btn btn-sm btn-black" title="Suspender tarifa" aria-label={`Suspender tarifa ${nombre}`} disabled={!activa} onClick={(e) => { e.stopPropagation(); onSuspender(tarifa, e.currentTarget); }}>
          <PauseCircle size={14} aria-hidden="true" />
        </button>
        <button type="button" className="btn btn-sm btn-black" title="Eliminar tarifa" aria-label={`Eliminar tarifa ${nombre}`} onClick={(e) => { e.stopPropagation(); onEliminar(tarifa, e.currentTarget); }}>
          <Trash2 size={14} aria-hidden="true" />
        </button>
      </Card.Footer>
    </Card>
  );
};

export default TarifaCard;