import Link from 'next/link';

import { ArrowLeft } from 'lucide-react';

import { getSupabaseServerClient } from '@kit/supabase/server-client';
import { Button } from '@kit/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  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 NewNewsletterPage({ 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="Neuer Newsletter">
      <div className="flex w-full flex-col gap-6">
        {/* Back link */}
        <div>
          <Link
            href={`/home/${account}/newsletter`}
            className="text-muted-foreground hover:text-foreground inline-flex items-center text-sm"
          >
            <ArrowLeft className="mr-1 h-4 w-4" />
            Zurück zu Newsletter
          </Link>
        </div>

        <Card className="max-w-2xl">
          <CardHeader>
            <CardTitle>Neuer Newsletter</CardTitle>
            <CardDescription>
              Erstellen Sie eine neue Newsletter-Kampagne.
            </CardDescription>
          </CardHeader>

          <CardContent>
            <form className="flex flex-col gap-5">
              {/* Betreff */}
              <div className="flex flex-col gap-2">
                <Label htmlFor="subject">Betreff</Label>
                <Input
                  id="subject"
                  name="subject"
                  placeholder="z.B. Monatliche Vereinsnachrichten März 2026"
                  required
                />
              </div>

              {/* Body HTML */}
              <div className="flex flex-col gap-2">
                <Label htmlFor="bodyHtml">Inhalt (HTML)</Label>
                <Textarea
                  id="bodyHtml"
                  name="bodyHtml"
                  placeholder="<h1>Hallo {{first_name}},</h1>&#10;<p>Neuigkeiten aus dem Verein...</p>"
                  rows={10}
                  className="font-mono text-sm"
                  required
                />
                <p className="text-xs text-muted-foreground">
                  Verwenden Sie {'{{first_name}}'}, {'{{name}}'} und{' '}
                  {'{{email}}'} als Platzhalter für die Personalisierung.
                </p>
              </div>

              {/* Empfänger Info */}
              <div className="rounded-md bg-muted/50 p-4 text-sm text-muted-foreground">
                <p>
                  <strong>Empfänger-Auswahl:</strong> Nach dem Erstellen können
                  Sie die Empfänger aus Ihrer Mitgliederliste auswählen. Es
                  werden nur Mitglieder mit hinterlegter E-Mail-Adresse
                  berücksichtigt.
                </p>
              </div>

              {/* Vorlage Auswahl */}
              <div className="flex flex-col gap-2">
                <Label htmlFor="templateId">
                  Vorlage (optional)
                </Label>
                <select
                  id="templateId"
                  name="templateId"
                  className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
                >
                  <option value="">Keine Vorlage</option>
                </select>
              </div>
            </form>
          </CardContent>

          <CardFooter className="flex justify-between">
            <Link href={`/home/${account}/newsletter`}>
              <Button variant="outline">Abbrechen</Button>
            </Link>
            <Button type="submit">Newsletter erstellen</Button>
          </CardFooter>
        </Card>
      </div>
    </CmsPageShell>
  );
}