"use client";

import { useState, useEffect } from "react";
import { calculateEventStatus } from "@/lib/eventStatus";

interface Event {
  id: string;
  date: string;
  name: string;
  description: string;
  type: "ATELIER" | "KATA" | "PRESENTATION" | "LEARNING_HOUR";
  status: "UPCOMING" | "LIVE" | "PAST";
  room?: string | null;
  time?: string | null;
  maxPlaces?: number | null;
  createdAt: string;
  updatedAt: string;
  registrationsCount?: number;
}

interface EventFormData {
  date: string;
  name: string;
  description: string;
  type: "ATELIER" | "KATA" | "PRESENTATION" | "LEARNING_HOUR";
  room?: string;
  time?: string;
  maxPlaces?: number;
}

const eventTypes: Event["type"][] = [
  "ATELIER",
  "KATA",
  "PRESENTATION",
  "LEARNING_HOUR",
];
const getEventTypeLabel = (type: Event["type"]) => {
  switch (type) {
    case "ATELIER":
      return "Atelier";
    case "KATA":
      return "Kata";
    case "PRESENTATION":
      return "Présentation";
    case "LEARNING_HOUR":
      return "Learning Hour";
    default:
      return type;
  }
};

const getStatusLabel = (status: Event["status"]) => {
  switch (status) {
    case "UPCOMING":
      return "À venir";
    case "LIVE":
      return "En cours";
    case "PAST":
      return "Passé";
    default:
      return status;
  }
};

