import type { ReactNode } from "react"
import Link from "next/link"
import { getTranslations } from "next-intl/server"
import { ArrowRight, FileText, LogIn, Database } from "lucide-react"

import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { AuditErrorBoundary } from "@/modules/audit/components/audit-error-boundary"
import { AuditOverviewStatsBar } from "@/modules/audit/components/audit-overview-stats-bar"
import { AuditActivityTrendChart } from "@/modules/audit/components/audit-activity-trend-chart"
import { DataChangeDistributionChart } from "@/modules/audit/components/data-change-distribution-chart"
import { AuditRetentionSettings } from "@/modules/audit/components/audit-retention-settings"
import type {
  AuditOverviewStats,
  AuditTrendPoint,
  DataChangeActionStat,
} from "@/modules/audit/types"

interface AuditOverviewViewProps {
  stats: AuditOverviewStats
  trend: AuditTrendPoint[]
  distribution: DataChangeActionStat[]
}

export async function AuditOverviewView({
  stats,
  trend,
  distribution,
}: AuditOverviewViewProps): Promise<ReactNode> {
  const t = await getTranslations("audit.overview")

  return (
    <div className="flex h-full flex-col space-y-8 p-8">
      {/* 页头 */}
      <div className="space-y-1">
        <h2 className="text-2xl font-bold tracking-tight">{t("title")}</h2>
        <p className="text-muted-foreground">{t("description")}</p>
      </div>

      {/* 统计卡片栏 */}
      <AuditErrorBoundary>
        <AuditOverviewStatsBar stats={stats} />
      </AuditErrorBoundary>

      {/* 趋势图 + 分布图 */}
      <div className="grid gap-6 lg:grid-cols-2">
        <AuditErrorBoundary>
          <AuditActivityTrendChart data={trend} />
        </AuditErrorBoundary>
        <AuditErrorBoundary>
          <DataChangeDistributionChart data={distribution} />
        </AuditErrorBoundary>
      </div>

      {/* 快捷入口 */}
      <AuditErrorBoundary>
        <Card>
          <CardHeader>
            <CardTitle>{t("quickLinks.title")}</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid gap-4 md:grid-cols-3">
              <QuickLink
                href="/admin/audit-logs"
                icon={FileText}
                title={t("quickLinks.auditLogs")}
              />
              <QuickLink
                href="/admin/audit-logs/login-logs"
                icon={LogIn}
                title={t("quickLinks.loginLogs")}
              />
              <QuickLink
                href="/admin/audit-logs/data-changes"
                icon={Database}
                title={t("quickLinks.dataChanges")}
              />
            </div>
          </CardContent>
        </Card>
      </AuditErrorBoundary>

      {/* 数据保留策略配置 */}
      <AuditErrorBoundary>
        <AuditRetentionSettings />
      </AuditErrorBoundary>
    </div>
  )
}

function QuickLink({
  href,
  icon: Icon,
  title,
}: {
  href: string
  icon: React.ComponentType<{ className?: string }>
  title: string
}): ReactNode {
  return (
    <Link
      href={href}
      className="group flex items-center justify-between rounded-lg border p-4 transition-colors hover:border-primary/50 hover:bg-accent/50"
    >
      <div className="flex items-center gap-3">
        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
          <Icon className="h-5 w-5 text-primary" />
        </div>
        <span className="font-medium">{title}</span>
      </div>
      <ArrowRight className="h-4 w-4 text-muted-foreground transition-transform group-hover:translate-x-1" />
    </Link>
  )
}
