import React, { useState, useEffect, useMemo } from 'react';
import { 
  Play, Pause, Radio, Tv, Newspaper, Settings, Home, 
  Search, Mic, Volume2, Info, ChevronRight, Share2, Heart,
  BarChart3, Clock, Globe, Zap, Sparkles, Loader2, MessageSquare
} from 'lucide-react';

const apiKey = ""; // Gemini API Key

const App = () => {
  const [activeTab, setActiveTab] = useState('home');
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentStation, setCurrentStation] = useState({
    title: "The Morning Beat",
    frequency: "98.5 FM",
    host: "Sarah Jenkins",
    type: "radio",
    image: "https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?auto=format&fit=crop&w=300&q=80"
  });
  const [isDarkMode, setIsDarkMode] = useState(true);
  const [aiLoading, setAiLoading] = useState(false);
  const [aiContent, setAiContent] = useState(null);

  // --- Gemini API Helper ---
  const callGemini = async (prompt, systemInstruction = "You are a helpful media assistant.") => {
    setAiLoading(true);
    setAiContent(null);
    let retries = 0;
    const delays = [1000, 2000, 4000, 8000, 16000];

    while (retries < 5) {
      try {
        const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            contents: [{ parts: [{ text: prompt }] }],
            systemInstruction: { parts: [{ text: systemInstruction }] }
          })
        });

        if (!response.ok) throw new Error('API Error');
        
        const data = await response.json();
        const text = data.candidates?.[0]?.content?.parts?.[0]?.text;
        setAiContent(text);
        setAiLoading(false);
        return text;
      } catch (err) {
        retries++;
        if (retries === 5) {
          setAiContent("Sorry, I couldn't connect to the AI service right now. Please try again later.");
          setAiLoading(false);
        } else {
          await new Promise(res => setTimeout(res, delays[retries - 1]));
        }
      }
    }
  };

  // --- Nigerian Content Mock Data ---
  const tvChannels = [
    { 
      id: 1, 
      title: "Arise News Live", 
      category: "News/Nigeria", 
      viewers: "12K", 
      youtubeId: "vDEnbC0bW9I", // Arise News Live
      image: "https://images.unsplash.com/photo-1495020689067-958852a7765e?auto=format&fit=crop&w=600&q=80" 
    },
    { 
      id: 2, 
      title: "Channels TV Live", 
      category: "News/Nigeria", 
      viewers: "25K", 
      youtubeId: "uL6T70D6_oY", // Channels TV Live
      image: "https://images.unsplash.com/photo-1585829365234-781f8c484603?auto=format&fit=crop&w=600&q=80" 
    },
    { 
      id: 3, 
      title: "Nollywood Cinema", 
      category: "Movies/Nigeria", 
      viewers: "8K", 
      youtubeId: "K9I_R09KAnA", // Placeholder for Nollywood Live content
      image: "https://images.unsplash.com/photo-1536440136628-849c177e76a1?auto=format&fit=crop&w=600&q=80" 
    },
    { 
      id: 4, 
      title: "TVC News Live", 
      category: "News/Nigeria", 
      viewers: "15K", 
      youtubeId: "gL785X_E34M", // TVC News Live
      image: "https://images.unsplash.com/photo-1504711434969-e33886168f5c?auto=format&fit=crop&w=600&q=80" 
    }
  ];

  const radioStations = [
    { id: 1, title: "Cool FM Lagos", frequency: "96.9", host: "Do2dtun", image: "https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?auto=format&fit=crop&w=300&q=80" },
    { id: 2, title: "Beat FM", frequency: "99.9", host: "Osi Suave", image: "https://images.unsplash.com/photo-1493225255756-d9584f8606e9?auto=format&fit=crop&w=300&q=80" },
    { id: 3, title: "Wazobia FM", frequency: "95.1", host: "Yaw", image: "https://images.unsplash.com/photo-1459749411177-042180ce673c?auto=format&fit=crop&w=300&q=80" },
  ];

  // --- UI Components ---

  const Waveform = ({ playing }) => (
    <div className="flex items-end justify-between h-8 gap-1 px-1">
      {[...Array(24)].map((_, i) => (
        <div 
          key={i} 
          className={`w-1 bg-blue-500 rounded-full transition-all duration-300 ${playing ? 'animate-pulse' : 'h-2 opacity-30'}`}
          style={{ 
            height: playing ? `${Math.random() * 100}%` : '8px',
            animationDelay: `${i * 0.1}s` 
          }}
        />
      ))}
    </div>
  );

  const Header = () => (
    <header className="sticky top-0 z-50 flex items-center bg-slate-50/80 dark:bg-[#101922]/80 backdrop-blur-md p-4 pb-2 justify-between border-b border-blue-500/10">
      <div className="text-blue-500 flex items-center gap-2">
        <div className="p-2 bg-blue-500/10 rounded-lg">
          <Zap size={24} fill="currentColor" />
        </div>
        <h1 className="text-slate-900 dark:text-white text-xl font-bold tracking-tight">Media Hub</h1>
      </div>
      <div className="flex gap-2">
        <button className="p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors">
          <Search size={22} className="text-slate-600 dark:text-slate-400" />
        </button>
      </div>
    </header>
  );

  const HomeView = () => (
    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
      {/* Featured Live Video Player (Arise News Default) */}
      <section className="px-4 pt-4">
        <div className="relative overflow-hidden rounded-2xl aspect-[16/9] shadow-2xl bg-black">
          <iframe 
            className="absolute inset-0 w-full h-full"
            src={`https://www.youtube.com/embed/${tvChannels[0].youtubeId}?autoplay=1&mute=1&controls=1&modestbranding=1&rel=0`}
            title="Live Stream"
            frameBorder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
          ></iframe>
          
          <div className="absolute top-4 left-4 flex items-center gap-2 bg-red-600 px-3 py-1 rounded-full text-white text-xs font-bold uppercase tracking-wider z-10">
            <span className="relative flex h-2 w-2">
              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
              <span className="relative inline-flex rounded-full h-2 w-2 bg-white"></span>
            </span>
            Live Nigeria
          </div>

          <div className="absolute bottom-6 right-6 z-10">
            <button 
              onClick={() => {
                callGemini(`What are the key topics currently trending in Nigerian news from sources like ${tvChannels[0].title}? Provide a 2-sentence summary.`, "You are a Nigerian media expert.");
              }}
              className="p-3 bg-blue-500 hover:bg-blue-600 rounded-xl text-white transition-all active:scale-90 shadow-lg shadow-blue-500/40"
            >
              <Sparkles size={20} />
            </button>
          </div>
        </div>
        <div className="mt-4 px-1">
            <h2 className="text-xl font-bold text-slate-900 dark:text-white leading-tight">{tvChannels[0].title}</h2>
            <p className="text-blue-500 text-sm font-semibold uppercase">{tvChannels[0].category}</p>
        </div>
      </section>

      {/* Mini Radio Player */}
      <section className="px-4">
        <div className="p-5 bg-white dark:bg-[#1a2633] rounded-2xl border border-blue-500/10 shadow-xl relative overflow-hidden">
          {aiLoading && (
            <div className="absolute inset-0 bg-blue-500/10 backdrop-blur-sm z-20 flex items-center justify-center">
              <Loader2 className="animate-spin text-blue-500" size={32} />
            </div>
          )}
          
          <div className="flex items-center gap-4 mb-4">
            <img src={currentStation.image} className="size-16 rounded-xl object-cover shadow-lg" alt="Cover" />
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2 mb-1">
                <span className="text-[10px] font-bold text-blue-500 border border-blue-500/30 px-2 py-0.5 rounded uppercase">On Air</span>
                <h3 className="text-slate-900 dark:text-white font-bold truncate">{currentStation.title}</h3>
              </div>
              <p className="text-slate-500 dark:text-slate-400 text-sm">{currentStation.frequency} FM • {currentStation.host}</p>
            </div>
            <div className="flex flex-col gap-2">
              <button 
                onClick={() => setIsPlaying(!isPlaying)}
                className="size-12 bg-blue-500 rounded-full flex items-center justify-center text-white shadow-lg shadow-blue-500/20 active:scale-90 transition-all"
              >
                {isPlaying ? <Pause fill="white" size={24} /> : <Play fill="white" className="ml-1" size={24} />}
              </button>
            </div>
          </div>

          {aiContent && !aiLoading && activeTab === 'home' && (
            <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-xl border border-blue-100 dark:border-blue-800 animate-in fade-in zoom-in-95 duration-300">
               <div className="flex items-start gap-2">
                  <Sparkles size={14} className="text-blue-500 mt-1 shrink-0" />
                  <p className="text-xs text-blue-800 dark:text-blue-200 italic leading-relaxed">"{aiContent}"</p>
               </div>
            </div>
          )}

          <Waveform playing={isPlaying} />
        </div>
      </section>

      {/* Nigerian Radio Stations */}
      <section className="pb-8">
        <div className="flex items-center justify-between px-4 mb-4">
          <h2 className="text-lg font-bold text-slate-900 dark:text-white">Trending Radio</h2>
          <button className="text-blue-500 text-sm font-bold flex items-center gap-1">
            Browse All <ChevronRight size={16} />
          </button>
        </div>
        <div className="flex overflow-x-auto gap-4 px-4 scrollbar-hide">
          {radioStations.map(station => (
            <div 
              key={station.id} 
              onClick={() => {
                setCurrentStation(station);
                setIsPlaying(true);
              }}
              className="min-w-[140px] group cursor-pointer"
            >
              <div className="relative aspect-square rounded-2xl overflow-hidden mb-2 shadow-md">
                <img src={station.image} className="w-full h-full object-cover transition-transform group-hover:scale-105" alt={station.title} />
                <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                  <Play fill="white" size={24} />
                </div>
              </div>
              <p className="text-slate-900 dark:text-white font-bold text-sm truncate">{station.title}</p>
              <p className="text-slate-500 text-xs font-medium">{station.frequency} FM</p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );

  const TvView = () => (
    <div className="p-4 space-y-6 animate-in fade-in duration-300">
      <div className="flex items-center justify-between">
        <div>
           <h2 className="text-2xl font-bold text-slate-900 dark:text-white">Nigerian TV</h2>
           <p className="text-slate-500 text-sm">Live streams from Lagos & Abuja</p>
        </div>
        {aiContent && activeTab === 'tv' && (
          <button onClick={() => setAiContent(null)} className="text-xs text-blue-500 font-bold border border-blue-500/30 px-3 py-1 rounded-full bg-blue-500/5">Reset ✨ AI</button>
        )}
      </div>

      {aiLoading && (
        <div className="p-8 bg-blue-500/5 rounded-2xl border border-dashed border-blue-500/30 flex flex-col items-center gap-3">
          <Loader2 className="animate-spin text-blue-500" size={32} />
          <p className="text-sm font-medium text-blue-500">Analyzing current broadcast trends...</p>
        </div>
      )}

      {aiContent && activeTab === 'tv' && !aiLoading && (
        <div className="p-6 bg-gradient-to-br from-blue-600 to-blue-700 rounded-2xl shadow-xl text-white relative animate-in slide-in-from-top-4">
          <Sparkles className="absolute top-4 right-4 text-blue-200/50" size={40} />
          <h3 className="text-sm font-bold uppercase tracking-widest text-blue-100 mb-2">✨ AI Perspective</h3>
          <p className="text-lg font-medium leading-relaxed italic">"{aiContent}"</p>
        </div>
      )}

      <div className="grid grid-cols-1 gap-6">
        {tvChannels.map(channel => (
          <div key={channel.id} className="bg-white dark:bg-[#1a2633] rounded-2xl overflow-hidden shadow-lg border border-slate-100 dark:border-slate-800">
            <div className="relative aspect-video">
              <iframe 
                className="absolute inset-0 w-full h-full"
                src={`https://www.youtube.com/embed/${channel.youtubeId}?autoplay=0&mute=1&controls=1`}
                title={channel.title}
                frameBorder="0"
                allowFullScreen
              ></iframe>
            </div>
            <div className="p-4 flex items-center justify-between">
              <div>
                <h3 className="text-slate-900 dark:text-white font-bold text-lg">{channel.title}</h3>
                <div className="flex items-center gap-3">
                   <span className="bg-red-600 px-2 py-0.5 rounded text-[10px] font-bold text-white uppercase">Live</span>
                   <span className="text-slate-500 text-xs flex items-center gap-1"><Globe size={12} /> {channel.viewers} watching</span>
                </div>
              </div>
              <div className="flex items-center gap-2">
                 <button className="p-3 bg-slate-100 dark:bg-slate-800 rounded-full text-slate-500 hover:text-red-500 transition-colors">
                   <Heart size={20} />
                 </button>
                 <button 
                   onClick={() => callGemini(`Tell me about the importance of ${channel.title} in the Nigerian media landscape.`, "You are a media critic.")}
                   className="p-3 bg-blue-500 rounded-full text-white shadow-lg active:scale-90"
                   title="✨ AI Insight"
                 >
                   <Sparkles size={20} />
                 </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );

  const SettingsView = () => (
    <div className="p-4 space-y-6 animate-in fade-in duration-300">
      <h2 className="text-2xl font-bold text-slate-900 dark:text-white">Account & Settings</h2>
      <div className="bg-white dark:bg-[#1a2633] rounded-2xl overflow-hidden shadow-md">
        <div className="p-4 flex items-center gap-4 border-b border-slate-100 dark:border-slate-800">
          <div className="size-14 bg-blue-500 rounded-full flex items-center justify-center text-white text-xl font-bold">JD</div>
          <div>
            <h3 className="font-bold dark:text-white">John Doe</h3>
            <p className="text-slate-500 text-sm">Premium Member • Nigeria</p>
          </div>
        </div>
        <div className="p-2">
          {[
            { icon: <Globe size={20} />, label: "Region", value: "Nigeria" },
            { icon: <Clock size={20} />, label: "Sleep Timer", value: "Off" },
            { icon: <BarChart3 size={20} />, label: "Data Saver", value: "High Quality" },
            { icon: <Info size={20} />, label: "About Hub", value: "" },
          ].map((item, i) => (
            <button key={i} className="w-full flex items-center justify-between p-3 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-xl transition-colors text-slate-600 dark:text-slate-300">
              <div className="flex items-center gap-3">
                {item.icon}
                <span className="font-medium">{item.label}</span>
              </div>
              <div className="flex items-center gap-2 text-sm text-slate-400">
                {item.value}
                <ChevronRight size={16} />
              </div>
            </button>
          ))}
        </div>
      </div>
      
      <button 
        onClick={() => setIsDarkMode(!isDarkMode)}
        className="w-full p-4 bg-blue-500/10 text-blue-500 font-bold rounded-2xl flex items-center justify-center gap-2"
      >
        Toggle {isDarkMode ? 'Light' : 'Dark'} Mode
      </button>
    </div>
  );

  return (
    <div className={`${isDarkMode ? 'dark' : ''} min-h-screen bg-slate-50 dark:bg-[#101922] font-sans selection:bg-blue-500 selection:text-white`}>
      <div className="max-w-3xl mx-auto pb-32">
        <Header />
        
        <main>
          {activeTab === 'home' && <HomeView />}
          {activeTab === 'tv' && <TvView />}
          {activeTab === 'radio' && (
            <div className="p-4 space-y-6">
               <h2 className="text-2xl font-bold text-slate-900 dark:text-white">Radio Explorer</h2>
               <div className="grid grid-cols-2 gap-4">
                 {radioStations.map((s, i) => (
                   <div key={i} className="bg-white dark:bg-[#1a2633] p-4 rounded-2xl shadow-sm hover:shadow-md transition-shadow cursor-pointer" onClick={() => { setCurrentStation(s); setIsPlaying(true); }}>
                      <img src={s.image} className="w-full aspect-square rounded-xl object-cover mb-3" />
                      <p className="font-bold text-slate-900 dark:text-white truncate">{s.title}</p>
                      <p className="text-slate-500 text-xs">{s.frequency} FM</p>
                   </div>
                 ))}
               </div>
            </div>
          )}
          {activeTab === 'news' && (
            <div className="p-4 space-y-6">
              <div className="flex items-center justify-between">
                <h2 className="text-2xl font-bold text-slate-900 dark:text-white">Latest News</h2>
                {aiContent && (
                  <button onClick={() => setAiContent(null)} className="text-xs text-blue-500 font-bold">Clear ✨ Analysis</button>
                )}
              </div>

              {aiContent && !aiLoading && activeTab === 'news' && (
                <div className="p-4 bg-slate-100 dark:bg-slate-800 rounded-2xl border-l-4 border-blue-500 animate-in slide-in-from-left-4">
                  <div className="flex items-center gap-2 text-blue-500 mb-2">
                    <Sparkles size={16} />
                    <span className="text-xs font-bold uppercase tracking-wider">Deep Dive</span>
                  </div>
                  <p className="text-sm dark:text-slate-200 leading-relaxed">{aiContent}</p>
                </div>
              )}

              {[
                { title: "CBN Updates Policy on Foreign Exchange Liquidity", category: "Economics", time: "2 hours ago" },
                { title: "Lagos Startup Ecosystem Attracts Record Investment", category: "Technology", time: "5 hours ago" },
                { title: "Super Eagles Prepare for Upcoming AFCON Qualifiers", category: "Sports", time: "8 hours ago" }
              ].map((news, i) => (
                <div key={i} className="flex gap-4 items-start group">
                  <div className="size-20 bg-slate-200 dark:bg-slate-800 rounded-xl shrink-0 flex items-center justify-center text-slate-400">
                    <Newspaper size={32} />
                  </div>
                  <div className="space-y-1 flex-1">
                    <div className="flex justify-between items-start">
                      <span className="text-blue-500 text-[10px] font-bold uppercase tracking-wider">{news.category}</span>
                      <button 
                        onClick={() => callGemini(`Provide a deeper analysis and some context for this headline: "${news.title}". Keep it informative and concise.`, "You are a professional news analyst.")}
                        className="text-slate-400 hover:text-blue-500 transition-colors"
                        title="✨ Ask AI"
                      >
                        <MessageSquare size={16} />
                      </button>
                    </div>
                    <h3 className="font-bold leading-snug dark:text-white group-hover:text-blue-500 transition-colors cursor-pointer">{news.title}</h3>
                    <p className="text-xs text-slate-500">{news.time} • 4 min read</p>
                  </div>
                </div>
              ))}
            </div>
          )}
          {activeTab === 'settings' && <SettingsView />}
        </main>

        {/* Floating Action */}
        <div className="fixed bottom-24 right-5 z-40">
          <button className="flex items-center justify-center rounded-full size-14 bg-blue-500 text-white shadow-[0_4px_20px_rgba(43,140,238,0.4)] active:scale-95 transition-transform hover:rotate-12">
            <Mic size={28} fill="currentColor" />
          </button>
        </div>

        {/* Tab Bar */}
        <nav className="fixed bottom-0 left-0 right-0 z-50 bg-white/80 dark:bg-[#101922]/90 backdrop-blur-xl border-t border-slate-200 dark:border-blue-500/10 px-6 py-4 pb-8">
          <div className="max-w-md mx-auto flex items-center justify-between">
            <TabItem id="home" active={activeTab} icon={<Home size={24} />} label="Home" onClick={setActiveTab} />
            <TabItem id="tv" active={activeTab} icon={<Tv size={24} />} label="TV" onClick={setActiveTab} />
            <TabItem id="radio" active={activeTab} icon={<Radio size={24} />} label="Radio" onClick={setActiveTab} />
            <TabItem id="news" active={activeTab} icon={<Newspaper size={24} />} label="News" onClick={setActiveTab} />
            <TabItem id="settings" active={activeTab} icon={<Settings size={24} />} label="Settings" onClick={setActiveTab} />
          </div>
        </nav>
      </div>
    </div>
  );
};

const TabItem = ({ id, active, icon, label, onClick }) => {
  const isActive = active === id;
  return (
    <button 
      onClick={() => onClick(id)}
      className={`flex flex-col items-center gap-1 transition-all ${isActive ? 'text-blue-500 scale-110' : 'text-slate-400 dark:text-slate-600 hover:text-slate-500'}`}
    >
      <div className={isActive ? 'animate-bounce-short' : ''}>
        {React.cloneElement(icon, { fill: isActive ? 'currentColor' : 'none', strokeWidth: isActive ? 2.5 : 2 })}
      </div>
      <span className={`text-[10px] font-bold ${isActive ? 'opacity-100' : 'opacity-70'}`}>{label}</span>
    </button>
  );
};

export default App;