import Link from "next/link";
import { Image, Pencil } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { getAllBannersAdmin } from "@/lib/queries/banners";
import {
  BANNER_PLACEMENT_LIST,
  type BannerPlacement,
} from "@/lib/constants/promotions";

export default async function AdminBannersPage() {
  const banners = await getAllBannersAdmin();
  const bannerMap = new Map(banners.map((b) => [b.placement, b]));

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold">橫幅管理</h1>
        <p className="text-muted-foreground">
          更新首頁主視覺與社群推廣橫幅的圖片、文字與按鈕
        </p>
      </div>

      <div className="grid gap-6 sm:grid-cols-2">
        {BANNER_PLACEMENT_LIST.map((meta) => {
          const banner = bannerMap.get(meta.id);
          return (
            <Card key={meta.id}>
              <CardHeader className="flex flex-row items-center justify-between pb-2">
                <CardTitle className="flex items-center gap-2 text-base">
                  <Image className="size-4 text-primary" />
                  {meta.label}
                </CardTitle>
                <Badge variant={banner?.published ? "default" : "outline"}>
                  {banner?.published ? "已發布" : "使用預設"}
                </Badge>
              </CardHeader>
              <CardContent className="space-y-3">
                <p className="text-sm text-muted-foreground">{meta.description}</p>
                {banner ? (
                  <p className="line-clamp-2 text-sm font-medium">{banner.title}</p>
                ) : (
                  <p className="text-sm text-muted-foreground">尚未自訂，使用預設內容</p>
                )}
                <Button
                  render={
                    <Link href={`/admin/banners/${meta.id}`} />
                  }
                  nativeButton={false}
                  variant="outline"
                  size="sm"
                >
                  <Pencil className="size-3.5" />
                  編輯橫幅
                </Button>
              </CardContent>
            </Card>
          );
        })}
      </div>
    </div>
  );
}