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>

  );

}