import Link from "next/link";
import { ArrowRight, BookOpen, MapPin, Shield } from "lucide-react";
import { Button } from "@/components/ui/button";
import { CityCard } from "@/components/home/CityCard";
import { HeroSection } from "@/components/home/HeroSection";
import { GuideCard } from "@/components/guides/GuideCard";
import { AdSlot } from "@/components/shared/AdSlot";
import { CommunityBanner } from "@/components/shared/CommunityBanner";
import { ResponsiveCarousel } from "@/components/shared/ResponsiveCarousel";
import { SectionHeading } from "@/components/shared/SectionHeading";
import { VenueCard } from "@/components/venues/VenueCard";
import { getBannerByPlacement } from "@/lib/queries/banners";
import { getAllCities } from "@/lib/queries/cities";
import { getLatestArticles } from "@/lib/queries/articles";
import { getFeaturedVenues } from "@/lib/queries/venues";
import { toArticleCardData, toVenueCardData } from "@/lib/types";

export default async function HomePage() {
  const [cities, featuredVenues, latestArticles, heroBanner] =
    await Promise.all([
      getAllCities(),
      getFeaturedVenues(6),
      getLatestArticles(3),
      getBannerByPlacement("hero"),
    ]);

  const stats = [
    { icon: MapPin, label: "覆蓋主要亞洲夜遊城市", value: `${cities.length}+` },
    { icon: BookOpen, label: "精選場地與指南", value: "18+" },
    { icon: Shield, label: "真實夜遊心得", value: "100%" },
  ];

  return (
    <>
      <HeroSection
        banner={
          heroBanner
            ? {
                title: heroBanner.title,
                subtitle: heroBanner.subtitle,
                imageUrl: heroBanner.imageUrl,
                cta1Text: heroBanner.cta1Text,
                cta1Url: heroBanner.cta1Url,
                cta2Text: heroBanner.cta2Text,
                cta2Url: heroBanner.cta2Url,
              }
            : null
        }
      />

      <section className="border-b border-border bg-card/50 py-8">
        <div className="mx-auto grid max-w-7xl grid-cols-1 gap-6 px-4 sm:grid-cols-3 sm:px-6 lg:px-8">
          {stats.map((stat) => (
            <div
              key={stat.label}
              className="flex items-center gap-4 rounded-xl border border-border bg-background p-4"
            >
              <div className="flex size-12 items-center justify-center rounded-lg bg-primary/10">
                <stat.icon className="size-6 text-primary" />
              </div>
              <div>
                <p className="text-2xl font-bold text-primary">{stat.value}</p>
                <p className="text-sm text-muted-foreground">{stat.label}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="py-16 sm:py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <SectionHeading
            title="精選目的地"
            subtitle="從曼谷到天台酒吧，從芭堤雅霓虹到清邁微醺——老司機帶你認識亞洲夜色"
          />
          <ResponsiveCarousel
            slideClassName="w-[78vw] max-w-[300px]"
            desktopClassName="md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-6"
          >
            {cities.map((city, i) => (
              <CityCard
                key={city.slug}
                slug={city.slug}
                nameZh={city.nameZh}
                nameEn={city.nameEn}
                tagline={city.tagline}
                imageUrl={city.imageUrl}
                venueCount={city._count.venues}
                index={i}
              />
            ))}
          </ResponsiveCarousel>
        </div>
      </section>

      <section className="py-8">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <AdSlot slot="homepage_mid" />
        </div>
      </section>

      <section className="border-y border-border bg-card/30 py-16 sm:py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex items-end justify-between">
            <SectionHeading title="熱門夜遊場地" subtitle="老司機精選，值得一探" />
            <Button
              render={<Link href="/explore" />}
              nativeButton={false}
              variant="ghost"
              className="hidden sm:flex"
            >
              查看全部
              <ArrowRight className="size-4" />
            </Button>
          </div>
          <ResponsiveCarousel>
            {featuredVenues.map((venue, i) => (
              <VenueCard
                key={venue.slug}
                venue={toVenueCardData(venue)}
                index={i}
              />
            ))}
          </ResponsiveCarousel>
          <div className="mt-6 text-center sm:hidden">
            <Button
              render={<Link href="/explore" />}
              nativeButton={false}
              variant="outline"
            >
              查看全部場地
            </Button>
          </div>
        </div>
      </section>

      <section className="py-16 sm:py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex items-end justify-between">
            <SectionHeading
              title="最新夜遊指南"
              subtitle="入門攻略、安全提醒、區域深度解析"
            />
            <Button
              render={<Link href="/guides" />}
              nativeButton={false}
              variant="ghost"
              className="hidden sm:flex"
            >
              閱讀更多
              <ArrowRight className="size-4" />
            </Button>
          </div>
          <ResponsiveCarousel>
            {latestArticles.map((article, i) => (
              <GuideCard
                key={article.slug}
                article={toArticleCardData(article)}
                index={i}
              />
            ))}
          </ResponsiveCarousel>
          <div className="mt-6 text-center sm:hidden">
            <Button
              render={<Link href="/guides" />}
              nativeButton={false}
              variant="outline"
            >
              閱讀更多指南
            </Button>
          </div>
        </div>
      </section>

      <section className="pb-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <CommunityBanner />
        </div>
      </section>
    </>
  );
}