import React, { useState, useEffect, StrictMode, Fragment, useRef } from 'react';
import ReactDOM from 'react-dom/client';
import { GoogleGenAI, Modality, LiveServerMessage } from "@google/genai";
import { initializeApp } from 'firebase/app';
import { getAnalytics, logEvent } from 'firebase/analytics';

const { createElement } = React;

// --- App Configuration ---
// All configuration is now loaded from the <script> tag in `index.html`.
// This creates a single source of truth for API keys.
const APP_CONFIG = (window as any).APP_CONFIG;

// --- Configuration Validation ---
const isFirebaseConfigured = APP_CONFIG?.firebase?.apiKey && APP_CONFIG.firebase.projectId;
const isGeminiConfigured = APP_CONFIG?.geminiApiKey && APP_CONFIG.geminiApiKey !== "PASTE_YOUR_GEMINI_API_KEY_HERE";
const isConfigValid = isFirebaseConfigured && isGeminiConfigured;


// --- Firebase Analytics Initialization ---
let analytics: any;
if (isFirebaseConfigured) {
    try {
        const app = initializeApp(APP_CONFIG.firebase);
        analytics = getAnalytics(app);
        console.log("Firebase Analytics initialized.");
    } catch (error) {
        console.error("Firebase initialization error:", error);
    }
} else {
    console.warn("Firebase config is not set. Analytics will be disabled.");
}


// --- Main App Component ---
const App = () => {
    const [screen, setScreen] = useState('loading'); // loading, install, login, dashboard, subjects, lessons, iframe, liveConversation, entertainment, mediaList, cartoonList, parentCorner
    const [schoolData, setSchoolData] = useState(null);
    const [entertainmentData, setEntertainmentData] = useState(null);
    const [userData, setUserData] = useState<any>(null);
    const [currentSubject, setCurrentSubject] = useState<string | null>(null);
    const [currentLesson, setCurrentLesson] = useState<string | null>(null);
    const [currentCartoon, setCurrentCartoon] = useState<any>(null);
    const [mediaList, setMediaList] = useState({ title: '', items: [], type: '' });
    const [mediaItem, setMediaItem] = useState<any>(null);
    const [iframeUrl, setIframeUrl] = useState('');
    const [error, setError] = useState<string | null>(null);
    const [installPrompt, setInstallPrompt] = useState(null);

    // Capture the beforeinstallprompt event
    useEffect(() => {
        const handler = (e: any) => {
            e.preventDefault();
            console.log('beforeinstallprompt event captured');
            setInstallPrompt(e);
        };
        window.addEventListener('beforeinstallprompt', handler);
        return () => window.removeEventListener('beforeinstallprompt', handler);
    }, []);

    // Fetch all app data on initial load
    useEffect(() => {
        Promise.all([
            fetch('/public/schooldata.json').then(res => {
                if (!res.ok) throw new Error(`schooldata.json error! Status: ${res.status}`);
                return res.json();
            }),
            fetch('/public/entertainment.json').then(res => {
                if (!res.ok) throw new Error(`entertainment.json error! Status: ${res.status}`);
                return res.json();
            })
        ])
        .then(([schoolData, entertainmentData]) => {
            setSchoolData(schoolData);
            setEntertainmentData(entertainmentData);
        })
        .catch(err => {
            console.error("Failed to fetch application data:", err);
            setError("Could not load application data. Please try again later.");
        });
    }, []);

    // App initialization logic
    useEffect(() => {
        // Don't run this logic until the core data is loaded.
        if (!schoolData || !entertainmentData) {
            return;
        }

        const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
        const savedUserData = localStorage.getItem('smartkids_userdata');

        if (isStandalone) { // App is installed and running
            if (savedUserData) {
                setUserData(JSON.parse(savedUserData));
                setScreen('dashboard');
            } else {
                setScreen('login');
            }
        } else { // App is running in the browser
            if (installPrompt) { // Browser supports installation and has prompted
                setScreen('install');
            } else if (savedUserData) { // Already logged in, but not installed
                setUserData(JSON.parse(savedUserData));
                setScreen('dashboard');
            } else { // Not logged in, not installable (yet)
                setScreen('login');
            }
        }
    }, [installPrompt, schoolData, entertainmentData]); // Rerun this logic if data or install prompt becomes available

    const handleLogin = (schoolCode: string): boolean => {
        if (!schoolData) {
             setError('School data is not loaded yet. Please wait.');
             return false;
        }
        const school = (schoolData as any[]).find(s => s.code.toLowerCase() === schoolCode.toLowerCase());
        if (school) {
            const logoUrl = school.logoFilename ? `/public/school-logos/${school.logoFilename}` : null;
            const newUserData = { ...school, customLogoUrl: logoUrl };
            localStorage.setItem('smartkids_userdata', JSON.stringify(newUserData));
            setUserData(newUserData);
            setScreen('dashboard');
            return true;
        }
        return false;
    };

    const handleLogout = () => {
        localStorage.removeItem('smartkids_userdata');
        setUserData(null);
        setScreen('login');
    };
    
    const handleInstall = async () => {
        if (!installPrompt) {
            alert('Installation is not available on this browser.');
            setScreen('login');
            return;
        }

        const result = await (installPrompt as any).prompt();

        if (result.outcome === 'accepted') {
            console.log('USER ACTION: App installed successfully.');
            if (analytics) logEvent(analytics, 'pwa_install_success');
        } else {
            console.log('USER ACTION: App installation dismissed.');
            if (analytics) logEvent(analytics, 'pwa_install_dismissed');
        }
        setInstallPrompt(null);
        setScreen('login');
    };

    const navigateTo = (newScreen: string, data: any = {}) => {
        if (newScreen === 'subjects') {
            setScreen('subjects');
        } else if (newScreen === 'lessons') {
            setCurrentSubject(data.subject);
            setScreen('lessons');
        } else if (newScreen === 'iframe') {
            if (data.lesson) { // Educational lesson
                setCurrentLesson(data.lesson.id.replace(/_/g, ' '));
                setMediaItem(null);
                setCurrentCartoon(null);
                const url = data.lesson.url;
                setIframeUrl(url);
                setScreen('iframe');
            } else if (data.media) { // Other entertainment media (Games)
                setMediaItem(data.media);
                setCurrentLesson(null);
                setCurrentCartoon(null);
                setCurrentSubject(null);
                let url = '';
                if (data.type === 'games') {
                    url = data.media.gameUrl;
                }
                setIframeUrl(url);
                setScreen('iframe');
            } else if (data.cartoon) { // Cartoon from URL
                setCurrentCartoon(data.cartoon);
                setCurrentLesson(null);
                setMediaItem(null);
                setCurrentSubject(null);
                const url = data.cartoon.url;
                setIframeUrl(url);
                setScreen('iframe');
            }
        } else if (newScreen === 'portal') {
            if (userData?.googleSiteLink) {
                 window.open(userData.googleSiteLink, '_blank', 'noopener,noreferrer');
            } else {
                alert('Portal link is not available for this school.');
            }
        } else if (newScreen === 'liveConversation') {
            if (!isGeminiConfigured) {
                alert("Live Conversation feature is not configured. An API key is required.");
                return;
            }
            setScreen('liveConversation');
        } else if (newScreen === 'entertainment') {
            setCurrentSubject(null); // Clear subject context when entering entertainment
            setScreen('entertainment');
        } else if (newScreen === 'cartoonList') {
            setScreen('cartoonList');
        } else if (newScreen === 'mediaList') {
            setMediaList({ title: data.title, items: data.items, type: data.type });
            setScreen('mediaList');
        } else {
             setScreen(newScreen);
        }
    };

    const goBack = () => {
        if (screen === 'subjects' || screen === 'liveConversation' || screen === 'entertainment' || screen === 'parentCorner') {
            setScreen('dashboard');
        } else if (screen === 'lessons') {
            setScreen('subjects');
        } else if (screen === 'iframe') {
            if (currentLesson && currentSubject) { // Was a book lesson
                setScreen('lessons');
            } else if (mediaItem && mediaItem.gameUrl) { // Was a game
                setScreen('mediaList');
            } else if (currentCartoon) { // Was a cartoon
                setScreen('cartoonList');
            }
            // Reset state
            setIframeUrl('');
            setCurrentLesson(null);
            setMediaItem(null);
            setCurrentCartoon(null);
        } else if (screen === 'mediaList' || screen === 'cartoonList') {
            setScreen('entertainment');
        }
    };
    
    if (error) {
        return createElement(ErrorScreen, { message: error });
    }
    
    // Determine theme for the IframeScreen based on its content
    let iframeTheme = '';
    if (screen === 'iframe') {
        if (currentSubject) { // It's a lesson from a subject
            iframeTheme = currentSubject.toLowerCase();
        } else if (mediaItem) { // It's a game
            iframeTheme = 'game';
        } else if (currentCartoon) { // It's a cartoon
            iframeTheme = 'cartoon';
        }
    }


    switch (screen) {
        case 'loading':
            return createElement(LoadingScreen);
        case 'install':
            return createElement(InstallScreen, { onInstall: handleInstall });
        case 'login':
            return createElement(LoginScreen, { onLogin: handleLogin });
        case 'dashboard':
            return createElement(DashboardScreen, { userData, onNavigate: navigateTo, onLogout: handleLogout });
        case 'subjects':
            return createElement(SubjectScreen, { userData, onNavigate: navigateTo, onBack: goBack });
        case 'lessons':
            return createElement(LessonListScreen, { userData, subject: currentSubject!, onNavigate: navigateTo, onBack: goBack });
        case 'iframe':
             return createElement(IframeScreen, { src: iframeUrl, title: currentLesson || mediaItem?.title || currentCartoon?.title || '', onBack: goBack, theme: iframeTheme });
        case 'liveConversation':
            return createElement(LiveConversationScreen, { onBack: goBack });
        case 'entertainment':
            return createElement(EntertainmentScreen, { entertainmentData, onNavigate: navigateTo, onBack: goBack });
        case 'cartoonList':
             return createElement(CartoonListScreen, { entertainmentData, onNavigate: navigateTo, onBack: goBack });
        case 'mediaList':
            return createElement(MediaListScreen, { ...mediaList, onNavigate: navigateTo, onBack: goBack });
        case 'parentCorner':
            return createElement(ParentCornerScreen, { onBack: goBack });
        default:
            return createElement(LoginScreen, { onLogin: handleLogin });
    }
};

