import Link from 'next/link';

import { ArrowLeft } from 'lucide-react';

import { Button } from '@kit/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@kit/ui/card';
import { Input } from '@kit/ui/input';
import { Label } from '@kit/ui/label';
import { Textarea } from '@kit/ui/textarea';

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

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

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

  return (
    <CmsPageShell account={account} title="Neuer Kurs">
      <div className="flex w-full max-w-3xl flex-col gap-6">
        {/* Header */}
        <div className="flex items-center gap-4">
          <Link href={`/home/${account}/courses`}>
            <Button variant="ghost" size="sm">
              <ArrowLeft className="mr-2 h-4 w-4" />
              Zurück
            </Button>
          </Link>
          <div>
            <h1 className="text-2xl font-bold">Neuer Kurs</h1>
            <p className="text-muted-foreground">Kurs anlegen</p>
          </div>
        </div>

        <form className="flex flex-col gap-6">
          {/* Grunddaten */}
          <Card>
            <CardHeader>
              <CardTitle>Grunddaten</CardTitle>
              <CardDescription>
                Allgemeine Informationen zum Kurs
              </CardDescription>
            </CardHeader>
            <CardContent className="grid gap-4">
              <div className="grid gap-2">
                <Label htmlFor="courseNumber">Kursnummer</Label>
                <Input
                  id="courseNumber"
                  name="courseNumber"
                  placeholder="z.B. K-2025-001"
                />
              </div>

              <div className="grid gap-2">
                <Label htmlFor="name">Kursname</Label>
                <Input
                  id="name"
                  name="name"
                  placeholder="z.B. Töpfern für Anfänger"
                  required
                />
              </div>

              <div className="grid gap-2">
                <Label htmlFor="description">Beschreibung</Label>
                <Textarea
                  id="description"
                  name="description"
                  placeholder="Kursbeschreibung…"
                  rows={4}
                />
              </div>
            </CardContent>
          </Card>

          {/* Zeitplan */}
          <Card>
            <CardHeader>
              <CardTitle>Zeitplan</CardTitle>
              <CardDescription>Beginn und Ende des Kurses</CardDescription>
            </CardHeader>
            <CardContent className="grid gap-4 sm:grid-cols-2">
              <div className="grid gap-2">
                <Label htmlFor="startDate">Beginn</Label>
                <Input
                  id="startDate"
                  name="startDate"
                  type="date"
                  required
                />
              </div>

              <div className="grid gap-2">
                <Label htmlFor="endDate">Ende</Label>
                <Input id="endDate" name="endDate" type="date" />
              </div>
            </CardContent>
          </Card>

          {/* Kapazität */}
          <Card>
            <CardHeader>
              <CardTitle>Kapazität</CardTitle>
              <CardDescription>
                Teilnehmer und Gebühren
              </CardDescription>
            </CardHeader>
            <CardContent className="grid gap-4 sm:grid-cols-3">
              <div className="grid gap-2">
                <Label htmlFor="capacity">Max. Teilnehmer</Label>
                <Input
                  id="capacity"
                  name="capacity"
                  type="number"
                  min={1}
                  placeholder="20"
                />
              </div>

              <div className="grid gap-2">
                <Label htmlFor="minParticipants">Min. Teilnehmer</Label>
                <Input
                  id="minParticipants"
                  name="minParticipants"
                  type="number"
                  min={0}
                  placeholder="5"
                />
              </div>

              <div className="grid gap-2">
                <Label htmlFor="fee">Gebühr (€)</Label>
                <Input
                  id="fee"
                  name="fee"
                  type="number"
                  min={0}
                  step="0.01"
                  placeholder="0.00"
                />
              </div>
            </CardContent>
          </Card>

          {/* Zuordnung */}
          <Card>
            <CardHeader>
              <CardTitle>Zuordnung</CardTitle>
              <CardDescription>Status des Kurses</CardDescription>
            </CardHeader>
            <CardContent className="grid gap-4">
              <div className="grid gap-2">
                <Label htmlFor="status">Status</Label>
                <select
                  id="status"
                  name="status"
                  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"
                  defaultValue="planned"
                >
                  <option value="planned">Geplant</option>
                  <option value="open">Offen</option>
                  <option value="running">Laufend</option>
                  <option value="completed">Abgeschlossen</option>
                  <option value="cancelled">Abgesagt</option>
                </select>
              </div>
            </CardContent>
          </Card>

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