import Link from 'next/link';

import {
  CreditCard,
  FileText,
  Tag,
  BarChart3,
  Mail,
  Award,
} 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 { CmsPageShell } from '~/components/cms-page-shell';

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

const DOCUMENT_TYPES = [
  {
    id: 'member-card',
    title: 'Mitgliedsausweis',
    description:
      'Mitgliedsausweise mit Foto, Name und Mitgliedsnummer generieren.',
    icon: CreditCard,
    color: 'text-blue-600 bg-blue-50',
  },
  {
    id: 'invoice',
    title: 'Rechnung',
    description:
      'Professionelle Rechnungen im PDF-Format mit Logo und Positionen.',
    icon: FileText,
    color: 'text-green-600 bg-green-50',
  },
  {
    id: 'labels',
    title: 'Etiketten',
    description:
      'Adressetiketten für Serienbriefe im Avery-Format drucken.',
    icon: Tag,
    color: 'text-orange-600 bg-orange-50',
  },
  {
    id: 'report',
    title: 'Bericht',
    description:
      'Statistische Auswertungen und Berichte als PDF oder Excel.',
    icon: BarChart3,
    color: 'text-purple-600 bg-purple-50',
  },
  {
    id: 'letter',
    title: 'Brief',
    description:
      'Serienbriefe mit personalisierten Platzhaltern erstellen.',
    icon: Mail,
    color: 'text-rose-600 bg-rose-50',
  },
  {
    id: 'certificate',
    title: 'Zertifikat',
    description:
      'Teilnahmebescheinigungen und Zertifikate mit Unterschrift.',
    icon: Award,
    color: 'text-amber-600 bg-amber-50',
  },
] as const;

export default async function DocumentsPage({ 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="Dokumente">
      <div className="flex w-full flex-col gap-6">
        {/* Header */}
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold">Dokumente</h1>
            <p className="text-muted-foreground">
              Dokumente erstellen und verwalten
            </p>
          </div>

          <div className="flex gap-2">
            <Link href={`/home/${account}/documents/templates`}>
              <Button variant="outline">Vorlagen</Button>
            </Link>
          </div>
        </div>

        {/* Document Type Grid */}
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {DOCUMENT_TYPES.map((docType) => {
            const Icon = docType.icon;
            return (
              <Card key={docType.id} className="flex flex-col">
                <CardHeader className="flex flex-row items-start gap-4 space-y-0">
                  <div className={`rounded-lg p-3 ${docType.color}`}>
                    <Icon className="h-6 w-6" />
                  </div>
                  <div className="flex-1">
                    <CardTitle className="text-base">{docType.title}</CardTitle>
                  </div>
                </CardHeader>
                <CardContent className="flex flex-1 flex-col justify-between gap-4">
                  <p className="text-sm text-muted-foreground">
                    {docType.description}
                  </p>
                  <Link
                    href={`/home/${account}/documents/generate?type=${docType.id}`}
                  >
                    <Button variant="outline" size="sm" className="w-full">
                      Erstellen
                    </Button>
                  </Link>
                </CardContent>
              </Card>
            );
          })}
        </div>
      </div>
    </CmsPageShell>
  );
}