Maybe

import React, { useState, useEffect, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  Phone, MessageSquare, Camera, Chrome,
  Settings, Mail, Calendar, Clock,
  Music, Youtube, MapPin, ShoppingBag,
  Twitter, Facebook, Linkedin, Github,
  Trello, Figma, Cloud, BookOpen, Radio,
  Palette, Code, Newspaper, Headphones, Check, MessageCircle,
  Gamepad2, Zap, Heart, Bell } from
'lucide-react';
import HomeScreen from '../components/emulator/HomeScreen';
import NavigationBar from '../components/emulator/NavigationBar';
import PlayStore from '../components/emulator/PlayStore';
import GenericApp from '../components/emulator/GenericApp';
import EnhancedNotificationPanel from '../components/emulator/EnhancedNotificationPanel';
import NotificationSettingsPanel from '../components/emulator/NotificationSettingsPanel';
import PhoneApp from '../components/emulator/apps/PhoneApp';
import MessagesApp from '../components/emulator/apps/MessagesApp';
import CameraApp from '../components/emulator/apps/CameraApp';
import ChromeApp from '../components/emulator/apps/ChromeApp';
import SettingsApp from '../components/emulator/apps/SettingsApp';
import GmailApp from '../components/emulator/apps/GmailApp';
import CalendarApp from '../components/emulator/apps/CalendarApp';
import ClockApp from '../components/emulator/apps/ClockApp';
import MusicApp from '../components/emulator/apps/MusicApp';
import YouTubeApp from '../components/emulator/apps/YouTubeApp';
import MapsApp from '../components/emulator/apps/MapsApp';
import AppInfoScreen from '../components/emulator/AppInfoScreen';
import AssistantApp from '../components/emulator/apps/AssistantApp';

const iconMap = {
  // Games
  roblox: Gamepad2,
  blockblast: Zap,
  candycrush: Heart,
  subwaysurfers: Zap,
  amongus: Gamepad2,
  minecraft: Gamepad2,
  clashofclans: Gamepad2,
  pubgmobile: Gamepad2,
  // Social & Business
  twitter: Twitter,
  facebook: Facebook,
  linkedin: Linkedin,
  github: Github,
  slack: MessageCircle,
  discord: Headphones,
  // Productivity & Design
  trello: Trello,
  figma: Figma,
  cloudstore: Cloud,
  notion: BookOpen,
  canva: Palette,
  vscode: Code,
  todoist: Check,
  // Media
  spotify: Radio,
  medium: Newspaper,
  // Default apps
  phone: Phone,
  messages: MessageSquare,
  camera: Camera,
  chrome: Chrome,
  settings: Settings,
  mail: Mail,
  calendar: Calendar,
  clock: Clock,
  music: Music,
  youtube: Youtube,
  maps: MapPin,
  playstore: ShoppingBag
};

const defaultAppData = {
  phone: { name: 'Phone', color: 'linear-gradient(135deg, #4CAF50, #2E7D32)' },
  messages: { name: 'Messages', color: 'linear-gradient(135deg, #2196F3, #1565C0)' },
  camera: { name: 'Camera', color: 'linear-gradient(135deg, #607D8B, #37474F)' },
  chrome: { name: 'Chrome', color: 'linear-gradient(135deg, #FFC107, #F57C00)' },
  settings: { name: 'Settings', color: 'linear-gradient(135deg, #9E9E9E, #616161)' },
  mail: { name: 'Gmail', color: 'linear-gradient(135deg, #EA4335, #B71C1C)' },
  calendar: { name: 'Calendar', color: 'linear-gradient(135deg, #4285F4, #1A73E8)' },
  clock: { name: 'Clock', color: 'linear-gradient(135deg, #00BCD4, #0097A7)' },
  music: { name: 'Music', color: 'linear-gradient(135deg, #FF5722, #E64A19)' },
  youtube: { name: 'YouTube', color: 'linear-gradient(135deg, #FF0000, #CC0000)' },
  maps: { name: 'Maps', color: 'linear-gradient(135deg, #34A853, #137333)' }
};

