/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
*/
import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import AdminPanel from './AdminPanel';
import AdminLogin from './components/AdminLogin';
import { Play, Settings, Monitor, Shield } from 'lucide-react';

type ViewMode = 'launcher' | 'player' | 'admin_login' | 'admin_panel';

const Root: React.FC = () => {
  // Alterado de 'launcher' para 'player' para acesso direto do cliente
  const [currentView, setCurrentView] = useState<ViewMode>('player');

  // Simple Router Simulation
  const renderView = () => {
    switch (currentView) {
      case 'player':
        return (
          <App onOpenAdmin={() => setCurrentView('admin_login')} />
        );
      
      case 'admin_login':
        return (
          <AdminLogin 
            onLoginSuccess={() => setCurrentView('admin_panel')} 
            onCancel={() => setCurrentView('player')}
          />
        );

      case 'admin_panel':
        return (
          <AdminPanel onExit={() => setCurrentView('player')} />
        );

      case 'launcher':
      default:
        // Launcher is deprecated but kept as fallback if needed
        return (
          <div className="min-h-screen bg-black text-white flex flex-col items-center justify-center p-8 relative">
             <div className="absolute inset-0 z-0 opacity-40">
                <img 
                  src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072" 
                  className="w-full h-full object-cover" 
                  alt="" 
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black via-black/80 to-transparent"></div>
             </div>

             <div className="relative z-10 max-w-2xl w-full text-center">
                 <h1 className="text-5xl font-black mb-2 tracking-tighter drop-shadow-2xl">COSMOS <span className="text-white/80">SYSTEM</span></h1>
                 <p className="text-gray-400 mb-12 text-lg">Selecione o ambiente para iniciar</p>

                 <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                     {/* Player Card */}
                     <button 
                        onClick={() => setCurrentView('player')}
                        className="group relative bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-8 hover:bg-white/10 transition-all hover:scale-105 hover:border-white/20 hover:shadow-2xl text-left flex flex-col h-64 justify-between"
                     >
                        <div className="w-12 h-12 bg-white/10 rounded-lg flex items-center justify-center mb-4 group-hover:bg-white/20 transition-colors border border-white/5">
                            <Monitor size={24} className="text-white" />
                        </div>
                        <div>
                            <h2 className="text-2xl font-bold text-white mb-2">IPTV Player</h2>
                            <p className="text-sm text-gray-400">Ambiente do Cliente Final. Interface de streaming para TV e Mobile.</p>
                        </div>
                        <div className="flex items-center gap-2 text-white/80 text-sm font-bold mt-4">
                            Iniciar Aplicativo <Play size={16} />
                        </div>
                     </button>

                     {/* Admin Card */}
                     <button 
                        onClick={() => setCurrentView('admin_login')}
                        className="group relative bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-8 hover:bg-white/10 transition-all hover:scale-105 hover:border-white/20 hover:shadow-2xl text-left flex flex-col h-64 justify-between"
                     >
                        <div className="w-12 h-12 bg-white/10 rounded-lg flex items-center justify-center mb-4 group-hover:bg-white/20 transition-colors border border-white/5">
                            <Shield size={24} className="text-white" />
                        </div>
                        <div>
                            <h2 className="text-2xl font-bold text-white mb-2">Painel Admin</h2>
                            <p className="text-sm text-gray-400">Ambiente do Operador. Gerencie DNS, Visual e Configurações remotas.</p>
                        </div>
                        <div className="flex items-center gap-2 text-white/80 text-sm font-bold mt-4">
                            Acessar Painel <Settings size={16} />
                        </div>
                     </button>
                 </div>
                 
                 <div className="mt-12 text-xs text-gray-600 font-mono">
                    v1.2.0-stable • Build 2024.05.20
                 </div>
             </div>
          </div>
        );
    }
  };

  return (
    <React.StrictMode>
      {renderView()}
    </React.StrictMode>
  );
};

const rootElement = document.getElementById('root');
if (!rootElement) {
  throw new Error("Could not find root element to mount to");
}

const root = ReactDOM.createRoot(rootElement);
root.render(<Root />);