'use client';
import ImageUploader from '@/components/banner-uploader';
import Input from '@/components/input';
import Select from '@/components/select';
import { useGetApi } from '@/hooks/use-get-api';
import { CreateEventoType } from '@/types/create-evento';
import { TipoEvento } from '@/types/evento';
import { formatDateLocal } from '@/utils/date-utils';
import { commands } from '@uiw/react-md-editor';
import dynamic from 'next/dynamic';
import React from 'react';

// Carga dinámica para evitar problemas con SSR
const MDEditor = dynamic(() => import('@uiw/react-md-editor'), { ssr: false });
const MAX_LENGTH = 500;

interface CreateEventoProps {
  evento: CreateEventoType;
  handleChange: (field: keyof CreateEventoType, value: string | Date) => void;
  handleBannerChange: (file: File | null) => void;
}

export default function CreateEvento({
  evento,
  handleChange,
  handleBannerChange,
}: CreateEventoProps) {
  const { data: tipo_eventos } = useGetApi<TipoEvento[]>('tipo-evento');
  return (
    <div className="mt-2">
      <h4 className="mb-3">Detalles del Evento</h4>
      <div className="mb-2">
        <ImageUploader
          label="Banner del evento"
          onChange={handleBannerChange}
          showPreview={false}
        />
        <p className="text-muted mt-2 mb-0 small">
          <strong>
            <i className="bi bi-info-circle-fill me-2"></i>
            Esta es la imagen que se verá en el carrusel del evento.
          </strong>
          <br />
          <strong>
            <i className="bi bi-image me-2"></i>
            Dimensiones recomendadas: 1200x600 píxeles.
          </strong>
          <br />
          <strong>
            <i className="bi bi-file-earmark-image me-2"></i>
            Formatos soportados: PNG, JPG, JPEG.
          </strong>
        </p>
      </div>

      <Input
        label="Nombre del evento"
        required
        value={evento.nombre_evento}
        onChange={(e) => handleChange('nombre_evento', e.target.value)}
      />

      <div className="mb-4">
        <label className="form-label">Descripción del evento</label>
        <div data-color-mode="light">
          <MDEditor
            value={evento.descripcion_evento}
            onChange={(value) => {
              const texto = value || '';
              if (texto.length <= MAX_LENGTH) {
                handleChange('descripcion_evento', texto);
              }
            }}
            height={200}
            commands={[commands.bold, commands.italic, commands.hr]}
          />
        </div>
      </div>

      {tipo_eventos && (
        <Select
          label="Tipo de evento"
          value={evento.tipo_evento}
          placeholder="Selecciona un tipo de evento"
          onChange={(e) => handleChange('tipo_evento', e.target.value)}
          options={tipo_eventos.map((tipo) => ({
            value: tipo.id_tipo_evento,
            label: tipo.tipo_evento,
          }))}
        />
      )}

      <div className="row">
        <div className="col-md-6">
          <Input
            label="Fecha de inicio"
            type="datetime-local"
            className={{ container: 'mb-3' }}
            value={formatDateLocal(evento.fecha_inicio)}
            onChange={(e) =>
              handleChange('fecha_inicio', new Date(e.target.value))
            }
          />
        </div>

        <div className="col-md-6">
          <Input
            label="Fecha de fin"
            type="datetime-local"
            className={{ container: 'mb-3' }}
            value={formatDateLocal(evento.fecha_fin)}
            onChange={(e) =>
              handleChange('fecha_fin', new Date(e.target.value))
            }
          />
        </div>
      </div>
    </div>
  );
}
