"use client";

import { motion, useReducedMotion } from "motion/react";
import { Activity, Cpu, Gauge, ArrowUpRight } from "lucide-react";

function AnimatedBar({
  width,
  delay,
  color,
}: {
  width: string;
  delay: number;
  color: string;
}) {
  const reduced = useReducedMotion();
  return (
    <motion.div
      className="h-1.5 rounded-full"
      style={{ background: color }}
      initial={reduced ? { width } : { width: 0 }}
      animate={{ width }}
      transition={{ duration: 1.2, delay, ease: [0.16, 1, 0.3, 1] }}
    />
  );
}

function StatCard({
  icon: Icon,
  label,
  value,
  trend,
  delay,
}: {
  icon: typeof Activity;
  label: string;
  value: string;
  trend: string;
  delay: number;
}) {
  const reduced = useReducedMotion();
  return (
    <motion.div
      className="rounded-lg p-3"
      style={{
        background: "rgba(255,255,255,0.03)",
        border: "1px solid rgba(255,255,255,0.06)",
      }}
      initial={reduced ? {} : { opacity: 0, y: 8 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, delay }}
    >
      <div className="flex items-center gap-2 mb-1.5">
        <Icon className="h-3 w-3 text-violet-400" />
        <span className="text-[10px] text-gray-500 uppercase tracking-wider">
          {label}
        </span>
      </div>
      <div className="flex items-baseline gap-1.5">
        <span className="text-lg font-bold text-white">{value}</span>
        <span className="text-[10px] text-emerald-400 flex items-center gap-0.5">
          <ArrowUpRight className="h-2.5 w-2.5" />
          {trend}
        </span>
      </div>
    </motion.div>
  );
}

export function DashboardPreview() {
  const reduced = useReducedMotion();

  return (
    <motion.div
      className="relative w-full max-w-lg mx-auto"
      initial={reduced ? {} : { opacity: 0, y: 32, scale: 0.96 }}
      animate={{ opacity: 1, y: 0, scale: 1 }}
      transition={{ duration: 0.8, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
    >
      {/* Glow behind the preview */}
      <div
        className="absolute -inset-8 rounded-3xl opacity-40 blur-3xl"
        style={{
          background:
            "radial-gradient(ellipse at center, rgba(124,58,237,0.25) 0%, transparent 70%)",
        }}
        aria-hidden
      />

      {/* Dashboard frame */}
      <div
        className="relative rounded-2xl overflow-hidden"
        style={{
          background: "rgba(255,255,255,0.04)",
          border: "1px solid rgba(255,255,255,0.10)",
          boxShadow:
            "0 0 80px rgba(124,58,237,0.12), 0 32px 64px rgba(0,0,0,0.5)",
        }}
      >
        {/* Title bar */}
        <div
          className="flex items-center gap-1.5 px-4 py-2.5"
          style={{
            background: "rgba(255,255,255,0.03)",
            borderBottom: "1px solid rgba(255,255,255,0.06)",
          }}
        >
          <div className="h-2 w-2 rounded-full bg-red-500/50" />
          <div className="h-2 w-2 rounded-full bg-yellow-500/50" />
          <div className="h-2 w-2 rounded-full bg-green-500/50" />
          <span className="ml-2 text-[10px] text-gray-500 font-mono">
            LLMHosts Dashboard
          </span>
        </div>

        {/* Content */}
        <div className="p-4 space-y-3">
          {/* Stats row */}
          <div className="grid grid-cols-3 gap-2">
            <StatCard
              icon={Gauge}
              label="Throughput"
              value="847"
              trend="12%"
              delay={0.5}
            />
            <StatCard
              icon={Cpu}
              label="GPU Load"
              value="73%"
              trend="stable"
              delay={0.65}
            />
            <StatCard
              icon={Activity}
              label="Savings"
              value="$412"
              trend="this month"
              delay={0.8}
            />
          </div>

          {/* Model routing section */}
          <div
            className="rounded-lg p-3"
            style={{
              background: "rgba(255,255,255,0.02)",
              border: "1px solid rgba(255,255,255,0.06)",
            }}
          >
            <div className="flex items-center justify-between mb-2.5">
              <span className="text-[10px] text-gray-500 uppercase tracking-wider">
                Model Routing
              </span>
              <span className="text-[10px] text-emerald-400">3 backends active</span>
            </div>
            <div className="space-y-2">
              {[
                { name: "llama3.2:8b", pct: "62%", color: "#7c3aed" },
                { name: "mistral:7b", pct: "28%", color: "#8b5cf6" },
                { name: "qwen3:14b", pct: "10%", color: "#a78bfa" },
              ].map((model, i) => (
                <div key={model.name} className="space-y-1">
                  <div className="flex justify-between text-[10px]">
                    <span className="text-gray-400 font-mono">
                      {model.name}
                    </span>
                    <span className="text-gray-500">{model.pct}</span>
                  </div>
                  <div
                    className="h-1 rounded-full"
                    style={{ background: "rgba(255,255,255,0.06)" }}
                  >
                    <AnimatedBar
                      width={model.pct}
                      delay={0.9 + i * 0.15}
                      color={model.color}
                    />
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Recent requests */}
          <div className="space-y-1">
            {[
              { status: "200", latency: "12ms", model: "llama3.2", cached: true },
              { status: "200", latency: "340ms", model: "mistral", cached: false },
              { status: "200", latency: "8ms", model: "llama3.2", cached: true },
            ].map((req, i) => (
              <motion.div
                key={i}
                className="flex items-center gap-3 rounded px-2 py-1 text-[10px] font-mono"
                style={{ background: "rgba(255,255,255,0.02)" }}
                initial={reduced ? {} : { opacity: 0, x: -8 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 1.3 + i * 0.1 }}
              >
                <span className="text-emerald-400">{req.status}</span>
                <span className="text-gray-500">{req.latency}</span>
                <span className="text-gray-400">{req.model}</span>
                {req.cached && (
                  <span className="text-violet-400/70 ml-auto">cached</span>
                )}
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </motion.div>
  );
}
