"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { motion } from "framer-motion";
import { ArrowRight, Zap } from "lucide-react";
import { cn } from "@/lib/cn";

function partsUntil(target: number) {
  const diff = Math.max(0, target - Date.now());
  const hrs = Math.floor(diff / 3_600_000);
  const min = Math.floor((diff % 3_600_000) / 60_000);
  const sec = Math.floor((diff % 60_000) / 1000);
  return {
    hrs: String(hrs).padStart(2, "0"),
    min: String(min).padStart(2, "0"),
    sec: String(sec).padStart(2, "0"),
  };
}

/** Monochrome flash-sale strip — thunder icon flips with light/dark theme. */
export function FlashSaleBanner() {
  const [target] = useState(() => {
    const end = new Date();
    end.setHours(24, 0, 0, 0);
    return end.getTime();
  });
  const [time, setTime] = useState(() => partsUntil(target));

  useEffect(() => {
    const id = window.setInterval(() => setTime(partsUntil(target)), 1000);
    return () => window.clearInterval(id);
  }, [target]);

  const units = [
    { value: time.hrs, label: "Hrs" },
    { value: time.min, label: "Min" },
    { value: time.sec, label: "Sec" },
  ];

  return (
    <div
      className={cn(
        "relative overflow-hidden rounded-2xl border border-border",
        "bg-zinc-100 text-zinc-950",
        "dark:bg-zinc-950 dark:text-white",
      )}
    >
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_left,rgba(0,0,0,0.06),transparent_55%)] dark:bg-[radial-gradient(ellipse_at_right,rgba(255,255,255,0.08),transparent_55%)]"
      />

      <div className="relative flex flex-col gap-5 px-4 py-5 sm:px-6 lg:flex-row lg:items-center lg:justify-between lg:gap-8 lg:px-8 lg:py-6">
        <div className="flex min-w-0 items-start gap-3 sm:items-center sm:gap-4">
          <span
            className={cn(
              "inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border shadow-sm",
              "border-zinc-300 bg-white",
              "dark:border-zinc-700 dark:bg-zinc-900",
            )}
            aria-hidden
          >
            {/* Light: dark bolt · Dark: white bolt */}
            <Zap
              className="h-6 w-6 fill-zinc-950 text-zinc-950 dark:fill-white dark:text-white"
              strokeWidth={1.75}
            />
          </span>
          <div className="min-w-0">
            <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400">
              Limited time · Up to 40% off
            </p>
            <h2 className="mt-0.5 text-xl font-semibold tracking-tight sm:text-2xl">
              Flash Sale
            </h2>
          </div>
        </div>

        <p className="max-w-md text-sm leading-relaxed text-zinc-600 dark:text-zinc-300 lg:flex-1">
          Limited-time deals on best-selling tees, jeans, and seasonal
          essentials — once they&apos;re gone, they&apos;re gone.
        </p>

        <div className="flex flex-wrap items-center gap-4 sm:gap-5">
          <div>
            <p className="mb-1.5 text-[10px] font-semibold uppercase tracking-[0.16em] text-zinc-500 dark:text-zinc-400">
              Ends in
            </p>
            <div className="flex items-center gap-1.5">
              {units.map((unit, index) => (
                <div key={unit.label} className="flex items-center gap-1.5">
                  <motion.div
                    key={unit.value}
                    initial={{ y: 4, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    className={cn(
                      "flex min-w-[3.25rem] flex-col items-center rounded-xl px-2 py-1.5",
                      "bg-zinc-950 text-white",
                      "dark:bg-white dark:text-zinc-950",
                    )}
                  >
                    <span className="text-base font-bold tabular-nums leading-none sm:text-lg">
                      {unit.value}
                    </span>
                    <span className="mt-0.5 text-[9px] font-semibold uppercase tracking-wider opacity-70">
                      {unit.label}
                    </span>
                  </motion.div>
                  {index < units.length - 1 ? (
                    <span className="font-bold text-zinc-400 dark:text-zinc-500">
                      :
                    </span>
                  ) : null}
                </div>
              ))}
            </div>
          </div>

          <Link
            href="/shop?sort=price-asc"
            className={cn(
              "inline-flex h-11 items-center gap-2 rounded-full px-5 text-sm font-semibold transition hover:opacity-90",
              "bg-zinc-950 text-white",
              "dark:bg-white dark:text-zinc-950",
            )}
          >
            View all
            <ArrowRight className="h-4 w-4" />
          </Link>
        </div>
      </div>
    </div>
  );
}