import React from 'react';
import { Card } from 'react-bootstrap';
import { Edit, Eye, Trash2, CheckCircle, XCircle, User, Phone, Mail, Briefcase } from 'lucide-react';
import styles from './ContactoCard.module.css';

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

const ContactoCard: React.FC<Props> = ({
  contacto,
  onVer,
  onEditar,
  onActivar,
  onSuspender,
  onEliminar,
}) => {
  const nombre = contacto?.NomConCli || '—';
  const nif = contacto?.NIFConCli || '—';
  const cargo = contacto?.CarConCli || '—';
  const telefonoFijo = contacto?.TelFijConCli || '—';
  const telefonoCelular = contacto?.TelCelConCli || '—';
  const email = contacto?.EmaConCli || '—';
  const totalClientes = contacto?.totalClientes ?? 0;
  const estado = contacto?.EstConCliLabel || 'INACTIVO';
  const activo = contacto?.EstConCli == 1 || contacto?.EstCli == 1;
  const estadoClass = activo ? 'bg-success' : 'bg-secondary';

  return (
    <Card
      className={`${styles.tarjeta} shadow-sm border-0 card-3d`}
      role="button"
      tabIndex={0}
      onClick={() => onVer(contacto)}
      onKeyDown={(event) => {
        if (event.key === 'Enter' || event.key === ' ') {
          event.preventDefault();
          onVer(contacto);
        }
      }}
      aria-label={`Consultar contacto ${nombre}, NIF ${nif}`}
    >
      <Card.Header className={styles.cabecera}>
        <h3 className={styles.tituloContacto}>
          <User size={16} className="text-primary" aria-hidden="true" />
          <span>{nombre}</span>
        </h3>
        <span className={`badge ${estadoClass} ${styles.badgeEstado}`}>{estado}</span>
      </Card.Header>
      <Card.Body className={styles.cuerpo}>
        <div className={styles.contenido}>
          <div className={styles.filaNif}>
            NIF: <strong>{nif}</strong>
          </div>

          {cargo !== '—' && (
            <div className={styles.filaContacto}>
              <Briefcase size={14} className={styles.icono} aria-hidden="true" />
              <span className="fw-semibold">{cargo}</span>
            </div>
          )}

          <hr className={styles.separador} />

          <div className={styles.filaContacto}>
            <Phone size={14} className={styles.icono} aria-hidden="true" />
            <div className="small">
              {telefonoFijo !== '—' && (
                <div className="text-muted">
                  Fijo: <span className="fw-semibold text-dark">{telefonoFijo}</span>
                </div>
              )}
              {telefonoCelular !== '—' && (
                <div className="text-muted">
                  Móvil: <span className="fw-semibold text-dark">{telefonoCelular}</span>
                </div>
              )}
            </div>
          </div>

          {email !== '—' && (
            <div className={styles.filaContacto}>
              <Mail size={14} className={styles.icono} aria-hidden="true" />
              <span className="fw-semibold text-truncate" title={email}>
                {email}
              </span>
            </div>
          )}

          <div className="text-muted small mt-2">
            Total Clientes: <span className="fw-semibold text-dark">{totalClientes}</span>
          </div>
        </div>
      </Card.Body>
      <Card.Footer className={styles.pie}>
        <button
          type="button"
          className="btn btn-sm btn-info"
          title="Ver"
          aria-label={`Ver contacto ${nombre}`}
          onClick={(e) => {
            e.stopPropagation();
            onVer(contacto);
          }}
        >
          <Eye size={14} aria-hidden="true" />
        </button>
        <button
          type="button"
          className="btn btn-sm btn-primary"
          title="Editar"
          aria-label={`Editar contacto ${nombre}`}
          onClick={(e) => {
            e.stopPropagation();
            onEditar(contacto);
          }}
        >
          <Edit size={14} aria-hidden="true" />
        </button>
        {activo ? (
          <button
            type="button"
            className="btn btn-sm btn-warning"
            title="Suspender"
            aria-label={`Suspender contacto ${nombre}`}
            onClick={(e) => {
              e.stopPropagation();
              onSuspender(contacto, e.currentTarget);
            }}
          >
            <XCircle size={14} aria-hidden="true" />
          </button>
        ) : (
          <button
            type="button"
            className="btn btn-sm btn-success"
            title="Activar"
            aria-label={`Activar contacto ${nombre}`}
            onClick={(e) => {
              e.stopPropagation();
              onActivar(contacto, e.currentTarget);
            }}
          >
            <CheckCircle size={14} aria-hidden="true" />
          </button>
        )}
        <button
          type="button"
          className="btn btn-sm btn-danger"
          title="Eliminar"
          aria-label={`Eliminar contacto ${nombre}`}
          onClick={(e) => {
            e.stopPropagation();
            onEliminar(contacto, e.currentTarget);
          }}
        >
          <Trash2 size={14} aria-hidden="true" />
        </button>
      </Card.Footer>
    </Card>
  );
};

export default ContactoCard;