import React from 'react';
import { Card } from 'react-bootstrap';
import { Pencil, Trash2 } from 'lucide-react';
import { formatCalendarDateEs } from '../../../utils/serverCalendarDate';
import { ENEON_CARD_HOVER_POR_VARIANTE } from './Shared/tokensTarjetaEneon';
import styles from './ContratoCard.module.css';

type Contrato = {
  CodConCom?: number | string;
  RefCon: string;
  FecConCom?: string;
  NumCifCli?: string;
  RazSocCli?: string;
  EmaCli?: string;
  TelMovCli?: string;
  NombreTipo?: string;
  TipProCom?: number;
  CodProCom?: number | string;
};

interface Props {
  contrato: Contrato;
  onConsultar: (c: Contrato) => void;
  onEditar: (c: Contrato) => void;
  onBorrar: (c: Contrato) => void;
}

const normalize = (s?: string) => (s || '').toLowerCase().replace(/\s+/g, ' ').trim();

const tipoBadgeVariantByName: Record<string, string> = {
  'sencillo - dual': 'primary',
  'sencillo dual': 'primary',
  simple: 'primary',
  'unicliente multi punto': 'info',
  'uni cliente multi punto': 'info',
  'unicliente multipunto': 'info',
  'multi cliente multi punto': 'warning',
  'multicliente multi punto': 'warning',
  'multi-cliente multi punto': 'warning',
};

const tipoBadgeVariantById: Record<number, string> = {
  1: 'primary',
  2: 'info',
  3: 'warning',
};

const variantToHex: Record<string, string> = ENEON_CARD_HOVER_POR_VARIANTE;

const hexToRgba = (hex: string, alpha = 1) => {
  const h = hex.replace('#', '');
  const bigint = parseInt(h.length === 3 ? h.split('').map((c) => c + c).join('') : h, 16);
  const r = (bigint >> 16) & 255;
  const g = (bigint >> 8) & 255;
  const b = bigint & 255;
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
};

const badgeClassByVariant: Record<string, string> = {
  primary: styles.badgePrimary,
  info: styles.badgeInfo,
  warning: styles.badgeWarning,
  secondary: styles.badgeSecondary,
};

const parseEmails = (email?: string): string[] => {
  if (!email?.trim()) {
    return [];
  }

  return email
    .split(/[;,]/)
    .map((part) => part.trim())
    .filter(Boolean);
};

const ContratoCard: React.FC<Props> = ({ contrato, onConsultar, onEditar, onBorrar }) => {
  const formatFecha = (fecha?: string) => (fecha ? formatCalendarDateEs(fecha) : '—');

  const nombreNorm = normalize(contrato.NombreTipo);
  const badgeVariant = nombreNorm
    ? (tipoBadgeVariantByName[nombreNorm] ?? 'secondary')
    : contrato.TipProCom
      ? (tipoBadgeVariantById[contrato.TipProCom] ?? 'secondary')
      : 'secondary';

  const baseColor = variantToHex[badgeVariant] || variantToHex.secondary;
  const headerBg = hexToRgba(baseColor, 0.12);
  const cardStyle = { ['--hover-border-color' as string]: baseColor } as React.CSSProperties;
  const emails = parseEmails(contrato.EmaCli);

  return (
    <Card
      className={`${styles.tarjeta} shadow-sm border-0 card-3d`}
      style={cardStyle}
      role="button"
      tabIndex={0}
      onClick={() => onConsultar(contrato)}
      onKeyDown={(event) => {
        if (event.key === 'Enter' || event.key === ' ') {
          event.preventDefault();
          onConsultar(contrato);
        }
      }}
      aria-label={`Consultar contrato ${contrato.RefCon}`}
    >
      <Card.Header className={styles.cabecera} style={{ backgroundColor: headerBg }}>
        <h3 className={styles.tituloContrato}>Número de Contrato: {contrato.RefCon}</h3>
        {contrato.NombreTipo && (
          <span className={`badge ${styles.badgeTipo} ${badgeClassByVariant[badgeVariant] ?? styles.badgeSecondary}`}>
            {contrato.NombreTipo}
          </span>
        )}
      </Card.Header>
      <Card.Body className={styles.cuerpo}>
        <div className={styles.contenido}>
          <p className={styles.lineaCampo}>
            <span className={styles.etiqueta}>Fecha Inicio: </span>
            <span className={styles.valor}>{formatFecha(contrato.FecConCom)}</span>
          </p>
          <p className={styles.lineaCampo}>
            <span className={styles.etiqueta}>NIF: </span>
            <span className={styles.valor}>{contrato.NumCifCli || '—'}</span>
          </p>
          <p className={styles.lineaCampo}>
            <span className={styles.etiqueta}>Cliente: </span>
            <span className={styles.valor}>{contrato.RazSocCli || '—'}</span>
          </p>
          <div className={styles.lineaCampo}>
            <span className={styles.etiqueta}>Email: </span>
            {emails.length === 0 ? (
              <span className={styles.valor}>—</span>
            ) : emails.length === 1 ? (
              <span className={styles.valor}>{emails[0]}</span>
            ) : (
              <ul className={styles.listaEmails} aria-label="Correos electrónicos">
                {emails.map((email) => (
                  <li key={email} className={styles.emailItem}>
                    {email}
                  </li>
                ))}
              </ul>
            )}
          </div>
          <p className={styles.lineaCampo}>
            <span className={styles.etiqueta}>Móvil: </span>
            <span className={styles.valor}>{contrato.TelMovCli || '—'}</span>
          </p>
        </div>
      </Card.Body>
      <Card.Footer className={styles.pie}>
        <button
          type="button"
          className="btn btn-sm btn-black"
          title="Editar contrato"
          aria-label={`Editar contrato ${contrato.RefCon}`}
          onClick={(e) => {
            e.stopPropagation();
            onEditar(contrato);
          }}
        >
          <Pencil size={14} aria-hidden="true" />
        </button>
        <button
          type="button"
          className="btn btn-sm btn-black"
          title="Borrar contrato"
          aria-label={`Borrar contrato ${contrato.RefCon}`}
          onClick={(e) => {
            e.stopPropagation();
            onBorrar(contrato);
          }}
        >
          <Trash2 size={14} aria-hidden="true" />
        </button>
      </Card.Footer>
    </Card>
  );
};

export default ContratoCard;