feat: implement podcastIndexService using iTunes API for search and trending podcasts

frontend/src/pages/AddPodcast.tsx

@@ -5,6 +5,7 @@ import { podcastService } from '../services/podcastService';
 import { episodeService, Episode } from '../services/episodeService';
 import Header from '../components/Header';
 import EpisodeCard from '../components/EpisodeCard';
+import EpisodeDetails from '../components/EpisodeDetails';
 import AudioPlayer from '../components/AudioPlayer';
 import { Search, Plus, Loader, Rss, Check, Globe, Sparkles, PlusCircle, LayoutGrid, ListMusic } from 'lucide-react';
 import { authService } from '../services/authService';
@@ -21,6 +22,8 @@ export default function AddPodcast() {
   const [rssError, setRssError] = useState<string | null>(null);
   const [rssSuccess, setRssSuccess] = useState<string | null>(null);
   const [selectedEpisode, setSelectedEpisode] = useState<Episode | null>(null);
+  const [detailsEpisode, setDetailsEpisode] = useState<Episode | null>(null);
+  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
   
   // Modal state
   const [showSuccessModal, setShowSuccessModal] = useState(false);
@@ -38,6 +41,11 @@ export default function AddPodcast() {
     loadUser();
   }, []);
 
+  const handleOpenDetails = (episode: Episode) => {
+    setDetailsEpisode(episode);
+    setIsDetailsOpen(true);
+  };
+
   // Podcast Discovery Query
   const { data: searchResults, isLoading: isSearching } = useQuery({
     queryKey: ['discover', 'search', searchQuery],
@@ -119,13 +127,13 @@ export default function AddPodcast() {
       <main className="max-w-5xl mx-auto">
         {/* RSS Input Area */}
         <div className="premium-glass p-8 rounded-[3rem] mb-12 relative overflow-hidden">
-           <div className="absolute top-0 right-0 w-32 h-32 bg-accent-indigo/5 blur-[50px]" />
+           <div className="absolute top-0 right-0 w-32 h-32 bg-[var(--accent-primary)]/5 blur-[50px]" />
            <div className="relative z-10">
               <div className="flex items-center gap-3 mb-6">
                 <div className="w-10 h-10 rounded-xl bg-accent-rose/10 flex items-center justify-center text-accent-rose shadow-glow-indigo">
                    <Rss className="w-5 h-5" />
                 </div>
-                <h3 className="text-xl font-display font-black text-white">Flux RSS Direct</h3>
+                <h3 className="text-xl font-display font-black">Flux RSS Direct</h3>
               </div>
               
               <form onSubmit={handleRssSubscribe} className="flex flex-col sm:flex-row gap-4">
@@ -158,21 +166,21 @@ export default function AddPodcast() {
                  <div className="w-10 h-10 rounded-xl bg-accent-indigo/10 flex items-center justify-center text-accent-indigo shadow-glow-indigo">
                     <Search className="w-5 h-5" />
                  </div>
-                 <h3 className="text-xl font-display font-black text-white">Recherche Intelligente</h3>
+                 <h3 className="text-xl font-display font-black">Recherche Intelligente</h3>
               </div>
 
               {/* Tabs */}
-              <div className="flex p-1 rounded-2xl bg-white/[0.03] border border-white/5">
+              <div className="flex p-1 rounded-2xl bg-[var(--bg-secondary)] border border-[var(--border-color)]">
                  <button 
                   onClick={() => setSearchType('podcasts')}
-                  className={`flex items-center gap-2 px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all ${searchType === 'podcasts' ? 'bg-white text-obsidian shadow-lg' : 'text-slate-500 hover:text-white'}`}
+                  className={`flex items-center gap-2 px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all ${searchType === 'podcasts' ? 'bg-[var(--accent-primary)] text-white shadow-lg' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'}`}
                  >
                     <LayoutGrid className="w-3 h-3" />
                     Podcasts
                  </button>
                  <button 
                   onClick={() => setSearchType('episodes')}
-                  className={`flex items-center gap-2 px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all ${searchType === 'episodes' ? 'bg-white text-obsidian shadow-lg' : 'text-slate-500 hover:text-white'}`}
+                  className={`flex items-center gap-2 px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all ${searchType === 'episodes' ? 'bg-[var(--accent-primary)] text-white shadow-lg' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'}`}
                  >
                     <ListMusic className="w-3 h-3" />
                     Épisodes
@@ -183,44 +191,44 @@ export default function AddPodcast() {
            <div className="relative group">
               <input
                 type="text"
-                placeholder={searchType === 'podcasts' ? "Trouvez un podcast par titre ou auteur..." : "Cherchez un sujet dans tous les épisodes..."}
+                placeholder={searchType === 'podcasts' ? "Trouvez un podcast (Base iTunes FR)..." : "Cherchez un sujet dans tous les épisodes..."}
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="input-premium !py-6 !pl-16 text-xl shadow-2xl transition-all group-hover:bg-white/[0.05]"
+                className="input-premium !py-6 !pl-16 text-xl shadow-2xl transition-all group-hover:bg-[var(--bg-secondary)]"
               />
-              <Sparkles className="absolute left-6 top-1/2 -translate-y-1/2 w-6 h-6 text-slate-500 group-focus-within:text-accent-indigo transition-colors" />
+              <Sparkles className="absolute left-6 top-1/2 -translate-y-1/2 w-6 h-6 text-slate-500 group-focus-within:text-[var(--accent-primary)] transition-colors" />
            </div>
         </div>
 
         {/* Dynamic Results Grid */}
         {(isSearching || isSearchingEpisodes) ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-             {[1,2,3].map(i => <div key={i} className="premium-glass rounded-[2.5rem] h-64 animate-pulse bg-white/5" />)}
+             {[1,2,3].map(i => <div key={i} className="premium-glass rounded-[2.5rem] h-64 animate-pulse" />)}
           </div>
         ) : searchType === 'podcasts' && searchResults?.podcasts && searchResults.podcasts.length > 0 ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 pb-32">
             {searchResults.podcasts.map((podcast) => (
-              <div key={podcast.id} className="group premium-glass rounded-[2.5rem] overflow-hidden flex flex-col hover:bg-white/[0.05] transition-all duration-500">
+              <div key={podcast.id} className="group premium-glass rounded-[2.5rem] overflow-hidden flex flex-col hover:bg-[var(--bg-secondary)] transition-all duration-500">
                 <div className="relative aspect-[16/10] overflow-hidden">
                    {podcast.imageUrl ? (
                      <img src={podcast.imageUrl} alt={podcast.title} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
                    ) : (
                      <div className="w-full h-full bg-gradient-to-br from-slate-800 to-obsidian flex items-center justify-center text-4xl">🎙️</div>
                    )}
-                   <div className="absolute inset-0 bg-gradient-to-t from-obsidian via-transparent to-transparent opacity-60" />
+                   <div className="absolute inset-0 bg-gradient-to-t from-[var(--bg-primary)] via-transparent to-transparent opacity-60" />
                 </div>
 
                 <div className="p-6 flex flex-col flex-1">
-                  <h3 className="text-lg font-bold text-white mb-2 line-clamp-2 leading-tight group-hover:text-accent-indigo transition-colors">{podcast.title}</h3>
-                  <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-4 truncate">{podcast.author || 'Inconnu'}</p>
+                  <h3 className="text-lg font-bold mb-2 line-clamp-2 leading-tight group-hover:text-[var(--accent-primary)] transition-colors">{podcast.title}</h3>
+                  <p className="text-[10px] font-bold text-[var(--text-secondary)] uppercase tracking-widest mb-4 truncate">{podcast.author || 'Inconnu'}</p>
                   
                   <button
                     onClick={() => handleSubscribe(podcast)}
                     disabled={subscribingId === podcast.id || subscribeMutation.isPending || isSubscribed(podcast.rssUrl)}
                     className={`mt-auto w-full py-3.5 rounded-2xl font-bold uppercase tracking-widest text-[10px] transition-all duration-300 flex items-center justify-center gap-2 ${
                       isSubscribed(podcast.rssUrl)
-                        ? 'bg-accent-cyan/10 text-accent-cyan border border-accent-cyan/20'
-                        : 'bg-white text-obsidian hover:bg-accent-indigo hover:text-white'
+                        ? 'bg-[var(--accent-secondary)]/10 text-[var(--accent-secondary)] border border-[var(--accent-secondary)]/20'
+                        : 'bg-[var(--text-primary)] text-[var(--bg-primary)] hover:bg-[var(--accent-primary)] hover:text-white'
                     }`}
                   >
                     {subscribingId === podcast.id ? <Loader className="w-4 h-4 animate-spin" /> : isSubscribed(podcast.rssUrl) ? <><Check className="w-4 h-4" /> Membre</> : <><Plus className="w-4 h-4" /> S'abonner</>}
@@ -232,14 +240,19 @@ export default function AddPodcast() {
         ) : searchType === 'episodes' && episodeResults?.episodes && episodeResults.episodes.length > 0 ? (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 pb-32">
              {episodeResults.episodes.map((episode) => (
-                <EpisodeCard key={episode._id} episode={episode} onPlay={setSelectedEpisode} />
+                <EpisodeCard 
+                  key={episode._id} 
+                  episode={episode} 
+                  onPlay={setSelectedEpisode} 
+                  onDetails={handleOpenDetails}
+                />
              ))}
           </div>
         ) : searchQuery.length >= 2 ? (
           <div className="premium-glass p-20 rounded-[3rem] text-center max-w-lg mx-auto">
             <Globe className="w-12 h-12 text-slate-700 mx-auto mb-6" />
-            <p className="text-white font-bold uppercase tracking-widest text-sm mb-2">Aucun signal trouvé</p>
-            <p className="text-slate-500 text-xs">Vérifiez l'orthographe ou changez de type de recherche.</p>
+            <p className="font-bold uppercase tracking-widest text-sm mb-2">Aucun résultat sur iTunes FR</p>
+            <p className="text-[var(--text-secondary)] text-xs">Vérifiez l'orthographe ou essayez un nom d'auteur.</p>
           </div>
         ) : (
           <div className="text-center py-20 opacity-30">
@@ -250,11 +263,18 @@ export default function AddPodcast() {
         )}
       </main>
 
+      <EpisodeDetails 
+        episode={detailsEpisode}
+        isOpen={isDetailsOpen}
+        onClose={() => setIsDetailsOpen(false)}
+        onPlay={setSelectedEpisode}
+      />
+
       {selectedEpisode && (
         <AudioPlayer
           episode={selectedEpisode}
           onClose={() => setSelectedEpisode(null)}
-          userId={user?._id}
+          userId={user?.id}
         />
       )}