"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import type { Promo } from "@/generated/prisma/client";

export function PromoBanner({ promo }: { promo: Promo }) {
  // Timer state
  const [timeLeft, setTimeLeft] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
  });

  useEffect(() => {
    // Determine end date: either from DB or a default 3 days from now if not set
    const countDownDate = promo.endDate
      ? new Date(promo.endDate).getTime()
      : new Date().getTime() + (3 * 24 * 60 * 60 * 1000);

    const timer = setInterval(() => {
      const now = new Date().getTime();
      const distance = countDownDate - now;

      if (distance < 0) {
        clearInterval(timer);
        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
      } else {
        setTimeLeft({
          days: Math.floor(distance / (1000 * 60 * 60 * 24)),
          hours: Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
          minutes: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)),
          seconds: Math.floor((distance % (1000 * 60)) / 1000),
        });
      }
    }, 1000);

    return () => clearInterval(timer);
  }, [promo.endDate]);

  return (
    <section className="bg-bg-white py-12">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="relative overflow-hidden rounded-[32px] bg-merah-ranata text-white shadow-2xl">
          {/* Background Decorative Elements */}
          <div className="absolute -left-32 -top-32 h-64 w-64 rounded-full bg-white opacity-5 mix-blend-overlay blur-3xl" />
          <div className="absolute -bottom-32 -right-32 h-96 w-96 rounded-full bg-black opacity-10 mix-blend-overlay blur-3xl" />

          {promo.imageUrl && (
            <div className="absolute inset-0 opacity-20 mix-blend-multiply">
              <img src={promo.imageUrl} alt="Background Promo" className="w-full h-full object-cover" />
            </div>
          )}

          <div className="relative z-10 flex flex-col items-center justify-between gap-8 p-8 md:flex-row md:p-12">

            {/* Left Content */}
            <div className="flex-1 text-center md:text-left">
              <span className="inline-block rounded-full bg-white/20 px-4 py-1.5 text-xs font-bold uppercase tracking-wider text-white backdrop-blur-sm border border-white/10 mb-4">
                Promo Spesial
              </span>
              <h2 className="mb-3 text-3xl font-bold md:text-4xl lg:text-5xl leading-tight">
                {promo.title} <br className="hidden md:block" />
                <span className="text-yellow-400">{promo.discountText}</span>
              </h2>
              <p className="text-sm text-white/80 md:text-base max-w-md mx-auto md:mx-0">
                {promo.description || "Pesan sekarang sebelum kehabisan! Waktu terbatas untuk mendapatkan penawaran eksklusif ini."}
              </p>
            </div>

            {/* Right Content - Timer & CTA */}
            <div className="flex flex-col items-center gap-6 md:items-end">
              <div className="flex gap-3 text-center">
                <TimeUnit value={timeLeft.days} label="Hari" />
                <TimeUnit value={timeLeft.hours} label="Jam" />
                <TimeUnit value={timeLeft.minutes} label="Menit" />
                <TimeUnit value={timeLeft.seconds} label="Detik" />
              </div>

              <Link
                href="/tour"
                className="group relative inline-flex items-center gap-2 overflow-hidden rounded-full bg-white px-8 py-3.5 font-bold text-merah-ranata shadow-xl transition-all hover:scale-105 hover:bg-gray-50"
              >
                Pesan Sekarang
              </Link>
            </div>

          </div>
        </div>
      </div>
    </section>
  );
}

function TimeUnit({ value, label }: { value: number; label: string }) {
  return (
    <div className="flex flex-col items-center">
      <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-black/20 backdrop-blur-md border border-white/10 text-xl font-bold md:h-16 md:w-16 md:text-2xl">
        {value.toString().padStart(2, "0")}
      </div>
      <span className="mt-2 text-[10px] font-medium uppercase tracking-wider text-white/80">
        {label}
      </span>
    </div>
  );
}