'use client';

import React, { useState, useEffect, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { ShoppingBag, MapPin } from 'lucide-react';

interface SocialProofNotification {
  id: number;
  name: string;
  city: string;
  item: string;
  timeAgo: string;
}

const MOCK_ORDERS: SocialProofNotification[] = [
  { id: 1, name: 'Budi S.', city: 'Jakarta Selatan', item: 'Nasi Goreng Spesial', timeAgo: '2 menit lalu' },
  { id: 2, name: 'Sari R.', city: 'Bandung', item: 'Paket Keluarga', timeAgo: '5 menit lalu' },
  { id: 3, name: 'Ahmad D.', city: 'Surabaya', item: 'Rendang Daging Sapi', timeAgo: '8 menit lalu' },
  { id: 4, name: 'Dewi L.', city: 'Yogyakarta', item: 'Kopi Susu Gula Aren', timeAgo: '12 menit lalu' },
  { id: 5, name: 'Riko P.', city: 'Semarang', item: 'Sate Ayam Madura', timeAgo: '15 menit lalu' },
  { id: 6, name: 'Fitri A.', city: 'Bekasi', item: 'Ayam Geprek Sambal Matah', timeAgo: '18 menit lalu' },
  { id: 7, name: 'Hendra K.', city: 'Tangerang', item: 'Mie Ayam Bakso', timeAgo: '22 menit lalu' },
  { id: 8, name: 'Rina M.', city: 'Depok', item: 'Es Teh Manis + Nasi Goreng', timeAgo: '25 menit lalu' },
  { id: 9, name: 'Joko W.', city: 'Bogor', item: 'Paket Hemat 1', timeAgo: '28 menit lalu' },
  { id: 10, name: 'Maya S.', city: 'Malang', item: 'Jus Alpukat Coklat', timeAgo: '30 menit lalu' },
];

// Shuffle using a seed based on the day so it's consistent within a session but changes daily
function getDayShuffled(): SocialProofNotification[] {
  const today = new Date();
  // Use day of year as seed for deterministic shuffle (changes daily, consistent within day)
  const start = new Date(today.getFullYear(), 0, 0);
  const diff = today.getTime() - start.getTime();
  const dayOfYear = Math.floor(diff / (1000 * 60 * 60 * 24));
  const shuffled = [...MOCK_ORDERS];
  // Simple seeded shuffle (LCG)
  let seed = dayOfYear * 2654435761;
  for (let i = shuffled.length - 1; i > 0; i--) {
    seed = (seed * 1664525 + 1013904223) & 0x7fffffff;
    const j = seed % (i + 1);
    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
  }
  return shuffled;
}

export default function SocialProofToast() {
  const [notifications] = useState<SocialProofNotification[]>(getDayShuffled);
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isVisible, setIsVisible] = useState(false);
  const [isDismissed, setIsDismissed] = useState(false);

  const showNotification = useCallback(() => {
    if (isDismissed || notifications.length === 0) return;
    setCurrentIndex((prev) => {
      const next = (prev + 1) % notifications.length;
      setIsVisible(true);
      setTimeout(() => setIsVisible(false), 4000);
      return next;
    });
  }, [isDismissed, notifications.length]);

  useEffect(() => {
    if (isDismissed) return;
    const initialTimer = setTimeout(() => { showNotification(); }, 5000);
    const interval = setInterval(() => { showNotification(); }, 15000 + Math.random() * 10000);
    return () => { clearTimeout(initialTimer); clearInterval(interval); };
  }, [showNotification, isDismissed]);

  const handleDismiss = () => { setIsVisible(false); setIsDismissed(true); };
  const current = notifications[currentIndex];
  if (!current) return null;

  return (
    <div className="fixed bottom-20 right-4 z-30 sm:right-6 sm:bottom-24">
      <AnimatePresence>
        {isVisible && (
          <motion.div initial={{ opacity: 0, y: 20, scale: 0.95, x: 20 }} animate={{ opacity: 1, y: 0, scale: 1, x: 0 }}
            exit={{ opacity: 0, y: 10, scale: 0.95, x: 20 }} transition={{ type: 'spring', damping: 25, stiffness: 300 }} className="pointer-events-auto">
            <div className="relative w-72 overflow-hidden rounded-xl border border-[var(--border-hover)] bg-[var(--bg-card)]/95 shadow-2xl backdrop-blur-md sm:w-80" style={{ boxShadow: '0 10px 40px var(--shadow-color)' }}>
              <button onClick={handleDismiss}
                className="absolute top-2 right-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-[var(--bg-hover)] text-[var(--text-quaternary)] text-xs transition-colors hover:bg-[var(--bg-input)] hover:text-[var(--text-secondary)]">
                ✕
              </button>
              <div className="flex items-start gap-3 p-4">
                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-[var(--accent-500)] to-[var(--accent-400)] text-sm font-bold text-white shadow-lg">
                  {current.name.charAt(0)}
                </div>
                <div className="min-w-0 flex-1">
                  <div className="flex items-center gap-1.5">
                    <ShoppingBag className="h-3 w-3 text-emerald-400" />
                    <span className="text-[11px] font-medium text-emerald-400">Pesanan baru</span>
                  </div>
                  <p className="mt-0.5 text-xs text-[var(--text-primary)]/80 leading-snug">
                    <span className="font-semibold text-[var(--text-primary)]">{current.name}</span>{' '}
                    dari {current.city} baru saja memesan{' '}
                    <span className="font-semibold text-[var(--accent-400)]">{current.item}</span>
                  </p>
                  <div className="mt-1 flex items-center gap-1">
                    <MapPin className="h-2.5 w-2.5 text-[var(--text-quaternary)]" />
                    <span className="text-[10px] text-[var(--text-tertiary)]">{current.timeAgo}</span>
                  </div>
                </div>
              </div>
              <div className="h-0.5 bg-[var(--bg-hover)]">
                <motion.div initial={{ width: '100%' }} animate={{ width: '0%' }} transition={{ duration: 4, ease: 'linear' }}
                  className="h-full bg-gradient-to-r from-[var(--accent-500)] to-[var(--accent-400)]" />
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}