import { getSupabaseServerClient } from '@kit/supabase/server-client';
import { createSiteBuilderApi } from '@kit/site-builder/api';
import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
import { Badge } from '@kit/ui/badge';
import { Button } from '@kit/ui/button';
import { cn } from '@kit/ui/utils';
import { Plus, Globe, FileText, Settings, ExternalLink } from 'lucide-react';
import Link from 'next/link';
import { CmsPageShell } from '~/components/cms-page-shell';
import { EmptyState } from '~/components/empty-state';
import { AccountNotFound } from '~/components/account-not-found';

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-sm text-muted-foreground">Seiten</p><p className="text-2xl font-bold">{pages.length}</p></CardContent></Card>
          <Card><CardContent className="p-6"><p className="text-sm text-muted-foreground">Veröffentlicht</p><p className="text-2xl font-bold">{publishedCount}</p></CardContent></Card>
          <Card>
            <CardContent className="p-6">
              <p className="text-sm text-muted-foreground">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="border-b bg-muted/50">
                <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="border-b hover:bg-muted/30">
                    <td className="p-3 font-medium">{String(page.title)}</td>
                    <td className="p-3 text-muted-foreground 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="p-3 text-xs text-muted-foreground">{page.updated_at ? new Date(String(page.updated_at)).toLocaleDateString('de-DE') : '—'}</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>
  );
}