import { SiteShell } from '@/components/site/site-shell';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { getLocale, t } from '@/lib/i18n';
import { getPublicStatus } from '@/lib/public-status';

function statusBadgeVariant(overall: string): 'default' | 'secondary' | 'destructive' | 'outline' {
  if (overall === 'operational') {
    return 'default';
  }
  if (overall === 'maintenance') {
    return 'secondary';
  }
  return 'destructive';
}

export default async function StatusPage() {
  const [locale, status] = await Promise.all([getLocale(), getPublicStatus()]);

  return (
    <SiteShell>
      <div className="mx-auto w-full max-w-[1200px] space-y-8 px-6 py-12">
        <div className="flex flex-wrap items-center gap-3">
          <h1 className="text-3xl font-semibold">{t(locale, 'status.title')}</h1>
          <Badge variant={statusBadgeVariant(status.overall)}>
            {t(locale, `status.overall.${status.overall}`)}
          </Badge>
        </div>
        <p className="text-muted-foreground">{t(locale, 'status.subtitle')}</p>

        <div className="grid gap-4 sm:grid-cols-3">
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm text-muted-foreground">{t(locale, 'status.latency')}</CardTitle>
            </CardHeader>
            <CardContent className="text-2xl font-semibold">
              {status.apiLatencyMs === null ? '—' : `${status.apiLatencyMs} ms`}
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm text-muted-foreground">{t(locale, 'status.guilds')}</CardTitle>
            </CardHeader>
            <CardContent className="text-2xl font-semibold">{status.guildCount}</CardContent>
          </Card>
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm text-muted-foreground">{t(locale, 'status.uptime')}</CardTitle>
            </CardHeader>
            <CardContent className="text-2xl font-semibold">
              {status.uptimeSeconds === null
                ? '—'
                : `${Math.floor(status.uptimeSeconds / 3600)}h ${Math.floor((status.uptimeSeconds % 3600) / 60)}m`}
            </CardContent>
          </Card>
        </div>

        <section className="space-y-3">
          <h2 className="text-xl font-semibold">{t(locale, 'status.shardsTitle')}</h2>
          {status.shards.length === 0 ? (
            <Card>
              <CardContent className="py-6 text-sm text-muted-foreground">
                {t(locale, 'status.shardsEmpty')}
              </CardContent>
            </Card>
          ) : (
            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
              {status.shards.map((shard) => (
                <Card key={shard.id}>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-base">
                      {t(locale, 'status.shardLabel', { id: shard.id })}
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-1 text-sm text-muted-foreground">
                    <p>
                      {t(locale, 'status.shardStatus')}: {shard.status}
                    </p>
                    <p>
                      {t(locale, 'status.guilds')}: {shard.guildCount}
                    </p>
                    <p>
                      {t(locale, 'status.latency')}: {shard.ping} ms
                    </p>
                  </CardContent>
                </Card>
              ))}
            </div>
          )}
        </section>

        <section className="space-y-3">
          <h2 className="text-xl font-semibold">{t(locale, 'status.updatesTitle')}</h2>
          <Card>
            <CardContent className="divide-y divide-border p-0">
              {status.updates.length === 0 ? (
                <p className="p-4 text-sm text-muted-foreground">{t(locale, 'status.updatesEmpty')}</p>
              ) : (
                status.updates.map((entry) => (
                  <div key={entry.id} className="space-y-1 px-4 py-3">
                    <div className="flex flex-wrap items-center gap-2">
                      <p className="font-medium">
                        {entry.version} — {entry.title}
                      </p>
                      {entry.isIncident ? <Badge variant="destructive">{t(locale, 'status.incident')}</Badge> : null}
                    </div>
                    <p className="whitespace-pre-wrap text-sm text-muted-foreground">{entry.body}</p>
                    <p className="text-xs text-muted-foreground">
                      {new Date(entry.publishedAt).toLocaleString(locale)}
                    </p>
                  </div>
                ))
              )}
            </CardContent>
          </Card>
        </section>
      </div>
    </SiteShell>
  );
}
