import React, { useState, useEffect } from 'react';
import { 
  Bell, Key, MapPin, Settings, Play, Bookmark, 
  ArrowUpRight, CheckCircle, Bluetooth, TriangleAlert, 
  Volume2, Mic, ChevronLeft, Pause
} from 'lucide-react';

export default function App() {
  const [currentScreen, setCurrentScreen] = useState('lock');
  const [isPlaying, setIsPlaying] = useState(false);
  const [isSaved, setIsSaved] = useState(false);

  // Helper to reset states when changing screens
  const navigate = (screen) => {
    setIsPlaying(false);
    setCurrentScreen(screen);
  };

  // 1. Lock Screen (Push Notification)
  const LockScreen = () => (
    <div className="flex flex-col h-full w-full bg-gray-900 bg-cover bg-center relative" style={{ backgroundImage: 'url("https://images.unsplash.com/photo-1545459720-aac8509eb02c?q=80&w=1000&auto=format&fit=crop")' }}>
      <div className="absolute inset-0 bg-black bg-opacity-60"></div>
      <div className="relative z-10 flex-1 p-6 flex flex-col pt-20">
        <div className="text-center mb-12">
          <h1 className="text-7xl font-bold text-white mb-2">10:00</h1>
          <p className="text-xl text-gray-200">Sunday, 16 July</p>
        </div>
        
        {/* The Push Notification */}
        <button 
          onClick={() => navigate('noticeDetail')}
          className="bg-gray-900 bg-opacity-95 border-2 border-yellow-400 rounded-2xl p-4 text-left shadow-lg transform transition active:scale-95"
        >
          <div className="flex items-center gap-3 mb-2">
            <TriangleAlert className="text-yellow-400 w-8 h-8" />
            <span className="text-yellow-400 font-bold text-lg">Smart Housing Alert</span>
          </div>
          <p className="text-white text-xl font-bold">⚠️ Building Water Outage</p>
          <p className="text-gray-300 mt-1">Tap to listen to this important notice.</p>
        </button>

        <div className="mt-auto text-center">
          <p className="text-gray-300 font-bold animate-pulse mb-4">Swipe up to unlock</p>
          <button 
            onClick={() => navigate('home')}
            className="w-16 h-2 bg-white rounded-full mx-auto"
          ></button>
        </div>
      </div>
    </div>
  );

  // 2. Home Dashboard
  const HomeScreen = () => (
    <div className="flex flex-col h-full bg-gray-950 p-6">
      <h1 className="text-3xl font-bold text-white mt-12 mb-8 border-b-2 border-gray-800 pb-4">Smart Estate B2</h1>
      
      <div className="grid grid-cols-1 gap-6">
        <button onClick={() => navigate('noticeList')} className="flex items-center gap-6 bg-blue-600 p-6 rounded-3xl active:scale-95 transition">
          <Bell className="w-12 h-12 text-white" />
          <div className="text-left">
            <h2 className="text-2xl font-bold text-white">Voice Notices</h2>
            <p className="text-blue-200">1 New Alert</p>
          </div>
        </button>

        <button onClick={() => navigate('digitalKey')} className="flex items-center gap-6 bg-purple-600 p-6 rounded-3xl active:scale-95 transition">
          <Key className="w-12 h-12 text-white" />
          <div className="text-left">
            <h2 className="text-2xl font-bold text-white">Digital Key</h2>
            <p className="text-purple-200">Hands-free entry</p>
          </div>
        </button>

        <button onClick={() => navigate('voiceMap')} className="flex items-center gap-6 bg-emerald-600 p-6 rounded-3xl active:scale-95 transition">
          <MapPin className="w-12 h-12 text-white" />
          <div className="text-left">
            <h2 className="text-2xl font-bold text-white">Voice Map</h2>
            <p className="text-emerald-200">Navigate the estate</p>
          </div>
        </button>
        
        <button onClick={() => navigate('settings')} className="flex items-center gap-6 bg-gray-800 p-6 rounded-3xl active:scale-95 transition">
          <Settings className="w-12 h-12 text-white" />
          <div className="text-left">
            <h2 className="text-2xl font-bold text-white">Accessibility</h2>
            <p className="text-gray-400">Speech & Display</p>
          </div>
        </button>
      </div>
    </div>
  );

  // 3. Notice List
  const NoticeListScreen = () => (
    <div className="flex flex-col h-full bg-gray-950">
      <div className="p-6 bg-gray-900 flex items-center gap-4 mt-8">
        <button onClick={() => navigate('home')}><ChevronLeft className="w-10 h-10 text-white" /></button>
        <h1 className="text-3xl font-bold text-white">Notices</h1>
      </div>
      
      <div className="p-4 flex flex-col gap-4 overflow-y-auto">
        <button onClick={() => navigate('noticeDetail')} className="bg-gray-800 border-l-8 border-yellow-400 p-6 rounded-xl text-left">
          <div className="flex justify-between items-start mb-2">
            <h2 className="text-2xl font-bold text-white">Water Outage</h2>
            <Volume2 className="text-yellow-400 w-8 h-8 animate-pulse" />
          </div>
          <p className="text-gray-400 text-lg">July 16 • High Priority</p>
        </button>

        <button className="bg-gray-800 border-l-8 border-gray-600 p-6 rounded-xl text-left">
          <h2 className="text-2xl font-bold text-white">Elevator Maintenance</h2>
          <p className="text-gray-400 text-lg">July 12 • Block A</p>
        </button>
      </div>
    </div>
  );

  // 4. Voice Notice Detail (Your task!)
  const NoticeDetailScreen = () => (
    <div className="flex flex-col h-full bg-gray-950">
      <div className="p-6 mt-8 flex items-center justify-between">
        <button onClick={() => navigate('noticeList')}><ChevronLeft className="w-10 h-10 text-white" /></button>
        <TriangleAlert className="text-yellow-400 w-10 h-10" />
      </div>

      <div className="px-8 flex-1 flex flex-col items-center">
        <h1 className="text-4xl font-bold text-center text-white mb-10">Building Water Outage</h1>

        {/* Big Play Button */}
        <button 
          onClick={() => setIsPlaying(!isPlaying)}
          className={`w-48 h-48 rounded-full flex justify-center items-center shadow-2xl transition-all transform active:scale-95 ${isPlaying ? 'bg-blue-600 shadow-blue-500/50' : 'bg-green-500 shadow-green-500/50'}`}
        >
          {isPlaying ? <Pause className="w-24 h-24 text-white" /> : <Play className="w-24 h-24 text-white ml-4" />}
        </button>

        {/* Audio Waveform Simulation */}
        <div className="h-16 flex items-center justify-center gap-2 mt-10 mb-8">
          {[1, 2, 3, 4, 5, 6, 7].map((bar) => (
            <div 
              key={bar} 
              className={`w-3 bg-blue-400 rounded-full transition-all duration-150 ${isPlaying ? 'animate-pulse' : 'h-2'}`}
              style={{ height: isPlaying ? `${Math.random() * 40 + 20}px` : '8px', animationDelay: `${bar * 0.1}s` }}
            ></div>
          ))}
        </div>

        <p className="text-xl text-gray-300 text-center mb-auto leading-relaxed font-medium">
          "Attention residents. Water supply will be suspended on July 16th from 10:00 AM to 2:00 PM for pipe maintenance."
        </p>

        {/* Save for later button */}
        <button 
          onClick={() => setIsSaved(!isSaved)}
          className={`w-full py-6 rounded-2xl flex items-center justify-center gap-4 mb-8 text-2xl font-bold transition ${isSaved ? 'bg-yellow-500 text-gray-900' : 'bg-gray-800 text-white border-2 border-gray-700'}`}
        >
          <Bookmark className={`w-8 h-8 ${isSaved ? 'fill-current' : ''}`} />
          {isSaved ? 'Saved to Bookmarks' : 'Save for Later'}
        </button>
      </div>
    </div>
  );

  // 5. Digital Key (Scanning)
  const DigitalKeyScreen = () => {
    useEffect(() => {
      if (currentScreen === 'digitalKey') {
        const timer = setTimeout(() => navigate('digitalKeySuccess'), 3000);
        return () => clearTimeout(timer);
      }
    }, [currentScreen]);

    return (
      <div className="flex flex-col h-full bg-gray-950 items-center justify-center p-8">
        <div className="relative">
          <div className="absolute inset-0 bg-blue-500 rounded-full blur-3xl opacity-20 animate-pulse"></div>
          <div className="w-64 h-64 bg-gray-900 rounded-full border-4 border-blue-500 flex items-center justify-center relative z-10 shadow-[0_0_50px_rgba(59,130,246,0.5)]">
            <Bluetooth className="w-32 h-32 text-blue-400 animate-bounce" />
          </div>
        </div>
        <h1 className="text-3xl font-bold text-white mt-16 text-center">Approaching Gate...</h1>
        <p className="text-xl text-gray-400 mt-4 text-center">Hands-free unlocking active. Please stand near the scanner.</p>
        <button onClick={() => navigate('home')} className="mt-16 text-gray-500 text-lg underline">Cancel</button>
      </div>
    );
  };

  // 6. Digital Key (Success)
  const DigitalKeySuccessScreen = () => (
    <div className="flex flex-col h-full bg-green-600 items-center justify-center p-8 transition-colors duration-500">
      <CheckCircle className="w-48 h-48 text-white mb-8" />
      <h1 className="text-5xl font-bold text-white text-center">Access Granted</h1>
      <p className="text-2xl text-green-100 mt-6 text-center font-bold">Main Entrance Open</p>
      
      {/* Visual audio cue */}
      <div className="flex items-center gap-2 mt-12">
        <Volume2 className="w-8 h-8 text-white" />
        <span className="text-white text-xl">"Gate Opened"</span>
      </div>

      <button onClick={() => navigate('home')} className="mt-24 bg-white text-green-700 px-12 py-4 rounded-full text-2xl font-bold shadow-lg">
        Done
      </button>
    </div>
  );

  // 7. Voice Map Setup
  const VoiceMapScreen = () => (
    <div className="flex flex-col h-full bg-gray-950">
       <div className="p-6 mt-8 flex items-center gap-4">
        <button onClick={() => navigate('home')}><ChevronLeft className="w-10 h-10 text-white" /></button>
        <h1 className="text-3xl font-bold text-white">Voice Map</h1>
      </div>

      <div className="px-6 mt-4">
        <div className="bg-gray-900 border-2 border-gray-700 rounded-3xl p-8 flex flex-col items-center justify-center gap-6 mb-8">
          <div className="bg-blue-600 p-6 rounded-full animate-pulse">
            <Mic className="w-16 h-16 text-white" />
          </div>
          <p className="text-2xl text-white font-bold text-center">Speak your destination</p>
          <p className="text-gray-400 text-lg">"Take me to the mailbox"</p>
        </div>

        <h2 className="text-xl font-bold text-gray-500 mb-4 uppercase tracking-wider">Quick Routes</h2>
        <div className="flex flex-col gap-4">
          <button onClick={() => navigate('navigationActive')} className="bg-gray-800 p-6 rounded-2xl flex justify-between items-center active:scale-95">
            <span className="text-2xl font-bold text-white">Lobby Mailbox</span>
            <span className="bg-emerald-600 text-white px-3 py-1 rounded text-sm font-bold">Safest</span>
          </button>
        </div>
      </div>
    </div>
  );

  // 8. Active Navigation
  const NavigationActiveScreen = () => (
    <div className="flex flex-col h-full bg-gray-950">
      <div className="p-6 mt-8 flex justify-between items-center border-b-2 border-gray-800 pb-6">
        <div>
          <p className="text-yellow-400 font-bold text-lg mb-1">Navigating to</p>
          <h1 className="text-4xl font-bold text-white">Mailbox</h1>
        </div>
        <div className="flex flex-col items-center">
          <Bluetooth className="w-8 h-8 text-green-500 mb-1" />
          <span className="text-green-500 text-xs font-bold uppercase">Connected</span>
        </div>
      </div>

      <div className="flex-1 flex flex-col items-center justify-center px-8">
        <ArrowUpRight className="w-64 h-64 text-emerald-500 mb-12" />
        
        {/* Audio Waveform */}
        <div className="h-12 flex items-center justify-center gap-2 mb-8">
          {[1, 2, 3, 4, 5].map((bar) => (
            <div key={bar} className="w-4 bg-yellow-400 rounded-full animate-bounce" style={{ height: `${Math.random() * 30 + 10}px`, animationDelay: `${bar * 0.1}s` }}></div>
          ))}
        </div>

        <div className="bg-gray-900 border-2 border-emerald-500 rounded-2xl p-6 w-full text-center shadow-[0_0_30px_rgba(16,185,129,0.2)]">
          <p className="text-3xl font-bold text-white leading-tight">
            The mailbox is at your 3 o'clock position.
          </p>
          <p className="text-emerald-400 font-bold text-2xl mt-4">10 steps remaining.</p>
        </div>
      </div>

      <div className="p-6 bg-gray-900">
        <button onClick={() => navigate('navigationWarning')} className="w-full bg-red-600 py-6 rounded-full text-2xl font-bold text-white active:scale-95 shadow-lg">
          End Navigation
        </button>
      </div>
    </div>
  );

  // 9. Navigation Warning (Off Route)
  const NavigationWarningScreen = () => (
    <div className="flex flex-col h-full bg-yellow-500 p-8 justify-center items-center text-center">
      <TriangleAlert className="w-48 h-48 text-gray-900 mb-8 animate-pulse" />
      <h1 className="text-5xl font-black text-gray-900 uppercase tracking-tight mb-6">Off Route Warning</h1>
      <p className="text-3xl font-bold text-gray-900 mb-12 leading-tight">
        "Ding Ding! You have deviated from the path. Stop walking."
      </p>
      
      <button onClick={() => navigate('navigationActive')} className="w-full bg-gray-900 text-white py-6 rounded-full text-2xl font-bold shadow-2xl mb-4">
        Re-plan Route
      </button>
    </div>
  );

  // Settings Dashboard
  const SettingsScreen = () => (
    <div className="flex flex-col h-full bg-gray-950">
      <div className="p-6 mt-8 flex items-center gap-4 border-b-2 border-gray-800 pb-6">
        <button onClick={() => navigate('home')}><ChevronLeft className="w-10 h-10 text-white" /></button>
        <h1 className="text-3xl font-bold text-white">Accessibility</h1>
      </div>

      <div className="p-6 flex flex-col gap-6">
        <div className="bg-gray-900 p-6 rounded-2xl">
          <h2 className="text-2xl font-bold text-white mb-6">Voice-Over Speed</h2>
          <div className="flex justify-between items-center gap-4">
            <span className="text-white text-xl">Slow</span>
            <input type="range" className="flex-1 accent-blue-500 h-3 bg-gray-700 rounded-lg appearance-none cursor-pointer" defaultValue="50" />
            <span className="text-white text-xl">Fast</span>
          </div>
        </div>

        <div className="bg-gray-900 p-6 rounded-2xl">
          <h2 className="text-2xl font-bold text-white mb-6">High Contrast Mode</h2>
          <div className="flex justify-between items-center">
            <span className="text-xl text-gray-300">Enhance colors</span>
            <div className="w-16 h-8 bg-blue-600 rounded-full flex items-center p-1 justify-end">
              <div className="w-6 h-6 bg-white rounded-full"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-gray-800 flex items-center justify-center p-4 font-sans">
      {/* Mobile Phone Mockup Frame */}
      <div className="w-[414px] h-[896px] bg-black rounded-[3rem] p-2 shadow-2xl relative shrink-0">
        
        {/* Screen Content */}
        <div className="bg-gray-950 w-full h-full rounded-[2.5rem] overflow-hidden relative border-4 border-black">
          {currentScreen === 'lock' && <LockScreen />}
          {currentScreen === 'home' && <HomeScreen />}
          {currentScreen === 'noticeList' && <NoticeListScreen />}
          {currentScreen === 'noticeDetail' && <NoticeDetailScreen />}
          {currentScreen === 'digitalKey' && <DigitalKeyScreen />}
          {currentScreen === 'digitalKeySuccess' && <DigitalKeySuccessScreen />}
          {currentScreen === 'voiceMap' && <VoiceMapScreen />}
          {currentScreen === 'navigationActive' && <NavigationActiveScreen />}
          {currentScreen === 'navigationWarning' && <NavigationWarningScreen />}
          {currentScreen === 'settings' && <SettingsScreen />}

          {/* Persistent Home Indicator */}
          {currentScreen !== 'lock' && (
            <div className="absolute bottom-2 inset-x-0 flex justify-center pb-2 z-50">
              <button onClick={() => navigate('home')} className="w-32 h-1.5 bg-gray-500 hover:bg-white rounded-full transition-colors"></button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}