import React, { useMemo } from 'react';
import { Card, Badge } from 'react-bootstrap';
import { Eye, Pencil, Trash2 } from 'lucide-react';

import type { CaesRecord } from './CaesCardsView';

interface Props {
  record: CaesRecord;
  onConsultar: (r: CaesRecord) => void;
  onEditar: (r: CaesRecord) => void;
  onBorrar: (r: CaesRecord) => void;
}

const CaesCard: React.FC<Props> = ({ record, onConsultar, onEditar, onBorrar }) => {
  const totalDirecciones = record.direcciones?.length || 0;
  const totalActuaciones = useMemo(() => (record.direcciones||[]).reduce((acc,d)=>acc + (d.actuaciones?.length||0),0), [record.direcciones]);
  const totalFichas = useMemo(() => (record.direcciones||[]).reduce((acc,d)=>acc + (d.actuaciones||[]).reduce((a,b)=> a + (b.fichas?.length||0),0),0), [record.direcciones]);

  const firstDir = record.direcciones?.[0];
  const firstAct = firstDir?.actuaciones?.[0];
  const firstFicha = firstAct?.fichas?.[0];

  return (
    <Card className="h-100 shadow-sm border-0 card-3d" onClick={() => onConsultar(record)}>
      <Card.Header className="d-flex justify-content-between align-items-center" style={{ backgroundColor: 'rgba(13,110,253,.12)' }}>
        <span className="fw-bold">{record.abreviacion_caes || 'CAE'}</span>
        {record.tipo_caes_relacion && (
          <Badge bg="primary" className="text-uppercase">{record.tipo_caes_relacion.tipo_caes}</Badge>
        )}
      </Card.Header>
      <Card.Body>
        <div className="d-flex flex-column gap-1 small">
          <div><span className="text-muted">Nombre:</span> <span className="fw-semibold">{record.NomComCli || '—'}</span></div>
          <div><span className="text-muted">Versión:</span> <span className="fw-semibold">{record.version || '—'}</span></div>
          <div><span className="text-muted">Direcciones:</span> <span className="fw-semibold">{totalDirecciones}</span></div>
          <div><span className="text-muted">Actuaciones:</span> <span className="fw-semibold">{totalActuaciones}</span></div>
          <div><span className="text-muted">Fichas:</span> <span className="fw-semibold">{totalFichas}</span></div>
          {firstDir && (
            <div className="mt-2">
              <span className="text-muted">1ª Dirección:</span> <span className="fw-semibold">{firstDir.direccion}</span>
            </div>
          )}
          {firstAct && (
            <div>
              <span className="text-muted">1ª Actuación:</span> <span className="fw-semibold">{firstAct.nombreProyecto || '—'}</span>
            </div>
          )}
          {firstFicha && (
            <div>
              <span className="text-muted">1ª Ficha:</span> <span className="fw-semibold">{firstFicha.abreviacion_caes || firstFicha.caes || '—'}</span>
            </div>
          )}
        </div>
      </Card.Body>
      <Card.Footer className="bg-white d-flex justify-content-end gap-2">
        <button
          type="button"
          className="btn btn-sm btn-black"
          title="Consultar CAE"
          onClick={(e) => { e.stopPropagation(); onConsultar(record); }}
        >
          <Eye size={14} />
        </button>
        <button
          type="button"
          className="btn btn-sm btn-black"
          title="Editar CAE"
          onClick={(e) => { e.stopPropagation(); onEditar(record); }}
        >
          <Pencil size={14} />
        </button>
        <button
          type="button"
          className="btn btn-sm btn-black"
          title="Borrar CAE"
          onClick={(e) => { e.stopPropagation(); onBorrar(record); }}
        >
          <Trash2 size={14} />
        </button>
      </Card.Footer>
    </Card>
  );
};

export default CaesCard;