import { useState } from 'react';
import { ChevronDown, ChevronUp, Mail, Phone, MapPin, Github, Linkedin, Download, ExternalLink } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';

export default function CV() {
  const [expandedSection, setExpandedSection] = useState('experience');
  const [isDarkMode, setIsDarkMode] = useState(false);

  const toggleSection = (section) => {
    if (expandedSection === section) {
      setExpandedSection(null);
    } else {
      setExpandedSection(section);
    }
  };

  const Section = ({ id, title, children }) => (
    <motion.section 
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
      className="mb-8"
    >
      <div 
        className={`flex justify-between items-center cursor-pointer p-4 rounded-lg transition-colors
          ${expandedSection === id ? 
            'bg-blue-50 dark:bg-blue-900/30' : 
            'hover:bg-gray-50 dark:hover:bg-gray-800/50'}`}
        onClick={() => toggleSection(id)}
      >
        <h2 className="text-2xl font-semibold">{title}</h2>
        <motion.div
          initial={false}
          animate={{ rotate: expandedSection === id ? 180 : 0 }}
          transition={{ duration: 0.3 }}
        >
          <ChevronDown className="text-blue-600 dark:text-blue-400" />
        </motion.div>
      </div>
      
      <AnimatePresence>
        {expandedSection === id && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.3 }}
            className="overflow-hidden"
          >
            <div className="pt-4 px-4">
              {children}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </motion.section>
  );

  return (
    <div className={`min-h-screen transition-colors duration-300 ${isDarkMode ? 'dark bg-gray-900' : 'bg-gray-50'}`}>
      <div className="py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-4xl mx-auto">
          {/* Controls */}
          <div className="flex justify-end gap-4 mb-6">
            <button
              onClick={() => setIsDarkMode(!isDarkMode)}
              className="px-4 py-2 rounded-lg bg-white dark:bg-gray-800 shadow-sm hover:shadow-md transition-shadow duration-300 text-sm font-medium text-gray-700 dark:text-gray-300"
            >
              {isDarkMode ? '🌞 Light Mode' : '🌙 Dark Mode'}
            </button>
            <button className="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 transition-colors duration-300 text-white text-sm font-medium flex items-center gap-2">
              <Download size={16} />
              Download PDF
            </button>
          </div>

          {/* Main Card */}
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="bg-white dark:bg-gray-800 shadow-xl rounded-2xl overflow-hidden transition-colors duration-300"
          >
            {/* Header Section */}
            <header className="px-8 py-12 bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-700 dark:to-indigo-700">
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.2 }}
              >
                <h1 className="text-4xl font-bold mb-4 text-white">Your Name</h1>
                <p className="text-xl mb-6 text-blue-100">Professional Title</p>
                <div className="flex flex-wrap gap-4 text-sm text-white">
                  {[
                    { icon: <Mail size={16} />, text: "your.email@example.com" },
                    { icon: <Phone size={16} />, text: "+1 234 567 8900" },
                    { icon: <MapPin size={16} />, text: "City, Country" },
                  ].map((item, index) => (
                    <motion.div
                      key={index}
                      initial={{ opacity: 0, x: -20 }}
                      animate={{ opacity: 1, x: 0 }}
                      transition={{ delay: 0.3 + index * 0.1 }}
                      className="flex items-center gap-2 bg-white/10 px-3 py-2 rounded-full hover:bg-white/20 transition-colors duration-300"
                    >
                      {item.icon}
                      <span>{item.text}</span>
                    </motion.div>
                  ))}
                </div>
                <div className="flex gap-4 mt-6">
                  {[
                    { icon: <Github size={20} />, text: "GitHub" },
                    { icon: <Linkedin size={20} />, text: "LinkedIn" },
                  ].map((item, index) => (
                    <motion.a
                      key={index}
                      href="#"
                      initial={{ opacity: 0, y: 20 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ delay: 0.6 + index * 0.1 }}
                      className="flex items-center gap-2 bg-white/10 px-4 py-2 rounded-lg hover:bg-white/20 transition-colors duration-300 text-white"
                    >
                      {item.icon}
                      <span>{item.text}</span>
                      <ExternalLink size={16} />
                    </motion.a>
                  ))}
                </div>
              </motion.div>
            </header>

            <div className="px-8 py-6 dark:text-gray-100">
              {/* Summary Section */}
              <motion.section 
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                className="mb-8"
              >
                <h2 className="text-2xl font-semibold mb-4">Professional Summary</h2>
                <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
                  A brief professional summary highlighting your key strengths, experience, and career objectives.
                  Customize this section to showcase your unique value proposition and what makes you stand out.
                </p>
              </motion.section>

              {/* Experience Section */}
              <Section id="experience" title="Work Experience">
                <div className="space-y-6">
                  {[
                    {
                      title: "Senior Position",
                      company: "Company Name",
                      period: "2020 - Present",
                      achievements: [
                        "Led development of key product features resulting in 40% user growth",
                        "Managed a team of 5 developers and improved sprint velocity by 25%",
                        "Implemented CI/CD pipeline reducing deployment time by 60%"
                      ]
                    },
                    {
                      title: "Previous Position",
                      company: "Previous Company",
                      period: "2018 - 2020",
                      achievements: [
                        "Developed and maintained multiple client-facing applications",
                        "Reduced system downtime by 75% through infrastructure improvements",
                        "Mentored junior developers and led technical training sessions"
                      ]
                    }
                  ].map((job, index) => (
                    <motion.div
                      key={index}
                      initial={{ opacity: 0, x: -20 }}
                      animate={{ opacity: 1, x: 0 }}
                      transition={{ delay: index * 0.1 }}
                      className="relative pl-6 border-l-4 border-blue-600 dark:border-blue-400"
                    >
                      <div className="absolute -left-[11px] top-0 w-4 h-4 rounded-full bg-blue-600 dark:bg-blue-400" />
                      <h3 className="font-semibold text-lg text-gray-900 dark:text-white">{job.title}</h3>
                      <p className="text-blue-600 dark:text-blue-400 mb-2">{job.company} • {job.period}</p>
                      <ul className="space-y-2">
                        {job.achievements.map((achievement, i) => (
                          <li key={i} className="text-gray-700 dark:text-gray-300 flex items-start gap-2">
                            <span className="text-blue-600 dark:text-blue-400">•</span>
                            {achievement}
                          </li>
                        ))}
                      </ul>
                    </motion.div>
                  ))}
                </div>
              </Section>

              {/* Education Section */}
              <Section id="education" title="Education">
                <div className="relative pl-6 border-l-4 border-blue-600 dark:border-blue-400">
                  <div className="absolute -left-[11px] top-0 w-4 h-4 rounded-full bg-blue-600 dark:bg-blue-400" />
                  <h3 className="font-semibold text-lg text-gray-900 dark:text-white">Master of Science in Computer Science</h3>
                  <p className="text-blue-600 dark:text-blue-400 mb-2">University Name • 2018</p>
                  <p className="text-gray-700 dark:text-gray-300">
                    Specialized in Artificial Intelligence and Machine Learning. 
                    Graduated with honors. Research focus on Natural Language Processing.
                  </p>
                </div>
              </Section>

              {/* Skills Section */}
              <Section id="skills" title="Skills">
                <div className="flex flex-wrap gap-2">
                  {[
                    "JavaScript", "React", "Node.js", "Python", "AWS", 
                    "Docker", "GraphQL", "TypeScript", "Git", "Agile"
                  ].map((skill, index) => (
                    <motion.span
                      key={skill}
                      initial={{ opacity: 0, scale: 0.8 }}
                      animate={{ opacity: 1, scale: 1 }}
                      transition={{ delay: index * 0.05 }}
                      className="px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-100 rounded-lg text-sm font-medium hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors duration-300"
                    >
                      {skill}
                    </motion.span>
                  ))}
                </div>
              </Section>
            </div>
          </motion.div>
        </div>
      </div>
    </div>
  );
}