import React, { useState, useEffect, useRef } from 'react';
import { Play, Search, Tv, AlertCircle, List, Loader2, ShieldAlert, Wifi, Github, ChevronDown, Clapperboard, Trophy, Music, Newspaper, Baby, Menu, X, RotateCw, Plus, Trash2, Library, FolderOpen, ExternalLink, RefreshCw } from 'lucide-react';

// Helper untuk memuat script HLS.js secara dinamis
const useHlsScript = (src) => {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    if (window.Hls) {
      setLoaded(true);
      return;
    }
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    script.onload = () => setLoaded(true);
    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    };
  }, [src]);

  return loaded;
};

const App = () => {
  const hlsLoaded = useHlsScript('https://cdn.jsdelivr.net/npm/hls.js@latest');
  
  // -- STATE DATA --
  const [playlists, setPlaylists] = useState([]); 
  const [activePlaylistId, setActivePlaylistId] = useState(null);

  // -- STATE INPUT --
  const [playlistUrl, setPlaylistUrl] = useState('https://raw.githubusercontent.com/Free-TV/IPTV/master/playlist.m3u8');
  const [playlistNameInput, setPlaylistNameInput] = useState(''); 
  const [rawM3U, setRawM3U] = useState('');
  const [inputMode, setInputMode] = useState('url'); 
  const [useProxy, setUseProxy] = useState(true); 

  // -- STATE VIEW / UI --
  const [showAddPlaylist, setShowAddPlaylist] = useState(true); 
  const [channels, setChannels] = useState([]); 
  const [categories, setCategories] = useState([]); 
  
  // -- FILTER STATE --
  const [selectedCategory, setSelectedCategory] = useState('All');
  const [selectedTheme, setSelectedTheme] = useState('All'); 
  const [filteredChannels, setFilteredChannels] = useState([]);
  const [visibleLimit, setVisibleLimit] = useState(50); 
  const [selectedChannel, setSelectedChannel] = useState(null);
  const [searchTerm, setSearchTerm] = useState('');
  
  // -- LAYOUT STATE --
  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
  const [isFloatingActive, setIsFloatingActive] = useState(false);
  const floatingTimer = useRef(null);

  // -- SYSTEM STATE --
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [playerError, setPlayerError] = useState(null); // Error khusus player
  const [forceHttps, setForceHttps] = useState(false); // Toggle paksa HTTPS
  
  const videoRef = useRef(null);
  const hlsRef = useRef(null);
  const listRef = useRef(null);

  // Definisi Tema Pintar
  const THEMES = [
      { id: 'Sports', label: 'Olahraga', keywords: ['sport', 'soccer', 'football', 'bola', 'racing', 'moto', 'nba', 'ufc', 'wwe', 'tennis', 'golf', 'cricket', 'bein', 'espn', 'fox sports'] },
      { id: 'Movies', label: 'Film & Drama', keywords: ['movie', 'film', 'cinema', 'drama', 'action', 'hbo', 'blockbuster', 'series', 'bioskop'] },
      { id: 'News', label: 'Berita', keywords: ['news', 'berita', 'cnn', 'bbc', 'jazeera', 'tvone', 'kompas', 'metrotv', 'cnbc', 'weather', 'info'] },
      { id: 'Music', label: 'Musik', keywords: ['music', 'musik', 'mtv', 'hits', 'pop', 'dangdut', 'radio', 'concert', 'prambors'] },
      { id: 'Kids', label: 'Anak & Kartun', keywords: ['kids', 'cartoon', 'kartun', 'anime', 'animation', 'disney', 'nick', 'jr', 'toddler', 'baby'] },
      { id: 'Religious', label: 'Religi', keywords: ['islam', 'muslim', 'quran', 'church', 'god', 'tvri', 'mekkah', 'madinah', 'sunnah', 'dakwah'] },
      { id: 'Documentary', label: 'Dokumenter', keywords: ['discovery', 'history', 'geo', 'nature', 'animal', 'wild', 'planet', 'docu'] }
  ];

  // Helper Convert URL
  const convertGithubUrl = (url) => {
      let newUrl = url.trim();
      if (newUrl.endsWith('.git')) newUrl = newUrl.slice(0, -4);
      if (newUrl.includes('github.com') && !newUrl.includes('raw.githubusercontent.com')) {
         newUrl = newUrl.replace('github.com', 'raw.githubusercontent.com');
         newUrl = newUrl.replace('/blob/', '/');
      }
      return newUrl;
  };

  // Parsing M3U
  const parseM3U = (content) => {
    const lines = content.split('\n');
    const result = [];
    const uniqueGroups = new Set();
    let currentChannel = {};

    lines.forEach(line => {
      line = line.trim();
      if (line.startsWith('#EXTINF:')) {
        const info = line.substring(8);
        const props = info.split(/,(.*)/s); 
        
        const logoMatch = line.match(/tvg-logo="([^"]*)"/);
        const groupMatch = line.match(/group-title="([^"]*)"/);
        
        const groupName = groupMatch ? groupMatch[1] : 'Uncategorized';
        uniqueGroups.add(groupName);

        currentChannel = {
          name: props[1] || 'Unknown Channel',
          logo: logoMatch ? logoMatch[1] : null,
          group: groupName,
        };
      } else if (line.startsWith('http')) {
        if (currentChannel.name) {
          currentChannel.url = line;
          result.push(currentChannel);
          currentChannel = {}; 
        }
      }
    });

    const sortedCategories = Array.from(uniqueGroups).sort();
    return { result, categories: sortedCategories };
  };

  // -- CORE LOGIC: Add Playlist --
  const addNewPlaylist = (text, type, sourceName = '') => {
      if (!text || text.length < 10) throw new Error("Data playlist kosong atau tidak valid.");
      
      const { result, categories } = parseM3U(text);
      if (result.length === 0) throw new Error("Tidak ada channel ditemukan.");
      
      const newId = Date.now().toString();
      let finalName = playlistNameInput.trim();
      if (!finalName) {
          finalName = type === 'url' ? (sourceName || 'Web Playlist') : 'Local Playlist';
          const count = playlists.length + 1;
          finalName = `${finalName} #${count}`;
      }

      const newPlaylist = {
          id: newId,
          name: finalName,
          channels: result,
          categories: categories,
          sourceType: type
      };

      setPlaylists(prev => [...prev, newPlaylist]);
      setActivePlaylistId(newId);
      setShowAddPlaylist(false);
      setPlaylistNameInput('');
      
      if (window.innerWidth < 640) setIsSidebarOpen(true);
  };

  // -- CORE LOGIC: Switch Playlist --
  useEffect(() => {
      if (activePlaylistId) {
          const active = playlists.find(p => p.id === activePlaylistId);
          if (active) {
              setChannels(active.channels);
              setCategories(active.categories);
              
              setSelectedCategory('All');
              setSelectedTheme('All');
              setSearchTerm('');
              setFilteredChannels(active.channels);
              setVisibleLimit(50);
              
              if (active.channels.length > 0) {
                 if (!selectedChannel) setSelectedChannel(active.channels[0]);
              }
          }
      } else {
          setChannels([]);
          setFilteredChannels([]);
      }
  }, [activePlaylistId, playlists]);

  const fetchPlaylist = async () => {
    setLoading(true);
    setError(null);
    
    const targetUrl = convertGithubUrl(playlistUrl);
    if (targetUrl !== playlistUrl) setPlaylistUrl(targetUrl);

    try {
        try {
            const response = await fetch(targetUrl);
            if (response.ok) {
                const text = await response.text();
                addNewPlaylist(text, 'url', 'Github/Web Playlist');
                setLoading(false);
                return;
            }
        } catch (e) {
            console.log("Direct fetch failed, trying proxy...");
        }

        if (useProxy) {
            const proxyUrl = `https://api.allorigins.win/raw?url=${encodeURIComponent(targetUrl)}`;
            const responseProxy = await fetch(proxyUrl);
            if (!responseProxy.ok) throw new Error("Gagal mengambil playlist via Proxy.");
            const textProxy = await responseProxy.text();
            addNewPlaylist(textProxy, 'url', 'Proxy Playlist');
        } else {
            throw new Error("Koneksi ditolak.");
        }

    } catch (err) {
      setError(`Gagal: ${err.message}`);
    } finally {
      setLoading(false);
    }
  };

  const loadFromText = () => {
    if (!rawM3U) return;
    setLoading(true);
    try {
        addNewPlaylist(rawM3U, 'text');
    } catch (err) {
        setError(err.message);
    } finally {
        setLoading(false);
    }
  };

  const removePlaylist = (e, id) => {
      e.stopPropagation(); 
      const newPlaylists = playlists.filter(p => p.id !== id);
      setPlaylists(newPlaylists);
      if (activePlaylistId === id) {
          setActivePlaylistId(newPlaylists.length > 0 ? newPlaylists[0].id : null);
          if (newPlaylists.length === 0) setShowAddPlaylist(true);
      }
  };

  useEffect(() => {
    let result = channels;
    if (selectedCategory !== 'All') {
        result = result.filter(ch => ch.group === selectedCategory);
    }
    if (selectedTheme !== 'All') {
        const themeDef = THEMES.find(t => t.id === selectedTheme);
        if (themeDef) {
            result = result.filter(ch => {
                const combinedText = (ch.name + ' ' + ch.group).toLowerCase();
                return themeDef.keywords.some(keyword => combinedText.includes(keyword));
            });
        }
    }
    if (searchTerm !== '') {
        const lowerTerm = searchTerm.toLowerCase();
        result = result.filter(ch => ch.name.toLowerCase().includes(lowerTerm));
    }
    setFilteredChannels(result);
    setVisibleLimit(50); 
    if (listRef.current) listRef.current.scrollTop = 0; 
  }, [searchTerm, selectedCategory, selectedTheme, channels]);

  const handleScroll = (e) => {
      const bottom = e.target.scrollHeight - e.target.scrollTop <= e.target.clientHeight + 100;
      if (bottom && visibleLimit < filteredChannels.length) {
          setVisibleLimit(prev => Math.min(prev + 50, filteredChannels.length));
      }
  };

  const handleChannelSelect = (channel) => {
      setSelectedChannel(channel);
      setPlayerError(null); // Reset error saat ganti channel
      if (window.innerWidth < 640) setIsSidebarOpen(false);
  };

  const handleFloatingInteraction = () => {
      setIsFloatingActive(true);
      if (floatingTimer.current) clearTimeout(floatingTimer.current);
      floatingTimer.current = setTimeout(() => setIsFloatingActive(false), 3000);
  };

  const toggleRotation = async () => {
      handleFloatingInteraction();
      try {
          if (!document.fullscreenElement) {
              const elem = document.documentElement;
              if (elem.requestFullscreen) await elem.requestFullscreen();
              else if (elem.webkitRequestFullscreen) await elem.webkitRequestFullscreen();
              
              if (window.screen && window.screen.orientation && window.screen.orientation.lock) {
                  window.screen.orientation.lock('landscape').catch(e => console.log(e));
              }
          } else {
              if (document.exitFullscreen) await document.exitFullscreen();
              else if (document.webkitExitFullscreen) await document.webkitExitFullscreen();
              if (window.screen && window.screen.orientation && window.screen.orientation.unlock) {
                  window.screen.orientation.unlock();
              }
          }
      } catch (err) { console.error(err); }
  };

  const getThemeIcon = (themeId) => {
      switch(themeId) {
          case 'Sports': return <Trophy size={14} className="text-orange-400" />;
          case 'Movies': return <Clapperboard size={14} className="text-purple-400" />;
          case 'Music': return <Music size={14} className="text-pink-400" />;
          case 'News': return <Newspaper size={14} className="text-blue-400" />;
          case 'Kids': return <Baby size={14} className="text-green-400" />;
          default: return <Tv size={14} />;
      }
  };

  // -- PLAYER LOGIC UPDATED --
  useEffect(() => {
    if (!selectedChannel || !hlsLoaded) return;
    
    // Logika URL: Gunakan HTTPS jika dipaksa, jika tidak gunakan asli
    let streamUrl = selectedChannel.url;
    if (forceHttps && streamUrl.startsWith('http:')) {
        streamUrl = streamUrl.replace('http:', 'https:');
    }

    // Cleanup player lama
    if (hlsRef.current) hlsRef.current.destroy();

    // Fungsi handle error standard
    const handleError = (e) => {
        console.error("Media Error:", e);
        setPlayerError("Stream gagal diputar. Coba 'Force HTTPS' atau buka di VLC.");
    };

    if (window.Hls.isSupported()) {
      const hls = new window.Hls({
        debug: false,
        enableWorker: true,
        lowLatencyMode: true,
        // Konfigurasi agresif untuk recovery
        manifestLoadingTimeOut: 15000,
        manifestLoadingMaxRetry: 3,
        levelLoadingTimeOut: 15000,
        levelLoadingMaxRetry: 3,
        xhrSetup: function (xhr, url) {
            xhr.withCredentials = false; // Hindari masalah credential CORS
        },
      });
      
      hlsRef.current = hls;
      
      // Load source
      hls.loadSource(streamUrl);
      hls.attachMedia(videoRef.current);
      
      hls.on(window.Hls.Events.MANIFEST_PARSED, () => {
        setPlayerError(null);
        videoRef.current.play().catch(e => console.log("Autoplay blocked:", e));
      });
      
      hls.on(window.Hls.Events.ERROR, (event, data) => {
        if (data.fatal) {
           switch (data.type) {
               case window.Hls.ErrorTypes.NETWORK_ERROR:
                   console.log("Network error, trying to recover...");
                   hls.startLoad();
                   break;
               case window.Hls.ErrorTypes.MEDIA_ERROR:
                   console.log("Media error, trying to recover...");
                   hls.recoverMediaError();
                   break;
               default:
                   hls.destroy();
                   setPlayerError("Format tidak didukung atau diblokir browser.");
                   break;
           }
        }
      });
    } else if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) {
      // Native Safari HLS
      videoRef.current.src = streamUrl;
      videoRef.current.addEventListener('loadedmetadata', () => {
          setPlayerError(null);
          videoRef.current.play();
      });
      videoRef.current.addEventListener('error', handleError);
    } else {
        // Fallback untuk MP4 dll
        videoRef.current.src = streamUrl;
        videoRef.current.play().catch(handleError);
    }
    
    return () => { if (hlsRef.current) hlsRef.current.destroy(); };
  }, [selectedChannel, hlsLoaded, forceHttps]);

  return (
    <div className="flex flex-col h-screen bg-slate-950 text-gray-100 font-sans overflow-hidden">
      {/* Floating Rotation Button */}
      <div className={`fixed bottom-24 right-6 z-50 transition-opacity duration-500 ease-in-out ${isFloatingActive ? 'opacity-100' : 'opacity-5 hover:opacity-100'}`}>
          <button 
              onClick={toggleRotation}
              onTouchStart={handleFloatingInteraction}
              onMouseEnter={handleFloatingInteraction}
              className="w-12 h-12 rounded-full bg-blue-600/80 backdrop-blur-md border border-white/20 shadow-[0_0_15px_rgba(37,99,235,0.5)] flex items-center justify-center text-white active:scale-95 transition-transform"
          >
              <RotateCw size={24} />
          </button>
      </div>

      {/* Header */}
      <header className="bg-slate-900 p-3 sm:p-4 border-b border-slate-800 flex justify-between items-center z-10 shadow-sm h-16 shrink-0 relative">
        <div className="flex items-center gap-3">
          <button onClick={() => setIsSidebarOpen(!isSidebarOpen)} className="p-2 hover:bg-slate-800 rounded-lg text-gray-300 hover:text-white transition-colors active:scale-95">
            {isSidebarOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
          
          <div className="flex items-center gap-2 text-blue-500">
            <Tv size={24} />
            <h1 className="text-lg sm:text-xl font-bold tracking-wider text-white hidden sm:block">IPTV<span className="text-blue-500">PRO</span></h1>
          </div>
        </div>

        <div className="text-xs font-mono text-gray-500 flex items-center gap-4">
             <div className="flex items-center gap-2">
                <Wifi size={14} className={channels.length > 0 ? "text-green-500" : "text-gray-600"} />
                <span className="hidden sm:inline">{playlists.length > 0 ? `${playlists.length} Playlist` : "No Playlist"}</span>
            </div>
        </div>
      </header>

      <div className="flex flex-1 overflow-hidden relative">
        {isSidebarOpen && (
             <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-30 sm:hidden animate-in fade-in duration-200" onClick={() => setIsSidebarOpen(false)} />
        )}

        {/* Sidebar */}
        <aside 
            className={`
                absolute top-0 left-0 bottom-0 z-40 w-[85vw] sm:w-80 bg-slate-900 border-r border-slate-800 flex flex-col shadow-2xl transition-transform duration-300 ease-out
                ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'}
                sm:relative sm:translate-x-0
                ${!isSidebarOpen && 'sm:hidden'}
            `}
        >
          {/* TOP SECTION: Playlist Manager */}
          <div className="p-3 bg-slate-900 border-b border-slate-800 shrink-0 space-y-3">
             <div className="flex items-center justify-between">
                 <div className="flex items-center gap-2 text-gray-300">
                     <Library size={16} />
                     <span className="text-xs font-bold uppercase tracking-wider">Library</span>
                 </div>
                 <button onClick={() => setShowAddPlaylist(!showAddPlaylist)} className={`p-1.5 rounded transition-colors ${showAddPlaylist ? 'bg-blue-600 text-white' : 'bg-slate-800 text-gray-400 hover:text-white'}`}>
                    {showAddPlaylist ? <List size={14} /> : <Plus size={14} />}
                 </button>
             </div>

             {!showAddPlaylist && playlists.length > 0 && (
                 <div className="relative">
                     <div className="max-h-32 overflow-y-auto custom-scrollbar space-y-1 bg-slate-950 p-1 rounded border border-slate-800">
                         {playlists.map(pl => (
                             <div key={pl.id} onClick={() => setActivePlaylistId(pl.id)} className={`flex items-center justify-between p-2 rounded cursor-pointer text-xs ${activePlaylistId === pl.id ? 'bg-blue-900/40 text-blue-200 border border-blue-800' : 'text-gray-400 hover:bg-slate-800 hover:text-gray-200'}`}>
                                 <div className="flex items-center gap-2 truncate">
                                     <FolderOpen size={12} className="shrink-0" />
                                     <span className="truncate max-w-[140px]">{pl.name}</span>
                                     <span className="text-[9px] bg-slate-800 px-1 rounded text-gray-500">{pl.channels.length}</span>
                                 </div>
                                 <button onClick={(e) => removePlaylist(e, pl.id)} className="p-1 text-gray-600 hover:text-red-400 transition-colors"><Trash2 size={12} /></button>
                             </div>
                         ))}
                     </div>
                 </div>
             )}

             {showAddPlaylist && (
                <div className="bg-slate-950 p-2 rounded border border-slate-800 space-y-2 animate-in slide-in-from-top-2 duration-200">
                    <p className="text-[10px] text-gray-500 font-bold uppercase">Tambah Baru</p>
                    <input type="text" value={playlistNameInput} onChange={(e) => setPlaylistNameInput(e.target.value)} className="w-full bg-slate-900 text-xs text-gray-300 p-2 rounded border border-slate-700 focus:border-blue-500 outline-none placeholder-gray-600" placeholder="Nama Playlist (Opsional)" />
                    <div className="flex bg-slate-900 rounded p-0.5">
                        <button onClick={() => setInputMode('url')} className={`flex-1 text-[10px] py-1 rounded ${inputMode === 'url' ? 'bg-slate-700 text-white' : 'text-gray-500'}`}>URL</button>
                        <button onClick={() => setInputMode('paste')} className={`flex-1 text-[10px] py-1 rounded ${inputMode === 'paste' ? 'bg-slate-700 text-white' : 'text-gray-500'}`}>Teks</button>
                    </div>
                    {inputMode === 'url' ? (
                        <>
                            <input type="text" value={playlistUrl} onChange={(e) => setPlaylistUrl(e.target.value)} className="w-full bg-slate-900 text-xs text-gray-300 p-2 rounded border border-slate-700 focus:border-blue-500 outline-none" placeholder="https://..." />
                            <div className="flex items-center gap-2 text-[9px] text-gray-400">
                                <input type="checkbox" checked={useProxy} onChange={(e) => setUseProxy(e.target.checked)} id="proxy-check" className="accent-blue-600" />
                                <label htmlFor="proxy-check">Proxy</label>
                            </div>
                            <button onClick={fetchPlaylist} disabled={loading} className="w-full bg-blue-600 hover:bg-blue-500 text-white py-1.5 rounded text-xs flex items-center justify-center gap-2">{loading ? <Loader2 className="animate-spin" size={12} /> : "Simpan ke Library"}</button>
                        </>
                    ) : (
                        <>
                            <textarea value={rawM3U} onChange={(e) => setRawM3U(e.target.value)} className="w-full h-20 bg-slate-900 text-xs text-gray-300 p-2 rounded border border-slate-700 outline-none resize-none" placeholder="#EXTM3U..." />
                            <button onClick={loadFromText} disabled={loading} className="w-full bg-green-600 hover:bg-green-500 text-white py-1.5 rounded text-xs flex items-center justify-center gap-2">{loading ? <Loader2 className="animate-spin" size={12} /> : "Simpan ke Library"}</button>
                        </>
                    )}
                    {error && <div className="text-[10px] text-red-400 bg-red-900/20 p-1 rounded">{error}</div>}
                </div>
             )}
          </div>

          {activePlaylistId && !showAddPlaylist && (
            <div className="p-3 bg-slate-850 border-b border-slate-800 shrink-0 space-y-2">
                <div className="grid grid-cols-2 gap-2">
                    <div className="relative">
                        <select value={selectedCategory} onChange={(e) => setSelectedCategory(e.target.value)} className="w-full bg-slate-950 text-xs text-white p-2 rounded border border-slate-700 outline-none appearance-none">
                            <option value="All">Negara: Semua</option>
                            {categories.map((cat, idx) => <option key={idx} value={cat}>{cat}</option>)}
                        </select>
                        <ChevronDown className="absolute right-2 top-2.5 text-gray-500 pointer-events-none" size={12} />
                    </div>
                    <div className="relative">
                        <select value={selectedTheme} onChange={(e) => setSelectedTheme(e.target.value)} className="w-full bg-slate-950 text-xs text-white p-2 rounded border border-slate-700 outline-none appearance-none">
                            <option value="All">Tema: Semua</option>
                            {THEMES.map((theme) => <option key={theme.id} value={theme.id}>{theme.label}</option>)}
                        </select>
                        <ChevronDown className="absolute right-2 top-2.5 text-gray-500 pointer-events-none" size={12} />
                    </div>
                </div>
                <div className="relative">
                    <Search className="absolute left-2.5 top-2.5 text-gray-500" size={14} />
                    <input type="text" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} placeholder="Cari channel..." className="w-full bg-slate-950 pl-8 pr-2 py-2 text-sm rounded border border-slate-700 focus:border-blue-500 outline-none text-white placeholder-gray-600" />
                </div>
                <div className="text-[10px] text-gray-500 text-right">{filteredChannels.length} channel</div>
            </div>
          )}

          <div ref={listRef} onScroll={handleScroll} className="flex-1 overflow-y-auto custom-scrollbar p-2 space-y-1 pb-4">
             {playlists.length === 0 ? (
                 <div className="text-center text-gray-500 text-xs py-10 px-4">Belum ada playlist.<br/>Tambah playlist baru di menu atas.</div>
             ) : activePlaylistId && filteredChannels.length === 0 ? (
                <div className="text-center text-gray-500 text-sm py-8 flex flex-col items-center gap-2"><ShieldAlert size={24} className="opacity-20" />Tidak ada hasil.</div>
             ) : (
                 filteredChannels.slice(0, visibleLimit).map((channel, idx) => (
                   <div key={idx} onClick={() => handleChannelSelect(channel)} className={`flex items-center gap-3 p-2 rounded-lg cursor-pointer transition-all group border ${selectedChannel === channel ? 'bg-blue-600 border-blue-500 shadow-md shadow-blue-900/20' : 'bg-transparent hover:bg-slate-800 border-transparent hover:border-slate-700'}`}>
                      <div className={`w-9 h-9 rounded flex items-center justify-center shrink-0 overflow-hidden relative ${selectedChannel === channel ? 'bg-blue-500' : 'bg-slate-800'}`}>
                         {channel.logo ? <img src={channel.logo} alt="" className="w-full h-full object-contain" onError={(e) => e.target.style.display='none'} /> : <Tv size={16} className={selectedChannel === channel ? 'text-white' : 'text-gray-600'} />}
                      </div>
                      <div className="overflow-hidden flex-1">
                          <h3 className={`text-sm font-medium truncate ${selectedChannel === channel ? 'text-white' : 'text-gray-200'}`}>{channel.name}</h3>
                          <div className="flex items-center gap-2">
                             <span className={`text-[10px] truncate ${selectedChannel === channel ? 'text-blue-200' : 'text-gray-500'}`}>{channel.group}</span>
                             {selectedTheme !== 'All' && <span className="text-[9px] bg-slate-900 px-1 rounded text-gray-400 flex items-center gap-1">{getThemeIcon(selectedTheme)} {selectedTheme}</span>}
                          </div>
                      </div>
                   </div>
                 ))
             )}
             {visibleLimit < filteredChannels.length && <div className="text-center py-4"><Loader2 className="animate-spin mx-auto text-blue-500" size={20} /></div>}
          </div>
        </aside>

        {/* Main Content */}
        <main className="flex-1 bg-black flex flex-col items-center justify-center relative w-full h-full z-0">
          {!hlsLoaded ? (
              <div className="text-white flex flex-col items-center gap-3"><Loader2 className="animate-spin text-blue-500" size={32} /><p className="text-sm text-gray-400">Loading Engine...</p></div>
          ) : !selectedChannel ? (
            <div className="text-center p-8 max-w-md animate-in fade-in zoom-in duration-500">
                <div className="bg-slate-900 p-8 rounded-full inline-flex mb-6 shadow-2xl shadow-blue-900/10 border border-slate-800"><Tv size={64} className="text-slate-700" /></div>
                <h2 className="text-2xl font-bold text-gray-200 mb-3">IPTV Player</h2>
                <p className="text-gray-500 text-sm leading-relaxed mb-4">{playlists.length === 0 ? "Silakan tambah playlist baru di sidebar." : "Pilih channel dari library playlist Anda."}</p>
            </div>
          ) : (
            <div className="w-full h-full flex flex-col relative group">
                {/* Protocol Warning & Controls */}
                <div className="absolute top-0 left-0 right-0 z-30 flex flex-col items-center">
                    {selectedChannel.url.startsWith('http:') && !forceHttps && (
                        <div className="w-full bg-orange-600/90 text-white text-[10px] sm:text-xs px-4 py-1.5 text-center flex items-center justify-center gap-2 backdrop-blur-sm">
                            <ShieldAlert size={14} />
                            <span>HTTP Stream terdeteksi. Jika gagal, coba tombol 'Force HTTPS' di bawah.</span>
                        </div>
                    )}
                </div>

                {/* Video Player */}
                <div className="relative w-full h-full bg-black flex items-center justify-center">
                    <video 
                        ref={videoRef} 
                        className="w-full h-full max-h-screen object-contain focus:outline-none" 
                        controls 
                        autoPlay 
                        playsInline
                        crossOrigin="anonymous" // Penting untuk CORS
                    />
                </div>

                {/* Error Overlay / Recovery Options */}
                {playerError && (
                    <div className="absolute inset-0 bg-black/80 flex flex-col items-center justify-center p-6 text-center z-40 animate-in fade-in">
                        <AlertCircle size={48} className="text-red-500 mb-4" />
                        <h3 className="text-xl font-bold text-white mb-2">Gagal Memutar Stream</h3>
                        <p className="text-gray-400 text-sm mb-6 max-w-md">{playerError}</p>
                        
                        <div className="flex flex-wrap gap-3 justify-center">
                            <button 
                                onClick={() => { setForceHttps(!forceHttps); setPlayerError(null); }}
                                className={`flex items-center gap-2 px-4 py-2 rounded font-medium text-sm transition-colors ${forceHttps ? 'bg-green-600 hover:bg-green-500' : 'bg-blue-600 hover:bg-blue-500'} text-white`}
                            >
                                <RefreshCw size={16} />
                                {forceHttps ? "Matikan Force HTTPS" : "Coba Force HTTPS"}
                            </button>
                            
                            <a 
                                href={selectedChannel.url} 
                                target="_blank"
                                rel="noopener noreferrer"
                                className="flex items-center gap-2 px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded text-white font-medium text-sm transition-colors"
                            >
                                <ExternalLink size={16} />
                                Buka Langsung (VLC)
                            </a>
                        </div>
                        <p className="text-[10px] text-gray-500 mt-4">Tips: Browser modern memblokir konten HTTP. Gunakan opsi 'Buka Langsung' untuk hasil terbaik.</p>
                    </div>
                )}

                {/* Channel Name Overlay */}
                <div className="absolute top-4 left-4 z-20 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity">
                    <div className="bg-black/50 backdrop-blur px-3 py-1 rounded text-white text-sm font-bold border border-white/10 shadow-xl">{selectedChannel.name}</div>
                </div>
            </div>
          )}
        </main>
      </div>
    </div>
  );
};

export default App;