'use client';

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

const MONITORS = [
  { id: 2, name: "Datasaur" }, { id: 6, name: "Audiobookshelf" },
  { id: 7, name: "Woodpecker CI" }, { id: 8, name: "Forgejo Git" },
  { id: 9, name: "Server dashboard" }, { id: 10, name: "Ratoong" },
  { id: 3, name: "Dozzle" }, { id: 12, name: "Observatory" },
  { id: 13, name: "Surf hub" }, { id: 11, name: "Anime list" },
  { id: 5, name: "Wiki" }, { id: 4, name: "Watchtower" },
];

const ITEMS_PER_PAGE = 6;

export default function MonitorRegistry({ isHovered }: { isHovered: boolean }) {
  const [page, setPage] = useState(0);
  const totalPages = Math.ceil(MONITORS.length / ITEMS_PER_PAGE);

useEffect(() => {
  let interval: NodeJS.Timeout | null = null;

  if (isHovered && totalPages > 1) {
    // Only start the interval if we are hovered
    interval = setInterval(() => {
      setPage((prev) => (prev + 1) % totalPages);
    }, 4000);
  }

  // This cleanup function runs whenever isHovered changes 
  // or the component unmounts.
  return () => {
    if (interval) clearInterval(interval);
    // Move the reset here so it happens "after" the effect cycle
    if (!isHovered) {
      setPage(0);
    }
  };
}, [isHovered, totalPages]);

  const currentMonitors = MONITORS.slice(page * ITEMS_PER_PAGE, (page + 1) * ITEMS_PER_PAGE);

  return (
    <>
      {/* Default View */}
<div className="flex min-h-[250px] flex-col justify-center w-full group-hover:opacity-0 group-hover:pointer-events-none transition-all duration-300">
  {/* Header Section */}
  <div className="flex items-start justify-between">
    <div>
      <div className="flex items-center gap-2 mb-1">
        <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.6)]" />
        <span className="font-medium text-white tracking-tight">Hetzner Node-01</span>
      </div>
      <div className="flex gap-2 items-center">
        <p className="text-xs text-neutral-500 font-mono">SYS_STATUS:</p>
        <span className="text-[10px] bg-green-500/10 text-green-500 border border-green-500/20 px-1.5 py-0.5 rounded uppercase font-bold">Online</span>
      </div>
    </div>
    <Activity className="text-neutral-800 w-10 h-10 -mt-1" />
  </div>

  {/* Added "Server Specs" to fill space and match the style of "The Architect" */}
  <div className="mt-8 grid grid-cols-2 gap-4 border-t border-neutral-800/50 pt-6">
    <div>
      <p className="text-[10px] font-mono text-neutral-600 uppercase">Architecture</p>
      <p className="text-xs text-neutral-400">linux/amd64</p>
    </div>
    <div>
      <p className="text-[10px] font-mono text-neutral-600 uppercase">Provider</p>
      <p className="text-xs text-neutral-400">Hetzner Cloud</p>
    </div>
  </div>
</div>

      {/* Hover View */}
    {/* Hover View: Automated Carousel */}
    <div className="absolute inset-0 p-5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col bg-neutral-900/95 backdrop-blur-sm">
    <div className="flex justify-between items-center mb-2 px-1">
        <h4 className="text-[10px] font-mono text-neutral-500 uppercase tracking-[0.2em]">
        Service Registry
        </h4>
    </div>
  
  {/* Increased height slightly to 200px and removed 'justify-center' from parent */}
  <div className="flex-1 relative min-h-0 overflow-hidden">
    <AnimatePresence mode="wait">
      <motion.div
        key={page}
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: -10 }}
        transition={{ duration: 0.4 }}
        className="grid grid-cols-1 gap-2" // Reduced gap from 2 to 1.5
      >
        {currentMonitors.map((m) => (
          <div 
            key={m.id} 
            className="flex items-center justify-between bg-neutral-800/30 p-1.5 px-3 rounded-lg border border-neutral-700/30"
          >
            <span className="text-[12px] font-medium text-neutral-300 truncate mr-2">
              {m.name}
            </span>
            <div className="flex gap-1 shrink-0 scale-90 origin-right"> {/* Scale badges slightly */}
              <img src={`https://status.georgew.dev/api/badge/${m.id}/status`} className="h-5" alt="up" />
              <img src={`https://status.georgew.dev/api/badge/${m.id}/avg-response/24`} className="h-5 opacity-60" alt="ms" />
            </div>
          </div>
        ))}
      </motion.div>
    </AnimatePresence>
  </div>
</div>
    </>
  );
}