"use client";

import { useState, useEffect, useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";
import type { Locale } from "@/lib/i18n";

interface ActivityEvent {
  id: string;
  agent: string;
  action: string;
  department: string;
  timestamp: Date;
}

interface LiveActivityFeedProps {
  locale?: Locale;
  className?: string;
}

const mockActivities = {
  en: [
    { agent: "Sales Agent", action: "Qualified 3 new leads", department: "Sales" },
    { agent: "Support Bot", action: "Resolved 12 tickets", department: "Support" },
    { agent: "Marketing Hub", action: "Published 2 blog posts", department: "Marketing" },
    { agent: "Ops Engine", action: "Optimized workflow", department: "Operations" },
    { agent: "Finance Core", action: "Processed 45 invoices", department: "Finance" },
    { agent: "HR Hub", action: "Scheduled 5 interviews", department: "الموارد البشرية" },
    { agent: "AI Director", action: "Approved resource allocation", department: "Management" }
  ],
  ar: [
    { agent: "وكيل المبيعات", action: "مؤهل 3 عملاء محتملين جدد", department: "المبيعات" },
    { agent: "روبوت الدعم", action: "حل 12 تذكرة", department: "الدعم" },
    { agent: "مركز التسويق", action: "نشر تدوينتين", department: "التسويق" },
    { agent: "محرك العمليات", action: "تحسين سير العمل", department: "العمليات" },
    { agent: "المالية الأساسية", action: "معالجة 45 فاتورة", department: "المالية" },
    { agent: "مركز الموارد البشرية", action: "جدولة 5 مقابلات", department: "HR" },
    { agent: "مدير AI", action: "الموافقة على تخصيص الموارد", department: "الإدارة" }
  ]
};

const departmentColors: Record<string, string> = {
  "Sales": "from-electric-cyan to-soft-emerald",
  "Support": "from-soft-emerald to-electric-cyan",
  "Marketing": "from-electric-cyan to-blue-500",
  "Operations": "from-soft-emerald to-teal-500",
  "Finance": "from-electric-cyan to-purple-500",
  "HR": "from-soft-emerald to-pink-500",
  "Management": "from-electric-cyan to-orange-500",
  "المبيعات": "from-electric-cyan to-soft-emerald",
  "الدعم": "from-soft-emerald to-electric-cyan",
  "التسويق": "from-electric-cyan to-blue-500",
  "العمليات": "from-soft-emerald to-teal-500",
  "المالية": "from-electric-cyan to-purple-500",
  "الموارد البشرية": "from-soft-emerald to-pink-500",
  "الإدارة": "from-electric-cyan to-orange-500"
};

export function LiveActivityFeed({ locale = "en", className = "" }: LiveActivityFeedProps) {
  const [activities, setActivities] = useState<ActivityEvent[]>([]);
  const activitiesRef = useRef(activities);
  const isRTL = locale === "ar";
  const activityPool = mockActivities[locale];

  useEffect(() => {
    activitiesRef.current = activities;

    // Generate initial activities
    const generateInitial = () => {
      const initial: ActivityEvent[] = [];
      for (let i = 0; i < 3; i++) {
        const activity = activityPool[i % activityPool.length];
        initial.push({
          id: `init-${i}`,
          agent: activity.agent,
          action: activity.action,
          department: activity.department,
          timestamp: new Date(Date.now() - i * 5000)
        });
      }
      return initial;
    };

    setActivities(generateInitial());

    // Add new activities periodically
    const interval = setInterval(() => {
      const randomActivity = activityPool[Math.floor(Math.random() * activityPool.length)];
      const newActivity: ActivityEvent = {
        id: `activity-${Date.now()}`,
        agent: randomActivity.agent,
        action: randomActivity.action,
        department: randomActivity.department,
        timestamp: new Date()
      };

      setActivities(prev => {
        const updated = [newActivity, ...prev];
        return updated.slice(0, 5); // Keep only 5 most recent
      });
    }, 4000);

    return () => clearInterval(interval);
  }, [locale]);

  return (
    <div className={`space-y-3 ${className}`} dir={isRTL ? "rtl" : "ltr"}>
      <div className="flex items-center gap-2 mb-4">
        <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
        <span className="text-xs text-muted-white font-jetbrains-mono">
          {locale === "en" ? "LIVE ACTIVITY" : "نشاط مباشر"}
        </span>
      </div>

      <AnimatePresence mode="popLayout">
        {activities.map((activity) => (
          <motion.div
            key={activity.id}
            initial={{ opacity: 0, x: isRTL ? 20 : -20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: isRTL ? -20 : 20 }}
            transition={{ duration: 0.3 }}
            className="bg-obsidian/50 border border-white/5 rounded-lg p-3 backdrop-blur-sm"
          >
            <div className="flex items-start gap-3">
              <div className={`w-1 h-full rounded-full bg-gradient-to-b ${departmentColors[activity.department] || "from-electric-cyan to-soft-emerald"}`} />
              <div className="flex-1 min-w-0">
                <div className="font-jetbrains-mono text-sm text-warm-white truncate">
                  {activity.agent}
                </div>
                <div className="text-xs text-muted-white mt-0.5">
                  {activity.action}
                </div>
                <div className="text-[10px] text-muted-white/60 mt-1 font-jetbrains-mono">
                  {formatTimestamp(activity.timestamp, locale)}
                </div>
              </div>
            </div>
          </motion.div>
        ))}
      </AnimatePresence>
    </div>
  );
}

function formatTimestamp(date: Date, locale: "en" | "ar"): string {
  const now = new Date();
  const diff = now.getTime() - date.getTime();
  const seconds = Math.floor(diff / 1000);
  const minutes = Math.floor(seconds / 60);
  const hours = Math.floor(minutes / 60);

  if (locale === "ar") {
    if (seconds < 60) return "الآن";
    if (minutes < 60) return `منذ ${minutes} د`;
    return `منذ ${hours} س`;
  } else {
    if (seconds < 60) return "Just now";
    if (minutes < 60) return `${minutes}m ago`;
    return `${hours}h ago`;
  }
}