import React from 'react';
import { Card } from 'react-bootstrap';
import { Edit, Zap, Flame, User, FileText, MapPin } from 'lucide-react';
import styles from './CupsCard.module.css';

interface Props {
  cups: any;
  onEditar: (c: any) => void;
}

const CupsCard: React.FC<Props> = ({ cups, onEditar }) => {
  const cupsNumero = cups?.CUPsName || '—';
  const tipoServicio = cups?.TipServ || '—';
  const cliente = cups?.Cups_RazSocCli || '—';
  const nif = cups?.Cups_Cif || '—';
  const tarifa = cups?.NomTarGas || '—';
  const consumoAnual = cups?.ConAnuCup ? `${parseFloat(cups.ConAnuCup).toFixed(2)} kWh` : '—';

  const localidad = cups?.DesLoc || '—';
  const provincia = cups?.DesPro || '—';
  const tipoVia = cups?.TipVia || '—';
  const direccion = cups?.NomViaPunSum
    ? `${tipoVia} ${cups.NomViaPunSum} ${cups.NumViaPunSum || ''}`.trim()
    : '—';

  const potencias =
    cups?.PotConP1 || cups?.PotConP2 || cups?.PotConP3
      ? `${cups.PotConP1 || 0}/${cups.PotConP2 || 0}/${cups.PotConP3 || 0}/${cups.PotConP4 || 0}/${cups.PotConP5 || 0}/${cups.PotConP6 || 0}`
      : '—';

  const activo = cups?.EstCUPs === 'ACTIVO';
  const estadoLabel = cups?.EstCUPs || 'Desconocido';
  const estadoClass = activo ? 'bg-success' : 'bg-secondary';

  const isElectrico = tipoServicio === 'Eléctrico';
  const IconoTipo = isElectrico ? Zap : Flame;
  const colorTipo = isElectrico ? 'text-warning' : 'text-info';

  return (
    <Card className={`${styles.tarjeta} shadow-sm border-0 card-3d`}>
      <Card.Header className={styles.cabecera}>
        <h3 className={styles.tituloCups}>
          <IconoTipo size={16} className={colorTipo} aria-hidden="true" />
          <span>{cupsNumero}</span>
        </h3>
        <span className={`badge ${estadoClass} ${styles.badgeEstado}`}>{estadoLabel}</span>
      </Card.Header>
      <Card.Body className={styles.cuerpo}>
        <div className={styles.contenido}>
          <div>
            <span className={`badge ${isElectrico ? 'bg-warning' : 'bg-info'}`}>{tipoServicio}</span>
          </div>

          <div className={styles.lineaCliente}>
            <User size={14} className={styles.iconoInline} aria-hidden="true" />
            <span className={styles.textoFuerte}>{cliente}</span>
          </div>

          <p className={`${styles.lineaTexto} ${styles.textoMuted}`}>
            NIF: <strong>{nif}</strong>
          </p>

          <hr className={styles.separador} />

          <div className={styles.filaDireccion}>
            <MapPin size={14} className={styles.iconoInline} aria-hidden="true" />
            <div>
              <p className={`${styles.lineaTexto} ${styles.textoFuerte}`}>{direccion}</p>
              <p className={`${styles.lineaTexto} ${styles.textoMuted}`}>
                {localidad} {localidad !== provincia && `(${provincia})`}
              </p>
            </div>
          </div>

          <hr className={styles.separador} />

          <div className={styles.lineaCliente}>
            <FileText size={14} className={styles.iconoInline} aria-hidden="true" />
            <span className={styles.textoFuerte}>{tarifa}</span>
          </div>

          <p className={`${styles.lineaTexto} ${styles.textoMuted}`}>
            Consumo anual: <strong>{consumoAnual}</strong>
          </p>

          {isElectrico && potencias !== '—' && (
            <p className={`${styles.lineaTexto} ${styles.textoMuted}`}>
              Potencias: <strong>{potencias}</strong>
            </p>
          )}
        </div>
      </Card.Body>
      <Card.Footer className={styles.pie}>
        <button
          type="button"
          className="btn btn-sm btn-primary"
          title="Editar Punto de Suministro"
          aria-label={`Editar punto de suministro del CUPS ${cupsNumero}`}
          onClick={(e) => {
            e.stopPropagation();
            onEditar(cups);
          }}
        >
          <Edit size={14} className="me-1" aria-hidden="true" />
          Editar Punto de Suministro
        </button>
      </Card.Footer>
    </Card>
  );
};

export default CupsCard;