'use client';

import { useState, useRef } from 'react';
import { useTranslations } from 'next-intl';
import { Link } from '@/i18n/navigation';
import { motion, useInView, AnimatePresence } from 'framer-motion';
import {
  Briefcase,
  MapPin,
  Clock,
  Users,
  Heart,
  Zap,
  Coffee,
  GraduationCap,
  Plane,
  Building2,
  ChevronDown,
  ChevronRight,
  ArrowRight,
  Search,
  Code,
  LineChart,
  Headphones,
  Megaphone,
  type LucideIcon,
} from 'lucide-react';
import { LandingHeader, LandingFooter } from '@/components/layout';

type BenefitKey = 'health' | 'remote' | 'wellbeing' | 'learning' | 'international' | 'stockOptions';
type StatKey = 'employees' | 'nationalities' | 'offices' | 'womenTech';
type CultureKey = 'item1' | 'item2' | 'item3' | 'item4';
type JobKey = 'frontend' | 'backend' | 'pm' | 'ae' | 'csm' | 'data';
type DepartmentValue = 'all' | 'Engineering' | 'Product' | 'Sales' | 'Customer Success' | 'Data';
type LocationValue = 'all' | 'Paris' | 'Rotterdam' | 'Hambourg';

const BENEFITS: { key: BenefitKey; icon: LucideIcon }[] = [
  { key: 'health', icon: Heart },
  { key: 'remote', icon: Plane },
  { key: 'wellbeing', icon: Coffee },
  { key: 'learning', icon: GraduationCap },
  { key: 'international', icon: Users },
  { key: 'stockOptions', icon: Zap },
];

const STATS: { key: StatKey; value: string }[] = [
  { key: 'employees', value: '50+' },
  { key: 'nationalities', value: '15' },
  { key: 'offices', value: '3' },
  { key: 'womenTech', value: '40%' },
];

const CULTURE_ITEMS: CultureKey[] = ['item1', 'item2', 'item3', 'item4'];

type JobRecord = {
  id: number;
  key: JobKey;
  department: Exclude<DepartmentValue, 'all'>;
  location: Exclude<LocationValue, 'all'>;
  type: string;
  remote: boolean;
  salary: string;
  icon: LucideIcon;
};

const JOBS: JobRecord[] = [
  {
    id: 1,
    key: 'frontend',
    department: 'Engineering',
    location: 'Paris',
    type: 'CDI',
    remote: true,
    salary: '65K - 85K €',
    icon: Code,
  },
  {
    id: 2,
    key: 'backend',
    department: 'Engineering',
    location: 'Paris',
    type: 'CDI',
    remote: true,
    salary: '55K - 75K €',
    icon: Code,
  },
  {
    id: 3,
    key: 'pm',
    department: 'Product',
    location: 'Paris',
    type: 'CDI',
    remote: true,
    salary: '60K - 80K €',
    icon: LineChart,
  },
  {
    id: 4,
    key: 'ae',
    department: 'Sales',
    location: 'Rotterdam',
    type: 'CDI',
    remote: false,
    salary: '50K - 70K € + variable',
    icon: Megaphone,
  },
  {
    id: 5,
    key: 'csm',
    department: 'Customer Success',
    location: 'Paris',
    type: 'CDI',
    remote: true,
    salary: '45K - 60K €',
    icon: Headphones,
  },
  {
    id: 6,
    key: 'data',
    department: 'Data',
    location: 'Hambourg',
    type: 'CDI',
    remote: true,
    salary: '50K - 65K €',
    icon: LineChart,
  },
];

const DEPARTMENT_VALUES: DepartmentValue[] = [
  'all',
  'Engineering',
  'Product',
  'Sales',
  'Customer Success',
  'Data',
];
const LOCATION_VALUES: LocationValue[] = ['all', 'Paris', 'Rotterdam', 'Hambourg'];
const JOB_REQ_KEYS = ['req1', 'req2', 'req3', 'req4'] as const;

