import { motion } from 'framer-motion';
import { ExternalLink, MapPin, Wine, Users } from 'lucide-react';
import { useLanguage } from '../contexts/LanguageContext';
import { Link } from 'react-router-dom';

const Projects = () => {
  const { t, language } = useLanguage();
  const projects = [
    {
      id: 1,
      title: t('projects.travelMate.title'),
      description: t('projects.travelMate.description'),
      status: t('projects.status.available'),
      technologies: ["Dart", "Flutter", "Firebase"],
      features: [
        t('projects.travelMate.feature1'),
        t('projects.travelMate.feature2'),
        t('projects.travelMate.feature3'),
        t('projects.travelMate.feature4')
      ],
      color: "#4CAF50",
      icon: <MapPin size={24} />,
      links: {
        demo: "/travelmate"
      },
      image: "/travel-mate-preview.png"
    },
    {
      id: 4, // New ID for Home Sync
      title: t('projects.homeSync.title'),
      description: t('projects.homeSync.description'),
      status: t('projects.status.personal'),
      technologies: ["Flutter", "Firebase", "BLoC"],
      features: [
        t('projects.homeSync.feature1'),
        t('projects.homeSync.feature2'),
        t('projects.homeSync.feature3'),
        t('projects.homeSync.feature4')
      ],
      color: "#8B5CF6", // Purple/Indigo shade for family/sync theme
      icon: <Users size={24} />, // Inherited import or need to add
      links: {
        demo: "/homesync"
      },
      image: "/home-sync-preview.png" // Placeholder
    },
    {
      id: 3,
      title: t('projects.shelbys.title'),
      description: t('projects.shelbys.description'),
      status: t('projects.status.online'),
      technologies: ["React", "Vite", "TailwindCSS", "Framer Motion"],
      features: [
        t('projects.shelbys.feature1'),
        t('projects.shelbys.feature2'),
        t('projects.shelbys.feature4')
      ],
      color: "#E91E63",
      icon: <Wine size={24} />,
      links: {
        demo: "https://shelbys.be"
      },
      image: "/shelbys-preview.png"
    },
    {
      id: 2,
      title: t('projects.portfolio.title'),
      description: t('projects.portfolio.description'),
      status: t('projects.status.current'),
      technologies: ["React", "TypeScript", "Framer Motion", "CSS3"],
      features: [
        t('projects.portfolio.feature1'),
        t('projects.portfolio.feature2'),
        t('projects.portfolio.feature3'),
        t('projects.portfolio.feature4')
      ],
      color: "#2196F3",
      icon: <ExternalLink size={24} />,
      links: {
        demo: "https://xeewy.be"
      }
    }
  ];

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.3,
        delayChildren: 0.2
      }
    }
  };

  const projectVariants = {
    hidden: { opacity: 0, y: 50 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.8,
        ease: [0.25, 0.1, 0.25, 1] as const
      }
    }
  };

  return (
    <section id="projects" className="projects">
      <div className="container">
        <motion.div
          key="projects-header"
          className="section-header"
          initial={{ opacity: 0, y: 50 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
        >
          <h2 className="section-title">{t('projects.title')}</h2>
          <p className="section-subtitle">
            {t('projects.subtitle')}
          </p>
        </motion.div>

        <motion.div
          key="projects-grid"
          className="projects-grid"
          variants={containerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
        >
          {projects.map((project, index) => (
            <motion.div
              key={project.id}
              className="project-card"
              variants={projectVariants}
              whileHover={{
                y: -10,
                scale: 1.02,
                transition: { duration: 0.3 }
              }}
            >
              <div className="project-header">
                <div
                  className="project-icon"
                  style={{ backgroundColor: `${project.color}20`, color: project.color }}
                >
                  {project.icon}
                </div>
                <div className="project-status">
                  <span className="status-badge" style={{ backgroundColor: `${project.color}20`, color: project.color }}>
                    {project.status}
                  </span>
                </div>
              </div>

              <div className="project-content">
                <h3 className="project-title">{project.title}</h3>
                <p className="project-description">{project.description}</p>

                <div className="project-technologies">
                  {project.technologies.map((tech, techIndex) => (
                    <motion.span
                      key={tech}
                      className="tech-tag"
                      initial={{ opacity: 0, scale: 0.8 }}
                      whileInView={{ opacity: 1, scale: 1 }}
                      transition={{
                        duration: 0.3,
                        delay: (index * 0.1) + (techIndex * 0.05)
                      }}
                      viewport={{ once: true }}
                    >
                      {tech}
                    </motion.span>
                  ))}
                </div>

                <div className="project-features">
                  <h4>{t('projects.features')}</h4>
                  <ul>
                    {project.features.map((feature, featureIndex) => (
                      <motion.li
                        key={featureIndex}
                        initial={{ opacity: 0, x: -20 }}
                        whileInView={{ opacity: 1, x: 0 }}
                        transition={{
                          duration: 0.5,
                          delay: (index * 0.2) + (featureIndex * 0.1)
                        }}
                        viewport={{ once: true }}
                      >
                        {feature}
                      </motion.li>
                    ))}
                  </ul>
                </div>
              </div>

              <div className="project-footer">
                <div className="project-links">

                  {project.links.demo !== "#" && (
                    project.links.demo.startsWith('/') ? (
                      <Link to={`/${language}${project.links.demo}`} style={{ textDecoration: 'none' }}>
                        <motion.div
                          className="project-link primary"
                          whileHover={{ scale: 1.1 }}
                          whileTap={{ scale: 0.95 }}
                        >
                          <ExternalLink size={20} />
                          {t('projects.btn.viewProject')}
                        </motion.div>
                      </Link>
                    ) : (
                      <motion.a
                        href={project.links.demo}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="project-link primary"
                        whileHover={{ scale: 1.1 }}
                        whileTap={{ scale: 0.95 }}
                      >
                        <ExternalLink size={20} />
                        {t('projects.btn.viewProject')}
                      </motion.a>
                    )
                  )}
                </div>
              </div>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
};

export default Projects;