portfolio/app/components/ActivityFeed.tsx

"use client";

import React, { useEffect, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Disc3, Gamepad2, Zap, Quote as QuoteIcon } from "lucide-react";
import { useTranslations } from "next-intl";

interface CustomActivity {
  [key: string]: unknown;
}

interface StatusData {
  music: { isPlaying: boolean; track: string; artist: string; albumArt: string; url: string; } | null;
  gaming: { isPlaying: boolean; name: string; image: string | null; state?: string | number; details?: string | number; } | null;
  coding: { isActive: boolean; project?: string; file?: string; language?: string; } | null;
  customActivities?: Record<string, CustomActivity>;
}

const techQuotes = {
  de: [
    { content: "Informatik hat nicht mehr mit Computern zu tun als Astronomie mit Teleskopen.", author: "Edsger W. Dijkstra" },
    { content: "Einfachheit ist die Voraussetzung für Verlässlichkeit.", author: "Edsger W. Dijkstra" },
    { content: "Wenn Debugging der Prozess des Entfernens von Fehlern ist, dann muss Programmieren der Prozess des Einbauens sein.", author: "Edsger W. Dijkstra" },
    { content: "Gelöschter Code ist gedebuggter Code.", author: "Jeff Sickel" },
    { content: "Zuerst löse das Problem. Dann schreibe den Code.", author: "John Johnson" }
  ],
  en: [
    { content: "Computer Science is no more about computers than astronomy is about telescopes.", author: "Edsger W. Dijkstra" },
    { content: "Simplicity is prerequisite for reliability.", author: "Edsger W. Dijkstra" },
    { content: "If debugging is the process of removing software bugs, then programming must be the process of putting them in.", author: "Edsger W. Dijkstra" },
    { content: "Deleted code is debugged code.", author: "Jeff Sickel" },
    { content: "First, solve the problem. Then, write the code.", author: "John Johnson" }
  ]
};

function getSafeGamingText(details: string | number | undefined, state: string | number | undefined, fallback: string): string {
  if (typeof details === 'string' && details.trim().length > 0) return details;
  if (typeof state === 'string' && state.trim().length > 0) return state;
  return fallback;
}