// --- Screen Components ---

const LoadingScreen = () => createElement('div', { className: 'screen loading-screen' },
    createElement('div', { className: 'loading-logo-container' },
        createElement('img', { src: '/public/icons/smartwings.png', alt: 'Smartwings Logo', className: 'loading-logo' })
    ),
    createElement('div', { className: 'loading-spinner' })
);

const ScreenWrapper = ({ title, onBack, children, actions, theme, showAd }: { title: string, onBack?: () => void, children?: React.ReactNode, actions?: React.ReactNode, theme?: string, showAd?: boolean }) => {
    const headerClass = `header ${theme ? `header--${theme}` : ''}`;
    const contentClass = `content ${theme ? `content--${theme}` : ''}`;

    const backButton = onBack 
        ? createElement('button', { className: 'back-button', onClick: onBack, 'aria-label': 'Go back' },
            createElement('svg', { className: 'icon', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
                createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2.5, d: 'M15 19l-7-7 7-7' })
            )
          ) 
        : createElement('div', null);

    const actionButtons = actions 
        ? createElement('div', { className: 'header-actions' }, actions) 
        : createElement('div', null);
        
    const content = showAd
        ? createElement(Fragment, null,
            createElement('div', { className: 'scroll-wrapper' }, children),
            createElement(AdBanner, { adSlot: "3638638931" })
          )
        : children;

    return createElement('div', { className: 'container' },
        createElement('header', { className: headerClass },
            backButton,
            createElement('div', { className: 'header-title-container' },
                 createElement('h1', null, title)
            ),
            actionButtons
        ),
        createElement('main', { className: contentClass }, content)
    );
};

const InstallScreen = ({ onInstall }: { onInstall: () => void }) => {
    const card = createElement('div', { className: 'install-card' },
        createElement('div', { className: 'logo-container' },
            createElement('img', { src: '/public/icons/logo.png', alt: 'App Logo', className: 'logo-image' })
        ),
        createElement('h1', null, 'Welcome!'),
        createElement('p', null, 'For the best experience, install the app on your device.'),
        createElement('button', { className: 'install-btn', onClick: onInstall },
            createElement('svg', { className: 'install-btn-icon', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
                createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '2', d: 'M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' })
            ),
            createElement('span', null, 'Install The App')
        )
    );

    return createElement(ScreenWrapper, { title: "Install App", theme: "primary" },
        createElement('div', { className: 'auth-container' }, card)
    );
};


