import React from 'react';
import { Card } from 'react-bootstrap';
import { Flame, MapPin, Pencil, Trash2, Zap } from 'lucide-react';
import { PuntoSuministro } from '../Contratos/Interfaces/Interfaces';
import styles from './PuntoCard.module.css';

interface Props {
  punto: PuntoSuministro & {
    cups_electrico_count?: number;
    cups_gas_count?: number;
  };
  onConsultar: (p: PuntoSuministro) => void;
  onEditar: (p: PuntoSuministro) => void;
  onBorrar: (p: PuntoSuministro) => void;
}

const PuntoCard: React.FC<Props> = ({ punto, onConsultar, onEditar, onBorrar }) => {
  const cliente = (punto as any).cliente;
  const localidadData = (punto as any).localidad;
  const nombreCliente = cliente?.RazSocCli || cliente?.NomCli || '—';
  const nifCliente = cliente?.NumCifCli || cliente?.NumDocCli || '—';
  const localidad = localidadData?.NomLoc || localidadData?.DesLoc || '—';
  const provincia = localidadData?.provincia?.NomPro || localidadData?.provincia?.DesPro || '—';

  const cupsEleCount =
    punto.cups_electrico_count ??
    (punto as any).cupsElectrico_count ??
    punto.cups_electrico?.length ??
    (punto as any).cupsElectrico?.length ??
    0;
  const cupsGasCount =
    punto.cups_gas_count ??
    (punto as any).cupsGas_count ??
    punto.cups_gas?.length ??
    (punto as any).cupsGas?.length ??
    0;

  const direccionParts = [
    punto.NomViaPunSum,
    punto.NumViaPunSum,
    punto.BloPunSum,
    punto.EscPunSum,
    punto.PlaPunSum,
    punto.PuePunSum,
  ].filter(Boolean);

  const direccion = direccionParts.length ? direccionParts.join(' ') : '—';
  const estadoLabel = punto.EstPunSum === 1 ? 'Activo' : 'Inactivo';
  const estadoClass = punto.EstPunSum === 1 ? 'bg-success' : 'bg-secondary';

  return (
    <Card
      className={`${styles.tarjeta} shadow-sm border-0 card-3d`}
      role="button"
      tabIndex={0}
      onClick={() => onConsultar(punto)}
      onKeyDown={(event) => {
        if (event.key === 'Enter' || event.key === ' ') {
          event.preventDefault();
          onConsultar(punto);
        }
      }}
      aria-label={`Consultar punto de ${nombreCliente}, ${direccion}`}
    >
      <Card.Header className={styles.cabecera}>
        <h3 className={styles.tituloCliente}>{nombreCliente}</h3>
        <span className={`badge ${estadoClass} ${styles.badgeEstado}`}>{estadoLabel}</span>
      </Card.Header>
      <Card.Body className={styles.cuerpo}>
        <div className={styles.contenido}>
          <div className={styles.filaNif}>
            NIF: <strong>{nifCliente}</strong>
          </div>
          <div className={styles.filaDireccion}>
            <MapPin size={14} className={styles.iconoMapa} aria-hidden="true" />
            <div className={styles.textoDireccion}>
              <p className={styles.lineaDireccion}>{direccion}</p>
              <p className={styles.lineaLocalidad}>
                {localidad} — {provincia}
              </p>
            </div>
          </div>
          <div className={styles.badgesCups}>
            <span className={`badge bg-light text-dark ${styles.badgeCups}`}>
              <Zap size={14} aria-hidden="true" /> {cupsEleCount} eléctricos
            </span>
            <span className={`badge bg-light text-dark ${styles.badgeCups}`}>
              <Flame size={14} aria-hidden="true" /> {cupsGasCount} gas
            </span>
          </div>
        </div>
      </Card.Body>
      <Card.Footer className={styles.pie}>
        <button
          type="button"
          className="btn btn-sm btn-black"
          title="Editar punto"
          aria-label={`Editar punto de ${nombreCliente}`}
          onClick={(e) => {
            e.stopPropagation();
            onEditar(punto);
          }}
        >
          <Pencil size={14} aria-hidden="true" />
        </button>
        <button
          type="button"
          className="btn btn-sm btn-black"
          title="Borrar punto"
          aria-label={`Borrar punto de ${nombreCliente}`}
          onClick={(e) => {
            e.stopPropagation();
            onBorrar(punto);
          }}
        >
          <Trash2 size={14} aria-hidden="true" />
        </button>
      </Card.Footer>
    </Card>
  );
};

export default PuntoCard;