'use client';

import Image from 'next/image';
import Link from 'next/link';
import { useState } from 'react';

interface JobData {
  id: string;
  title: string;
  company: string;
  type: string;
  salary: number;
  location: string;
  logo: string;
  userAvatar: string;
  mapImage: string;
  publishedDaysAgo: number;
  views: number;
  matchPercentage: number;
  description: string;
  benefits: string[];
  tasks: Task[];
  schedule: string;
  scheduleHours: string;
}

interface Task {
  icon: string;
  title: string;
}

const jobData: JobData = {
  id: '1',
  title: 'Agent de Logistique',
  company: 'Logistique Express S.A.',
  type: 'Temps plein',
  salary: 1850,
  location: 'Zone Industrielle Nord, Lyon',
  logo: 'https://lh3.googleusercontent.com/aida-public/AB6AXuCoObyrXgC-76v2GlOq44K0nplK7Ukwrcnj_gu9pfeytPS2CA0cd7o1KoxCrJiO46tt1xk5Art3RPFQrcUtLt2eorXwm10RXdz-GBCHdl8mZISOnMuOFb1FJATnmHJ5k3bgJtJKAmE-elyrovFDDnTVHJOW9VzE54Su4momli6TshsSRJHjyYdN_fi-uGFN8LBWr47BqUdrrbWN_2FfdfSAhh9PrNYIQzxzTfNcit4C0z126CrXwWl86KCfaLIIANXz5a4bMD0B',
  userAvatar: 'https://lh3.googleusercontent.com/aida-public/AB6AXuDVLKc5OQjv_FjLT5AHuVk8IvSM14Il6qZx3w_F7e04NtALcze_o0YB3iFNCwhIOh-ywP32-NcaqgkYQYtz_vjTuH9vwx4N4P26TU9gnIpCKHj7T7UjtxzTRTsJvYjjLLvPrIZdwjeWqWYbgZj6h3rTjEQTaza-8ipySe-24ZCokdWWavFmSFWplxbbZdrNQPXS1tq8BO0LHiUEp6g7dSUjSudzztt7YcL4AJF173pwOKioayaviPnTRlZk20lOKdHToi14BqvU',
  mapImage: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBieie1kZzJs25G_yv6eXGpKmNTfaGZiPkaXK64E8NjHlqhvaBoykD1kpTskgW4lczNrASj5pXnhsqvGRDegwEAFikDIli3ZTxTVBbauTev5RMnz3W-6iyaQOqBmE1oyBRWETjHVvAdSqgKW-cqpOmCmp9oAOjVtP3jtHZBJBxqtM16e0YjVsjB69AZw3MW1cTWB6Zcul8PUobq8s3meSmUpTC6Nw6YZPnGdmidf2GZEuFGSDW40LmL24k29iEJQSK6lPqBKeni',
  publishedDaysAgo: 2,
  views: 124,
  matchPercentage: 85,
  description: 'Vous rejoindrez une équipe dynamique pour aider à la réception et au tri des colis. Pas besoin de diplôme spécifique, votre motivation est le plus important !',
  benefits: [
    'Environnement de travail propre et sécurisé',
    'Formation complète assurée dès le premier jour',
    'Possibilité d\'évolution rapide vers chef d\'équipe'
  ],
  tasks: [
    { icon: 'package_2', title: 'Réceptionner les colis' },
    { icon: 'inventory', title: 'Scanner les produits' },
    { icon: 'local_shipping', title: 'Préparer les expéditions' },
    { icon: 'cleaning_services', title: 'Ranger l\'espace de travail' }
  ],
  schedule: 'Lun - Ven | 08h00 - 16h30',
  scheduleHours: '35h par semaine'
};

const MatchCard = ({ percentage, title, description, highlighted = false }: { percentage?: number; title: string; description: string; highlighted?: boolean }) => (
  <div className={`flex flex-col gap-3 rounded-xl border p-6 ${highlighted ? 'border-primary/20 bg-primary/5 border-l-4 border-l-primary' : 'border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900'}`}>
    <span className="material-symbols-outlined text-3xl" style={{ color: highlighted ? '#137fec' : percentage ? '#ef5444' : '#10b981' }}>
      {highlighted ? 'check_circle' : percentage ? 'near_me' : 'school'}
    </span>
    <div className="flex flex-col gap-1">
      <h3 className="text-slate-900 dark:text-slate-100 text-xl font-bold leading-tight">
        {percentage ? `${percentage}% de match` : title}
      </h3>
      <p className="text-slate-600 dark:text-slate-400 text-sm font-normal leading-relaxed">{description}</p>
    </div>
  </div>
);