const LoginScreen = ({ onLogin }: { onLogin: (code: string) => boolean }) => {
    const [code, setCode] = useState('');
    const [error, setError] = useState('');

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        setError('');
        if (!code) {
            setError('Please enter a school code.');
            return;
        }
        const success = onLogin(code);
        if (!success) {
            setError('Invalid school code. Please try again.');
        }
    };

    const card = createElement('form', { className: 'login-card', onSubmit: handleSubmit },
        createElement('img', { src: '/public/icons/logo.png', alt: 'App Logo', className: 'logo-image' }),
        createElement('h1', null, 'Prep App'),
        createElement('p', null, 'Please enter your school code to begin'),
        createElement('input', {
            type: 'text',
            className: 'input-field',
            placeholder: 'School Code Here',
            value: code,
            onChange: (e: React.ChangeEvent<HTMLInputElement>) => setCode(e.target.value.toUpperCase()),
            'aria-label': 'School Code'
        }),
        createElement('p', { className: 'demo-hint' }, "Enter '123' for Demo"),
        createElement('div', { className: 'error-message' }, error),
        createElement('button', { type: 'submit', className: 'btn' }, 'Continue')
    );

    return createElement(ScreenWrapper, { title: "Welcome", theme: "primary" },
        createElement('div', { className: 'auth-container' }, card)
    );
};

const DashboardScreen = ({ userData, onNavigate, onLogout }: { userData: any, onNavigate: (screen: string, data?: any) => void, onLogout: () => void }) => {
    const { permissions } = userData;

    const logoutAction = createElement('button', { className: 'logout-button', onClick: onLogout, 'aria-label': 'Logout' },
         createElement('svg', { className: 'icon', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
            createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1' })
        )
    );
    
    return createElement(ScreenWrapper, { title: "Smartwings Prep", actions: logoutAction, theme: "primary" },
        createElement('div', { className: 'dashboard-content' },
            createElement('div', { className: 'scroll-wrapper' },
                createElement('div', { className: 'dashboard-grid' },
                    createElement(CardButton, { 
                        label: "Smartwings Interactive Lessons", 
                        icon: "smartkids-logo",
                        onClick: () => onNavigate('subjects'), 
                        disabled: !permissions.smartkidsBooks
                    }),
                    createElement(CardButton, { 
                        label: `${userData.name} Portal`, 
                        icon: "portal",
                        logoSrc: userData.customLogoUrl,
                        onClick: () => onNavigate('portal'), 
                        disabled: !permissions.schoolPortal 
                    }),
                    createElement(CardButton, { 
                        label: "Kids Entertainment", 
                        icon: "game",
                        onClick: () => onNavigate('entertainment'), 
                        disabled: !permissions.entertainment 
                    }),
                    createElement(CardButton, { 
                        label: "Parent Corner", 
                        icon: "parent",
                        onClick: () => onNavigate('parentCorner'), 
                        disabled: !permissions.parentCorner
                    }),
                    createElement(CardButton, { 
                        label: "Live Conversation", 
                        icon: "live",
                        onClick: () => onNavigate('liveConversation'), 
                        disabled: !permissions.liveConversation
                    })
                )
            ),
            createElement(AdBanner, { adSlot: "3638638931" })
        )
    );
};

const SubjectScreen = ({ userData, onNavigate, onBack }: { userData: any, onNavigate: (screen: string, data?: any) => void, onBack: () => void }) => {
    const { smartkidsBooks } = userData;
    return createElement(ScreenWrapper, { title: "Smartwings Interactive Lessons", onBack, theme: "book", showAd: true },
        createElement('div', { className: 'grid' },
            createElement(CardButton, {
                label: "English",
                icon: "english",
                imageSrc: "/public/title/english.png",
                onClick: () => onNavigate('lessons', { subject: 'English' }),
                disabled: !smartkidsBooks.englishEnabled
            }),
            createElement(CardButton, {
                label: "Urdu",
                icon: "urdu",
                imageSrc: "/public/title/urdu.png",
                onClick: () => onNavigate('lessons', { subject: 'Urdu' }),
                disabled: !smartkidsBooks.urduEnabled
            }),
            createElement(CardButton, {
                label: "Math",
                icon: "math",
                imageSrc: "/public/title/math.png",
                onClick: () => onNavigate('lessons', { subject: 'Math' }),
                disabled: !smartkidsBooks.mathEnabled
            })
        )
    );
};

const LessonListScreen = ({ userData, subject, onNavigate, onBack }: { userData: any, subject: string, onNavigate: (screen: string, data?: any) => void, onBack: () => void }) => {
    const lessons = userData.smartkidsBooks.lessons[subject.toLowerCase()] || [];
    const lessonIcons = ['lesson-blue', 'lesson-green', 'lesson-red', 'lesson-purple'];
    return createElement(ScreenWrapper, { title: `${subject} Lessons`, onBack, theme: subject.toLowerCase(), showAd: true },
        createElement('div', { className: 'grid' },
            lessons.length > 0 ? lessons.map((lesson: any, index: number) =>
                createElement(CardButton, {
                    key: `${lesson.id}-${index}`,
                    label: lesson.id.replace(/_/g, ' '),
                    icon: lessonIcons[index % lessonIcons.length],
                    onClick: () => onNavigate('iframe', { lesson }),
                    disabled: false
                })
            ) : createElement('p', null, 'No lessons available for this subject yet.')
        )
    );
};

const EntertainmentScreen = ({ entertainmentData, onNavigate, onBack }: { entertainmentData: any, onNavigate: (screen: string, data?: any) => void, onBack: () => void }) => {
    return createElement(ScreenWrapper, { title: "Kids Entertainment", onBack, theme: "game", showAd: true },
        createElement('div', { className: 'grid' },
            createElement(CardButton, {
                label: "Cartoons",
                icon: "cartoon",
                onClick: () => onNavigate('cartoonList'),
                disabled: !entertainmentData?.cartoons,
            }),
            createElement(CardButton, {
                label: "Games",
                icon: "game",
                onClick: () => onNavigate('mediaList', { title: 'Games', items: entertainmentData?.games || [], type: 'games' }),
                disabled: !entertainmentData?.games,
            })
        )
    );
};

const CartoonListScreen = ({ entertainmentData, onNavigate, onBack }: { entertainmentData: any, onNavigate: (screen: string, data?: any) => void, onBack: () => void }) => {
    const cartoons = entertainmentData?.cartoons || [];

    return createElement(ScreenWrapper, { title: "Cartoons", onBack, theme: "cartoon", showAd: true },
        createElement('div', { className: 'media-list-grid' },
            cartoons.length > 0 ? cartoons.map((cartoon: any) =>
                createElement(MediaCard, {
                    key: cartoon.id,
                    item: cartoon,
                    type: 'cartoon',
                    onClick: () => onNavigate('iframe', { cartoon: cartoon })
                })
            ) : createElement('p', { style: { padding: '1.5rem' } }, 'No cartoons available yet.')
        )
    );
};

const MediaListScreen = ({ title, items, type, onNavigate, onBack }: { title: string, items: any[], type: string, onNavigate: (screen: string, data?: any) => void, onBack: () => void }) => {
    return createElement(ScreenWrapper, { title, onBack, theme: "game", showAd: true },
        createElement('div', { className: 'media-list-grid' },
            items.length > 0 ? items.map((item) =>
                createElement(MediaCard, {
                    key: item.id,
                    item: item,
                    type: type,
                    onClick: () => onNavigate('iframe', { media: item, type: type })
                })
            ) : createElement('p', { style: { padding: '1.5rem' } }, `No ${type} available yet.`)
        )
    );
};

const IframeScreen = ({ src, title, onBack, theme }: { src: string, title: string, onBack: () => void, theme?: string }) => {
    const [status, setStatus] = useState<'loading' | 'loaded' | 'error'>('loading');
    const [iframeContent, setIframeContent] = useState<string | null>(null);

    useEffect(() => {
        if (!src) {
            setStatus('error');
            return;
        };

        setStatus('loading');
        setIframeContent(null);
        let isCancelled = false;

        const fetchAndModifyContent = async () => {
            try {
                const response = await fetch(src);
                if (isCancelled) return;

                if (!response.ok) {
                    throw new Error(`Content not found at ${src}. Status: ${response.status}`);
                }

                const html = await response.text();
                if (isCancelled) return;
                
                const basePath = src.substring(0, src.lastIndexOf('/') + 1);
                const modifiedHtml = html.replace(/<head>/i, `<head><base href="${basePath}">`);
                
                setIframeContent(modifiedHtml);
            } catch (error) {
                console.error('Failed to load iframe content:', error);
                if (!isCancelled) {
                    setStatus('error');
                }
            }
        };

        if (src.startsWith('http')) {
            setStatus('loaded');
        } else {
            fetchAndModifyContent();
        }

        return () => {
            isCancelled = true;
        };
    }, [src]);

    const handleLoad = () => {
        setStatus('loaded');
    };
    
    const iframeProps = {
        key: src,
        ...(src.startsWith('http') ? { src: src } : { srcDoc: iframeContent || '' }),
        className: 'iframe-content',
        title: title,
        onLoad: handleLoad,
        allow: "autoplay; fullscreen; encrypted-media; picture-in-picture",
        allowFullScreen: true,
        sandbox: "allow-scripts allow-same-origin allow-forms allow-popups"
    };

    const renderOverlay = () => {
        if (status === 'loading') {
            return createElement('div', { className: 'iframe-overlay' },
                createElement('div', { className: 'loading-spinner' })
            );
        }
        if (status === 'error') {
            return createElement('div', { className: 'iframe-overlay' },
                createElement('div', { className: 'iframe-error-container' },
                    createElement('p', null, 'Sorry, the lesson content could not be loaded.'),
                    createElement('p', null, 'It might be missing or there was a network problem.'),
                    createElement('button', { className: 'btn', onClick: onBack }, 'Go Back')
                )
            );
        }
        return null;
    };
    
    const headerClass = `header ${theme ? `header--${theme}` : ''}`;

    const backButton = createElement('button', { className: 'back-button', onClick: onBack, 'aria-label': 'Go back' },
        createElement('svg', { className: 'icon', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
            createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2.5, d: 'M15 19l-7-7 7-7' })
        )
    );
    
    const header = createElement('header', { className: headerClass },
        backButton,
        createElement('div', { className: 'header-title-container' },
             createElement('h1', null, title.replace(/_/g, ' '))
        ),
        createElement('div', { style: { width: '40px' }})
    );

    return createElement('div', { className: 'iframe-fullscreen-container' },
        header,
        createElement('div', { className: 'iframe-wrapper' },
            createElement('iframe', iframeProps),
            renderOverlay()
        )
    );
};

