"use client"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Home } from "lucide-react"

const NOTIFICATIONS = [
  { name: "James T.", location: "Austin, TX", action: "just upgraded to Pro", time: "2 min ago" },
  { name: "Sarah M.", location: "London, UK", action: "just signed up", time: "4 min ago" },
  { name: "David K.", location: "Denver, CO", action: "got Lifetime access", time: "7 min ago" },
  { name: "Priya R.", location: "Toronto, CA", action: "just signed up", time: "12 min ago" },
  { name: "Marcus L.", location: "Miami, FL", action: "upgraded to Pro", time: "15 min ago" },
  { name: "Rachel W.", location: "Seattle, WA", action: "just signed up", time: "18 min ago" },
  { name: "Tom B.", location: "Chicago, IL", action: "got Lifetime access", time: "23 min ago" },
  { name: "Aisha N.", location: "New York, NY", action: "just signed up", time: "27 min ago" },
]

export function SocialProofToast() {
  const [index, setIndex] = useState(0)
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    // First show after 6s
    const initialTimer = setTimeout(() => tick(0), 6000)
    return () => clearTimeout(initialTimer)
  }, [])

  function tick(i: number) {
    setIndex(i)
    setVisible(true)

    setTimeout(() => {
      setVisible(false)
      const next = (i + 1) % NOTIFICATIONS.length
      setTimeout(() => tick(next), 4000) // gap between toasts
    }, 5000) // show duration
  }

  const notif = NOTIFICATIONS[index]

  return (
    <div className="fixed bottom-24 left-6 z-[80] md:bottom-8">
      <AnimatePresence>
        {visible && (
          <motion.div
            key={index}
            initial={{ opacity: 0, x: -40, scale: 0.95 }}
            animate={{ opacity: 1, x: 0, scale: 1 }}
            exit={{ opacity: 0, x: -20, scale: 0.95 }}
            transition={{ type: "spring", stiffness: 300, damping: 25 }}
            className="flex items-center gap-3 rounded-2xl border border-white/10 bg-[#16161f]/95 backdrop-blur-xl px-4 py-3 shadow-2xl shadow-black/40 max-w-[260px]"
          >
            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-indigo-600/20 border border-indigo-500/30">
              <Home className="h-4 w-4 text-indigo-400" />
            </div>
            <div className="min-w-0">
              <p className="text-xs font-semibold text-white truncate">
                {notif.name} <span className="text-white/40 font-normal">from {notif.location}</span>
              </p>
              <p className="text-[11px] text-indigo-300">{notif.action}</p>
              <p className="text-[10px] text-white/30 mt-0.5">{notif.time}</p>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}