export default function CareersPage() {
  const t = useTranslations('marketing.careers');
  const [selectedDepartment, setSelectedDepartment] = useState<DepartmentValue>('all');
  const [selectedLocation, setSelectedLocation] = useState<LocationValue>('all');
  const [expandedJob, setExpandedJob] = useState<number | null>(null);

  const heroRef = useRef(null);
  const benefitsRef = useRef(null);
  const jobsRef = useRef(null);
  const cultureRef = useRef(null);

  const isHeroInView = useInView(heroRef, { once: true });
  const isBenefitsInView = useInView(benefitsRef, { once: true });
  const isJobsInView = useInView(jobsRef, { once: true });
  const isCultureInView = useInView(cultureRef, { once: true });

  const filteredJobs = JOBS.filter(job => {
    const departmentMatch = selectedDepartment === 'all' || job.department === selectedDepartment;
    const locationMatch = selectedLocation === 'all' || job.location === selectedLocation;
    return departmentMatch && locationMatch;
  });

  const containerVariants = {
    hidden: { opacity: 0, y: 50 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.6,
        staggerChildren: 0.1,
      },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.5 },
    },
  };

  return (
    <div className="min-h-screen bg-white">
      <LandingHeader activePage="careers" />

      {/* Hero Section */}
      <section
        ref={heroRef}
        className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden"
      >
        <div className="absolute inset-0 opacity-10">
          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
        </div>

        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8 }}
            className="text-center"
          >
            <motion.div
              initial={{ scale: 0.8, opacity: 0 }}
              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
            >
              <Briefcase className="w-5 h-5 text-brand-turquoise" />
              <span className="text-white/90 text-sm font-medium">{t('badge')}</span>
            </motion.div>

            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
              {t('title1')}
              <br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
                {t('title2')}
              </span>
            </h1>

            <p className="text-xl text-white/80 mb-10 max-w-3xl mx-auto leading-relaxed">
              {t('intro')}
            </p>

            <div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6">
              <a
                href="#jobs"
                className="group px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl font-semibold text-lg flex items-center space-x-2"
              >
                <span>{t('viewJobs')}</span>
                <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
              </a>
              <Link
                href="/about"
                className="px-8 py-4 bg-white text-brand-navy rounded-lg hover:bg-gray-100 transition-all font-semibold text-lg"
              >
                {t('learnMore')}
              </Link>
            </div>
          </motion.div>
        </div>

        {/* Wave */}
        <div className="absolute bottom-0 left-0 right-0">
          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
            <path
              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
              fill="white"
            />
          </svg>
        </div>
      </section>

      {/* Stats Section */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
            {STATS.map((stat, index) => (
              <motion.div
                key={stat.key}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                className="text-center"
              >
                <div className="text-5xl font-bold text-brand-turquoise mb-2">{stat.value}</div>
                <div className="text-gray-600 font-medium">{t(`stats.${stat.key}`)}</div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <section ref={benefitsRef} className="py-20">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isBenefitsInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8 }}
            className="text-center mb-16"
          >
            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">
              {t('benefitsTitle')}
            </h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">{t('benefitsSubtitle')}</p>
          </motion.div>

          <motion.div
            variants={containerVariants}
            initial="hidden"
            animate={isBenefitsInView ? 'visible' : 'hidden'}
            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
          >
            {BENEFITS.map(benefit => {
              const IconComponent = benefit.icon;
              return (
                <motion.div
                  key={benefit.key}
                  variants={itemVariants}
                  whileHover={{ y: -5 }}
                  className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100 hover:shadow-xl transition-all"
                >
                  <div className="w-14 h-14 bg-brand-turquoise/10 rounded-xl flex items-center justify-center mb-4">
                    <IconComponent className="w-7 h-7 text-brand-turquoise" />
                  </div>
                  <h3 className="text-xl font-bold text-brand-navy mb-2">
                    {t(`benefits.${benefit.key}.title`)}
                  </h3>
                  <p className="text-gray-600">{t(`benefits.${benefit.key}.description`)}</p>
                </motion.div>
              );
            })}
          </motion.div>
        </div>
      </section>

      {/* Culture Section */}
      <section
        ref={cultureRef}
        className="py-20 bg-gradient-to-br from-brand-navy to-brand-navy/95"
      >
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <motion.div
              initial={{ opacity: 0, x: -50 }}
              animate={isCultureInView ? { opacity: 1, x: 0 } : {}}
              transition={{ duration: 0.8 }}
            >
              <h2 className="text-4xl lg:text-5xl font-bold text-white mb-6">
                {t('cultureTitle')}
              </h2>
              <p className="text-xl text-white/80 mb-8">{t('cultureBody')}</p>
              <ul className="space-y-4">
                {CULTURE_ITEMS.map((itemKey, index) => (
                  <motion.li
                    key={itemKey}
                    initial={{ opacity: 0, x: -20 }}
                    animate={isCultureInView ? { opacity: 1, x: 0 } : {}}
                    transition={{ duration: 0.5, delay: index * 0.1 }}
                    className="flex items-center space-x-3 text-white/90"
                  >
                    <div className="w-6 h-6 bg-brand-turquoise rounded-full flex items-center justify-center flex-shrink-0">
                      <ChevronRight className="w-4 h-4 text-white" />
                    </div>
                    <span>{t(`culture.${itemKey}`)}</span>
                  </motion.li>
                ))}
              </ul>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 50 }}
              animate={isCultureInView ? { opacity: 1, x: 0 } : {}}
              transition={{ duration: 0.8, delay: 0.2 }}
              className="grid grid-cols-2 gap-4"
            >
              {[1, 2, 3, 4].map(i => (
                <div
                  key={i}
                  className="aspect-square bg-white/10 rounded-2xl flex items-center justify-center"
                >
                  <Users className="w-12 h-12 text-white/40" />
                </div>
              ))}
            </motion.div>
          </div>
        </div>
      </section>

      {/* Jobs Section */}
      <section ref={jobsRef} id="jobs" className="py-20">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isJobsInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8 }}
            className="text-center mb-12"
          >
            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">
              {t('jobsTitle')}
            </h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">{t('jobsSubtitle')}</p>
          </motion.div>

          {/* Filters */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isJobsInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-4 mb-12"
          >
            <div className="relative">
              <select
                value={selectedDepartment}
                onChange={e => setSelectedDepartment(e.target.value as DepartmentValue)}
                className="appearance-none px-6 py-3 pr-10 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-turquoise focus:border-transparent cursor-pointer"
              >
                {DEPARTMENT_VALUES.map(value => (
                  <option key={value} value={value}>
                    {value === 'all'
                      ? t('filters.allDepartments')
                      : t(`departments.${value}` as any)}
                  </option>
                ))}
              </select>
              <ChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" />
            </div>
            <div className="relative">
              <select
                value={selectedLocation}
                onChange={e => setSelectedLocation(e.target.value as LocationValue)}
                className="appearance-none px-6 py-3 pr-10 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-turquoise focus:border-transparent cursor-pointer"
              >
                {LOCATION_VALUES.map(value => (
                  <option key={value} value={value}>
                    {value === 'all' ? t('filters.allLocations') : t(`locations.${value}` as any)}
                  </option>
                ))}
              </select>
              <ChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" />
            </div>
          </motion.div>

          {/* Job Listings */}
          <motion.div
            variants={containerVariants}
            initial="hidden"
            animate={isJobsInView ? 'visible' : 'hidden'}
            className="space-y-4"
          >
            {filteredJobs.length === 0 ? (
              <div className="text-center py-12">
                <Search className="w-16 h-16 text-gray-300 mx-auto mb-4" />
                <h3 className="text-xl font-medium text-gray-600">{t('noJobs.title')}</h3>
                <p className="text-gray-500">{t('noJobs.body')}</p>
              </div>
            ) : (
              filteredJobs.map(job => {
                const IconComponent = job.icon;
                const isExpanded = expandedJob === job.id;

                return (
                  <motion.div
                    key={job.id}
                    variants={itemVariants}
                    className="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden"
                  >
                    <div
                      className="p-6 cursor-pointer hover:bg-gray-50 transition-colors"
                      onClick={() => setExpandedJob(isExpanded ? null : job.id)}
                    >
                      <div className="flex items-center justify-between">
                        <div className="flex items-center space-x-4">
                          <div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center">
                            <IconComponent className="w-6 h-6 text-brand-turquoise" />
                          </div>
                          <div>
                            <h3 className="text-xl font-bold text-brand-navy">
                              {t(`jobs.${job.key}.title`)}
                            </h3>
                            <div className="flex items-center space-x-4 mt-1 text-sm text-gray-500">
                              <span className="flex items-center space-x-1">
                                <Building2 className="w-4 h-4" />
                                <span>{t(`departments.${job.department}` as any)}</span>
                              </span>
                              <span className="flex items-center space-x-1">
                                <MapPin className="w-4 h-4" />
                                <span>{t(`locations.${job.location}` as any)}</span>
                              </span>
                              <span className="flex items-center space-x-1">
                                <Clock className="w-4 h-4" />
                                <span>{job.type}</span>
                              </span>
                            </div>
                          </div>
                        </div>
                        <div className="flex items-center space-x-4">
                          <div className="hidden md:flex items-center space-x-2">
                            {job.remote && (
                              <span className="px-3 py-1 bg-green-100 text-green-700 text-sm font-medium rounded-full">
                                {t('jobCard.remote')}
                              </span>
                            )}
                            <span className="px-3 py-1 bg-brand-turquoise/10 text-brand-turquoise text-sm font-medium rounded-full">
                              {job.salary}
                            </span>
                          </div>
                          <ChevronDown
                            className={`w-6 h-6 text-gray-400 transition-transform ${
                              isExpanded ? 'transform rotate-180' : ''
                            }`}
                          />
                        </div>
                      </div>
                    </div>

                    <AnimatePresence>
                      {isExpanded && (
                        <motion.div
                          initial={{ height: 0, opacity: 0 }}
                          animate={{ height: 'auto', opacity: 1 }}
                          exit={{ height: 0, opacity: 0 }}
                          transition={{ duration: 0.3 }}
                          className="border-t border-gray-100"
                        >
                          <div className="p-6 bg-gray-50">
                            <p className="text-gray-600 mb-6">{t(`jobs.${job.key}.description`)}</p>
                            <h4 className="font-bold text-brand-navy mb-3">
                              {t('jobCard.profile')}
                            </h4>
                            <ul className="space-y-2 mb-6">
                              {JOB_REQ_KEYS.map(reqKey => (
                                <li
                                  key={reqKey}
                                  className="flex items-start space-x-2 text-gray-600"
                                >
                                  <ChevronRight className="w-5 h-5 text-brand-turquoise flex-shrink-0 mt-0.5" />
                                  <span>{t(`jobs.${job.key}.${reqKey}` as any)}</span>
                                </li>
                              ))}
                            </ul>
                            <div className="flex items-center space-x-4">
                              <Link
                                href={`/careers/${job.id}`}
                                className="px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all font-medium flex items-center space-x-2"
                              >
                                <span>{t('jobCard.apply')}</span>
                                <ArrowRight className="w-4 h-4" />
                              </Link>
                              <button className="px-6 py-3 border border-gray-300 rounded-lg hover:border-brand-turquoise transition-all font-medium text-gray-700">
                                {t('jobCard.learnMore')}
                              </button>
                            </div>
                          </div>
                        </motion.div>
                      )}
                    </AnimatePresence>
                  </motion.div>
                );
              })
            )}
          </motion.div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 bg-gray-50">
        <div className="max-w-4xl mx-auto px-6 lg:px-8 text-center">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
          >
            <h2 className="text-4xl font-bold text-brand-navy mb-6">{t('cta.title')}</h2>
            <p className="text-xl text-gray-600 mb-10">{t('cta.body')}</p>
            <Link
              href="/contact"
              className="inline-flex items-center space-x-2 px-8 py-4 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 transition-all font-semibold text-lg"
            >
              <span>{t('cta.spontaneous')}</span>
              <ArrowRight className="w-5 h-5" />
            </Link>
          </motion.div>
        </div>
      </section>

      <LandingFooter />
    </div>
  );
}