const ParentCornerScreen = ({ onBack }: { onBack: () => void }) => {
    const [tip, setTip] = useState('');
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState('');
    const [language, setLanguage] = useState<'English' | 'Urdu'>('English');

    const fetchTip = async (lang: 'English' | 'Urdu') => {
        setLoading(true);
        setError('');
        setTip('');

        const prompt = lang === 'Urdu'
            ? 'Generate a single, concise, positive, and actionable parenting tip in Urdu for a parent of a preschool-aged child (3-5 years old). The tip should be easy to understand and implement.'
            : 'Generate a single, concise, positive, and actionable parenting tip for a parent of a preschool-aged child (3-5 years old). The tip should be easy to understand and implement.';

        try {
            const ai = new GoogleGenAI({ apiKey: APP_CONFIG.geminiApiKey });
            const response = await ai.models.generateContent({
                model: 'gemini-2.5-flash',
                contents: prompt,
            });
            setTip(response.text);
        } catch (err) {
            console.error("Error fetching parenting tip:", err);
            setError("Could not fetch a tip. Please check your connection and try again.");
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchTip(language);
    }, [language]);

    const tipContent = () => {
        if (loading) {
            return createElement('div', { className: 'loading-spinner' });
        }
        if (error) {
            return createElement('p', { className: 'portal-text error-text' }, error);
        }
        if (tip) {
            return createElement('blockquote', { className: `tip-text ${language === 'Urdu' ? 'urdu-text' : ''}` }, tip);
        }
        return null;
    };

    return createElement(ScreenWrapper, { title: "Parent Corner", onBack, theme: "parent" },
        createElement('div', { className: 'portal-container' },
            createElement('div', { className: 'portal-card tip-card' },
                createElement('div', { className: 'placeholder-icon' }, 
                    createElement('svg', { className: 'icon', viewBox: '0 0 64 64' },
                         createElement('path', { fill: '#d0bfff', d: 'M50 8H14a6 6 0 0 0-6 6v36a6 6 0 0 0 6 6h36a6 6 0 0 0 6-6V14a6 6 0 0 0-6-6z' }),
                         createElement('path', { fill: '#b197fc', d: 'M50 8a6 6 0 0 1 6 6v36a6 6 0 0 1-6 6H14a6 6 0 0 1-6-6V14a6 6 0 0 1 6-6h2v48h34V8z' }),
                         createElement('path', { fill: '#fff', d: 'M22 22h20v4H22zm0 8h20v4H22zm0 8h12v4H22z' }),
                         createElement('circle', { fill: '#ffc078', cx: '46', cy: '46', r: '14' }),
                         createElement('path', { fill: '#f39c12', d: 'M46 32a14 14 0 0 0 0 28v-4a10 10 0 0 1 0-20v-4z' }),
                         createElement('path', { fill: '#fff', d: 'M44 40v-4h4v4h4v4h-4v4h-4v-4h-4v-4h4z' })
                    )
                 ),
                createElement('h2', { style: { marginTop: '1.5rem' } }, "Today's Parenting Tip"),
                createElement('div', { className: 'language-switcher' },
                    createElement('button', {
                        className: `lang-btn ${language === 'English' ? 'active' : ''}`,
                        onClick: () => setLanguage('English')
                    }, 'English'),
                    createElement('button', {
                        className: `lang-btn ${language === 'Urdu' ? 'active' : ''}`,
                        onClick: () => setLanguage('Urdu')
                    }, 'اردو')
                ),
                createElement('div', { className: 'tip-content-wrapper' }, tipContent()),
                createElement('button', { className: 'btn', onClick: () => fetchTip(language), disabled: loading },
                    loading ? 'Getting Tip...' : 'Get a New Tip'
                )
            )
        )
    );
};


