import { UserPlus } from 'lucide-react';

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

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

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

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

  return (
    <CmsPageShell account={account} title="Neues Mitglied">
      <div className="flex w-full flex-col gap-6">
        <div>
          <h1 className="text-2xl font-bold">Neues Mitglied</h1>
          <p className="text-muted-foreground">Mitglied manuell anlegen</p>
        </div>

        <form className="flex flex-col gap-6">
          {/* Persönliche Daten */}
          <Card>
            <CardHeader>
              <CardTitle>Persönliche Daten</CardTitle>
            </CardHeader>
            <CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="firstName">Vorname</Label>
                <Input id="firstName" name="firstName" required />
              </div>
              <div className="space-y-2">
                <Label htmlFor="lastName">Nachname</Label>
                <Input id="lastName" name="lastName" required />
              </div>
              <div className="space-y-2">
                <Label htmlFor="dateOfBirth">Geburtsdatum</Label>
                <Input id="dateOfBirth" name="dateOfBirth" type="date" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="gender">Geschlecht</Label>
                <select
                  id="gender"
                  name="gender"
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                >
                  <option value="">— Bitte wählen —</option>
                  <option value="male">Männlich</option>
                  <option value="female">Weiblich</option>
                  <option value="diverse">Divers</option>
                </select>
              </div>
            </CardContent>
          </Card>

          {/* Kontakt */}
          <Card>
            <CardHeader>
              <CardTitle>Kontakt</CardTitle>
            </CardHeader>
            <CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-3">
              <div className="space-y-2">
                <Label htmlFor="email">E-Mail</Label>
                <Input id="email" name="email" type="email" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="phone">Telefon</Label>
                <Input id="phone" name="phone" type="tel" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="mobile">Mobil</Label>
                <Input id="mobile" name="mobile" type="tel" />
              </div>
            </CardContent>
          </Card>

          {/* Adresse */}
          <Card>
            <CardHeader>
              <CardTitle>Adresse</CardTitle>
            </CardHeader>
            <CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <div className="space-y-2 sm:col-span-1">
                <Label htmlFor="street">Straße</Label>
                <Input id="street" name="street" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="houseNumber">Hausnummer</Label>
                <Input id="houseNumber" name="houseNumber" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="postalCode">PLZ</Label>
                <Input id="postalCode" name="postalCode" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="city">Ort</Label>
                <Input id="city" name="city" />
              </div>
            </CardContent>
          </Card>

          {/* Mitgliedschaft */}
          <Card>
            <CardHeader>
              <CardTitle>Mitgliedschaft</CardTitle>
            </CardHeader>
            <CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-3">
              <div className="space-y-2">
                <Label htmlFor="memberNumber">Mitgliedsnr.</Label>
                <Input id="memberNumber" name="memberNumber" />
              </div>
              <div className="space-y-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"
                >
                  <option value="active">Aktiv</option>
                  <option value="inactive">Inaktiv</option>
                  <option value="pending">Ausstehend</option>
                </select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="entryDate">Eintrittsdatum</Label>
                <Input id="entryDate" name="entryDate" type="date" />
              </div>
            </CardContent>
          </Card>

          {/* SEPA */}
          <Card>
            <CardHeader>
              <CardTitle>SEPA-Bankverbindung</CardTitle>
            </CardHeader>
            <CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-3">
              <div className="space-y-2">
                <Label htmlFor="iban">IBAN</Label>
                <Input id="iban" name="iban" placeholder="DE89 3704 0044 0532 0130 00" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="bic">BIC</Label>
                <Input id="bic" name="bic" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="accountHolder">Kontoinhaber</Label>
                <Input id="accountHolder" name="accountHolder" />
              </div>
            </CardContent>
          </Card>

          {/* Notizen */}
          <Card>
            <CardHeader>
              <CardTitle>Notizen</CardTitle>
            </CardHeader>
            <CardContent>
              <textarea
                name="notes"
                rows={4}
                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                placeholder="Zusätzliche Anmerkungen…"
              />
            </CardContent>
          </Card>

          {/* Submit */}
          <div className="flex justify-end">
            <Button type="submit" size="lg">
              <UserPlus className="mr-2 h-4 w-4" />
              Mitglied erstellen
            </Button>
          </div>
        </form>
      </div>
    </CmsPageShell>
  );
}