/**
 * @file EventsCreate.tsx
 * @description Formulário para a criação de novos Eventos customizados na aplicação Web.
 * Interage diretamente com a função `createEvent` da biblioteca do Supabase, formatando e guardando 
 * registos de calendário associados ao Utilizador em sessão.
 */
import { FormEvent, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Card } from '../components/ui/card'
import { Input } from '../components/ui/input'
import { Button } from '../components/ui/button'
import { createEvent } from '../lib/events'
import { CalendarPlus } from 'lucide-react'

export default function EventsCreate() {
  const navigate = useNavigate()

  const [title, setTitle] = useState('')
  const [description, setDescription] = useState('')
  const [date, setDate] = useState('') // datetime-local
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState('')

  /**
   * Valida e submete o formulário, criando uma Data ISO string a partir do input nativo do browser.
   * Aciona pedido à Base de Dados via Supabase Client (em '../lib/events').
   */
  async function onSubmit(e: FormEvent) {
    e.preventDefault()
    setError('')

    if (!title.trim()) {
      setError('Preenche o título')
      return
    }
    if (!date) {
      setError('Escolhe a data e hora')
      return
    }

    try {
      setSaving(true)

      // datetime-local -> ISO string (mantendo o valor como está)
      // Ex: "2026-01-28T10:30"
      const iso = new Date(date).toISOString()

      await createEvent({
        title: title.trim(),
        description: description.trim() ? description.trim() : undefined,
        date: iso,
      })

      navigate('/perfil', { replace: true })
    } catch (e: any) {
      setError(e?.message || 'Erro ao criar evento')
    } finally {
      setSaving(false)
    }
  }

  return (
    <div className="max-w-xl mx-auto py-8">
      <Card className="p-8 space-y-6">
        <div className="flex items-center gap-3">
          <div className="p-3 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-xl text-white shadow-lg">
            <CalendarPlus size={22} />
          </div>
          <div>
            <h1 className="text-2xl font-bold text-slate-900">Criar evento</h1>
            <p className="text-sm text-slate-600">Este evento vai aparecer no teu perfil</p>
          </div>
        </div>

        {error && (
          <div className="rounded-lg border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
            {error}
          </div>
        )}

        <form className="space-y-4" onSubmit={onSubmit}>
          <Input
            label="Título"
            value={title}
            onChange={(e) => {
              setTitle(e.target.value)
              setError('')
            }}
            placeholder="Ex: Corte às 18h"
            required
          />

          <Input
            label="Descrição (opcional)"
            value={description}
            onChange={(e) => {
              setDescription(e.target.value)
              setError('')
            }}
            placeholder="Notas do evento..."
          />

          {/* Se o teu componente Input não suportar type datetime-local, troca por <input> normal */}
          <Input
            label="Data e hora"
            type="datetime-local"
            value={date}
            onChange={(e) => {
              setDate(e.target.value)
              setError('')
            }}
            required
          />

          <div className="flex gap-3 pt-2">
            <Button type="button" variant="outline" className="w-full" onClick={() => navigate('/perfil')}>
              Cancelar
            </Button>
            <Button type="submit" className="w-full" disabled={saving}>
              {saving ? 'A guardar…' : 'Criar evento'}
            </Button>
          </div>
        </form>
      </Card>
    </div>
  )
}