// --- Live Conversation Component ---

// Helper functions for audio processing
function encode(bytes: Uint8Array): string {
  let binary = '';
  const len = bytes.byteLength;
  for (let i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes[i]);
  }
  return btoa(binary);
}

function decode(base64: string): Uint8Array {
  const binaryString = atob(base64);
  const len = binaryString.length;
  const bytes = new Uint8Array(len);
  for (let i = 0; i < len; i++) {
    bytes[i] = binaryString.charCodeAt(i);
  }
  return bytes;
}

async function decodeAudioData(
  data: Uint8Array,
  ctx: AudioContext,
  sampleRate: number,
  numChannels: number,
): Promise<AudioBuffer> {
  const dataInt16 = new Int16Array(data.buffer);
  const frameCount = dataInt16.length / numChannels;
  const buffer = ctx.createBuffer(numChannels, frameCount, sampleRate);
  for (let channel = 0; channel < numChannels; channel++) {
    const channelData = buffer.getChannelData(channel);
    for (let i = 0; i < frameCount; i++) {
      channelData[i] = dataInt16[i * numChannels + channel] / 32768.0;
    }
  }
  return buffer;
}

function createBlob(data: Float32Array) {
  const l = data.length;
  const int16 = new Int16Array(l);
  for (let i = 0; i < l; i++) {
    int16[i] = data[i] * 32768;
  }
  return {
    data: encode(new Uint8Array(int16.buffer)),
    mimeType: 'audio/pcm;rate=16000',
  };
}

