import Link from 'next/link';

import {
  ArrowLeft,
  CalendarDays,
  Clock,
  MapPin,
  Phone,
  Users,
} from 'lucide-react';

import { getSupabaseServerClient } from '@kit/supabase/server-client';
import { Button } from '@kit/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@kit/ui/card';

import { CmsPageShell } from '~/components/cms-page-shell';

interface PageProps {
  params: Promise<{ account: string }>;
}

export default async function NewEventPage({ params }: PageProps) {
  const { account } = await params;
  const client = getSupabaseServerClient();

  const { data: acct } = await client
    .from('accounts')
    .select('id')
    .eq('slug', account)
    .single();

  if (!acct) return <div>Konto nicht gefunden</div>;

  return (
    <CmsPageShell account={account} title="Neue Veranstaltung">
      <div className="flex w-full flex-col gap-6">
        {/* Header */}
        <div className="flex items-center gap-4">
          <Link href={`/home/${account}/events`}>
            <Button variant="ghost" size="icon">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <div>
            <h1 className="text-2xl font-bold">Neue Veranstaltung</h1>
            <p className="text-muted-foreground">
              Veranstaltung oder Ferienprogramm anlegen
            </p>
          </div>
        </div>

        <form className="flex flex-col gap-6">
          {/* Grunddaten */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <CalendarDays className="h-5 w-5" />
                Grunddaten
              </CardTitle>
              <CardDescription>
                Name und Beschreibung der Veranstaltung
              </CardDescription>
            </CardHeader>
            <CardContent className="flex flex-col gap-4">
              <div className="flex flex-col gap-1.5">
                <label htmlFor="name" className="text-sm font-medium">
                  Name
                </label>
                <input
                  id="name"
                  name="name"
                  type="text"
                  required
                  placeholder="z.B. Sommerfest 2025"
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                />
              </div>

              <div className="flex flex-col gap-1.5">
                <label htmlFor="description" className="text-sm font-medium">
                  Beschreibung
                </label>
                <textarea
                  id="description"
                  name="description"
                  rows={4}
                  placeholder="Beschreiben Sie die Veranstaltung…"
                  className="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                />
              </div>
            </CardContent>
          </Card>

          {/* Datum & Ort */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Clock className="h-5 w-5" />
                Datum &amp; Ort
              </CardTitle>
              <CardDescription>
                Zeitraum und Veranstaltungsort
              </CardDescription>
            </CardHeader>
            <CardContent className="grid grid-cols-1 gap-4 md:grid-cols-2">
              <div className="flex flex-col gap-1.5">
                <label htmlFor="event_date" className="text-sm font-medium">
                  Veranstaltungsdatum
                </label>
                <input
                  id="event_date"
                  name="event_date"
                  type="date"
                  required
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                />
              </div>

              <div className="flex flex-col gap-1.5">
                <label htmlFor="event_time" className="text-sm font-medium">
                  Uhrzeit
                </label>
                <input
                  id="event_time"
                  name="event_time"
                  type="time"
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                />
              </div>

              <div className="flex flex-col gap-1.5">
                <label htmlFor="end_date" className="text-sm font-medium">
                  Enddatum
                </label>
                <input
                  id="end_date"
                  name="end_date"
                  type="date"
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                />
              </div>

              <div className="flex flex-col gap-1.5">
                <label htmlFor="location" className="text-sm font-medium">
                  Ort
                </label>
                <input
                  id="location"
                  name="location"
                  type="text"
                  placeholder="z.B. Gemeindehaus, Turnhalle"
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                />
              </div>
            </CardContent>
          </Card>

          {/* Teilnehmer & Kosten */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Users className="h-5 w-5" />
                Teilnehmer &amp; Kosten
              </CardTitle>
              <CardDescription>
                Kapazität, Alter und Teilnahmegebühr
              </CardDescription>
            </CardHeader>
            <CardContent className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
              <div className="flex flex-col gap-1.5">
                <label htmlFor="capacity" className="text-sm font-medium">
                  Kapazität
                </label>
                <input
                  id="capacity"
                  name="capacity"
                  type="number"
                  min={1}
                  placeholder="Max. Teilnehmer"
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                />
              </div>

              <div className="flex flex-col gap-1.5">
                <label htmlFor="min_age" className="text-sm font-medium">
                  Mindestalter
                </label>
                <input
                  id="min_age"
                  name="min_age"
                  type="number"
                  min={0}
                  placeholder="z.B. 6"
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                />
              </div>

              <div className="flex flex-col gap-1.5">
                <label htmlFor="max_age" className="text-sm font-medium">
                  Höchstalter
                </label>
                <input
                  id="max_age"
                  name="max_age"
                  type="number"
                  min={0}
                  placeholder="z.B. 16"
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                />
              </div>

              <div className="flex flex-col gap-1.5">
                <label htmlFor="fee" className="text-sm font-medium">
                  Gebühr (€)
                </label>
                <input
                  id="fee"
                  name="fee"
                  type="number"
                  step="0.01"
                  min={0}
                  placeholder="0.00"
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                />
              </div>
            </CardContent>
          </Card>

          {/* Kontakt */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Phone className="h-5 w-5" />
                Kontakt
              </CardTitle>
              <CardDescription>
                Ansprechpartner für die Veranstaltung
              </CardDescription>
            </CardHeader>
            <CardContent className="grid grid-cols-1 gap-4 md:grid-cols-3">
              <div className="flex flex-col gap-1.5">
                <label htmlFor="contact_name" className="text-sm font-medium">
                  Name
                </label>
                <input
                  id="contact_name"
                  name="contact_name"
                  type="text"
                  placeholder="Vorname Nachname"
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                />
              </div>

              <div className="flex flex-col gap-1.5">
                <label htmlFor="contact_email" className="text-sm font-medium">
                  E-Mail
                </label>
                <input
                  id="contact_email"
                  name="contact_email"
                  type="email"
                  placeholder="name@example.de"
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                />
              </div>

              <div className="flex flex-col gap-1.5">
                <label htmlFor="contact_phone" className="text-sm font-medium">
                  Telefon
                </label>
                <input
                  id="contact_phone"
                  name="contact_phone"
                  type="tel"
                  placeholder="+49 …"
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                />
              </div>
            </CardContent>
          </Card>

          {/* Actions */}
          <div className="flex items-center justify-end gap-3">
            <Link href={`/home/${account}/events`}>
              <Button type="button" variant="outline">
                Abbrechen
              </Button>
            </Link>
            <Button type="submit">Veranstaltung erstellen</Button>
          </div>
        </form>
      </div>
    </CmsPageShell>
  );
}