export default function EventManagement() {
  const [events, setEvents] = useState<Event[]>([]);
  const [loading, setLoading] = useState(true);
  const [editingEvent, setEditingEvent] = useState<Event | null>(null);
  const [isCreating, setIsCreating] = useState(false);
  const [saving, setSaving] = useState(false);
  const [formData, setFormData] = useState<EventFormData>({
    date: "",
    name: "",
    description: "",
    type: "ATELIER",
    room: "",
    time: "",
    maxPlaces: undefined,
  });

  useEffect(() => {
    fetchEvents();
  }, []);

  const fetchEvents = async () => {
    try {
      const response = await fetch("/api/admin/events");
      if (response.ok) {
        const data = await response.json();
        setEvents(data);
      }
    } catch (error) {
      console.error("Error fetching events:", error);
    } finally {
      setLoading(false);
    }
  };

  const handleCreate = () => {
    setIsCreating(true);
    setEditingEvent(null);
    setFormData({
      date: "",
      name: "",
      description: "",
      type: "ATELIER",
      room: "",
      time: "",
      maxPlaces: undefined,
    });
  };

  const handleEdit = (event: Event) => {
    setEditingEvent(event);
    setIsCreating(false);
    setFormData({
      date: event.date,
      name: event.name,
      description: event.description,
      type: event.type,
      room: event.room || "",
      time: event.time || "",
      maxPlaces: event.maxPlaces || undefined,
    });
  };

  const handleSave = async () => {
    setSaving(true);
    try {
      let response;
      if (isCreating) {
        response = await fetch("/api/admin/events", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(formData),
        });
      } else if (editingEvent) {
        response = await fetch(`/api/admin/events/${editingEvent.id}`, {
          method: "PUT",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(formData),
        });
      }

      if (response?.ok) {
        await fetchEvents();
        setEditingEvent(null);
        setIsCreating(false);
        setFormData({
          date: "",
          name: "",
          description: "",
          type: "ATELIER",
          room: "",
          time: "",
          maxPlaces: undefined,
        });
      } else {
        const error = await response?.json();
        alert(error.error || "Erreur lors de la sauvegarde");
      }
    } catch (error) {
      console.error("Error saving event:", error);
      alert("Erreur lors de la sauvegarde");
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async (eventId: string) => {
    if (!confirm("Êtes-vous sûr de vouloir supprimer cet événement ?")) {
      return;
    }

    try {
      const response = await fetch(`/api/admin/events/${eventId}`, {
        method: "DELETE",
      });

      if (response.ok) {
        await fetchEvents();
      } else {
        const error = await response.json();
        alert(error.error || "Erreur lors de la suppression");
      }
    } catch (error) {
      console.error("Error deleting event:", error);
      alert("Erreur lors de la suppression");
    }
  };

  const handleCancel = () => {
    setEditingEvent(null);
    setIsCreating(false);
    setFormData({
      date: "",
      name: "",
      description: "",
      type: "ATELIER",
      room: "",
      time: "",
      maxPlaces: undefined,
    });
  };

  if (loading) {
    return <div className="text-center text-gray-400 py-8">Chargement...</div>;
  }

  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center mb-4">
        <h3 className="text-xl font-gaming font-bold text-pixel-gold">
          Événements ({events.length})
        </h3>
        {!isCreating && !editingEvent && (
          <button
            onClick={handleCreate}
            className="px-4 py-2 border border-green-500/50 bg-green-900/20 text-green-400 uppercase text-xs tracking-widest rounded hover:bg-green-900/30 transition"
          >
            + Nouvel événement
          </button>
        )}
      </div>

      {(isCreating || editingEvent) && (
        <div className="bg-black/60 border border-pixel-gold/20 rounded p-4 mb-4">
          <h4 className="text-pixel-gold font-bold mb-4">
            {isCreating ? "Créer un événement" : "Modifier l'événement"}
          </h4>
          <div className="space-y-4">
            <div>
              <label className="block text-sm text-gray-300 mb-1">Date</label>
              <input
                type="date"
                value={formData.date}
                onChange={(e) =>
                  setFormData({ ...formData, date: e.target.value })
                }
                className="w-full px-3 py-2 bg-black/60 border border-pixel-gold/30 rounded text-white text-sm"
              />
            </div>
            <div>
              <label className="block text-sm text-gray-300 mb-1">Nom</label>
              <input
                type="text"
                value={formData.name}
                onChange={(e) =>
                  setFormData({ ...formData, name: e.target.value })
                }
                placeholder="Nom de l'événement"
                className="w-full px-3 py-2 bg-black/60 border border-pixel-gold/30 rounded text-white text-sm"
              />
            </div>
            <div>
              <label className="block text-sm text-gray-300 mb-1">
                Description
              </label>
              <textarea
                value={formData.description}
                onChange={(e) =>
                  setFormData({ ...formData, description: e.target.value })
                }
                placeholder="Description de l'événement"
                rows={4}
                className="w-full px-3 py-2 bg-black/60 border border-pixel-gold/30 rounded text-white text-sm"
              />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm text-gray-300 mb-1">Type</label>
                <select
                  value={formData.type}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      type: e.target.value as Event["type"],
                    })
                  }
                  className="w-full px-3 py-2 bg-black/60 border border-pixel-gold/30 rounded text-white text-sm"
                >
                  {eventTypes.map((type) => (
                    <option key={type} value={type}>
                      {getEventTypeLabel(type)}
                    </option>
                  ))}
                </select>
              </div>
            </div>
            <div className="grid grid-cols-3 gap-4">
              <div>
                <label className="block text-sm text-gray-300 mb-1">
                  Salle
                </label>
                <input
                  type="text"
                  value={formData.room || ""}
                  onChange={(e) =>
                    setFormData({ ...formData, room: e.target.value })
                  }
                  placeholder="Ex: Nautilus"
                  className="w-full px-3 py-2 bg-black/60 border border-pixel-gold/30 rounded text-white text-sm"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-300 mb-1">
                  Heure
                </label>
                <input
                  type="text"
                  value={formData.time || ""}
                  onChange={(e) =>
                    setFormData({ ...formData, time: e.target.value })
                  }
                  placeholder="Ex: 11h-12h"
                  className="w-full px-3 py-2 bg-black/60 border border-pixel-gold/30 rounded text-white text-sm"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-300 mb-1">
                  Places max
                </label>
                <input
                  type="number"
                  value={formData.maxPlaces || ""}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      maxPlaces: e.target.value
                        ? parseInt(e.target.value)
                        : undefined,
                    })
                  }
                  placeholder="Ex: 25"
                  className="w-full px-3 py-2 bg-black/60 border border-pixel-gold/30 rounded text-white text-sm"
                />
              </div>
            </div>
            <div className="flex gap-2">
              <button
                onClick={handleSave}
                disabled={saving}
                className="px-4 py-2 border border-green-500/50 bg-green-900/20 text-green-400 uppercase text-xs tracking-widest rounded hover:bg-green-900/30 transition disabled:opacity-50"
              >
                {saving ? "Enregistrement..." : "Enregistrer"}
              </button>
              <button
                onClick={handleCancel}
                className="px-4 py-2 border border-gray-600/50 bg-gray-900/20 text-gray-400 uppercase text-xs tracking-widest rounded hover:bg-gray-900/30 transition"
              >
                Annuler
              </button>
            </div>
          </div>
        </div>
      )}

      {events.length === 0 ? (
        <div className="text-center text-gray-400 py-8">
          Aucun événement trouvé
        </div>
      ) : (
        <div className="space-y-3">
          {events.map((event) => (
            <div
              key={event.id}
              className="bg-black/60 border border-pixel-gold/20 rounded p-4"
            >
              <div className="flex justify-between items-start">
                <div className="flex-1">
                  <div className="flex items-center gap-3 mb-2">
                    <h4 className="text-pixel-gold font-bold text-lg">
                      {event.name}
                    </h4>
                    <span className="px-2 py-1 bg-pixel-gold/20 border border-pixel-gold/50 text-pixel-gold text-xs uppercase rounded">
                      {getEventTypeLabel(event.type)}
                    </span>
                    <span
                      className={`px-2 py-1 text-xs uppercase rounded ${(() => {
                        const status = calculateEventStatus(event.date);
                        return status === "UPCOMING"
                          ? "bg-green-900/50 border border-green-500/50 text-green-400"
                          : status === "LIVE"
                          ? "bg-yellow-900/50 border border-yellow-500/50 text-yellow-400"
                          : "bg-gray-900/50 border border-gray-500/50 text-gray-400";
                      })()}`}
                    >
                      {getStatusLabel(calculateEventStatus(event.date))}
                    </span>
                  </div>
                  <p className="text-gray-400 text-sm mb-2">
                    {event.description}
                  </p>
                  <div className="flex flex-wrap items-center gap-4 mt-2">
                    <p className="text-gray-500 text-xs">
                      Date: {new Date(event.date).toLocaleDateString("fr-FR")}
                    </p>
                    {event.room && (
                      <p className="text-gray-500 text-xs">
                        📍 Salle: {event.room}
                      </p>
                    )}
                    {event.time && (
                      <p className="text-gray-500 text-xs">
                        🕐 Heure: {event.time}
                      </p>
                    )}
                    {event.maxPlaces && (
                      <p className="text-gray-500 text-xs">
                        👥 Places: {event.maxPlaces}
                      </p>
                    )}
                    <span className="px-2 py-1 bg-blue-900/30 border border-blue-500/50 text-blue-400 text-xs rounded">
                      {event.registrationsCount || 0} inscrit
                      {event.registrationsCount !== 1 ? "s" : ""}
                    </span>
                  </div>
                </div>
                {!isCreating && !editingEvent && (
                  <div className="flex gap-2 ml-4">
                    <button
                      onClick={() => handleEdit(event)}
                      className="px-3 py-1 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition"
                    >
                      Modifier
                    </button>
                    <button
                      onClick={() => handleDelete(event.id)}
                      className="px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 uppercase text-xs tracking-widest rounded hover:bg-red-900/30 transition"
                    >
                      Supprimer
                    </button>
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}