import { GetCuestionario } from '@/types/cuestionario';
import { FormularioCreacion } from '@/types/create-formulario';
import { GetEvento, GetEventoWithCuestionariosWithCupos } from '@/types/evento';
import Image from 'next/image';
import React, { useState, useEffect } from 'react';
import MarkdownRenderer from '../markdown-render';
import { formatearFechaCard } from '@/utils/date-utils';

interface FormularioCardPreviewProps {
  // Para formularios existentes
  cuestionario?: GetCuestionario;
  // Para formularios en creación
  formulario?: FormularioCreacion;
  // Evento asociado
  evento?: GetEvento | GetEventoWithCuestionariosWithCupos | null;
  // Banner personalizado
  nuevoBanner?: File | null;
}

export default function FormularioCardPreview({
  cuestionario,
  formulario,
  evento,
  nuevoBanner,
}: FormularioCardPreviewProps) {
  const [verMas, setVerMas] = useState(false);
  const [bannerUrl, setBannerUrl] = useState<string>('/default-banner.png');

  // Determinar qué datos usar (formulario existente o en creación)
  const isCreating = !!formulario && !cuestionario;
  const data = cuestionario || formulario;

  // Manejar la imagen del banner
  useEffect(() => {
    if (nuevoBanner) {
      // Si hay un nuevo banner seleccionado, usarlo
      const url = URL.createObjectURL(nuevoBanner);
      setBannerUrl(url);
      return () => URL.revokeObjectURL(url);
    } else if (!isCreating && cuestionario?.banner) {
      // Si es un formulario existente y tiene banner propio
      setBannerUrl(
        `${process.env.NEXT_PUBLIC_API_URL}/banners/${cuestionario.banner}`
      );
    } else if (evento?.banner) {
      // Si hay banner del evento, usarlo
      setBannerUrl(
        `${process.env.NEXT_PUBLIC_API_URL}/banners/${evento.banner}`
      );
    } else {
      // Banner por defecto
      setBannerUrl('/default-banner.png');
    }
  }, [nuevoBanner, evento?.banner, cuestionario?.banner, isCreating]);

  if (!data) {
    return null; // No hay datos para mostrar
  }

  const descripcion = data.descripcion ?? '';
  const limite = 100;

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

  // Obtener información de fecha usando la utilidad
  const getDateInfo = () => {
    if (!data.fecha_inicio || !data.fecha_fin) {
      return { mesTexto: 'MES', diaTexto: 'DD' };
    }

    let fechaInicio: Date, fechaFin: Date;

    if (isCreating) {
      // Para formularios en creación, las fechas vienen como string
      fechaInicio = new Date(data.fecha_inicio);
      fechaFin = new Date(data.fecha_fin);
    } else {
      // Para formularios existentes, convertir a Date también
      fechaInicio = new Date(data.fecha_inicio);
      fechaFin = new Date(data.fecha_fin);
    }

    return formatearFechaCard(fechaInicio, fechaFin);
  };

  const { mesTexto, diaTexto } = getDateInfo();

  // Determinar si se está usando la imagen del evento
  const isUsingEventImage =
    !nuevoBanner && (isCreating || !cuestionario?.banner) && evento?.banner;

  // Obtener el tipo de cuestionario
  const getTipoCuestionario = () => {
    const tipoId = isCreating
      ? (formulario as FormularioCreacion).id_tipo_cuestionario
      : (cuestionario as GetCuestionario).id_tipo_cuestionario;

    if (tipoId === 1) return 'Registro';
    if (tipoId === 2) return 'Evaluación';
    return 'Formulario';
  };

  // Obtener nombre del formulario
  const getNombreFormulario = () => {
    return data.nombre_form || 'Nombre del formulario';
  };

  // Obtener información de cupos
  const getCuposInfo = () => {
    if (isCreating) {
      const form = formulario as FormularioCreacion;
      return form.cupo_maximo && form.cupo_maximo > 0
        ? `0 / ${form.cupo_maximo}`
        : 'Sin límite';
    } else {
      const cuest = cuestionario as GetCuestionario;
      return cuest.cupo_maximo !== null && cuest.cupo_maximo !== undefined
        ? `0 / ${cuest.cupo_maximo}`
        : 'Sin límite';
    }
  };

  // Obtener información de secciones y preguntas (solo para formularios en creación)
  const getSeccionesInfo = () => {
    if (!isCreating || !formulario) return null;

    const totalSecciones = formulario.secciones.length;
    const totalPreguntas = formulario.secciones.reduce(
      (total, seccion) => total + seccion.preguntas.length,
      0
    );

    return { totalSecciones, totalPreguntas };
  };

  const seccionesInfo = getSeccionesInfo();

  return (
    <div
      className="card shadow-sm border-0 mb-2"
      style={{ borderRadius: '12px', overflow: 'hidden' }}
    >
      <div className="position-relative">
        <Image
          width={400}
          height={250}
          className="img-fluid w-100"
          src={bannerUrl}
          alt="Banner formulario"
          style={{ objectFit: 'cover', height: '200px' }}
        />

        {/* Mensaje cuando se usa la imagen del evento */}
        {isUsingEventImage && (
          <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">{getTipoCuestionario()}</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">{getNombreFormulario()}</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">
          {descripcion ? (
            <>
              <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>
              )}
            </>
          ) : (
            <p className="text-muted small">Descripción del formulario...</p>
          )}
        </div>

        {/* Información de cupos */}
        <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">{getCuposInfo()}</span>
              </div>
            </div>
          </div>
        </div>

        {/* Información de secciones y preguntas (solo para formularios en creación) */}
        {seccionesInfo && (
          <div className="mb-3">
            <div className="py-2 px-3 bg-light rounded">
              <div className="d-flex justify-content-between align-items-center text-sm">
                <div className="d-flex align-items-center">
                  <i className="bi bi-list-task me-2 text-success"></i>
                  <span className="fw-semibold">
                    {seccionesInfo.totalSecciones} sección
                    {seccionesInfo.totalSecciones !== 1 ? 'es' : ''}
                  </span>
                </div>
                <div className="d-flex align-items-center">
                  <i className="bi bi-question-circle me-2 text-warning"></i>
                  <span className="fw-semibold">
                    {seccionesInfo.totalPreguntas} pregunta
                    {seccionesInfo.totalPreguntas !== 1 ? 's' : ''}
                  </span>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Botón de acción */}
        <div className="d-grid gap-2">
          <button className="btn btn-primary rounded-pill" disabled>
            Ver/Editar formulario
          </button>
          <button
            className="btn btn-outline-success btn-sm rounded-pill"
            disabled
          >
            <i className="bi bi-download me-2"></i>
            Descargar respuestas
          </button>
        </div>
      </div>
    </div>
  );
}