const LiveConversationScreen = ({ onBack }: { onBack: () => void }) => {
    const [status, setStatus] = useState<'idle' | 'connecting' | 'listening' | 'error'>('idle');
    const [errorMessage, setErrorMessage] = useState('');
    const [transcripts, setTranscripts] = useState<{ speaker: 'user' | 'model'; text: string }[]>([]);
    
    const [liveInput, setLiveInput] = useState('');
    const [liveOutput, setLiveOutput] = useState('');

    const currentInputRef = useRef('');
    const currentOutputRef = useRef('');

    const sessionRef = useRef<any>(null);
    const resourcesRef = useRef<any>({});
    const transcriptContainerRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (transcriptContainerRef.current) {
            transcriptContainerRef.current.scrollTop = transcriptContainerRef.current.scrollHeight;
        }
    }, [transcripts, liveInput, liveOutput]);

    const stopConversation = () => {
        if (sessionRef.current) {
            sessionRef.current.close();
            sessionRef.current = null;
        }

        const { stream, source, scriptProcessor, inputAudioContext, outputAudioContext, outputSources } = resourcesRef.current;
        if (stream) stream.getTracks().forEach((track: any) => track.stop());
        if (source) source.disconnect();
        if (scriptProcessor) scriptProcessor.disconnect();
        if (inputAudioContext) inputAudioContext.close();
        if (outputAudioContext) outputAudioContext.close();
        if (outputSources) outputSources.forEach((s: any) => s.stop());

        resourcesRef.current = {};
        setStatus('idle');
    };
    
    useEffect(() => {
        return () => stopConversation();
    }, []);

    const startConversation = async () => {
        if (status === 'connecting' || status === 'listening') return;

        try {
            setErrorMessage('');
            setStatus('connecting');
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            
            const ai = new GoogleGenAI({ apiKey: APP_CONFIG.geminiApiKey });
            
            const inputAudioContext = new (window.AudioContext || (window as any).webkitAudioContext)({ sampleRate: 16000 });
            const outputAudioContext = new (window.AudioContext || (window as any).webkitAudioContext)({ sampleRate: 24000 });
            
            let nextStartTime = 0;
            const outputSources = new Set();
            resourcesRef.current = { stream, inputAudioContext, outputAudioContext, outputSources };

            const sessionPromise = ai.live.connect({
                model: 'gemini-2.5-flash-native-audio-preview-09-2025',
                callbacks: {
                    onopen: () => {
                        setStatus('listening');
                        const source = inputAudioContext.createMediaStreamSource(stream);
                        const scriptProcessor = inputAudioContext.createScriptProcessor(4096, 1, 1);
                        
                        scriptProcessor.onaudioprocess = (audioProcessingEvent: AudioProcessingEvent) => {
                            const inputData = audioProcessingEvent.inputBuffer.getChannelData(0);
                            const pcmBlob = createBlob(inputData);
                            sessionPromise.then((session) => {
                                session.sendRealtimeInput({ media: pcmBlob });
                            });
                        };
                        
                        source.connect(scriptProcessor);
                        scriptProcessor.connect(inputAudioContext.destination);
                        resourcesRef.current.source = source;
                        resourcesRef.current.scriptProcessor = scriptProcessor;
                    },
                    onmessage: async (message: LiveServerMessage) => {
                        if (message.serverContent) {
                            if (message.serverContent.inputTranscription) {
                                const text = message.serverContent.inputTranscription.text;
                                currentInputRef.current += text;
                                setLiveInput(currentInputRef.current);
                            }
                            if (message.serverContent.outputTranscription) {
                                const text = message.serverContent.outputTranscription.text;
                                currentOutputRef.current += text;
                                setLiveOutput(currentOutputRef.current);
                            }
                            const base64Audio = message.serverContent?.modelTurn?.parts[0]?.inlineData.data;
                            if (base64Audio) {
                                nextStartTime = Math.max(nextStartTime, outputAudioContext.currentTime);
                                const audioBuffer = await decodeAudioData(decode(base64Audio), outputAudioContext, 24000, 1);
                                const sourceNode = outputAudioContext.createBufferSource();
                                sourceNode.buffer = audioBuffer;
                                sourceNode.connect(outputAudioContext.destination);
                                sourceNode.addEventListener('ended', () => outputSources.delete(sourceNode));
                                sourceNode.start(nextStartTime);
                                nextStartTime += audioBuffer.duration;
                                outputSources.add(sourceNode);
                            }
                            if (message.serverContent.turnComplete) {
                                const finalTranscripts = [];
                                if (currentInputRef.current.trim()) {
                                    finalTranscripts.push({ speaker: 'user' as const, text: currentInputRef.current.trim() });
                                }
                                if (currentOutputRef.current.trim()) {
                                    finalTranscripts.push({ speaker: 'model' as const, text: currentOutputRef.current.trim() });
                                }
                                
                                if (finalTranscripts.length > 0) {
                                    setTranscripts(prev => [...prev, ...finalTranscripts]);
                                }

                                currentInputRef.current = '';
                                currentOutputRef.current = '';
                                setLiveInput('');
                                setLiveOutput('');
                            }
                            if (message.serverContent.interrupted) {
                                outputSources.forEach((s: any) => s.stop());
                                outputSources.clear();
                                nextStartTime = 0;
                            }
                        }
                    },
                    onerror: (e: any) => {
                        console.error('Live session error:', e);
                        setErrorMessage('An unexpected error occurred. Please check your connection.');
                        setStatus('error');
                    },
                    onclose: (e: any) => {
                        if (status !== 'idle') {
                            setStatus('idle');
                        }
                    },
                },
                config: {
                    responseModalities: [Modality.AUDIO],
                    inputAudioTranscription: {},
                    outputAudioTranscription: {},
                    speechConfig: {
                        voiceConfig: { prebuiltVoiceConfig: { voiceName: 'Zephyr' } },
                    },
                    systemInstruction: 'You are a helpful assistant for a child. You must only speak in English or Urdu. Respond to the user in the language they are speaking.',
                },
            });
            
            sessionRef.current = await sessionPromise;

        } catch (err: any) {
            console.error('Failed to start conversation:', err);
            if (err.name === 'NotAllowedError' || err.name === 'PermissionDeniedError') {
                setErrorMessage('Microphone access denied. Please enable it in your browser settings and try again.');
            } else {
                setErrorMessage('An unexpected error occurred. Please check your connection.');
            }
            setStatus('error');
        }
    };

    const statusTextMap = {
        idle: 'Tap the mic to start talking',
        connecting: 'Connecting...',
        listening: 'Listening...',
        error: errorMessage || 'An error occurred. Please try again.',
    };

    const isRunning = status === 'connecting' || status === 'listening';

    return createElement(ScreenWrapper, { title: "Live Conversation", onBack, theme: "live" },
        createElement('div', { className: 'live-conversation-container' },
            createElement('div', { className: 'transcript-container', ref: transcriptContainerRef },
                transcripts.map((t, i) => createElement('div', {
                    key: i,
                    className: `transcript-bubble transcript-bubble-${t.speaker}`
                }, t.text)),
                liveInput && createElement('div', { className: 'transcript-bubble transcript-bubble-user' }, liveInput),
                liveOutput && createElement('div', { className: 'transcript-bubble transcript-bubble-model' }, liveOutput)
            ),
            createElement('div', { className: 'live-status-container' },
                createElement('p', { className: 'status-text' }, statusTextMap[status]),
                createElement('button', {
                    className: `control-button ${isRunning ? 'stop' : ''}`,
                    onClick: isRunning ? stopConversation : startConversation,
                    'aria-label': isRunning ? 'Stop conversation' : 'Start conversation'
                },
                    createElement('svg', {
                        className: `icon mic-icon ${status === 'listening' ? 'listening' : ''}`,
                        fill: 'currentColor', stroke: 'none', viewBox: '0 0 24 24'
                    },
                        isRunning
                            ? createElement('path', { d: 'M6 6h12v12H6z' }) // Stop icon
                            : createElement('path', { d: 'M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z' }) // Mic icon
                    )
                )
            )
        )
    );
};

const AdBanner = ({ adSlot }: { adSlot: string }) => {
    useEffect(() => {
        const adPushTimeout = setTimeout(() => {
            try {
                ((window as any).adsbygoogle = (window as any).adsbygoogle || []).push({});
            } catch (e) {
                console.error("AdSense push error:", e);
            }
        }, 100);

        return () => clearTimeout(adPushTimeout);
    }, [adSlot]);

    return createElement('div', { className: 'ad-banner-container' },
        createElement('div', { className: 'ad-banner-wrapper' },
            createElement('ins', {
                className: 'adsbygoogle',
                style: { display: 'block', width: '100%' },
                'data-ad-client': 'ca-pub-8257918642993953',
                'data-ad-slot': adSlot,
                'data-ad-format': 'auto',
                'data-full-width-responsive': 'true'
            })
        )
    );
};

const ErrorScreen = ({ message }: { message: string }) => {
    return createElement('div', { className: 'screen error-container' },
        createElement('h2', null, 'Oops! Something went wrong.'),
        createElement('p', null, message),
        createElement('button', { className: 'btn', onClick: () => window.location.reload() }, 'Reload App')
    );
};