export default function ActivityFeed({ 
  onActivityChange,
  idleQuote,
  locale = 'en'
}: { 
  onActivityChange?: (active: boolean) => void;
  idleQuote?: string;
  locale?: string;
}) {
  const [data, setData] = useState<StatusData | null>(null);
  const [hasActivity, setHasActivity] = useState(false);
  const [quoteIndex, setQuoteIndex] = useState(0);
  const [loading, setLoading] = useState(true);
  const t = useTranslations("home.about.activity");

  const currentQuotes = techQuotes[locale as keyof typeof techQuotes] || techQuotes.en;
  
  // Combine CMS quote with tech quotes if available
  const allQuotes = React.useMemo(() => {
    if (idleQuote) {
      return [{ content: idleQuote, author: "Dennis Konkol" }, ...currentQuotes];
    }
    return currentQuotes;
  }, [idleQuote, currentQuotes]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch("/api/n8n/status");
        if (!res.ok) throw new Error();
        const json = await res.json();
        const activityData = Array.isArray(json) ? json[0] : json;
        
        setData(activityData);
        const isActive = Boolean(
          activityData.coding?.isActive ||
          activityData.gaming?.isPlaying ||
          activityData.music?.isPlaying ||
          Object.values(activityData.customActivities || {}).some((act) => Boolean((act as { enabled?: boolean })?.enabled))
        );
        setHasActivity(isActive);
        onActivityChange?.(isActive);
      } catch {
        setHasActivity(false);
        onActivityChange?.(false);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
    const statusInterval = setInterval(fetchData, 30000);
    
    // Cycle quotes every 10 seconds
    const quoteInterval = setInterval(() => {
      setQuoteIndex((prev) => (prev + 1) % allQuotes.length);
    }, 10000);

    return () => {
      clearInterval(statusInterval);
      clearInterval(quoteInterval);
    };
  }, [onActivityChange, allQuotes.length]);

  if (loading) {
    return <div className="animate-pulse space-y-4">
      <div className="h-24 bg-stone-100 dark:bg-stone-800 rounded-2xl" />
    </div>;
  }

  if (!hasActivity) {
    return (
      <div className="h-full flex flex-col justify-center space-y-6">
        <div className="w-10 h-10 rounded-full bg-liquid-mint/10 flex items-center justify-center">
          <QuoteIcon size={18} className="text-emerald-600 dark:text-liquid-mint" />
        </div>
        <div className="min-h-[120px] relative">
          <AnimatePresence mode="wait">
            <motion.div
              key={quoteIndex}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -10 }}
              transition={{ duration: 0.5 }}
              className="space-y-4"
            >
              <p className="text-xl md:text-2xl font-light leading-tight text-stone-700 dark:text-stone-300 italic">
                &ldquo;{allQuotes[quoteIndex].content}&rdquo;
              </p>
              <p className="text-xs font-black text-stone-400 dark:text-stone-500 uppercase tracking-widest">
                — {allQuotes[quoteIndex].author}
              </p>
            </motion.div>
          </AnimatePresence>
        </div>
        <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-stone-400 dark:text-stone-600 pt-4 border-t border-stone-100 dark:border-stone-800">
          <span className="w-1.5 h-1.5 rounded-full bg-stone-200 dark:bg-stone-700 animate-pulse" /> 
          {t("idleStatus")}
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {data?.coding?.isActive && (
        <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="bg-emerald-500/5 dark:bg-emerald-500/10 border border-emerald-500/20 rounded-2xl p-5">
          <div className="flex items-center gap-3 mb-2">
            <Zap size={14} className="text-emerald-600 dark:text-emerald-400 animate-pulse" />
            <span className="text-[10px] font-black uppercase tracking-widest text-emerald-600 dark:text-emerald-400">{t("codingNow")}</span>
          </div>
          <p className="font-bold text-stone-900 dark:text-white text-lg truncate">{data.coding.project}</p>
          <p className="text-xs text-stone-500 dark:text-white/50 truncate">{data.coding.file}</p>
        </motion.div>
      )}

      {data?.gaming?.isPlaying && (
        <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="bg-indigo-500/5 dark:bg-indigo-500/10 border border-indigo-500/20 rounded-2xl p-5">
          <div className="flex items-center gap-3 mb-3">
            <Gamepad2 size={14} className="text-indigo-600 dark:text-indigo-400" />
            <span className="text-[10px] font-black uppercase tracking-widest text-indigo-600 dark:text-indigo-400">{t("gaming")}</span>
          </div>
          <div className="flex gap-4">
            {data.gaming.image && (
              <div className="w-12 h-12 rounded-xl overflow-hidden shrink-0 shadow-lg relative">
                <img src={data.gaming.image} alt={data.gaming.name} className="w-full h-full object-cover" />
              </div>
            )}
            <div className="min-w-0 flex flex-col justify-center">
              <p className="font-bold text-stone-900 dark:text-white text-base truncate">{data.gaming.name}</p>
              <p className="text-xs text-stone-500 dark:text-white/50 truncate">
                {getSafeGamingText(data.gaming.details, data.gaming.state, t("inGame"))}
              </p>
            </div>
          </div>
        </motion.div>
      )}

      {data?.music?.isPlaying && (
        <motion.div 
          initial={{ opacity: 0, y: 10 }} 
          animate={{ opacity: 1, y: 0 }} 
          className="bg-[#1DB954]/5 dark:bg-[#1DB954]/10 border border-[#1DB954]/20 rounded-2xl p-5 relative overflow-hidden group"
        >
          <div className="flex items-center justify-between mb-3 relative z-10">
            <div className="flex items-center gap-2">
              <Disc3 size={14} className="text-[#1DB954] animate-spin-slow" />
              <span className="text-[10px] font-black uppercase tracking-widest text-[#1DB954]">{t("listening")}</span>
            </div>
            {/* Simple Animated Music Bars */}
            <div className="flex items-end gap-[2px] h-3">
              {[0, 1, 2].map((i) => (
                <motion.div
                  key={i}
                  animate={{ height: ["20%", "100%", "20%"] }}
                  transition={{ 
                    duration: 0.8, 
                    repeat: Infinity, 
                    delay: i * 0.2,
                    ease: "easeInOut" 
                  }}
                  className="w-[2px] bg-[#1DB954] rounded-full"
                />
              ))}
            </div>
          </div>
          <div className="flex gap-4 relative z-10">
            <div className="w-16 h-16 rounded-lg overflow-hidden shrink-0 shadow-md relative group-hover:shadow-xl transition-shadow duration-500">
              <img 
                src={data.music.albumArt} 
                alt="Album Art" 
                className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" 
              />
            </div>
            <div className="min-w-0 flex flex-col justify-center">
              <p className="font-bold text-[#1DB954] dark:text-[#1DB954] text-base truncate leading-tight mb-1">{data.music.track}</p>
              <p className="text-sm text-stone-600 dark:text-white/60 truncate font-medium">{data.music.artist}</p>
            </div>
          </div>
          {/* Subtle Spotify branding gradient */}
          <div className="absolute top-0 right-0 w-32 h-32 bg-[#1DB954]/5 blur-[60px] rounded-full -mr-16 -mt-16 pointer-events-none" />
        </motion.div>
      )}
    </div>
  );
}