import { CuestionarioWithCupo, GetEvento } 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';
import Button from '../button';

export default function FormularioCardAdmin({
  cuestionario,
  evento,
  handleDownload,
  disabled,
}: {
  cuestionario: CuestionarioWithCupo;
  evento: GetEvento;
  handleDownload: (
    id_cuestionario: number,
    nombre_formulario: string,
    nombre_evento: string
  ) => void;
  disabled: boolean;
}) {
  const [verMas, setVerMas] = useState(false);
  const descripcion = cuestionario.descripcion ?? '';
  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(
    cuestionario.fecha_inicio,
    cuestionario.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}/formulario/${cuestionario.id_cuestionario}`}
        >
          <Image
            width={400}
            height={250}
            className="img-fluid w-100"
            src={
              cuestionario.banner
                ? `${process.env.NEXT_PUBLIC_API_URL}/banners/${cuestionario.banner}`
                : evento.banner
                ? `${process.env.NEXT_PUBLIC_API_URL}/banners/${evento.banner}`
                : `/default-banner.png`
            }
            alt="Banner formulario"
            style={{ objectFit: 'cover', height: '200px' }}
          />
        </Link>

        {/* Mensaje cuando se usa la imagen del evento */}
        {!cuestionario.banner && evento.banner && (
          <div className="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-black bg-opacity-25">
            <div className="bg-white bg-opacity-90 px-3 py-2 rounded-pill text-center small fw-bold">
              <i className="bi bi-info-circle-fill me-1 text-primary"></i>
              Usando imagen del evento
            </div>
          </div>
        )}

        {/* Badge de tipo de cuestionario en la esquina superior izquierda */}
        <div className="position-absolute top-0 start-0 m-2">
          <span className="badge bg-info">
            {cuestionario.tipoCuestionario?.tipo_cuestionario || 'Formulario'}
          </span>
        </div>
      </div>

      <div className="card-body p-3 d-flex flex-column">
        {/* Fecha del formulario */}
        <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">
              {cuestionario.nombre_form}
            </h5>
            {evento && (
              <small className="text-muted">
                <i className="bi bi-calendar-event me-1"></i>
                {evento.nombre_evento}
              </small>
            )}
          </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>

        {/* Información de cupos y estadísticas */}
        <div className="mb-3">
          <div className="py-2 px-3 bg-light rounded">
            <div className="d-flex align-items-center">
              <i className="bi bi-people-fill me-2 text-primary"></i>
              <div>
                <small className="text-muted d-block">Cupos</small>
                <span className="fw-semibold">
                  {cuestionario.cupo_maximo !== null
                    ? `${cuestionario.cupos_usados} / ${cuestionario.cupo_maximo}`
                    : 'Sin límite'}
                </span>
              </div>
            </div>
          </div>
        </div>

        {/* Botones de acción */}
        <div className="d-grid gap-2">
          <Link
            href={`/user/evento/${evento.id_evento}/formulario/${cuestionario.id_cuestionario}`}
            className="btn btn-primary rounded-pill"
          >
            Ver/Editar formulario
          </Link>

          {/* Botón secundario para ver respuestas */}
          <Button
            outline
            variant="success"
            size="sm"
            className="rounded-pill"
            onClick={() =>
              handleDownload(
                cuestionario.id_cuestionario,
                cuestionario.nombre_form,
                evento.nombre_evento
              )
            }
            disabled={disabled}
          >
            <i className="bi bi-download me-2"></i>
            Descargar respuestas
          </Button>
        </div>
      </div>
    </div>
  );
}
