formularios_front/src/components/evento/evento-card-admin.tsx

import { GetEventoWithCuestionariosWithCupos } from '@/types/evento';
import Image from 'next/image';
import Link from 'next/link';
import React, { useState } from 'react';
import MarkdownRenderer from '../markdown-render';
import { formatearFechaCard } from '@/utils/date-utils';

export default function EventoCardAdmin({
  evento,
}: {
  evento: GetEventoWithCuestionariosWithCupos;
}) {
  const [verMas, setVerMas] = useState(false);
  const descripcion = evento.descripcion_evento ?? '';
  const limite = 100;

  const descripcionRecortada =
    descripcion.length > limite && !verMas
      ? `${descripcion.slice(0, limite)}...`
      : descripcion;

  // Obtener información de fecha usando la utilidad
  const { mesTexto, diaTexto } = formatearFechaCard(
    evento.fecha_inicio,
    evento.fecha_fin
  );

  return (
    <div
      className="card shadow-sm border-0"
      style={{ borderRadius: '12px', overflow: 'hidden' }}
    >
      <div className="position-relative">
        <Link href={`/user/evento/${evento.id_evento}`}>
          <Image
            width={400}
            height={250}
            className="img-fluid w-100"
            src={`${process.env.NEXT_PUBLIC_API_URL}/banners/${evento.banner}`}
            alt="Banner formulario"
            style={{ objectFit: 'cover', height: '200px' }}
          />
        </Link>

        {/* Badge de cantidad de formularios en la esquina superior derecha */}
        <div className="position-absolute top-0 end-0 m-2">
          {evento.cuestionarios.length > 0 ? (
            <span className="badge bg-primary">
              {evento.cuestionarios.length} formulario
              {evento.cuestionarios.length !== 1 ? 's' : ''}
            </span>
          ) : (
            <span className="badge bg-secondary">Sin formularios</span>
          )}
        </div>
      </div>

      <div className="card-body p-3 d-flex flex-column">
        {/* Fecha del evento */}
        <div className="d-flex align-items-center mb-2">
          <div className="me-3" style={{ minWidth: '50px' }}>
            <div
              className="text-muted text-center small"
              style={{
                fontSize: mesTexto.includes(' - ') ? '0.65rem' : '0.75rem',
                lineHeight: 1.1,
              }}
            >
              {mesTexto}
            </div>
            <div
              className="fw-bold mb-0 text-center"
              style={{
                lineHeight: 1,
                whiteSpace: 'nowrap',
                fontSize: diaTexto.toString().length > 2 ? '1rem' : '1.25rem',
              }}
            >
              {diaTexto}
            </div>
          </div>
          <div>
            <h5 className="card-title mb-1 fw-bold">{evento.nombre_evento}</h5>
          </div>
        </div>

        {/* Descripción */}
        <div className="card-description flex-grow-1 mb-3">
          <MarkdownRenderer markdown={descripcionRecortada} />
          {descripcion.length > limite && (
            <button
              onClick={() => setVerMas(!verMas)}
              className="btn btn-link btn-sm p-0 ms-1 align-baseline text-decoration-none"
              style={{ fontSize: '0.875rem' }}
            >
              {verMas ? 'Ver menos' : 'Ver más'}
            </button>
          )}
        </div>

        {/* Formularios/sub eventos */}
        {evento.cuestionarios.length > 0 ? (
          <div className="mb-3">
            <h6 className="fw-bold mb-2 text-muted">
              Formularios disponibles:
            </h6>
            <div className="row row-cols-1 g-2">
              {evento.cuestionarios.slice(0, 3).map((cuestionario) => (
                <div key={cuestionario.id_cuestionario} className="col">
                  <div className="py-2 px-3 bg-light border-0">
                    <div className="d-flex justify-content-between align-items-center">
                      <Link
                        href={`/user/evento/${evento.id_evento}/formulario/${cuestionario.id_cuestionario}`}
                        className="text-decoration-none fw-semibold"
                      >
                        {cuestionario.nombre_form}
                      </Link>
                      <small className="text-muted">
                        {cuestionario.cupo_maximo
                          ? `${cuestionario.cupos_usados}/${cuestionario.cupo_maximo}`
                          : 'Sin límite'}
                      </small>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ) : (
          <div className="text-center px-3 py-3 bg-light rounded mb-3">
            <i className="bi bi-clipboard-x fs-4 text-muted mb-2 d-block"></i>
            <p className="text-muted mb-2 small">Sin formularios disponibles</p>
            <Link
              href={`/user/evento/${evento.id_evento}/formularios/crear`}
              className="btn btn-sm btn-outline-primary"
            >
              <i className="bi bi-plus-circle me-1"></i>
              Crear formulario
            </Link>
          </div>
        )}

        {/* Botón principal */}
        <Link
          href={`/user/evento/${evento.id_evento}`}
          className="btn btn-primary w-100 rounded-pill"
        >
          Ver/Editar evento
        </Link>
      </div>
    </div>
  );
}