// --- Helper Components ---
const CardButton = (props: { label: string, icon: string, onClick: () => void, disabled?: boolean, imageSrc?: string, customClass?: string, logoSrc?: string | null }) => {
    const { label, icon, onClick, disabled, imageSrc, customClass, logoSrc } = props;
    const icons: { [key: string]: React.ReactNode } = {
        'smartkids-logo': createElement('img', { src: '/public/icons/smartkids-logo.png', alt: 'SmartKids Books Logo', className: 'smartkids-logo-img' }),
        book: createElement('svg', { className: 'icon', viewBox: '0 0 64 64' },
            createElement('path', { fill: '#74c0fc', d: 'M54 6H18a6 6 0 0 0-6 6v40a6 6 0 0 0 6 6h36a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2z' }),
            createElement('path', { fill: '#a5d8ff', d: 'M18 6h36a2 2 0 0 1 2 2v48a2 2 0 0 1-2 2H18a6 6 0 0 1-6-6V12a6 6 0 0 1 6-6z' }),
            createElement('path', { fill: '#3498db', d: 'M12 12v40a6 6 0 0 0 6 6h2V6h-2a6 6 0 0 0-6 6z' }),
            createElement('path', { fill: '#4dabf7', d: 'M20 6h-2a6 6 0 0 0-6 6v40a6 6 0 0 0 6 6h2V6z' }),
            createElement('path', { fill: '#fff', d: 'M26 18h20v4H26zm0 8h20v4H26zm0 8h12v4H26z' })
        ),
        portal: createElement('svg', { className: 'icon', viewBox: '0 0 64 64' },
            createElement('path', { fill: '#8ce99a', d: 'M12 56V24l20-16 20 16v32H40V36H24v20z' }),
            createElement('path', { fill: '#2ecc71', d: 'M52 56H12l20-16 20 16z' }),
            createElement('path', { fill: '#69db7c', d: 'M32 8L12 24v-4l20-16 20 16v4z' }),
            createElement('path', { fill: '#fff', d: 'M28 40h8v16h-8z' }),
            createElement('path', { fill: '#b2f2bb', d: 'M46 28h-6v-6h6zm-14 0h-6v-6h6z' })
        ),
        parent: createElement('svg', { className: 'icon', viewBox: '0 0 64 64' },
            createElement('circle', { cx: '22', cy: '20', r: '8', fill: '#f06595' }),
            createElement('path', { fill: '#d6336c', d: 'M28.6 30.5a14 14 0 0 0-13.2 0A12 12 0 0 0 4 42v2h36v-2a12 12 0 0 0-11.4-11.5z' }),
            createElement('circle', { cx: '42', cy: '20', r: '8', fill: '#cc5de8' }),
            createElement('path', { fill: '#ae3ec9', d: 'M48.6 30.5a14 14 0 0 0-13.2 0A12 12 0 0 0 24 42v2h36v-2a12 12 0 0 0-11.4-11.5z' })
        ),
        game: createElement('svg', { className: 'icon', viewBox: '0 0 64 64' },
            createElement('path', { fill: '#ffc078', d: 'M56 18H8a4 4 0 0 0-4 4v28a4 4 0 0 0 4 4h48a4 4 0 0 0 4-4V22a4 4 0 0 0-4-4z' }),
            createElement('path', { fill: '#ffa94d', d: 'M4 22v28a4 4 0 0 0 4 4h48a4 4 0 0 0 4-4V22H34v28H8a4 4 0 0 1-4-4z' }),
            createElement('path', { fill: '#ffe8cc', d: 'M40 26H24a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V28a2 2 0 0 0-2-2z' }),
            createElement('path', { fill: '#495057', d: 'M14 30h-4v-4h4zm0 8h-4v-4h4zm-6-2h4v4h-4zm8 0h4v4h-4z' }),
            createElement('path', { fill: '#f03e3e', d: 'M48 38a4 4 0 1 0 8 0a4 4 0 0 0-8 0' }),
            createElement('path', { fill: '#4dabf7', d: 'M28 34l8 4-8 4z' })
        ),
        cartoon: createElement('svg', { className: 'icon', viewBox: '0 0 64 64' },
            createElement('path', { d: 'M52,5H12A7,7,0,0,0,5,12V52a7,7,0,0,0,7,7H52a7,7,0,0,0,7-7V12A7,7,0,0,0,52,5ZM42.26,33.41,26.34,42.86A1.5,1.5,0,0,1,24,41.59V22.41a1.5,1.5,0,0,1,2.34-1.27l15.92,9.45a1.5,1.5,0,0,1,0,2.82Z' })
        ),
        english: createElement('span', { className: 'icon', style: { fontSize: '56px', fontWeight: '800', color: 'var(--card-color-english)' } }, 'A'),
        urdu: createElement('span', { className: 'icon', style: { fontSize: '56px', fontWeight: '800', color: 'var(--card-color-urdu)' } }, 'الف'),
        math: createElement('svg', { className: 'icon', viewBox: '0 0 64 64' },
            createElement('path', { fill: '#63e6be', d: 'M12 12h40v40H12z' }),
            createElement('path', { fill: '#20c997', d: 'M46 18h-8l-14 28h8l14-28z' }),
            createElement('path', { fill: '#fa5252', d: 'M18 24h28v6H18zm0 12h28v6H18z' })
        ),
        lesson: createElement('svg', { className: 'icon', viewBox: '0 0 64 64' },
            createElement('circle', { cx: '32', cy: '32', r: '28', fill: '#ced4da' }),
            createElement('circle', { cx: '32', cy: '32', r: '24', fill: '#f1f3f5' }),
            createElement('path', { fill: '#868e96', d: 'M26 20v24l20-12z' })
        ),
        'lesson-blue': createElement('svg', { className: 'icon', viewBox: '0 0 64 64' },
            createElement('circle', { cx: '32', cy: '32', r: '28', fill: '#a5d8ff' }),
            createElement('circle', { cx: '32', cy: '32', r: '24', fill: '#e7f5ff' }),
            createElement('path', { fill: '#3498db', d: 'M26 20v24l20-12z' })
        ),
        'lesson-green': createElement('svg', { className: 'icon', viewBox: '0 0 64 64' },
            createElement('circle', { cx: '32', cy: '32', r: '28', fill: '#8ce99a' }),
            createElement('circle', { cx: '32', cy: '32', r: '24', fill: '#d3f9d8' }),
            createElement('path', { fill: '#2ecc71', d: 'M26 20v24l20-12z' })
        ),
        'lesson-red': createElement('svg', { className: 'icon', viewBox: '0 0 64 64' },
            createElement('circle', { cx: '32', cy: '32', r: '28', fill: '#ffc078' }),
            createElement('circle', { cx: '32', cy: '32', r: '24', fill: '#fff4e6' }),
            createElement('path', { fill: '#f39c12', d: 'M26 20v24l20-12z' })
        ),
        'lesson-purple': createElement('svg', { className: 'icon', viewBox: '0 0 64 64' },
            createElement('circle', { cx: '32', cy: '32', r: '28', fill: '#d0bfff' }),
            createElement('circle', { cx: '32', cy: '32', r: '24', fill: '#f3f0ff' }),
            createElement('path', { fill: '#9b59b6', d: 'M26 20v24l20-12z' })
        ),
        live: createElement('svg', { className: 'icon', viewBox: '0 0 64 64' },
            createElement('path', { fill: '#66d9e8', d: 'M32 46a14 14 0 0 1-14-14V18a14 14 0 0 1 28 0v14a14 14 0 0 1-14 14z' }),
            createElement('path', { fill: '#3bc9db', d: 'M32 4a14 14 0 0 0-14 14v14a14 14 0 0 0 14 14V4z' }),
            createElement('path', { fill: '#22b8cf', d: 'M40 52H24a2 2 0 0 0-2 2v4h20v-4a2 2 0 0 0-2-2z' }),
            createElement('path', { fill: '#15aabf', d: 'M50 32h-4a14 14 0 0 1-28 0h-4a18 18 0 0 0 36 0z' })
        ),
    };

    const buttonClasses = `card-btn card-btn--${icon} ${imageSrc ? 'card-btn--image' : ''} ${customClass || ''}`;

    if (imageSrc) {
        return createElement('button', { className: buttonClasses.trim(), onClick, disabled },
            createElement('img', { src: imageSrc, alt: label, className: 'card-title-image' }),
            createElement('span', { className: 'card-image-label' }, label)
        );
    }

    return createElement('button', { className: buttonClasses.trim(), onClick, disabled },
        logoSrc
            ? createElement('img', { src: logoSrc, alt: `${label} Logo`, className: 'card-btn-custom-logo' })
            : icons[icon],
        createElement('span', null, label)
    );
};

