project-afterlife/apps/web/src/components/activity/ActivityFeed.tsx

"use client";

import { useEffect, useState } from "react";
import { motion } from "framer-motion";
import { LiveIndicator } from "@/components/live/LiveIndicator";

interface Activity {
  id: number;
  type: string;
  details: Record<string, unknown>;
  created_at: string;
}

const typeConfig: Record<string, { label: string; color: string; icon: string }> = {
  newsletter_subscribe: { label: "New subscriber", color: "text-emerald-400 bg-emerald-400/10", icon: "✉️" },
  contact_message: { label: "Contact message", color: "text-blue-400 bg-blue-400/10", icon: "💬" },
  server_online: { label: "Server online", color: "text-green-400 bg-green-400/10", icon: "🟢" },
  server_offline: { label: "Server offline", color: "text-red-400 bg-red-400/10", icon: "🔴" },
};

function formatTimeAgo(iso: string) {
  const diff = Date.now() - new Date(iso).getTime();
  const minutes = Math.floor(diff / 60000);
  const hours = Math.floor(diff / 3600000);
  const days = Math.floor(diff / 86400000);

  if (minutes < 1) return "just now";
  if (minutes < 60) return `${minutes}m ago`;
  if (hours < 24) return `${hours}h ago`;
  return `${days}d ago`;
}

export function ActivityFeed() {
  const [activities, setActivities] = useState<Activity[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/activities?limit=10")
      .then((r) => r.json())
      .then((data) => {
        setActivities(data.activities || []);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

  if (loading) {
    return (
      <div className="max-w-2xl mx-auto px-4 py-8">
        <div className="space-y-3">
          {Array.from({ length: 3 }).map((_, i) => (
            <div key={i} className="h-12 bg-[#1a1a24] rounded-lg animate-pulse" />
          ))}
        </div>
      </div>
    );
  }

  if (activities.length === 0) return null;

  return (
    <div className="max-w-2xl mx-auto px-4 py-8">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-sm font-semibold text-[#a0a0a8] uppercase tracking-wider">Recent Activity</h3>
        <LiveIndicator />
      </div>
      <div className="space-y-2">
        {activities.map((activity, i) => {
          const config = typeConfig[activity.type] || { label: activity.type, color: "text-[#a0a0a8] bg-[rgba(160,160,168,0.1)]", icon: "•" };
          const details = activity.details as Record<string, string>;

          return (
            <motion.div
              key={activity.id}
              initial={{ opacity: 0, x: -10 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: i * 0.05, duration: 0.3 }}
              className="flex items-center gap-3 px-4 py-3 rounded-lg bg-[rgba(255,255,255,0.02)] border border-[rgba(255,255,255,0.04)] hover:border-[rgba(255,255,255,0.08)] transition-colors"
            >
              <span className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-xs ${config.color}`}>
                {config.icon}
              </span>
              <div className="flex-1 min-w-0">
                <p className="text-sm text-[#a0a0a8] truncate">
                  <span className="font-medium">{config.label}</span>
                  {details.email && <span className="text-[#6b6b75]"> — {details.email}</span>}
                  {details.name && <span className="text-[#6b6b75]"> — {details.name}</span>}
                  {details.server && <span className="text-[#6b6b75]"> — {details.server}</span>}
                </p>
              </div>
              <span className="text-xs text-[#3a3a44] flex-shrink-0">{formatTimeAgo(activity.created_at)}</span>
            </motion.div>
          );
        })}
      </div>
    </div>
  );
}