import React from 'react';
import { Card } from 'react-bootstrap';
import { CheckCircle, Edit, Eye, Mail, MapPin, PauseCircle, Phone, User } from 'lucide-react';
import styles from './ClienteCard.module.css';

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

const ClienteCard: React.FC<Props> = ({ cliente, onConsultar, onEditar, onActivar, onSuspender }) => {
  const nombre = cliente?.RazSocCli || cliente?.NomComCli || '—';
  const nif = cliente?.NumCifCli || '—';
  const telefono = cliente?.TelFijCli || cliente?.TelMovCli || '—';
  const email = cliente?.EmaCli || '—';
  const localidad = cliente?.localidad?.NomLoc || cliente?.localidad?.DesLoc || '—';
  const provincia = cliente?.localidad?.provincia?.NomPro || cliente?.localidad?.provincia?.DesPro || '—';

  const direccionParts = [
    cliente?.NomViaDomFis || cliente?.NomViaDomSoc,
    cliente?.NumViaDomFis || cliente?.NumViaDomSoc,
    cliente?.BloDomFis || cliente?.BloDomSoc,
    cliente?.EscDomFis || cliente?.EscDomSoc,
    cliente?.PlaDomFis || cliente?.PlaDomSoc,
    cliente?.PueDomFis || cliente?.PueDomSoc,
  ].filter(Boolean);
  const direccion = direccionParts.length ? direccionParts.join(' ') : '—';

  const activo = cliente?.EstCli === 1;
  const estadoLabel = activo ? 'Activo' : 'Inactivo';
  const estadoClass = activo ? 'bg-success' : 'bg-secondary';

  return (
    <Card
      className={`${styles.tarjeta} shadow-sm border-0 card-3d`}
      role="button"
      tabIndex={0}
      onClick={() => onConsultar(cliente)}
      onKeyDown={(event) => {
        if (event.key === 'Enter' || event.key === ' ') {
          event.preventDefault();
          onConsultar(cliente);
        }
      }}
      aria-label={`Consultar cliente ${nombre}, NIF ${nif}`}
    >
      <Card.Header className={styles.cabecera}>
        <h3 className={styles.tituloCliente}>
          <User size={14} className={styles.icono} aria-hidden="true" />
          <span>{nombre}</span>
        </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>{nif}</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.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>
      </Card.Body>
      <Card.Footer className={styles.pie}>
        <button
          type="button"
          className="btn btn-sm btn-black"
          title="Ver cliente"
          aria-label={`Ver cliente ${nombre}`}
          onClick={(e) => {
            e.stopPropagation();
            onConsultar(cliente);
          }}
        >
          <Eye size={14} aria-hidden="true" />
        </button>
        <button
          type="button"
          className="btn btn-sm btn-black"
          title="Editar cliente"
          aria-label={`Editar cliente ${nombre}`}
          onClick={(e) => {
            e.stopPropagation();
            onEditar(cliente);
          }}
        >
          <Edit size={14} aria-hidden="true" />
        </button>
        <button
          type="button"
          className="btn btn-sm btn-black"
          title="Activar cliente"
          aria-label={`Activar cliente ${nombre}`}
          onClick={(e) => {
            e.stopPropagation();
            onActivar(cliente, e.currentTarget);
          }}
          disabled={activo}
        >
          <CheckCircle size={14} aria-hidden="true" />
        </button>
        <button
          type="button"
          className="btn btn-sm btn-black"
          title="Suspender cliente"
          aria-label={`Suspender cliente ${nombre}`}
          onClick={(e) => {
            e.stopPropagation();
            onSuspender(cliente, e.currentTarget);
          }}
          disabled={!activo}
        >
          <PauseCircle size={14} aria-hidden="true" />
        </button>
      </Card.Footer>
    </Card>
  );
};

export default ClienteCard;