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

export default function NewCuestionarioCard({
  cuestionario,
  user = 'public',
  onDownload,
  loading = false,
}: {
  cuestionario: CuestionarioWithCupo;
  user?: 'public' | 'administrador' | 'staff';
  onDownload?: (id_cuestionario: number, nombre: string) => void;
  loading?: boolean;
}) {
  const [verMas, setVerMas] = useState(false);
  const descripcion = cuestionario.descripcion ?? '';
  const limite = 100;

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

  return (
    <div className="card card-blog d-flex flex-column justify-content-between">
      <div>
        <div className="card-image scale-hover-1">
          <Link
            href={
              user === 'administrador' || user === 'staff'
                ? `/${user}/evento/${cuestionario.id_evento}`
                : `/evento/${cuestionario.nombre_form.split(' ').join('_')}/${
                    cuestionario.id_evento
                  }/${cuestionario.id_cuestionario}`
            }
          >
            <Image
              width={400}
              height={300}
              className="img-fluid"
              src={`${process.env.NEXT_PUBLIC_API_URL}/banners/${cuestionario.banner}`}
              alt="Banner formulario"
            />
            <div className="card-caption">{cuestionario.nombre_form}</div>
          </Link>
          <div className="ripple-cont"></div>
        </div>

        <div className="card-body">
          <div className="card-description mb-0">
            {cuestionario.cupo_maximo === null ? (
              <span className="badge bg-success mb-2">Sin límite</span>
            ) : (
              <span className="badge bg-primary mb-2">
                {cuestionario.cupos_disponibles} cupos disponibles
              </span>
            )}
            <MarkdownRenderer markdown={descripcionRecortada} />
            {descripcion.length > limite && (
              <button
                onClick={() => setVerMas(!verMas)}
                className="btn btn-link btn-sm p-0 ms-1 align-baseline"
                style={{ fontSize: '0.875rem' }}
              >
                {verMas ? 'Ver menos' : 'Ver más'}
              </button>
            )}
          </div>
          <span className="badge fs-6 w-100 bg-primary">
            Evento{' '}
            {formatearRangoFechas(
              cuestionario.fecha_inicio,
              cuestionario.fecha_fin
            )}
          </span>
          <div className="">
            {user === 'administrador' || user === 'staff' ? (
              <>
                <Link
                  href={`/${user}/evento/${cuestionario.id_evento}/formulario/${cuestionario.id_cuestionario}`}
                  className="btn mt-2 w-100 btn-outline-primary"
                >
                  Ver formulario
                </Link>
                {user === 'administrador' && onDownload && (
                  <button
                    className="btn mt-2 w-100 btn-success"
                    onClick={() =>
                      onDownload(
                        cuestionario.id_cuestionario,
                        cuestionario.nombre_form
                      )
                    }
                    disabled={loading}
                  >
                    {loading ? (
                      <>
                        <span
                          className="spinner-border spinner-border-sm me-2"
                          role="status"
                          aria-hidden="true"
                        ></span>
                        Descargando...
                      </>
                    ) : (
                      <>
                        <i className="bi bi-download me-2"></i>
                        Descargar respuestas
                      </>
                    )}
                  </button>
                )}
              </>
            ) : cuestionario.cupos_disponibles === 0 &&
              cuestionario.cupo_maximo !== null ? (
              <button className="btn mt-2 w-100 btn-outline-secondary" disabled>
                Cupo lleno
              </button>
            ) : (
              <Link
                href={`/evento/${cuestionario.nombre_form
                  .split(' ')
                  .join('_')}/${cuestionario.id_evento}/${
                  cuestionario.id_cuestionario
                }`}
                className="btn mt-2 w-100 btn-outline-primary"
              >
                Registro
              </Link>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}
