import React, { useState, useEffect } from 'react'
import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"
import { Progress } from "@/components/ui/progress"
import { ChevronsUpDown, Zap, RefreshCw } from "lucide-react"

export default function Component() {
  const [energy, setEnergy] = useState(50)
  const [timeCoordinate, setTimeCoordinate] = useState(2023)
  const [isActivated, setIsActivated] = useState(false)
  const [stabilityLevel, setStabilityLevel] = useState(100)

  useEffect(() => {
    if (isActivated) {
      const interval = setInterval(() => {
        setStabilityLevel((prev) => Math.max(0, prev - Math.random() * 5))
      }, 1000)
      return () => clearInterval(interval)
    }
  }, [isActivated])

  const handleActivate = () => {
    setIsActivated(!isActivated)
    if (!isActivated) {
      setStabilityLevel(100)
    }
  }

  return (
    <div className="w-full max-w-4xl mx-auto p-6 bg-black rounded-xl shadow-2xl text-white">
      <h2 className="text-3xl font-bold mb-6 text-center text-purple-400">Crystallized Quantum Physics Matrix Time Machine</h2>
      
      <div className="grid grid-cols-2 gap-6 mb-6">
        <div className="space-y-4">
          <label className="block text-sm font-medium">Quantum Energy Level</label>
          <Slider
            value={[energy]}
            onValueChange={(value) => setEnergy(value[0])}
            max={100}
            step={1}
          />
          <div className="text-right">{energy}%</div>
        </div>
        
        <div className="space-y-4">
          <label className="block text-sm font-medium">Time Coordinate</label>
          <div className="flex items-center space-x-2">
            <Button variant="outline" size="icon" onClick={() => setTimeCoordinate(prev => prev - 1)}>
              <ChevronsUpDown className="h-4 w-4" />
            </Button>
            <input
              type="number"
              value={timeCoordinate}
              onChange={(e) => setTimeCoordinate(parseInt(e.target.value))}
              className="flex-1 bg-gray-800 text-white px-3 py-2 rounded-md"
            />
            <Button variant="outline" size="icon" onClick={() => setTimeCoordinate(prev => prev + 1)}>
              <ChevronsUpDown className="h-4 w-4 rotate-180" />
            </Button>
          </div>
        </div>
      </div>
      
      <div className="mb-6">
        <label className="block text-sm font-medium mb-2">Matrix Stability</label>
        <Progress value={stabilityLevel} className="h-2" />
        <div className="text-right mt-1">{stabilityLevel.toFixed(2)}%</div>
      </div>
      
      <div className="flex justify-center space-x-4">
        <Button 
          variant={isActivated ? "destructive" : "default"}
          onClick={handleActivate}
          className="w-40"
        >
          {isActivated ? "Deactivate" : "Activate"}
          <Zap className="ml-2 h-4 w-4" />
        </Button>
        <Button variant="outline" onClick={() => setStabilityLevel(100)} disabled={!isActivated}>
          Restabilize
          <RefreshCw className="ml-2 h-4 w-4" />
        </Button>
      </div>
      
      <div className="mt-6 text-center text-sm text-gray-400">
        Warning: Temporal paradoxes may occur. Use at your own risk.
      </div>
    </div>
  )
}