import { Card, CardContent, CardHeader, Input, TextArea, Button, Chip, Separator } from '@heroui/react';
import { CalendarDays, Trash2, Plus, Clock } from 'lucide-react';
import { useApp } from '../context/AppContext';
import { SectionCard } from '../components/shared/SectionCard';
import { formatDate } from '../utils/formatters';

export function Events() {
  const { events, eventDraft, setEventDraft, saveEvent, deleteEvent } = useApp();

  return (
    <SectionCard title="Events" subtitle="Bestehende Events und schneller Neu-Anlage-Flow">
      <div className="grid gap-5 xl:grid-cols-[1fr_420px]">
        <div>
          <h3 className="mb-3 text-base font-semibold">Bestehende Events ({(events || []).length})</h3>
          <div className="space-y-3">
            {(events || []).length ? (events || []).map((event) => (
              <Card key={event.id} className="border border-default-100 bg-default-50/20">
                <CardContent className="flex flex-col gap-3 p-4">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2 min-w-0">
                      <CalendarDays size={16} className="text-primary-400 shrink-0" />
                      <span className="font-semibold text-small truncate">{event.title}</span>
                    </div>
                    <Button color="danger" size="sm" variant="flat" startContent={<Trash2 size={14} />} onPress={() => deleteEvent(event.id)}>
                      Löschen
                    </Button>
                  </div>
                  <p className="text-small text-default-400">{event.description || 'Keine Beschreibung'}</p>
                  <div className="flex items-center gap-2 text-tiny text-default-500">
                    <Clock size={12} />
                    {formatDate(event.startsAt)}
                  </div>
                </CardContent>
              </Card>
            )) : (
              <div className="flex flex-col items-center gap-2 py-8 text-center text-small text-default-400">
                <CalendarDays size={24} />
                Keine Events
              </div>
            )}
          </div>
        </div>

        <Card className="border border-default-100 bg-default-50/20">
          <CardHeader className="px-5 pt-5 pb-0">
            <h3 className="text-base font-semibold">Neues Event</h3>
          </CardHeader>
          <CardContent className="flex flex-col gap-4 p-5">
            <Input
              label="Titel"
              placeholder="Event Name"
              value={eventDraft.title}
              onValueChange={(v) => setEventDraft((s) => ({ ...s, title: v }))}
            />

            <TextArea
              label="Beschreibung"
              placeholder="Event Beschreibung"
              value={eventDraft.description}
              onValueChange={(v) => setEventDraft((s) => ({ ...s, description: v }))}
            />

            <Input
              label="Channel ID"
              placeholder="Channel für Erinnerungen"
              value={eventDraft.channelId}
              onValueChange={(v) => setEventDraft((s) => ({ ...s, channelId: v }))}
            />

            <Input
              label="Start (ISO)"
              type="datetime-local"
              placeholder="2024-12-24T18:00"
              value={eventDraft.startsAt}
              onValueChange={(v) => setEventDraft((s) => ({ ...s, startsAt: v }))}
            />

            <Button color="primary" startContent={<Plus size={16} />} onPress={saveEvent}>
              Event speichern
            </Button>
          </CardContent>
        </Card>
      </div>
    </SectionCard>
  );
}