import Link from 'next/link';

import { Plus, Globe, FileText, Settings, ExternalLink } from 'lucide-react';

import { formatDate } from '@kit/shared/dates';
import { createSiteBuilderApi } from '@kit/site-builder/api';
import { getSupabaseServerClient } from '@kit/supabase/server-client';
import { Badge } from '@kit/ui/badge';
import { Button } from '@kit/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
import { cn } from '@kit/ui/utils';

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

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

export default async function SiteBuilderDashboard({ params }: Props) {
  const { account } = await params;
  const client = getSupabaseServerClient();
  const { data: acct } = await client
    .from('accounts')
    .select('id')
    .eq('slug', account)
    .single();
  if (!acct) return <AccountNotFound />;

  const api = createSiteBuilderApi(client);
  const pages = await api.listPages(acct.id);
  const settings = await api.getSiteSettings(acct.id);
  const posts = await api.listPosts(acct.id);

  const isOnline = Boolean(settings?.is_public);
  const publishedCount = pages.filter(
    (p: Record<string, unknown>) => p.is_published,
  ).length;

  return (
    <CmsPageShell
      account={account}
      title="Website-Baukasten"
      description="Ihre Vereinswebseite verwalten"
    >
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div className="flex gap-2">
            <Link href={`/home/${account}/site-builder/settings`}>
              <Button variant="outline" size="sm">
                <Settings className="mr-2 h-4 w-4" />
                Einstellungen
              </Button>
            </Link>
            <Link href={`/home/${account}/site-builder/posts`}>
              <Button variant="outline" size="sm">
                <FileText className="mr-2 h-4 w-4" />
                Beiträge ({posts.length})
              </Button>
            </Link>
            {isOnline && (
              <a href={`/club/${account}`} target="_blank" rel="noopener">
                <Button variant="outline" size="sm">
                  <ExternalLink className="mr-2 h-4 w-4" />
                  Website ansehen
                </Button>
              </a>
            )}
          </div>
          <Link href={`/home/${account}/site-builder/new`}>
            <Button>
              <Plus className="mr-2 h-4 w-4" />
              Neue Seite
            </Button>
          </Link>
        </div>

        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
          <Card>
            <CardContent className="p-6">
              <p className="text-muted-foreground text-sm">Seiten</p>
              <p className="text-2xl font-bold">{pages.length}</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6">
              <p className="text-muted-foreground text-sm">Veröffentlicht</p>
              <p className="text-2xl font-bold">{publishedCount}</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6">
              <p className="text-muted-foreground text-sm">Status</p>
              <p className="text-2xl font-bold">
                <span className="flex items-center gap-1.5">
                  <span
                    className={cn(
                      'inline-block h-2 w-2 rounded-full',
                      isOnline ? 'bg-green-500' : 'bg-red-500',
                    )}
                  />
                  <span>{isOnline ? 'Online' : 'Offline'}</span>
                </span>
              </p>
            </CardContent>
          </Card>
        </div>

        {pages.length === 0 ? (
          <EmptyState
            icon={<Globe className="h-8 w-8" />}
            title="Noch keine Seiten"
            description="Erstellen Sie Ihre erste Seite mit dem visuellen Editor."
            actionLabel="Erste Seite erstellen"
            actionHref={`/home/${account}/site-builder/new`}
          />
        ) : (
          <div className="rounded-md border">
            <table className="w-full text-sm">
              <thead>
                <tr className="bg-muted/50 border-b">
                  <th className="p-3 text-left font-medium">Titel</th>
                  <th className="p-3 text-left font-medium">URL</th>
                  <th className="p-3 text-left font-medium">Status</th>
                  <th className="p-3 text-left font-medium">Startseite</th>
                  <th className="p-3 text-left font-medium">Aktualisiert</th>
                  <th className="p-3 text-left font-medium">Aktionen</th>
                </tr>
              </thead>
              <tbody>
                {pages.map((page: Record<string, unknown>) => (
                  <tr
                    key={String(page.id)}
                    className="hover:bg-muted/30 border-b"
                  >
                    <td className="p-3 font-medium">{String(page.title)}</td>
                    <td className="text-muted-foreground p-3 font-mono text-xs">
                      /{String(page.slug)}
                    </td>
                    <td className="p-3">
                      <Badge
                        variant={page.is_published ? 'default' : 'secondary'}
                      >
                        {page.is_published ? 'Veröffentlicht' : 'Entwurf'}
                      </Badge>
                    </td>
                    <td className="p-3">{page.is_homepage ? '⭐' : '—'}</td>
                    <td className="text-muted-foreground p-3 text-xs">
                      {formatDate(page.updated_at)}
                    </td>
                    <td className="p-3">
                      <Link
                        href={`/home/${account}/site-builder/${String(page.id)}/edit`}
                      >
                        <Button size="sm" variant="outline">
                          Bearbeiten
                        </Button>
                      </Link>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </CmsPageShell>
  );
}