import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import { Clock, Crown, MapPin, Phone, Send, Share2, Wallet } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { AdSlot } from "@/components/shared/AdSlot";
import { Paywall } from "@/components/membership/Paywall";
import {
  getCurrentUser,
  userHasActiveMembership,
} from "@/lib/user-auth";
import { NightWalkReminders } from "@/components/venues/NightWalkReminders";
import { VenueCard } from "@/components/venues/VenueCard";
import {
  getAllVenueSlugs,
  getRelatedVenues,
  getVenueBySlug,
} from "@/lib/queries/venues";
import { siteConfig } from "@/lib/site-config";
import { toVenueCardData } from "@/lib/types";
import { parseJsonArray } from "@/lib/utils";

interface VenuePageProps {
  params: Promise<{ slug: string }>;
}

export async function generateStaticParams() {
  const venues = await getAllVenueSlugs();
  return venues.map((v) => ({ slug: v.slug }));
}

export async function generateMetadata({ params }: VenuePageProps) {
  const { slug } = await params;
  const venue = await getVenueBySlug(slug);
  if (!venue) return { title: "場地未找到" };
  return {
    title: `${venue.nameZh} — ${venue.city.nameZh}`,
    description: venue.description.slice(0, 160),
  };
}

export default async function VenuePage({ params }: VenuePageProps) {
  const { slug } = await params;
  const venue = await getVenueBySlug(slug);
  if (!venue) notFound();

  const user = await getCurrentUser();
  const isMember = user ? await userHasActiveMembership(user.id) : false;
  const isPremium = venue.accessLevel === "member";
  const canViewFull = !isPremium || isMember;

  const images = parseJsonArray(venue.images);
  const facilities = parseJsonArray(venue.facilities);
  const reminders = parseJsonArray(venue.safetyReminders);
  const related = await getRelatedVenues(
    venue.cityId,
    venue.type,
    venue.id
  );

  return (
    <article>
      <div className="relative h-[50vh] min-h-[320px]">
        <Image
          src={images[0]}
          alt={venue.nameZh}
          fill
          priority
          className="object-cover"
          sizes="100vw"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-background via-background/40 to-transparent" />
        <div className="absolute bottom-0 left-0 right-0 p-6 sm:p-10">
          <div className="mx-auto max-w-7xl">
            <div className="flex flex-wrap gap-2">
              <Badge className="bg-primary text-primary-foreground">
                {venue.city.nameZh}
              </Badge>
              <Badge variant="outline">{venue.type}</Badge>
              {venue.featured && (
                <Badge variant="outline" className="border-neon text-neon">
                  精選
                </Badge>
              )}
              {isPremium && (
                <Badge variant="outline" className="border-primary text-primary">
                  <Crown className="mr-1 size-3" />
                  會員專屬
                </Badge>
              )}
            </div>
            <h1 className="mt-3 text-3xl font-bold sm:text-4xl lg:text-5xl">
              {venue.nameZh}
            </h1>
            {venue.nameEn && (
              <p className="mt-1 text-lg text-muted-foreground">{venue.nameEn}</p>
            )}
          </div>
        </div>
      </div>

      <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
        <div className="grid gap-10 lg:grid-cols-3">
          <div className="space-y-8 lg:col-span-2">
            {canViewFull ? (
              <>
                <section>
                  <h2 className="text-xl font-bold text-primary">場地介紹</h2>
                  <p className="mt-4 whitespace-pre-line leading-relaxed text-muted-foreground">
                    {venue.description}
                  </p>
                </section>

                <section>
                  <h2 className="text-xl font-bold text-primary">老司機夜遊心得</h2>
                  <p className="mt-4 whitespace-pre-line leading-relaxed text-muted-foreground">
                    {venue.nightWalkTips}
                  </p>
                </section>

                {facilities.length > 0 && (
                  <section>
                    <h2 className="text-xl font-bold text-primary">設施與服務</h2>
                    <div className="mt-4 flex flex-wrap gap-2">
                      {facilities.map((f) => (
                        <Badge key={f} variant="secondary">
                          {f}
                        </Badge>
                      ))}
                    </div>
                  </section>
                )}

                {images.length > 1 && (
                  <section>
                    <h2 className="text-xl font-bold text-primary">相片集</h2>
                    <div className="mt-4 grid gap-4 sm:grid-cols-2">
                      {images.map((img, i) => (
                        <div
                          key={i}
                          className="relative aspect-video overflow-hidden rounded-xl"
                        >
                          <Image
                            src={img}
                            alt={`${venue.nameZh} 相片 ${i + 1}`}
                            fill
                            className="object-cover"
                            sizes="(max-width: 768px) 100vw, 50vw"
                          />
                        </div>
                      ))}
                    </div>
                  </section>
                )}

                <NightWalkReminders reminders={reminders} tips={venue.nightWalkTips} />
              </>
            ) : (
              <Paywall
                title="此場地情報為會員專屬"
                description="訂閱會員即可查看完整場地介紹、老司機私房心得與安全提醒。"
              />
            )}
          </div>

          <div className="space-y-6">
            <Card className="border-border bg-card sticky top-20">
              <CardHeader>
                <CardTitle className="text-primary">關鍵資訊</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4 text-sm">
                <div className="flex gap-3">
                  <MapPin className="size-4 shrink-0 text-primary" />
                  <span>{venue.address}</span>
                </div>
                <div className="flex gap-3">
                  <Clock className="size-4 shrink-0 text-primary" />
                  <span>{venue.hours}</span>
                </div>
                <div className="flex gap-3">
                  <Wallet className="size-4 shrink-0 text-primary" />
                  <span>{venue.priceRange}</span>
                </div>
                {venue.contact && (
                  <div className="flex gap-3">
                    <Phone className="size-4 shrink-0 text-primary" />
                    <span>{venue.contact}</span>
                  </div>
                )}
                <Separator />
                <div className="flex flex-col gap-2">
                  <Button
                    render={
                      <a
                        href={siteConfig.telegramUrl}
                        target="_blank"
                        rel="noopener noreferrer"
                      />
                    }
                    nativeButton={false}
                    className="bg-primary text-primary-foreground"
                  >
                    <Send className="size-4" />
                    Telegram 討論此場地
                  </Button>
                  <Button variant="outline" disabled>
                    <Share2 className="size-4" />
                    分享心得（即將推出）
                  </Button>
                </div>
              </CardContent>
            </Card>
            <AdSlot slot="venue_sidebar" className="mt-6" />
          </div>
        </div>

        {related.length > 0 && (
          <section className="mt-16">
            <h2 className="text-2xl font-bold">相關推薦</h2>
            <div className="mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
              {related.map((v, i) => (
                <VenueCard
                  key={v.slug}
                  venue={toVenueCardData(v)}
                  index={i}
                />
              ))}
            </div>
          </section>
        )}
      </div>
    </article>
  );
}