const defaultNotifications = [
{ id: 1, appId: 'messages', app: 'Messages', icon: MessageSquare, color: '#2196F3', title: 'New message', message: 'Hey! Are you free tonight?', timestamp: new Date(Date.now() - 2 * 60000), type: 'message' },
{ id: 2, appId: 'mail', app: 'Gmail', icon: Mail, color: '#EA4335', title: 'Meeting reminder', message: 'Team sync in 30 minutes', timestamp: new Date(Date.now() - 15 * 60000), type: 'reminder' },
{ id: 3, appId: 'calendar', app: 'Calendar', icon: Calendar, color: '#4285F4', title: 'Upcoming event', message: 'Lunch with Sarah at 12:30 PM', timestamp: new Date(Date.now() - 30 * 60000), type: 'reminder' },
{ id: 4, appId: 'youtube', app: 'YouTube', icon: Youtube, color: '#FF0000', title: 'New video', message: 'TechReview posted: "Best phones 2024"', timestamp: new Date(Date.now() - 60 * 60000), type: 'alert' }];


const defaultNotificationSettings = {
  phone: { enabled: true, sound: true, vibrate: true, showPreview: true },
  messages: { enabled: true, sound: true, vibrate: true, showPreview: true },
  mail: { enabled: true, sound: true, vibrate: false, showPreview: true },
  calendar: { enabled: true, sound: true, vibrate: true, showPreview: true },
  youtube: { enabled: true, sound: false, vibrate: false, showPreview: true },
  music: { enabled: true, sound: false, vibrate: false, showPreview: false },
  instagram: { enabled: true, sound: true, vibrate: true, showPreview: true }
};

