"use client";

import { useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { motion, AnimatePresence } from "framer-motion";
import { BellRing } from "lucide-react";
import { useStore } from "@/context/StoreContext";

type SalesLog = {
  id: number;
  productId: string;
  productName: string;
  buyer: string;
  quantity: number;
  time: string;
};

// const buyers = [
//   "Samina",
//   "Huzaifa Ali",
//   "Mustafa Qureshi",
//   "Alina Murtaza",
//   "Raja Javed",
//   "Sajid Ali",
//   "Zainab Khan",
//   "Ali Ahmed",
//   "Zainab Ali",
//   "Faisal Khan",
//   "Naveed Ahmed",
//   "Ayesha Javed",
//   "Zainab Ali",
//   "Faisal Khan",
//   "Naveed Ahmed",
//   "Ayesha Javed",
//   "Zainab Ali",
//   "Faisal Khan",
//   "Naveed Ahmed",
//   "Ayesha Javed",
// ];
const buyers = [
  "Muhammad Ali",
  "Muhammad Ahmed",
  "Muhammad Usman",
  "Muhammad Hamza",
  "Muhammad Bilal",
  "Muhammad Talha",
  "Muhammad Ahsan",
  "Muhammad Saad",
  "Abdul Rehman",
  "Abdul Basit",
  "Abdul Hadi",
  "Abdul Wahab",
  "Ahmed Raza",
  "Ahmed Hassan",
  "Ahmed Nawaz",
  "Ahmed Bilal",
  "Ali Raza",
  "Ali Hassan",
  "Ali Haider",
  "Ali Imran",
  "Usman Khalid",
  "Usman Tariq",
  "Faisal Khan",
  "Naveed Ahmed",
  "Sajid Ali",
  "Raja Javed",
  "Shahid Mehmood",
  "Asad Mahmood",
  "Danish Iqbal",
  "Zeeshan Malik",
  "Umer Farooq",
  "Farhan Ahmed",
  "Kamran Akhtar",
  "Imran Bashir",
  "Junaid Akram",
  "Waqas Ahmed",
  "Shahbaz Khan",
  "Rizwan Ahmed",
  "Salman Aslam",
  "Irfan Ali",
  "Adnan Yousaf",
  "Mudassir Hussain",
  "Tahir Mehmood",
  "Noman Ali",
  "Adeel Ahmed",
  "Haris Rauf",
  "Muneeb Iqbal",
  "Sameer Khan",
  "Yasir Shah",
  "Kashif Mehmood",
  "Ayesha Khan",
  "Ayesha Ahmed",
  "Ayesha Javed",
  "Fatima Noor",
  "Fatima Zahra",
  "Zainab Ali",
  "Zainab Khan",
  "Maryam Ahmed",
  "Maryam Khalid",
  "Iqra Fatima",
  "Iqra Noor",
  "Hira Aslam",
  "Hira Khan",
  "Mahnoor Ali",
  "Maham Ahmed",
  "Alina Murtaza",
  "Laiba Khan",
  "Laiba Fatima",
  "Eman Ahmed",
  "Eshal Noor",
  "Anaya Fatima",
  "Areeba Khan",
  "Komal Ahmed",
  "Sidra Iqbal",
  "Sana Javed",
  "Sania Malik",
  "Nimra Ahmed",
  "Rabia Hassan",
  "Mehwish Khan",
  "Kiran Ali",
  "Sadia Noor",
  "Uzma Ashraf",
  "Bushra Iqbal",
  "Samina Akhtar",
  "Saba Ahmed",
  "Amna Khalid",
  "Noor Fatima",
  "Rida Khan",
  "Hafsa Ali",
  "Madiha Ahmed",
  "Aiman Noor",
  "Aleena Tariq",
  "Beenish Ahmed",
  "Sumaira Khalid",
  "Shazia Parveen",
  "Nadia Aslam",
  "Farzana Malik",
  "Rubina Ahmed",
  "Tasneem Fatima",
  "Khadija Noor"
];
export default function LiveSalesFeed() {
  const { catalogProducts } = useStore();
  const router = useRouter();
  const [currentLog, setCurrentLog] = useState<SalesLog | null>(null);
  const [visible, setVisible] = useState(false);
  const [relativeTime, setRelativeTime] = useState("");

  const availableProducts = useMemo(
    () => catalogProducts.filter((product) => Boolean(product.id && product.name)),
    [catalogProducts],
  );

  useEffect(() => {
    if (!availableProducts.length) return;
    const interval = window.setInterval(() => {
      const product = availableProducts[Math.floor(Math.random() * availableProducts.length)];
      const buyer = buyers[Math.floor(Math.random() * buyers.length)];
      const quantity = Math.floor(Math.random() * 3) + 1;
      const nextLog: SalesLog = {
        id: Date.now(),
        productId: product.id,
        productName: product.name,
        buyer,
        quantity,
        time: new Date().toLocaleTimeString(),
      };
      setCurrentLog(nextLog);
      setVisible(true);
      window.setTimeout(() => setVisible(false), 3200);
    }, 10500);
    return () => window.clearInterval(interval);
  }, [availableProducts]);

  useEffect(() => {
    if (!currentLog) return;
    const updateRelative = () => {
      const seconds = Math.max(1, Math.floor((Date.now() - currentLog.id) / 1000));
      setRelativeTime(`${seconds} second${seconds === 1 ? "" : "s"} ago`);
    };
    updateRelative();
    const timer = window.setInterval(updateRelative, 1000);
    return () => window.clearInterval(timer);
  }, [currentLog]);

  if (!currentLog || !visible) return null;

  return (
    <div className="pointer-events-none fixed bottom-4 left-4 z-[90] w-[340px] max-w-[calc(100vw-2rem)]">
      <AnimatePresence mode="wait">
        {visible && (
          <motion.button
            key={currentLog.id}
            type="button"
            initial={{ opacity: 0, y: 22, scale: 0.96 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -18, scale: 0.98 }}
            transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}
            onClick={() => router.push(`/product/${currentLog.productId}`)}
            className="pointer-events-auto w-full rounded-xl border border-primary/20 bg-card/95 p-3 text-left shadow-elevated backdrop-blur transition-all hover:border-primary/40"
          >
            <div className="mb-2 inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wide text-primary">
              <BellRing className="h-3.5 w-3.5" /> Live sale
            </div>
            <p className="text-sm font-semibold text-foreground">
            {currentLog.buyer} purchased <b>{currentLog.quantity}x {currentLog.productName}</b>
            </p>
            <p className="mt-1 text-xs text-muted-foreground">
              {relativeTime} - Tap to view product
            </p>
          </motion.button>
        )}
      </AnimatePresence>
    </div>
  );
}