import { useParams, Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import { ArrowLeft, ExternalLink, Github } from 'lucide-react';
import { useSettings } from '@/contexts/SettingsContext';

interface ProjectData {
  title: string;
  description: string;
  status: string;
  longDescription: string;
  technologies: string[];
  features: string[];
  links?: {
    demo?: string;
    github?: string;
  };
}

const projectsData: Record<string, ProjectData> = {
  'personal-website': {
    title: 'Personal Website',
    description: 'This Matrix-themed personal website with retro hacker aesthetics.',
    status: 'Complete',
    longDescription: 'A fully custom personal website built with React and TypeScript, featuring a Matrix-inspired cyberpunk design. The site includes immersive visual effects like CRT scanlines, Matrix rain animation, and glitch text. Interactive features include a terminal command interface with navigation shortcuts, toggleable sound effects, an integrated AI chat powered by Pollinations.ai, and a radio music player with station browsing. Designed to showcase my projects and personality with a unique hacker aesthetic.',
    technologies: ['React', 'TypeScript', 'Tailwind CSS', 'Framer Motion', 'Web Audio API', 'Pollinations.ai', 'Radio Browser API'],
    features: [
      'Matrix rain animation background with customizable density',
      'Custom crosshair cursor with hover scaling effects',
      'CRT scanline and flicker effects (toggleable)',
      'Terminal command interface with navigation shortcuts (/home, /about, /ai, etc.)',
      'Sound effects system with keyboard clicks and terminal beeps',
      'Red/Green theme toggle with localStorage persistence',
      'ASCII boot sequence with fake system initialization',
      'Glitch text effects on hover (character scrambling)',
      'Hidden easter egg for old-school gamers',
      'AI chat integration with conversation history persistence',
      'Radio music player with station search and category filtering',
      'Persistent mini music player across all pages',
      'Custom Matrix-themed scrollbar',
      'Dynamic status based on Amsterdam timezone',
      'ASCII art portrait on About page',
      'Responsive design for all screen sizes',
    ],
  },
  '3-way-speakers': {
    title: '3 Way Speakers',
    description: 'Building custom 3-way speaker system with crossover design.',
    status: 'Complete',
    longDescription: 'A DIY audio project involving the design and construction of high-fidelity 3-way speakers. This includes selecting appropriate drivers, designing custom crossover circuits, and building enclosures optimized for acoustic performance.',
    technologies: ['Electronics', 'Woodworking', 'Audio Engineering', 'Circuit Design'],
    features: [
      'Custom crossover network design',
      'Frequency response optimization',
      'MDF enclosure construction',
      'Driver selection and matching',
      'Acoustic dampening',
      'Bi-wire terminal setup',
    ],
  },
  'xray-machine': {
    title: 'X-Ray Machine',
    description: 'DIY X-ray machine project for educational purposes.',
    status: 'In Progress',
    longDescription: 'An educational project exploring the principles of X-ray generation and imaging. This involves understanding high-voltage electronics, radiation safety, and imaging techniques. Built with proper safety measures and shielding for experimental purposes.',
    technologies: ['High Voltage Electronics', 'Vacuum Tubes', 'Radiation Physics', 'Safety Engineering'],
    features: [
      'High voltage power supply design',
      'X-ray tube integration',
      'Lead shielding enclosure',
      'Imaging plate system',
      'Safety interlock system',
      'Dosimetry monitoring',
    ],
  },
  'dj-mixing-visualizer': {
    title: 'Automated DJ Mixing & Visualizer',
    description: 'Automated DJ mixing script with audio visualizer XY mode.',
    status: 'In Progress',
    longDescription: 'A software project that automates DJ mixing by analyzing BPM, key, and energy levels of tracks. Features an XY mode audio visualizer that creates real-time visual representations of the music being played, perfect for live performances and streaming.',
    technologies: ['Python', 'Audio Analysis', 'FFT', 'OpenGL', 'MIDI'],
    features: [
      'Automatic BPM detection and sync',
      'Key detection for harmonic mixing',
      'XY mode oscilloscope visualizer',
      'Real-time audio analysis',
      'Crossfade automation',
      'Beat-matched transitions',
      'Waveform display',
    ],
  },
  'vps-infrastructure': {
    title: 'VPS Server Infrastructure',
    description: 'Self-hosted VPS with authoritative nameserver, git, password manager, mail, reverse proxy and VPN.',
    status: 'Complete',
    longDescription: 'A comprehensive self-hosted server infrastructure project. Running on a VPS with full control over DNS, version control, secure password management, email services, and network security. Built for privacy, control, and learning.',
    technologies: ['Linux', 'CoreDNS', 'Gitea', 'Vaultwarden', 'Postfix/Dovecot', 'Caddy', 'WireGuard'],
    features: [
      'Authoritative DNS nameserver (CoreDNS)',
      'Self-hosted Git server (Gitea)',
      'Password manager (Vaultwarden)',
      'Mail server with SMTP/IMAP',
      'Caddy reverse proxy with automatic SSL',
      'WireGuard VPN server',
      'Automated backups',
    ],
  },
};

const ProjectDetail = () => {
  const { slug } = useParams<{ slug: string }>();
  const { playSound } = useSettings();
  
  const project = slug ? projectsData[slug] : null;

  if (!project) {
    return (
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        className="space-y-6"
      >
        <h1 className="font-minecraft text-3xl text-primary text-glow-strong">
          Project Not Found
        </h1>
        <Link
          to="/projects"
          onClick={() => playSound('click')}
          className="inline-flex items-center gap-2 font-pixel text-primary hover:text-primary/80 transition-colors"
        >
          <ArrowLeft size={16} />
          Back to Projects
        </Link>
      </motion.div>
    );
  }

  const statusColor = {
    'Complete': 'text-green-400 border-green-400',
    'In Progress': 'text-yellow-400 border-yellow-400',
    'Planning': 'text-blue-400 border-blue-400',
  }[project.status] || 'text-primary border-primary';

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
      className="space-y-6"
    >
      <Link
        to="/projects"
        onClick={() => playSound('click')}
        onMouseEnter={() => playSound('hover')}
        className="inline-flex items-center gap-2 font-pixel text-primary hover:text-primary/80 transition-colors"
      >
        <ArrowLeft size={16} />
        Back to Projects
      </Link>

      <div className="flex flex-wrap items-start justify-between gap-4">
        <h1 className="font-minecraft text-3xl md:text-4xl text-primary text-glow-strong">
          {project.title}
        </h1>
        <span className={`font-pixel text-xs px-3 py-1 border ${statusColor}`}>
          {project.status}
        </span>
      </div>

      <p className="font-pixel text-foreground/80 leading-relaxed">
        {project.longDescription}
      </p>

      {/* Technologies */}
      <div className="space-y-3">
        <h2 className="font-minecraft text-xl text-primary text-glow">
          Technologies
        </h2>
        <div className="flex flex-wrap gap-2">
          {project.technologies.map((tech) => (
            <span
              key={tech}
              className="font-pixel text-xs px-3 py-1 border border-primary/50 text-primary bg-primary/10"
            >
              {tech}
            </span>
          ))}
        </div>
      </div>

      {/* Features */}
      <div className="space-y-3">
        <h2 className="font-minecraft text-xl text-primary text-glow">
          Features
        </h2>
        <ul className="space-y-2">
          {project.features.map((feature, index) => (
            <motion.li
              key={feature}
              initial={{ opacity: 0, x: -10 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: index * 0.1 }}
              className="font-pixel text-foreground/80 flex items-center gap-2"
            >
              <span className="text-primary">{'>'}</span>
              {feature.includes('easter egg') ? (
                <span className="group cursor-help inline-flex items-center gap-2">
                  {feature}
                  <span className="px-2 py-0.5 bg-primary/10 border border-primary/30 text-primary/50 text-xs opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap">
                    ↑↑↓↓... you know the rest
                  </span>
                </span>
              ) : (
                feature
              )}
            </motion.li>
          ))}
        </ul>
      </div>

      {/* Links */}
      {project.links && (
        <div className="flex gap-4 pt-4">
          {project.links.demo && (
            <a
              href={project.links.demo}
              target="_blank"
              rel="noopener noreferrer"
              onClick={() => playSound('click')}
              onMouseEnter={() => playSound('hover')}
              className="inline-flex items-center gap-2 font-pixel text-sm px-4 py-2 border border-primary text-primary hover:bg-primary hover:text-background transition-all duration-300"
            >
              <ExternalLink size={14} />
              Live Demo
            </a>
          )}
          {project.links.github && (
            <a
              href={project.links.github}
              target="_blank"
              rel="noopener noreferrer"
              onClick={() => playSound('click')}
              onMouseEnter={() => playSound('hover')}
              className="inline-flex items-center gap-2 font-pixel text-sm px-4 py-2 border border-primary text-primary hover:bg-primary hover:text-background transition-all duration-300"
            >
              <Github size={14} />
              Source Code
            </a>
          )}
        </div>
      )}
    </motion.div>
  );
};

export default ProjectDetail;