export default function AndroidEmulator() {
  const [isOn, setIsOn] = useState(true);
  const [currentScreen, setCurrentScreen] = useState('home');
  const [currentApp, setCurrentApp] = useState(null);
  const [installedApps, setInstalledApps] = useState([]);
  const [screenHistory, setScreenHistory] = useState(['home']);
  const [showNotifications, setShowNotifications] = useState(false);
  const [showNotificationSettings, setShowNotificationSettings] = useState(false);
  const [notifications, setNotifications] = useState(defaultNotifications);
  const [notificationSettings, setNotificationSettings] = useState(defaultNotificationSettings);
  const [widgets, setWidgets] = useState(['clock-large', 'weather-small']);
  const [appInfoApp, setAppInfoApp] = useState(null);

  const defaultAppIds = ['phone', 'messages', 'camera', 'chrome', 'settings', 'mail', 'calendar', 'clock', 'music', 'youtube', 'maps', 'playstore'];

  const handleOpenAppInfo = (appId) => {
    const installedApp = installedApps.find((a) => a.id === appId);
    const defaultApp = defaultAppData[appId];

    if (installedApp) {
      setAppInfoApp({ ...installedApp, icon: iconMap[appId] || installedApp.icon });
    } else if (defaultApp) {
      setAppInfoApp({
        id: appId,
        name: defaultApp.name,
        color: defaultApp.color,
        icon: iconMap[appId]
      });
    }
  };

  const handleUninstallApp = (appId) => {
    setInstalledApps((prev) => prev.filter((a) => a.id !== appId));
    setAppInfoApp(null);
  };

  const addNotification = useCallback((notification) => {
    const appSettings = notificationSettings[notification.appId];
    if (appSettings && !appSettings.enabled) return;

    const newNotification = {
      id: Date.now() + Math.random(),
      timestamp: new Date(),
      read: false,
      ...notification
    };
    setNotifications((prev) => [newNotification, ...prev]);
  }, [notificationSettings]);

  const updateNotificationSettings = useCallback((appId, settings) => {
    setNotificationSettings((prev) => ({
      ...prev,
      [appId]: { ...prev[appId], ...settings }
    }));
  }, []);

  // Simulate incoming notifications
  useEffect(() => {
    const sampleNotifications = [
    { appId: 'messages', title: 'Mom', message: 'Don\'t forget to call grandma!', type: 'message' },
    { appId: 'mail', title: 'Amazon', message: 'Your order has been shipped', type: 'alert' },
    { appId: 'calendar', title: 'Reminder', message: 'Pick up groceries', type: 'reminder' }];


    const interval = setInterval(() => {
      if (Math.random() > 0.7) {
        const randomNotif = sampleNotifications[Math.floor(Math.random() * sampleNotifications.length)];
        addNotification(randomNotif);
      }
    }, 30000);

    return () => clearInterval(interval);
  }, [addNotification]);

  const specialApps = ['phone', 'messages', 'camera', 'chrome', 'settings', 'mail', 'calendar', 'clock', 'music', 'youtube', 'maps', 'assistant'];

  const handleSetAlarm = (time) => {
    addNotification({
      appId: 'clock',
      title: 'Alarm set',
      message: `Alarm scheduled for ${time}`,
      type: 'alert'
    });
  };

  const handleSetReminder = (task, time) => {
    addNotification({
      appId: 'calendar',
      title: 'Reminder created',
      message: `"${task}" - ${time}`,
      type: 'reminder'
    });
  };

  const handleMakeCall = (contact) => {
    setCurrentScreen('phone');
    setScreenHistory((prev) => [...prev, 'phone']);
  };

  const handleOpenApp = (appId) => {
    if (appId === 'playstore') {
      setCurrentScreen('playstore');
      setScreenHistory((prev) => [...prev, 'playstore']);
    } else if (specialApps.includes(appId)) {
      setCurrentScreen(appId);
      setScreenHistory((prev) => [...prev, appId]);
    } else {
      const installedApp = installedApps.find((a) => a.id === appId);
      const defaultApp = defaultAppData[appId];

      if (installedApp) {
        setCurrentApp(installedApp);
      } else if (defaultApp) {
        setCurrentApp({
          id: appId,
          name: defaultApp.name,
          color: defaultApp.color,
          icon: iconMap[appId]
        });
      }
      setCurrentScreen('app');
      setScreenHistory((prev) => [...prev, 'app']);
    }
  };

  const handleBack = () => {
    if (screenHistory.length > 1) {
      const newHistory = [...screenHistory];
      newHistory.pop();
      const prevScreen = newHistory[newHistory.length - 1];
      setScreenHistory(newHistory);
      setCurrentScreen(prevScreen);
      if (prevScreen === 'home') {
        setCurrentApp(null);
      }
    }
  };

  const handleHome = () => {
    setCurrentScreen('home');
    setCurrentApp(null);
    setScreenHistory(['home']);
  };

  const handleInstallApp = (app) => {
    const newApp = {
      id: app.id,
      name: app.name,
      color: app.color,
      icon: iconMap[app.id] || app.icon
    };
    setInstalledApps((prev) => [...prev, newApp]);
  };

  const handlePower = () => {
    setIsOn(!isOn);
    if (!isOn) {
      setCurrentScreen('home');
      setCurrentApp(null);
      setScreenHistory(['home']);
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 flex items-center justify-center p-4">
            {/* Phone Frame */}
            <div className="relative">
                {/* Physical Buttons */}
                <div className="absolute -right-2 top-24 flex flex-col gap-3">
                    <button
            onClick={handlePower}
            className="w-1.5 h-12 bg-gray-700 rounded-r-sm hover:bg-gray-600 transition-colors"
            title="Power" />

                </div>
                <div className="absolute -left-2 top-20 flex flex-col gap-2">
                    <button className="w-1.5 h-8 bg-gray-700 rounded-l-sm hover:bg-gray-600 transition-colors" title="Volume Up" />
                    <button className="w-1.5 h-8 bg-gray-700 rounded-l-sm hover:bg-gray-600 transition-colors" title="Volume Down" />
                </div>
                
                {/* Phone Body */}
                <div className="w-[320px] h-[680px] bg-gray-900 rounded-[3rem] p-2 shadow-2xl border-4 border-gray-800">
                    {/* Screen Container */}
                    <div className="relative w-full h-full bg-black rounded-[2.5rem] overflow-hidden">
                        {/* Notch */}
                        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-28 h-6 bg-black rounded-b-2xl z-50 flex items-center justify-center">
                            <div className="w-3 h-3 rounded-full bg-gray-800 border-2 border-gray-700" />
                        </div>
                        
                        {/* Notification Panel */}
                                        <AnimatePresence>
                                            {showNotifications && isOn &&
              <EnhancedNotificationPanel
                notifications={notifications}
                onClose={() => setShowNotifications(false)}
                onClearAll={() => setNotifications([])}
                onDismiss={(id) => setNotifications((prev) => prev.filter((n) => n.id !== id))}
                onNotificationTap={(notif) => {
                  setShowNotifications(false);
                  if (notif.appId) handleOpenApp(notif.appId);
                }}
                onOpenSettings={() => {
                  setShowNotifications(false);
                  setShowNotificationSettings(true);
                }} />

              }
                                        </AnimatePresence>

                                        {/* Notification Settings */}
                                        <AnimatePresence>
                                            {showNotificationSettings && isOn &&
              <NotificationSettingsPanel
                settings={notificationSettings}
                onUpdateSettings={updateNotificationSettings}
                onBack={() => setShowNotificationSettings(false)} />

              }
                                        </AnimatePresence>

                                        {/* App Info Screen */}
                                        <AnimatePresence>
                                            {appInfoApp && isOn &&
              <AppInfoScreen
                app={appInfoApp}
                onBack={() => setAppInfoApp(null)}
                onUninstall={handleUninstallApp}
                isDefaultApp={defaultAppIds.includes(appInfoApp.id)} />

              }
                                        </AnimatePresence>

                                        {/* Screen Content */}
                                        <AnimatePresence mode="wait">
                                            {!isOn ?
              <motion.div
                key="off"
                initial={{ opacity: 1 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                className="absolute inset-0 bg-black" /> :


              <motion.div
                key="on"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                className="absolute inset-0">

                                    {currentScreen === 'home' &&
                <HomeScreen
                  onOpenApp={handleOpenApp}
                  onLongPressApp={handleOpenAppInfo}
                  installedApps={installedApps.map((app) => ({
                    ...app,
                    icon: iconMap[app.id] || app.icon
                  }))}
                  onNotificationTap={() => setShowNotifications(true)}
                  widgets={widgets}
                  onWidgetsChange={setWidgets}
                  notificationCount={notifications.filter((n) => !n.read).length} />

                }
                                    
                                    {currentScreen === 'playstore' &&
                <PlayStore
                  onBack={handleBack}
                  installedApps={installedApps}
                  onInstallApp={handleInstallApp} />

                }
                                    
                                    {currentScreen === 'phone' && <PhoneApp onBack={handleBack} />}
                                    {currentScreen === 'messages' && <MessagesApp onBack={handleBack} />}
                                    {currentScreen === 'camera' && <CameraApp onBack={handleBack} />}
                                    {currentScreen === 'chrome' && <ChromeApp onBack={handleBack} />}
                                    {currentScreen === 'settings' && <SettingsApp onBack={handleBack} />}
                                    {currentScreen === 'mail' && <GmailApp onBack={handleBack} />}
                                    {currentScreen === 'calendar' && <CalendarApp onBack={handleBack} />}
                                    {currentScreen === 'clock' && <ClockApp onBack={handleBack} />}
                                    {currentScreen === 'music' && <MusicApp onBack={handleBack} />}
                                    {currentScreen === 'youtube' && <YouTubeApp onBack={handleBack} />}
                                    {currentScreen === 'maps' && <MapsApp onBack={handleBack} />}
                                    {currentScreen === 'assistant' &&
                <AssistantApp
                  onBack={handleBack}
                  onOpenApp={(appId) => {
                    handleBack();
                    setTimeout(() => handleOpenApp(appId), 300);
                  }}
                  onSetAlarm={handleSetAlarm}
                  onSetReminder={handleSetReminder}
                  onMakeCall={handleMakeCall} />

                }
                                    
                                    {currentScreen === 'app' && currentApp &&
                <GenericApp
                  app={currentApp}
                  onBack={handleBack} />

                }
                                </motion.div>
              }
                        </AnimatePresence>
                        
                        {/* Navigation Bar */}
                        {isOn &&
            <div className="absolute bottom-0 left-0 right-0">
                                <NavigationBar
                onBack={handleBack}
                onHome={handleHome}
                onRecent={() => {}} />

                            </div>
            }
                    </div>
                </div>
            </div>
            
            {/* Instructions */}
            <div className="absolute bottom-8 left-1/2 -translate-x-1/2 text-center">
                <p className="text-gray-400 text-sm">

        </p>
            </div>
        </div>);

}