"use client";

import { useState, useEffect, useCallback } from "react";
import Link from "next/link";

interface FlashSale {
  active: boolean;
  message: string;
  expires_at: string | null;
}

export default function FlashSaleBanner() {
  const [sale, setSale] = useState<FlashSale | null>(null);
  const [dismissed, setDismissed] = useState(false);
  const [timeLeft, setTimeLeft] = useState("");

  useEffect(() => {
    fetch("/api/admin/flash-sale")
      .then((r) => r.json())
      .then((data: FlashSale) => {
        if (data.active) setSale(data);
      })
      .catch(() => {});
  }, []);

  const formatTime = useCallback((ms: number) => {
    if (ms <= 0) return "00:00:00";
    const hours = Math.floor(ms / 3600000);
    const minutes = Math.floor((ms % 3600000) / 60000);
    const seconds = Math.floor((ms % 60000) / 1000);
    return `${hours.toString().padStart(2, "0")}:${minutes
      .toString()
      .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
  }, []);

  useEffect(() => {
    if (!sale?.expires_at) return;

    const update = () => {
      const remaining = new Date(sale.expires_at!).getTime() - Date.now();
      if (remaining <= 0) {
        setSale(null);
        return;
      }
      setTimeLeft(formatTime(remaining));
    };

    update();
    const interval = setInterval(update, 1000);
    return () => clearInterval(interval);
  }, [sale, formatTime]);

  if (!sale?.active || dismissed) return null;

  return (
    <div className="relative bg-gradient-to-r from-gold/20 via-gold/10 to-gold/20 border-b border-gold/30">
      <div className="max-w-7xl mx-auto px-4 py-3 flex items-center justify-center gap-4 text-sm">
        <div className="flex items-center gap-3">
          <svg
            className="w-5 h-5 text-gold animate-pulse"
            fill="currentColor"
            viewBox="0 0 24 24"
          >
            <path d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
          <span className="text-gold font-semibold">
            {sale.message || "Flash Sale: 20% bonus credits for the next 2 hours!"}
          </span>
          {timeLeft && (
            <span className="font-mono text-white bg-black/30 px-2 py-0.5 rounded text-xs">
              {timeLeft}
            </span>
          )}
        </div>
        <Link
          href="/credits/buy"
          className="bg-gold hover:bg-gold-light text-black font-semibold px-4 py-1.5 rounded-lg text-xs transition-colors"
        >
          Buy Now
        </Link>
        <button
          onClick={() => setDismissed(true)}
          className="absolute right-3 top-1/2 -translate-y-1/2 text-text-muted hover:text-text"
          aria-label="Dismiss"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  );
}