const MediaCard = ({ item, type, onClick }: { item: any, type: string, onClick: () => void }) => {
    const [hasError, setHasError] = useState(!item.imageSrc);

    useEffect(() => {
        setHasError(!item.imageSrc);
    }, [item.id, item.imageSrc]);

    const handleError = () => {
        console.warn(`Failed to load image for ${item.title} from ${item.imageSrc}`);
        setHasError(true);
    };

    return createElement('button', { className: 'media-card', onClick: onClick },
        !hasError
            ? createElement('img', {
                src: item.imageSrc,
                alt: item.title,
                className: 'media-card-thumbnail',
                onError: handleError,
                loading: 'lazy'
            })
            : createElement('div', { className: 'media-card-icon-placeholder' },
                createElement('svg', { className: 'icon', viewBox: '0 0 64 64' },
                    type === 'cartoon' ?
                        createElement('path', { d: 'M52,5H12A7,7,0,0,0,5,12V52a7,7,0,0,0,7,7H52a7,7,0,0,0,7-7V12A7,7,0,0,0,52,5ZM42.26,33.41,26.34,42.86A1.5,1.5,0,0,1,24,41.59V22.41a1.5,1.5,0,0,1,2.34-1.27l15.92,9.45a1.5,1.5,0,0,1,0,2.82Z', fill: 'var(--card-color-cartoon)' })
                        :
                        createElement(Fragment, null,
                            createElement('path', { fill: '#ffc078', d: 'M56 18H8a4 4 0 0 0-4 4v28a4 4 0 0 0 4 4h48a4 4 0 0 0 4-4V22a4 4 0 0 0-4-4z' }),
                            createElement('path', { fill: '#ffa94d', d: 'M4 22v28a4 4 0 0 0 4 4h48a4 4 0 0 0 4-4V22H34v28H8a4 4 0 0 1-4-4z' }),
                            createElement('path', { fill: '#ffe8cc', d: 'M40 26H24a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V28a2 2 0 0 0-2-2z' }),
                            createElement('path', { fill: '#495057', d: 'M14 30h-4v-4h4zm0 8h-4v-4h4zm-6-2h4v4h-4zm8 0h4v4h-4z' }),
                            createElement('path', { fill: '#f03e3e', d: 'M48 38a4 4 0 1 0 8 0a4 4 0 0 0-8 0' }),
                            createElement('path', { fill: '#4dabf7', d: 'M28 34l8 4-8 4z' })
                        )
                )
            ),
        createElement('p', { className: 'media-card-title' }, item.title)
    );
};

const ConfigWarningScreen = () => {
    const checkList = [];
    if (!isFirebaseConfigured) {
        checkList.push(createElement('li', { key: 'firebase' }, 'Firebase Credentials'));
    }
    if (!isGeminiConfigured) {
        checkList.push(createElement('li', { key: 'gemini' }, 'Gemini API Key'));
    }

    return createElement('div', { className: 'screen config-overlay-screen' },
        createElement('div', { className: 'config-warning-card' },
            createElement('div', { className: 'config-warning-icon' },
                createElement('svg', { viewBox: '0 0 24 24', fill: 'currentColor' },
                    createElement('path', { d: 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2V7h2v6z' })
                )
            ),
            createElement('h1', null, 'Configuration Required'),
            createElement('p', null, 'This application is missing required credentials. Please edit the `index.html` file and fill in the following values inside the `window.APP_CONFIG` script tag:'),
            createElement('ul', { className: 'config-checklist' }, ...checkList),
            createElement('p', null, 'Refer to the `README.md` file for detailed instructions on where to find these values.'),
            createElement('button', { className: 'btn', onClick: () => window.location.reload() }, 'I have fixed it. Reload App')
        )
    );
};

// --- Mount Application ---
const rootElement = document.getElementById('root');
if (rootElement) {
    const root = ReactDOM.createRoot(rootElement);
    root.render(
        createElement(StrictMode, null,
            isConfigValid ? createElement(App, null) : createElement(ConfigWarningScreen)
        )
    );
} else {
    console.error("Fatal Error: Could not find the root element to mount the app.");
}