import React, { memo } from 'react';
import { Zap, Flame, MapPin, ChevronRight, UserX, Building2 } from 'lucide-react';
import { CupsTitularResult } from '../types';

interface CupsResultCardProps {
    result: CupsTitularResult;
    onSelect: (result: CupsTitularResult) => void;
}

/** Formatea el CUPS en bloques de 4 para facilitar la lectura visual (ES00 2100 0000 …). */
const formatCups = (cups: string): string => cups.replace(/\s+/g, '').replace(/(.{4})/g, '$1 ').trim();

const CupsResultCard: React.FC<CupsResultCardProps> = ({ result, onSelect }) => {
    const isGas = result.tipo === 'gas';
    const titular = result.titular;
    const selectable = Boolean(titular);

    const handleActivate = () => {
        if (selectable) onSelect(result);
    };

    return (
        <div
            id={`cups-result-${result.tipo}-${result.CodCups}`}
            className={`saas-card dash-cups-card ${selectable ? 'saas-card-hover is-selectable' : 'is-orphan'}`}
            role={selectable ? 'button' : undefined}
            tabIndex={selectable ? 0 : -1}
            aria-label={selectable
                ? `Abrir ficha de ${titular?.RazSocCli ?? 'cliente'}, titular del CUPS ${result.CUPS}`
                : `El CUPS ${result.CUPS} no tiene titular asociado`}
            onClick={handleActivate}
            onKeyDown={(e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    handleActivate();
                }
            }}
        >
            {/* Nivel inferior: CUPS */}
            <div className="dash-cups-card-top">
                <div className={`dash-cups-icon ${isGas ? 'is-gas' : 'is-electric'}`}>
                    {isGas ? <Flame size={18} /> : <Zap size={18} />}
                </div>
                <div className="dash-cups-card-content">
                    <div className="d-flex align-items-center gap-2 flex-wrap">
                        <span className={`dash-pill ${isGas ? 'pill-gas' : 'pill-electric'}`}>{isGas ? 'Gas' : 'Electricidad'}</span>
                        <span className={`dash-pill ${result.cups_activo ? 'pill-ok' : 'pill-muted'}`}>
                            {result.cups_activo ? 'CUPS activo' : 'CUPS inactivo'}
                        </span>
                    </div>
                    <div className="dash-cups-code" title={result.CUPS}>{formatCups(result.CUPS)}</div>
                    <div className="dash-cups-address" title={`${result.direccion}${result.localidad ? ` · ${result.localidad}` : ''}`}>
                        <MapPin size={12} className="flex-shrink-0" />
                        <span className="text-truncate">
                            {result.direccion}{result.localidad ? ` · ${result.localidad}` : ''}
                        </span>
                    </div>
                </div>
            </div>

            {/* Nivel superior: Titular actual */}
            <div className="dash-cups-owner">
                {titular ? (
                    <>
                        <div className="dash-cups-owner-icon"><Building2 size={15} /></div>
                        <div className="dash-cups-owner-info">
                            <span className="dash-cups-owner-label">Titular actual</span>
                            <div className="dash-cups-owner-name" title={titular.RazSocCli ?? undefined}>
                                {titular.RazSocCli ?? 'Sin razón social'}
                            </div>
                            <div className="dash-cups-owner-meta">
                                <span className="font-monospace fw-bold">{titular.NumCifCli ?? '—'}</span>
                                {!titular.activo && <span className="dash-pill pill-warn ms-2">Cliente inactivo</span>}
                            </div>
                        </div>
                        <span className="dash-cups-open">
                            Ver ficha <ChevronRight size={14} />
                        </span>
                    </>
                ) : (
                    <>
                        <div className="dash-cups-owner-icon is-empty"><UserX size={15} /></div>
                        <div className="dash-cups-owner-meta">Sin titular asociado a este punto de suministro.</div>
                    </>
                )}
            </div>
        </div>
    );
};

export default memo(CupsResultCard);