'use client';
import ImageUploader from '@/components/banner-uploader';
import Input from '@/components/input';
import Select from '@/components/select';
import { CreateEventoType } from '@/types/create-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) {
  return (
    <div className="row border p-3 rounded my-4">
      <h2>Información del Evento</h2>
      <p>
        Completa la siguiente información para describir los detalles generales
        del evento.
      </p>

      <ImageUploader label="Banner del evento" onChange={handleBannerChange} />

      <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={300}
            commands={[commands.bold, commands.italic, commands.hr]}
          />
        </div>
      </div>

      <Select
        label="Tipo de evento"
        value={evento.tipo_evento}
        placeholder="Selecciona un tipo de evento"
        onChange={(e) => handleChange('tipo_evento', e.target.value)}
        options={[
          { label: 'Conferencia', value: 'conferencia' },
          { label: 'Taller', value: 'taller' },
          { label: 'Seminario', value: 'seminario' },
          { label: 'Curso', value: 'curso' },
          { label: 'Webinar', value: 'webinar' },
          { label: 'Reunión', value: 'reunion' },
          { label: 'Feria', value: 'feria' },
          { label: 'Concierto', value: 'concierto' },
          { label: 'Exposición', value: 'exposicion' },
          { label: 'Deportivo', value: 'deportivo' },
          { label: 'Cultural', value: 'cultural' },
          { label: 'Otro', value: 'otro' },
        ]}
      />

      <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>
  );
}
