import Link from 'next/link';

import {
  CreditCard,
  FileText,
  Tag,
  BarChart3,
  Mail,
  Award,
} from 'lucide-react';
import { getTranslations } from 'next-intl/server';

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

import { AccountNotFound } from '~/components/account-not-found';
import { CmsPageShell } from '~/components/cms-page-shell';

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

const DOCUMENT_TYPES = [
  {
    id: 'member-card',
    icon: CreditCard,
    color: 'text-blue-600 bg-blue-50',
  },
  {
    id: 'invoice',
    icon: FileText,
    color: 'text-green-600 bg-green-50',
  },
  {
    id: 'labels',
    icon: Tag,
    color: 'text-orange-600 bg-orange-50',
  },
  {
    id: 'report',
    icon: BarChart3,
    color: 'text-purple-600 bg-purple-50',
  },
  {
    id: 'letter',
    icon: Mail,
    color: 'text-rose-600 bg-rose-50',
  },
  {
    id: 'certificate',
    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 t = await getTranslations('documents');

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

  if (!acct) return <AccountNotFound />;

  return (
    <CmsPageShell
      account={account}
      title={t('overview.title')}
      description={t('overview.subtitle')}
    >
      <div className="flex w-full flex-col gap-6">
        {/* Actions */}
        <div className="flex items-center justify-end">
          <Link href={`/home/${account}/documents/templates`}>
            <Button variant="outline">{t('overview.manageTemplates')}</Button>
          </Link>
        </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">
                      {t(`types.${docType.id}`)}
                    </CardTitle>
                  </div>
                </CardHeader>
                <CardContent className="flex flex-1 flex-col justify-between gap-4">
                  <p className="text-muted-foreground text-sm">
                    {t(`typeDescriptions.${docType.id}`)}
                  </p>
                  <Link
                    href={`/home/${account}/documents/generate?type=${docType.id}`}
                  >
                    <Button variant="outline" size="sm" className="w-full">
                      {t('overview.generate')}
                    </Button>
                  </Link>
                </CardContent>
              </Card>
            );
          })}
        </div>
      </div>
    </CmsPageShell>
  );
}