app/components/SystemPowerOverlay.tsx

'use client'

import React, { useEffect, useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { Power } from '@phosphor-icons/react'

interface SystemPowerOverlayProps {
    state: 'active' | 'sleep' | 'restart' | 'shutdown'
    onWake: () => void
    onRestartComplete: () => void
}

export function SystemPowerOverlay({ state, onWake, onRestartComplete }: SystemPowerOverlayProps) {
    const [showPowerButton, setShowPowerButton] = useState(false)

    // Handle Sleep Wake
    useEffect(() => {
        if (state === 'sleep') {
            // Small delay to prevent the click that triggered sleep from immediately waking it
            const timer = setTimeout(() => {
                const handleWake = () => onWake()
                window.addEventListener('keydown', handleWake)
                window.addEventListener('mousedown', handleWake)
                window.addEventListener('touchstart', handleWake)
            }, 500)

            return () => {
                clearTimeout(timer)
                const handleWake = () => onWake()
                window.removeEventListener('keydown', handleWake)
                window.removeEventListener('mousedown', handleWake)
                window.removeEventListener('touchstart', handleWake)
            }
        }
    }, [state, onWake])

    // Handle Restart
    useEffect(() => {
        if (state === 'restart') {
            const timer = setTimeout(() => {
                onRestartComplete()
            }, 4000)
            return () => clearTimeout(timer)
        }
    }, [state, onRestartComplete])

    // Handle Shutdown
    useEffect(() => {
        if (state === 'shutdown') {
            setShowPowerButton(false)
            const timer = setTimeout(() => {
                setShowPowerButton(true)
            }, 3000)
            return () => clearTimeout(timer)
        }
    }, [state])

    if (state === 'active') return null

    return (
        <AnimatePresence>
            <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                transition={{ duration: 0.8 }}
                className="fixed inset-0 z-[9999] bg-black flex items-center justify-center text-white cursor-none"
            >
                {state === 'sleep' && (
                    <div className="w-full h-full bg-black" />
                )}

                {state === 'restart' && (
                    <div className="flex flex-col items-center gap-8">
                        <div className="w-12 h-12 border-4 border-white/20 border-t-white rounded-full animate-spin" />
                    </div>
                )}

                {state === 'shutdown' && (
                    <div className="flex flex-col items-center w-full h-full justify-center cursor-auto bg-black">
                        <AnimatePresence mode='wait'>
                            {!showPowerButton ? (
                                <motion.div
                                    key="shutdown-text"
                                    initial={{ opacity: 0, scale: 0.95 }}
                                    animate={{ opacity: 1, scale: 1 }}
                                    exit={{ opacity: 0, scale: 1.05, filter: 'blur(10px)' }}
                                    transition={{ duration: 1 }}
                                    className="text-center"
                                >
                                    <div className="w-24 h-24 mx-auto mb-8 bg-gradient-to-br from-purple-600 to-blue-600 rounded-2xl flex items-center justify-center shadow-[0_0_50px_rgba(124,58,237,0.5)]">
                                        <span className="text-white font-bold text-4xl">R</span>
                                    </div>
                                    <div className="w-8 h-8 border-2 border-white/20 border-t-white rounded-full animate-spin mx-auto" />
                                </motion.div>
                            ) : (
                                <motion.button
                                    key="power-button"
                                    initial={{ opacity: 0, scale: 0.8 }}
                                    animate={{ opacity: 1, scale: 1 }}
                                    whileHover={{ scale: 1.1 }}
                                    whileTap={{ scale: 0.95 }}
                                    onClick={onWake}
                                    className="flex flex-col items-center gap-6 group cursor-pointer"
                                >
                                    <div className="relative">
                                        <div className="absolute inset-0 bg-white/20 rounded-full blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                                        <Power size={80} weight="thin" className="text-white/50 group-hover:text-white transition-colors duration-300 relative z-10" />
                                    </div>
                                    <span className="text-white/30 text-xs tracking-[0.2em] group-hover:text-white/80 transition-colors duration-300">SYSTEM OFF</span>
                                </motion.button>
                            )}
                        </AnimatePresence>
                    </div>
                )}
            </motion.div>
        </AnimatePresence>
    )
}