"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { GitBranch, Box, Server, Globe } from "lucide-react";
import { MonoLabel, Label } from "../Typography";
import { cn } from "../../utils/cn";

const Node: React.FC<{
  icon: React.ElementType;
  title: string;
  status: string;
  active?: boolean;
  color?: string;
}> = ({ icon: Icon, title, status, active, color = "blue" }) => (
  <motion.div
    initial={{ opacity: 0, scale: 0.9 }}
    whileInView={{ opacity: 1, scale: 1 }}
    className="flex flex-col items-center gap-2 md:gap-3 relative z-10 w-full md:w-auto"
  >
    <div
      className={cn(
        "w-12 h-12 md:w-16 md:h-16 rounded-xl md:rounded-2xl border flex items-center justify-center transition-all duration-700 shadow-sm",
        active
          ? `bg-${color}-50 border-${color}-200 text-${color}-600 shadow-${color}-100/50 scale-110`
          : "bg-white border-slate-100 text-slate-300",
      )}
    >
      <Icon className="w-5 h-5 md:w-8 md:h-8" />
      {active && (
        <motion.div
          layoutId="active-glow"
          className={cn(
            "absolute inset-0 rounded-2xl blur-xl -z-10",
            `bg-${color}-400/20`,
          )}
        />
      )}
    </div>
    <div className="text-center space-y-0.5">
      <Label
        className={cn(
          "text-[8px] md:text-[9px] font-bold uppercase tracking-widest",
          active ? "text-slate-900" : "text-slate-300",
        )}
      >
        {title}
      </Label>
      <MonoLabel
        className={cn(
          "text-[6px] md:text-[7px]",
          active ? "text-green-500" : "text-slate-200",
        )}
      >
        {status}
      </MonoLabel>
    </div>
  </motion.div>
);

const Connector: React.FC<{ active?: boolean }> = ({ active }) => (
  <div className="flex-1 w-px md:w-auto h-8 md:h-[1px] bg-slate-50 relative min-h-[24px] md:min-h-0 md:min-w-[40px] shrink-0">
    {active && (
      <motion.div
        initial={{ scaleX: 0, scaleY: 0 }}
        animate={{ scaleX: 1, scaleY: 1 }}
        className="absolute inset-0 bg-blue-300/50 origin-top md:origin-left mix-blend-multiply"
        style={{
          // Visual correction to prevent sub-pixel rendering thickening
          height: "100%",
          width: "100%",
        }}
      />
    )}
    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
      <div
        className={cn(
          "w-1 h-1 rounded-full border border-white", // Added border white to make it look smaller/cleaner
          active ? "bg-blue-400 animate-pulse scale-75" : "bg-slate-100", // Reduced scale and deeper color
        )}
      />
    </div>
  </div>
);

export const ArchitectureVisualizer: React.FC<{ className?: string }> = ({
  className,
}) => {
  const [step, setStep] = React.useState(0);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setStep((s) => (s + 1) % 4);
    }, 3000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div
      className={cn(
        "relative p-6 md:p-12 rounded-3xl border border-slate-100 bg-slate-50/30 backdrop-blur-sm overflow-hidden flex flex-col md:flex-row items-center justify-between gap-2 md:gap-4",
        className,
      )}
    >
      <div
        className="absolute inset-0 opacity-[0.03] pointer-events-none"
        style={{
          backgroundImage: "radial-gradient(#000 1px, transparent 1px)",
          backgroundSize: "30px 30px",
        }}
      />

      <Node
        icon={GitBranch}
        title="Repository"
        status="VCS_STABLE"
        active={step === 0}
        color="slate"
      />
      <Connector active={step >= 1} />
      <Node
        icon={Box}
        title="Container"
        status="BUILD_SUCCESS"
        active={step === 1}
        color="blue"
      />
      <Connector active={step >= 2} />
      <Node
        icon={Server}
        title="Deployment"
        status="HEALTH_OK"
        active={step === 2}
        color="indigo"
      />
      <Connector active={step >= 3} />
      <Node
        icon={Globe}
        title="CDN Edge"
        status="LIVE_SYNCED"
        active={step === 3}
        color="green"
      />

      {/* Decorative Binary Pulse */}
      <div className="absolute top-4 left-4 font-mono text-[6px] md:text-[7px] text-slate-200 uppercase tracking-widest leading-none hidden sm:block">
        BUILD_PROTOCOL_v4.2 // SYSTEM_IS_DETERMINISTIC
      </div>

      <div className="md:absolute bottom-4 right-1/2 md:translate-x-1/2 flex items-center gap-2 mt-6 md:mt-0">
        <div className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
        <span className="text-[7px] font-mono text-slate-400 font-bold uppercase tracking-widest">
          {step === 0 && "Polling for changes..."}
          {step === 1 && "Bundling production image..."}
          {step === 2 && "Syncing cluster state..."}
          {step === 3 && "Invalidating edge cache..."}
        </span>
      </div>
    </div>
  );
};
