"use client";

import Image from "next/image";
import Link from "next/link";
import { motion } from "framer-motion";
import { Send } from "lucide-react";
import { Button } from "@/components/ui/button";
import { siteConfig } from "@/lib/site-config";

export type PromoBannerData = {
  eyebrow: string | null;
  title: string;
  subtitle: string;
  imageUrl: string | null;
  cta1Text: string | null;
  cta1Url: string | null;
  cta2Text: string | null;
  cta2Url: string | null;
};

interface PromoBannerProps {
  banner: PromoBannerData;
}

function CtaButton({
  text,
  url,
  primary = false,
}: {
  text: string;
  url: string;
  primary?: boolean;
}) {
  const isExternal = url.startsWith("http");

  if (isExternal) {
    return (
      <Button
        render={
          <a href={url} target="_blank" rel="noopener noreferrer" />
        }
        nativeButton={false}
        size="lg"
        variant={primary ? "default" : "outline"}
        className={
          primary
            ? "shrink-0 bg-primary text-primary-foreground hover:bg-primary/90"
            : "shrink-0"
        }
      >
        <Send className="size-5" />
        {text}
      </Button>
    );
  }

  return (
    <Button
      render={<Link href={url} />}
      nativeButton={false}
      size="lg"
      variant={primary ? "default" : "outline"}
      className={
        primary
          ? "shrink-0 bg-primary text-primary-foreground hover:bg-primary/90"
          : "shrink-0"
      }
    >
      {text}
    </Button>
  );
}

export function PromoBanner({ banner }: PromoBannerProps) {
  const hasCta1 = banner.cta1Text && banner.cta1Url;
  const hasCta2 = banner.cta2Text && banner.cta2Url;

  return (
    <motion.section
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      className="relative overflow-hidden rounded-2xl border border-primary/30 bg-gradient-to-br from-primary/20 via-card to-card p-8 sm:p-12 glow-gold"
    >
      {banner.imageUrl && (
        <div className="absolute inset-0 opacity-20">
          <Image
            src={banner.imageUrl}
            alt=""
            fill
            className="object-cover"
            sizes="100vw"
          />
        </div>
      )}
      <div className="absolute -right-10 -top-10 size-40 rounded-full bg-primary/10 blur-3xl" />
      <div className="relative z-10 flex flex-col items-start gap-6 lg:flex-row lg:items-center lg:justify-between">
        <div>
          {banner.eyebrow && (
            <p className="mb-2 text-sm font-medium text-primary">
              {banner.eyebrow}
            </p>
          )}
          <h3 className="text-2xl font-bold sm:text-3xl">{banner.title}</h3>
          <p className="mt-2 max-w-xl text-muted-foreground">{banner.subtitle}</p>
        </div>
        {(hasCta1 || hasCta2) && (
          <div className="flex flex-col gap-3 sm:flex-row">
            {hasCta1 && (
              <CtaButton
                text={banner.cta1Text!}
                url={banner.cta1Url!}
                primary
              />
            )}
            {hasCta2 && (
              <CtaButton text={banner.cta2Text!} url={banner.cta2Url!} />
            )}
          </div>
        )}
      </div>
    </motion.section>
  );
}

export function getDefaultCommunityBanner(): PromoBannerData {
  return {
    eyebrow: "夜遊老司機社群",
    title: "加入 Telegram，獲取最新場地情報",
    subtitle:
      "與數百位華語夜遊愛好者交流心得、即時分享安全提醒與隱藏好去處。老司機在線答疑，讓你的每一趟夜遊都更從容。",
    imageUrl: null,
    cta1Text: "加入 Telegram 社群",
    cta1Url: siteConfig.telegramUrl,
    cta2Text: null,
    cta2Url: null,
  };
}