import { useEffect, useState } from "react";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import axios from "axios";

type Event = {
  id?: number;
  title: string;
  description: string;
  max_participants?: number;
  fee?: number;
  address?: string;
  is_private: boolean;
};

const defaultEvent: Event = {
  title: "",
  description: "",
  max_participants: undefined,
  fee: undefined,
  address: "",
  is_private: false,
};

const EventsAdmin = () => {
  const [events, setEvents] = useState<Event[]>([]);
  const [form, setForm] = useState<Event>(defaultEvent);
  const [isEditing, setIsEditing] = useState(false);

  const fetchEvents = async () => {
    try {
      const res = await axios.get("/api/events?showPrivate=true");
      if (Array.isArray(res.data)) {
        setEvents(res.data);
      } else {
        console.warn("⚠️ Events-API hat kein Array geliefert:", res.data);
        setEvents([]);
      }
    } catch (error) {
      console.error("❌ Fehler beim Laden der Events:", error);
      setEvents([]);
    }
  };
  

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

  const handleSubmit = async () => {
    if (isEditing && form.id) {
      await axios.put(`/api/events/${form.id}`, form);
    } else {
      await axios.post("/api/events", form);
    }
    setForm(defaultEvent);
    setIsEditing(false);
    fetchEvents();
  };

  const handleDelete = async (id: number) => {
    await axios.delete(`/api/events/${id}`);
    fetchEvents();
  };

  const handleEdit = (event: Event) => {
    setForm(event);
    setIsEditing(true);
  };

  return (
    <div className="max-w-2xl mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">{isEditing ? "Event bearbeiten" : "Neues Event erstellen"}</h1>

      <div className="space-y-4">
        <Input
          placeholder="Titel"
          value={form.title}
          onChange={(e) => setForm({ ...form, title: e.target.value })}
        />
        <Textarea
          placeholder="Beschreibung"
          value={form.description}
          onChange={(e) => setForm({ ...form, description: e.target.value })}
        />
        <Input
          type="number"
          placeholder="Max. Teilnehmer"
          value={form.max_participants ?? ""}
          onChange={(e) => setForm({ ...form, max_participants: parseInt(e.target.value) || undefined })}
        />
        <Input
          type="number"
          step="0.01"
          placeholder="Gebühr (€)"
          value={form.fee ?? ""}
          onChange={(e) => setForm({ ...form, fee: parseFloat(e.target.value) || undefined })}
        />
        <Input
          placeholder="Adresse"
          value={form.address}
          onChange={(e) => setForm({ ...form, address: e.target.value })}
        />
        <div className="flex items-center space-x-2">
          <Switch
            checked={form.is_private}
            onCheckedChange={(val) => setForm({ ...form, is_private: val })}
          />
          <span>Privat</span>
        </div>

        <div className="flex space-x-2">
          <Button onClick={handleSubmit}>
            {isEditing ? "Speichern" : "Erstellen"}
          </Button>
          {isEditing && (
            <Button variant="ghost" onClick={() => { setForm(defaultEvent); setIsEditing(false); }}>
              Abbrechen
            </Button>
          )}
        </div>
      </div>

      <hr className="my-6" />

      <h2 className="text-xl font-semibold mb-2">Bestehende Events</h2>
      {Array.isArray(events) && events.length > 0 ? (
        <ul className="space-y-2">
            {events.map((ev) => (
            <li key={ev.id} className="p-3 border rounded-md shadow-sm flex justify-between items-center">
                <div>
                <div className="font-medium">{ev.title}</div>
                <div className="text-sm text-gray-500">{ev.description?.slice(0, 60)}...</div>
                </div>
                <div className="space-x-2">
                <Button variant="outline" onClick={() => handleEdit(ev)}>Bearbeiten</Button>
                <Button variant="destructive" onClick={() => handleDelete(ev.id!)}>Löschen</Button>
                </div>
            </li>
            ))}
        </ul>
        ) : (
        <p className="text-gray-500">Noch keine Events vorhanden.</p>
        )}

    </div>
  );
};

export default EventsAdmin;
