'use client';
import MarkdownRenderer from '@/components/markdown-render';
import { useGetApi } from '@/hooks/use-get-api';
import Image from 'next/image';
import React, { useState, useEffect } from 'react';
import FormularioRegistro from '../formulario/formulario-registro';
import FormularioExito from '../formulario/formulario-exito';
import { GetEventoWithCuestionario } from '@/types/evento';
import { formatearRangoFechas } from '@/utils/date-utils';
import { SubmitResponse } from '@/types/submit';
import { FormularioProvider } from '@/context/formulario';

export default function FormularioPage({
  id_evento,
  id_cuestionario,
}: {
  id_evento: string;
  id_cuestionario: string;
}) {
  const [response, setResponse] = useState<SubmitResponse | null>(null);
  const [qrImageUrl, setQrImageUrl] = useState<string | null>(null);
  const { data, error } = useGetApi<GetEventoWithCuestionario>(
    `/evento/${id_evento}/cuestionario/${id_cuestionario}`
  );

  // Procesar el QR buffer cuando se reciba la respuesta
  useEffect(() => {
    if (!response?.qr_buffer) {
      setQrImageUrl(null);
      return;
    }

    try {
      const binaryString = atob(response.qr_buffer);
      const bytes = new Uint8Array(binaryString.length);
      for (let i = 0; i < binaryString.length; i++) {
        bytes[i] = binaryString.charCodeAt(i);
      }
      const blob = new Blob([bytes], { type: 'image/png' });
      const url = URL.createObjectURL(blob);
      setQrImageUrl(url);
    } catch (error) {
      console.error('Error al procesar el QR buffer:', error);
      setQrImageUrl(null);
    }
  }, [response?.qr_buffer]);

  // Cleanup del QR cuando el componente se desmonte o cambie la respuesta
  useEffect(() => {
    return () => {
      if (qrImageUrl) {
        URL.revokeObjectURL(qrImageUrl);
      }
    };
  }, [qrImageUrl]);

  if (error) {
    return <div>Error al cargar el cuestionario: {error.message}</div>;
  }

  const onSubmitFormulario = async (res: SubmitResponse) => {
    setResponse(res);
  };

  // Si hay una respuesta exitosa, mostrar la vista de éxito
  if (response && response.success) {
    return (
      <FormularioExito
        response={response}
        qrImageUrl={qrImageUrl}
        nombreEvento={data?.nombre_evento}
        nombreFormulario={data?.cuestionario.nombre_form}
      />
    );
  }

  return (
    <div className="container my-5">
      {/* Sección de banners mejorada */}
      <div className="text-center mb-4">
        {data?.banner && data?.cuestionario.banner ? (
          /* Ambos banners disponibles */
          <div className="d-flex align-items-center justify-content-center gap-3 flex-wrap">
            <div className="position-relative">
              <Image
                src={`${process.env.NEXT_PUBLIC_API_URL}/banners/${data.banner}`}
                alt={`Banner del evento: ${data.nombre_evento}`}
                width={350}
                height={200}
                className="img-fluid rounded shadow-sm"
                style={{ objectFit: 'cover' }}
              />
              <div className="position-absolute bottom-0 start-0 m-2">
                <span className="badge bg-primary bg-opacity-90">
                  <i className="bi bi-calendar-event me-1"></i>
                  Evento
                </span>
              </div>
            </div>

            <div className="d-flex align-items-center justify-content-center">
              <div
                className="rounded-circle bg-light border d-flex align-items-center justify-content-center"
                style={{ width: '50px', height: '50px' }}
              >
                <i className="bi bi-x-lg fs-4 text-muted"></i>
              </div>
            </div>

            <div className="position-relative">
              <Image
                src={`${process.env.NEXT_PUBLIC_API_URL}/banners/${data.cuestionario.banner}`}
                alt={`Banner del formulario: ${data.cuestionario.nombre_form}`}
                width={350}
                height={200}
                className="img-fluid rounded shadow-sm"
                style={{ objectFit: 'cover' }}
              />
              <div className="position-absolute bottom-0 start-0 m-2">
                <span className="badge bg-success bg-opacity-90">
                  <i className="bi bi-file-earmark-text me-1"></i>
                  Formulario
                </span>
              </div>
            </div>
          </div>
        ) : data?.banner ? (
          /* Solo banner del evento */
          <div>
            <Image
              src={`${process.env.NEXT_PUBLIC_API_URL}/banners/${data.banner}`}
              alt={data?.nombre_evento || ''}
              width={800}
              height={400}
              className="img-fluid rounded shadow"
            />
            <p className="text-muted mt-2 small">
              <i className="bi bi-calendar-event me-1"></i>
              Banner del evento
            </p>
          </div>
        ) : data?.cuestionario.banner ? (
          /* Solo banner del formulario */
          <div>
            <Image
              src={`${process.env.NEXT_PUBLIC_API_URL}/banners/${data.cuestionario.banner}`}
              alt={data?.cuestionario.nombre_form || ''}
              width={800}
              height={400}
              className="img-fluid rounded shadow"
            />
            <p className="text-muted mt-2 small">
              <i className="bi bi-file-earmark-text me-1"></i>
              Banner del formulario
            </p>
          </div>
        ) : null}
      </div>

      {/* Layout de dos columnas */}
      <div className="row">
        {/* Columna izquierda - Información */}
        <div className="col-lg-5">
          {/* Tarjeta: Evento principal */}
          <section aria-labelledby="evento-heading" className="mb-1">
            <div className="card border-0 shadow-sm">
              <div className="card-body">
                <h2
                  id="evento-heading"
                  className="h4 mb-2 d-flex align-items-center gap-2"
                >
                  <i className="bi bi-calendar-event text-primary"></i>
                  Evento
                </h2>

                <h3 className="h3 mb-2">{data?.nombre_evento}</h3>

                {data?.descripcion_evento && (
                  <div className="text-muted mb-3">
                    <MarkdownRenderer markdown={data?.descripcion_evento} />
                  </div>
                )}

                {data?.fecha_inicio && data?.fecha_fin && (
                  <p className="text-muted mb-0">
                    <i
                      className="bi bi-calendar-date me-1 text-primary"
                      aria-hidden="true"
                    ></i>
                    {formatearRangoFechas(data.fecha_inicio, data.fecha_fin)}{' '}
                    horas.
                  </p>
                )}
              </div>
            </div>
          </section>

          {/* Tarjeta: Sub-evento (Cuestionario) */}
          {data?.cuestionario && (
            <section aria-labelledby="cuestionario-heading">
              <div className="card border-0 shadow-sm">
                <div className="card-body">
                  <div className="d-flex justify-content-between align-items-start mb-2">
                    <h2
                      id="cuestionario-heading"
                      className="h4 mb-0 d-flex align-items-center gap-2"
                    >
                      <i className="bi bi-ui-checks-grid text-success"></i>
                      Registro a cuestionario
                    </h2>
                    <span className="badge bg-success-subtle text-success border border-success-subtle">
                      Sub-evento
                    </span>
                  </div>

                  <h3 className="h3 mb-1">{data.cuestionario.nombre_form}</h3>

                  {data.cuestionario.descripcion && (
                    <div className="text-muted mb-3">
                      <MarkdownRenderer
                        markdown={data.cuestionario.descripcion}
                      />
                    </div>
                  )}

                  {data.cuestionario.fecha_inicio &&
                    data.cuestionario.fecha_fin && (
                      <p className="text-muted mb-0 fs-5 fw-bold text-decoration-underline">
                        <i
                          className="bi  bi-clock me-1 text-primary"
                          aria-hidden="true"
                        ></i>
                        {formatearRangoFechas(
                          data.cuestionario.fecha_inicio,
                          data.cuestionario.fecha_fin
                        )}{' '}
                        horas.
                      </p>
                    )}
                </div>
              </div>
            </section>
          )}
        </div>

        {/* Columna derecha - Formulario */}
        <div className="col-lg-7">
          <div className="ps-lg-4">
            {data && (
              <FormularioProvider
                id_evento={data.id_evento}
                id_cuestionario={data.cuestionario.id_cuestionario}
              >
                <FormularioRegistro
                  evento={data.nombre_evento}
                  cuestionario={data.cuestionario.nombre_form}
                  id_evento={data.id_evento}
                  id_cuestionario={data.cuestionario.id_cuestionario}
                  handleSubmitFormulario={onSubmitFormulario}
                />
              </FormularioProvider>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}