const TaskCard = ({ icon, title }: Task) => (
  <div className="flex items-center gap-4 p-4 rounded-lg bg-slate-50 dark:bg-slate-800/50">
    <div className="size-12 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
      <span className="material-symbols-outlined text-primary">{icon}</span>
    </div>
    <span className="font-medium">{title}</span>
  </div>
);

export default function JobDetailPage() {
  const [isPlaying, setIsPlaying] = useState(false);

  const handleApply = () => {
    alert('Redirection vers le formulaire de candidature...');
  };

  const handleListen = () => {
    setIsPlaying(!isPlaying);
  };

  return (
    <div className="max-w-[1200px] mx-auto space-y-6">

      {/* Breadcrumbs */}
      <div className="flex flex-col gap-4">
        <div className="flex flex-wrap items-center gap-2 text-slate-500 dark:text-slate-400 text-sm font-medium">
          <a className="hover:text-primary" href="/userDashboard/jobs">Offres d'emploi</a>
          <span className="material-symbols-outlined text-xs">chevron_right</span>
          <span className="text-slate-900 dark:text-slate-100">{jobData.title}</span>
        </div>

        {/* Job Header Card */}
        <div className="flex flex-col md:flex-row gap-6 items-start md:items-center p-6 bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800">
          <div className="bg-center bg-no-repeat aspect-square bg-cover rounded-xl size-24 md:size-32 shrink-0 bg-slate-100 flex items-center justify-center overflow-hidden" style={{ backgroundImage: `url(${jobData.logo})` }}></div>
          <div className="flex flex-col flex-1 gap-1">
            <div className="flex flex-wrap items-center gap-3">
              <h1 className="text-slate-900 dark:text-slate-100 text-3xl font-bold leading-tight tracking-tight">{jobData.title}</h1>
              <span className="px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-xs font-bold rounded-full uppercase tracking-wider">
                {jobData.type}
              </span>
            </div>
            <p className="text-primary text-lg font-semibold">{jobData.company}</p>
            <div className="flex items-center gap-4 text-slate-500 dark:text-slate-400 mt-2">
              <div className="flex items-center gap-1.5">
                <span className="material-symbols-outlined text-lg">calendar_today</span>
                <span>Publié il y a {jobData.publishedDaysAgo} jours</span>
              </div>
              <div className="flex items-center gap-1.5">
                <span className="material-symbols-outlined text-lg">visibility</span>
                <span>{jobData.views} vues</span>
              </div>
            </div>
          </div>
          <div className="flex flex-col gap-2 w-full md:w-auto">
            <Link href="/userDashboard/jobs/Postuler" onClick={handleApply} className="w-full md:min-w-[180px] bg-primary hover:bg-primary/90 text-white font-bold py-3 px-6 rounded-lg transition-all shadow-lg shadow-primary/20 flex items-center justify-center gap-2">
              <span className="material-symbols-outlined">send</span>
              Postuler maintenant
            </Link>
            <Link href="/userDashboard/jobs/PostulerExpress" className="w-full md:min-w-[180px] bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 font-bold py-3 px-6 rounded-lg transition-all shadow-lg shadow-slate-200/50 dark:shadow-slate-800/50 flex items-center justify-center gap-2">
              <span className="material-symbols-outlined">lightbulb</span>
              Candidature Express
            </Link>
            <button onClick={handleListen} className="w-full md:min-w-[180px] bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 font-bold py-3 px-6 rounded-lg transition-all flex items-center justify-center gap-2">
              <span className="material-symbols-outlined">{isPlaying ? 'volume_off' : 'volume_up'}</span>
              Écouter l'annonce
            </button>
          </div>
        </div>
      </div>

      {/* Matching Section */}
      <section className="flex flex-col gap-4">
        <h2 className="text-slate-900 dark:text-slate-100 text-2xl font-bold leading-tight tracking-[-0.015em]">Pourquoi c'est pour vous</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <MatchCard percentage={jobData.matchPercentage} title={jobData.title} description="Correspond parfaitement à vos expériences passées et vos préférences." highlighted />
          <MatchCard title="Près de chez vous" description="Situé à seulement 15 min de votre domicile actuel." />
          <MatchCard title="Compétences" description="Utilise vos acquis en organisation et votre rigueur." />
        </div>
      </section>

      {/* Main Content Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {/* Left Column */}
        <div className="lg:col-span-2 flex flex-col gap-8">
          {/* Description Section */}
          <section className="bg-white dark:bg-slate-900 p-8 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm">
            <h3 className="text-xl font-bold mb-4 flex items-center gap-2">
              <span className="material-symbols-outlined text-primary">description</span>
              Description simplifiée
            </h3>
            <div className="space-y-4 text-slate-700 dark:text-slate-300 leading-relaxed text-lg">
              <p>{jobData.description}</p>
              <ul className="list-none space-y-3">
                {jobData.benefits.map((benefit, idx) => (
                  <li key={idx} className="flex items-start gap-3">
                    <span className="material-symbols-outlined text-primary mt-1">check</span>
                    <span>{benefit}</span>
                  </li>
                ))}
              </ul>
            </div>
          </section>

          {/* Tasks Section */}
          <section className="bg-white dark:bg-slate-900 p-8 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm">
            <h3 className="text-xl font-bold mb-6 flex items-center gap-2">
              <span className="material-symbols-outlined text-primary">task_alt</span>
              Ce que vous ferez
            </h3>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
              {jobData.tasks.map((task, idx) => (
                <TaskCard key={idx} {...task} />
              ))}
            </div>
          </section>
        </div>

        {/* Right Column */}
        <div className="flex flex-col gap-6">
          {/* Job Details Card */}
          <div className="bg-white dark:bg-slate-900 p-6 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm">
            <h3 className="text-slate-500 dark:text-slate-400 text-sm font-bold uppercase tracking-wider mb-4">Détails du poste</h3>
            <div className="flex flex-col gap-6">
              <div>
                <p className="text-slate-500 dark:text-slate-400 text-sm">Salaire Mensuel</p>
                <p className="text-3xl font-black text-primary">{jobData.salary} € <span className="text-sm font-normal text-slate-500 tracking-normal">Brut</span></p>
              </div>
              <hr className="border-slate-100 dark:border-slate-800" />
              <div className="flex items-start gap-3">
                <span className="material-symbols-outlined text-slate-400">schedule</span>
                <div>
                  <p className="font-bold">Horaires</p>
                  <p className="text-slate-600 dark:text-slate-400">{jobData.schedule}</p>
                  <p className="text-slate-600 dark:text-slate-400">{jobData.scheduleHours}</p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <span className="material-symbols-outlined text-slate-400">location_on</span>
                <div>
                  <p className="font-bold">Lieu</p>
                  <p className="text-slate-600 dark:text-slate-400">{jobData.location}</p>
                </div>
              </div>
            </div>
          </div>

          {/* Map Card */}
          <div className="bg-slate-200 dark:bg-slate-800 rounded-xl aspect-video relative overflow-hidden group cursor-pointer border border-slate-200 dark:border-slate-700">
            <div className="absolute inset-0 bg-cover bg-center" style={{ backgroundImage: `url(${jobData.mapImage})` }}></div>
            <div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors"></div>
            <div className="absolute bottom-3 left-3 bg-white dark:bg-slate-900 px-3 py-1.5 rounded-lg text-xs font-bold shadow-md flex items-center gap-2">
              <span className="material-symbols-outlined text-sm text-primary">map</span>
              Voir l'itinéraire
            </div>
          </div>

          {/* Help Card */}
          <div className="p-6 bg-primary/10 rounded-xl border border-primary/20">
            <p className="text-sm font-medium text-primary mb-2">Besoin d'aide ?</p>
            <p className="text-slate-700 dark:text-slate-300 text-sm mb-4">Votre conseiller SCPro360 est disponible pour vous accompagner.</p>
            <button className="w-full bg-white dark:bg-slate-800 text-primary border border-primary/30 font-bold py-2 rounded-lg hover:bg-primary hover:text-white transition-all text-sm">
              Appeler un conseiller
            </button>
          </div>
        </div>
      </div>


      {/* Mobile Sticky Action */}
      <div className="md:hidden sticky bottom-0 p-4 bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 flex gap-3 z-50">
        <button onClick={handleApply} className="flex-1 bg-primary text-white font-bold py-4 rounded-xl shadow-lg shadow-primary/30 text-lg">
          Postuler maintenant
        </button>
        <button onClick={handleListen} className="bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 p-4 rounded-xl">
          <span className="material-symbols-outlined">{isPlaying ? 'volume_off' : 'volume_up'}</span>
        </button>
      </div>
    </div>

  );
}