import Link from "next/link";
import { FileText, Image, MapPin, Megaphone, Plus, Star } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { prisma } from "@/lib/db";

export default async function AdminDashboardPage() {
  const [venueCount, articleCount, featuredCount, recentVenues, recentArticles] =
    await Promise.all([
      prisma.venue.count(),
      prisma.article.count(),
      prisma.venue.count({ where: { featured: true } }),
      prisma.venue.findMany({
        take: 5,
        orderBy: { updatedAt: "desc" },
        include: { city: true },
      }),
      prisma.article.findMany({
        take: 5,
        orderBy: { updatedAt: "desc" },
      }),
    ]);

  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-2xl font-bold">儀表板</h1>
        <p className="text-muted-foreground">NightWalkAsia 內容管理</p>
      </div>

      <div className="grid gap-4 sm:grid-cols-3">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center gap-2 text-base">
              <MapPin className="size-4 text-primary" />
              場地總數
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold text-primary">{venueCount}</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center gap-2 text-base">
              <FileText className="size-4 text-primary" />
              指南總數
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold text-primary">{articleCount}</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center gap-2 text-base">
              <Star className="size-4 text-primary" />
              精選場地
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold text-primary">{featuredCount}</p>
          </CardContent>
        </Card>
      </div>

      <div className="flex gap-3">
        <Button
          render={<Link href="/admin/venues/new" />}
          nativeButton={false}
          className="bg-primary text-primary-foreground"
        >
          <Plus className="size-4" />
          新增場地
        </Button>
        <Button
          render={<Link href="/admin/articles/new" />}
          nativeButton={false}
          variant="outline"
        >
          <Plus className="size-4" />
          新增指南
        </Button>
        <Button
          render={<Link href="/admin/banners" />}
          nativeButton={false}
          variant="outline"
        >
          <Image className="size-4" />
          橫幅管理
        </Button>
        <Button
          render={<Link href="/admin/ads/new" />}
          nativeButton={false}
          variant="outline"
        >
          <Megaphone className="size-4" />
          新增廣告
        </Button>
      </div>

      <div className="grid gap-6 lg:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle className="text-base">最近更新場地</CardTitle>
          </CardHeader>
          <CardContent className="space-y-2">
            {recentVenues.map((v) => (
              <Link
                key={v.id}
                href={`/admin/venues/${v.id}/edit`}
                className="flex justify-between rounded-lg px-2 py-1.5 text-sm hover:bg-muted"
              >
                <span>{v.nameZh}</span>
                <span className="text-muted-foreground">{v.city.nameZh}</span>
              </Link>
            ))}
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle className="text-base">最近更新指南</CardTitle>
          </CardHeader>
          <CardContent className="space-y-2">
            {recentArticles.map((a) => (
              <Link
                key={a.id}
                href={`/admin/articles/${a.id}/edit`}
                className="block rounded-lg px-2 py-1.5 text-sm hover:bg-muted"
              >
                {a.title}
              </Link>
            ))}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}