import Link from 'next/link';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { getLocale, t } from '@/lib/i18n';
import { listOwnerAudit } from '@/lib/owner-audit';
import { getPresenceConfig } from '@/lib/owner-presence';
import { prisma } from '@/lib/prisma';

export default async function OwnerOverviewPage() {
  const locale = await getLocale();
  const [guildCount, blacklistUsers, blacklistGuilds, presence, audit, changelog] = await Promise.all([
    prisma.guild.count(),
    prisma.globalUserBlacklist.count(),
    prisma.guildBlacklist.count(),
    getPresenceConfig(),
    listOwnerAudit(10),
    prisma.changelogEntry.findMany({ orderBy: { publishedAt: 'desc' }, take: 5 })
  ]);

  const cards = [
    { label: t(locale, 'owner.overview.guilds'), value: String(guildCount) },
    { label: t(locale, 'owner.overview.blacklistedUsers'), value: String(blacklistUsers) },
    { label: t(locale, 'owner.overview.blacklistedGuilds'), value: String(blacklistGuilds) },
    {
      label: t(locale, 'owner.overview.maintenance'),
      value: presence.maintenanceMode ? t(locale, 'common.yes') : t(locale, 'common.no')
    },
    {
      label: t(locale, 'owner.overview.uptime'),
      value: `${Math.floor(process.uptime() / 60)} min`
    }
  ];

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-semibold">{t(locale, 'owner.overview.title')}</h1>
        <p className="text-sm text-muted-foreground">{t(locale, 'owner.overview.subtitle')}</p>
      </div>
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {cards.map((card) => (
          <Card key={card.label}>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">{card.label}</CardTitle>
            </CardHeader>
            <CardContent className="text-2xl font-semibold">{card.value}</CardContent>
          </Card>
        ))}
      </div>
      <div className="grid gap-4 lg:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle className="text-base">{t(locale, 'owner.overview.recentAudit')}</CardTitle>
          </CardHeader>
          <CardContent className="space-y-2 text-sm">
            {audit.length === 0 ? (
              <p className="text-muted-foreground">{t(locale, 'owner.overview.emptyAudit')}</p>
            ) : (
              audit.map((entry) => (
                <div key={entry.id} className="flex justify-between gap-2 border-b border-border/60 py-2 last:border-0">
                  <span>
                    {entry.action}
                    {entry.targetId ? ` · ${entry.targetId}` : ''}
                  </span>
                  <span className="text-muted-foreground">{new Date(entry.createdAt).toLocaleString()}</span>
                </div>
              ))
            )}
            <Link href="/owner/audit" className="text-primary hover:underline">
              {t(locale, 'owner.overview.viewAudit')}
            </Link>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle className="text-base">{t(locale, 'owner.overview.changelog')}</CardTitle>
          </CardHeader>
          <CardContent className="space-y-2 text-sm">
            {changelog.length === 0 ? (
              <p className="text-muted-foreground">{t(locale, 'owner.overview.emptyChangelog')}</p>
            ) : (
              changelog.map((entry) => (
                <div key={entry.id} className="border-b border-border/60 py-2 last:border-0">
                  <p className="font-medium">
                    {entry.version} — {entry.title}
                  </p>
                </div>
              ))
            )}
            <Link href="/owner/changelog" className="text-primary hover:underline">
              {t(locale, 'owner.overview.manageChangelog')}
            </Link>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}
