import React, { useState, useEffect } from 'react';
import { motion, useMotionValue, useSpring } from 'framer-motion';

// --- mock data ---
const PROJECTS = [
  {
    id: 1,
    title: "TaskFlow API",
    category: "Backend",
    description: "A high-throughput microservice handling real-time project syncing and background workers.",
    metrics: { stars: 142, uptime: "99.98%", commits: "412" },
    tags: ["Node.js", "TypeScript", "Redis", "Docker"],
    repo: "https://github.com/jeanlucponsard/taskflow",
    demo: "https://jeanlucponsard.dev/taskflow"
  },
  {
    id: 2,
    title: "DevMetrics Dashboard",
    category: "Frontend",
    description: "An interactive telemetry UI rendering real-time system performance and database health.",
    metrics: { stars: 89, uptime: "100%", commits: "185" },
    tags: ["Next.js", "Tailwind", "Framer Motion", "Recharts"],
    repo: "https://github.com/jeanlucponsard/devmetrics",
    demo: "https://jeanlucponsard.dev/metrics"
  },
  {
    id: 3,
    title: "Sentinel Auth",
    category: "Security",
    description: "A lightweight, zero-dependency OAuth2 provider featuring biometric passkey support.",
    metrics: { stars: 310, uptime: "99.99%", commits: "290" },
    tags: ["Go", "WebAuthn", "SQLite", "Crypto"],
    repo: "https://github.com/jeanlucponsard/sentinel",
    demo: "https://jeanlucponsard.dev/sentinel"
  }
];

export default function ProjectPanel() {
  const [filter, setFilter] = useState("All");
  const [hoveredCard, setHoveredCard] = useState(null);
  const [cursorText, setCursorText] = useState("");

  // Custom Cursor Logic
  const cursorX = useMotionValue(-100);
  const cursorY = useMotionValue(-100);
  const springConfig = { damping: 25, stiffness: 250 };
  const cursorXSpring = useSpring(cursorX, springConfig);
  const cursorYSpring = useSpring(cursorY, springConfig);

  useEffect(() => {
    const moveCursor = (e) => {
      cursorX.set(e.clientX - 16);
      cursorY.set(e.clientY - 16);
    };
    window.addEventListener("mousemove", moveCursor);
    return () => window.removeEventListener("mousemove", moveCursor);
  }, [cursorX, cursorY]);

  const filteredProjects = filter === "All" 
    ? PROJECTS 
    : PROJECTS.filter(p => p.category === filter);

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 py-20 px-6 relative overflow-hidden select-none cursor-none">
      
      {/* 1. Custom Interactive Cursor */}
      <motion.div 
        className="fixed top-0 left-0 w-8 h-8 rounded-full bg-white/10 border border-white/30 pointer-events-none z-50 flex items-center justify-center text-[10px] font-bold text-black backdrop-blur-sm mix-blend-difference"
        style={{ x: cursorXSpring, y: cursorYSpring }}
        animate={{ scale: hoveredCard ? 2.5 : 1, backgroundColor: hoveredCard ? "rgba(255,255,255,1)" : "rgba(255,255,255,0.1)" }}
      >
        {hoveredCard && <span className="text-slate-900 animate-fade-in">VIEW</span>}
      </motion.div>

      <div className="max-w-5xl mx-auto relative z-10">
        
        {/* Header Widget */}
        <div className="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
          <div>
            <p className="text-emerald-400 font-mono text-sm mb-2">// PORTFOLIO.PROJECTS</p>
            <h2 className="text-4xl md:text-5xl font-black tracking-tight">Jean-Luc Ponsard</h2>
          </div>
          
          {/* Filter Widget */}
          <div className="flex bg-slate-900/80 p-1.5 rounded-xl border border-slate-800/80 backdrop-blur-md">
            {["All", "Frontend", "Backend", "Security"].map((cat) => (
              <button
                key={cat}
                onClick={() => setFilter(cat)}
                className={`px-4 py-1.5 rounded-lg text-sm font-medium transition-all ${filter === cat ? 'bg-slate-800 text-white shadow-md' : 'text-slate-400 hover:text-slate-200'}`}
              >
                {cat}
              </button>
            ))}
          </div>
        </div>

        {/* 2. Project Cards Grid with Scroll & Hover Animations */}
        <div className="grid md:grid-cols-2 gap-8">
          {filteredProjects.map((project, index) => (
            <motion.div
              key={project.id}
              initial={{ opacity: 0, y: 40 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-100px" }}
              transition={{ duration: 0.6, delay: index * 0.1 }}
              onMouseEnter={() => setHoveredCard(project.id)}
              onMouseLeave={() => setHoveredCard(null)}
              className="group relative bg-slate-900/40 border border-slate-800/60 rounded-2xl p-6 backdrop-blur-xl hover:border-slate-700/80 transition-colors duration-300 flex flex-col justify-between overflow-hidden"
            >
              {/* Decorative background glow */}
              <div className="absolute -inset-px bg-gradient-to-br from-emerald-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl pointer-events-none" />

              <div>
                {/* Card Header Widget */}
                <div className="flex justify-between items-start mb-4">
                  <span className="text-xs font-mono px-2.5 py-1 bg-slate-800/80 text-slate-300 rounded-md border border-slate-700/50">
                    {project.category}
                  </span>
                  <div className="flex items-center gap-1.5">
                    <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
                    <span className="text-[11px] font-mono text-slate-500">LIVE</span>
                  </div>
                </div>

                <h3 className="text-2xl font-bold text-white mb-2 tracking-tight group-hover:text-emerald-300 transition-colors">
                  {project.title}
                </h3>
                <p className="text-slate-400 text-sm leading-relaxed mb-6">
                  {project.description}
                </p>

                {/* 3. Metrics Widget Panel */}
                <div className="grid grid-cols-3 gap-2 bg-slate-950/60 p-3 rounded-xl border border-slate-800/50 mb-6 text-center font-mono">
                  <div>
                    <p className="text-[10px] text-slate-500 uppercase">Stars</p>
                    <p className="text-sm font-bold text-slate-200">{project.metrics.stars}</p>
                  </div>
                  <div>
                    <p className="text-[10px] text-slate-500 uppercase">Uptime</p>
                    <p className="text-sm font-bold text-emerald-400">{project.metrics.uptime}</p>
                  </div>
                  <div>
                    <p className="text-[10px] text-slate-500 uppercase">Commits</p>
                    <p className="text-sm font-bold text-slate-200">{project.metrics.commits}</p>
                  </div>
                </div>
              </div>

              {/* Card Footer */}
              <div>
                <div className="flex flex-wrap gap-1.5 mb-6">
                  {project.tags.map(tag => (
                    <span key={tag} className="text-xs bg-slate-900 text-slate-400 px-2 py-0.5 rounded-md border border-slate-800">
                      {tag}
                    </span>
                  ))}
                </div>

                <div className="flex justify-between items-center border-t border-slate-800/80 pt-4">
                  <a href={project.repo} className="text-xs font-mono text-slate-400 hover:text-white transition-colors">
                    $ cat ./github_url
                  </a>
                  <a href={project.demo} className="text-xs font-mono text-emerald-400 hover:underline">
                    launch_app() →
                  </a>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
        
      </div>
    </div>
  );
}