'use client'

import { useState } from 'react'
import { MessageSquare, Lightbulb, Music, Zap, AlertTriangle, Send } from 'lucide-react'

export default function Miscellaneous() {
  const [message, setMessage] = useState('')
  const [hint, setHint] = useState('')
  const [audioId, setAudioId] = useState('')

  // executeMessage
  const executeMessage = () => {
    if (!message.trim()) return
    console.log('Message:', message)
  }

  // executeHint
  const executeHint = () => {
    if (!hint.trim()) return
    console.log('Hint:', hint)
  }

  // playMusic
  const playMusic = () => {
    if (!audioId.trim()) return
    console.log('Playing audio:', audioId)
  }

  return (
    <div className="p-8 min-h-screen" style={{ backgroundColor: '#000000' }}>
      <div className="w-full">
        <div 
          className="relative rounded-2xl border p-8 mb-6 overflow-hidden"
          style={{
            backgroundColor: 'rgba(10, 10, 10, 0.6)',
            borderColor: '#1a1a1a',
            backdropFilter: 'blur(20px)',
          }}
        >
          <div 
            className="absolute inset-0 opacity-30"
            style={{
              background: 'radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.15), transparent 50%), radial-gradient(circle at 80% 50%, rgba(168, 85, 247, 0.15), transparent 50%)',
            }}
          />
          
          <div className="relative z-10">
            <h1 
              className="text-4xl font-bold mb-2"
              style={{ 
                color: '#ffffff',
                textShadow: '0 0 30px rgba(255, 255, 255, 0.1)',
              }}
            >
              Miscellaneous Tools
            </h1>
            <p 
              className="text-sm"
              style={{ color: '#6b7280' }}
            >
              Additional utilities for enhanced workspace control
            </p>
          </div>
        </div>

        <div 
          className="rounded-2xl border backdrop-blur-xl p-5 mb-8 transition-all duration-300"
          style={{
            backgroundColor: 'rgba(217, 119, 6, 0.05)',
            borderColor: 'rgba(217, 119, 6, 0.2)',
            boxShadow: '0 0 20px rgba(217, 119, 6, 0.1)',
          }}
        >
          <div className="flex items-start gap-4">
            <div 
              className="p-2.5 rounded-xl flex-shrink-0"
              style={{
                backgroundColor: 'rgba(217, 119, 6, 0.15)',
                border: '1px solid rgba(217, 119, 6, 0.3)',
              }}
            >
              <AlertTriangle 
                className="h-5 w-5" 
                style={{ color: '#f59e0b' }}
              />
            </div>
            <div className="flex-1">
              <div 
                className="font-semibold mb-1.5 text-base"
                style={{ color: '#fbbf24' }}
              >
                Moderation Notice
              </div>
              <div 
                className="text-sm leading-relaxed"
                style={{ color: '#a0a0a0' }}
              >
                These tools are monitored by our moderation team. Please avoid entering sensitive or personal information.
              </div>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div 
            className="rounded-2xl border backdrop-blur-xl p-6 transition-all duration-300 group hover:scale-[1.02]"
            style={{
              backgroundColor: 'rgba(10, 10, 10, 0.9)',
              borderColor: '#1a1a1a',
              boxShadow: '0 4px 24px rgba(0, 0, 0, 0.4)',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.borderColor = 'rgba(59, 130, 246, 0.3)'
              e.currentTarget.style.boxShadow = '0 8px 32px rgba(59, 130, 246, 0.15)'
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.borderColor = '#1a1a1a'
              e.currentTarget.style.boxShadow = '0 4px 24px rgba(0, 0, 0, 0.4)'
            }}
          >
            <div className="flex items-start gap-4 mb-5">
              <div 
                className="p-3 rounded-xl transition-all duration-300"
                style={{
                  backgroundColor: 'rgba(59, 130, 246, 0.1)',
                  border: '1px solid rgba(59, 130, 246, 0.2)',
                }}
              >
                <MessageSquare 
                  className="h-6 w-6" 
                  style={{ color: '#3b82f6' }}
                />
              </div>
              <div className="flex-1">
                <div 
                  className="font-semibold text-base mb-1"
                  style={{ color: '#ffffff' }}
                >
                  Message Generator
                </div>
                <div 
                  className="text-xs leading-relaxed"
                  style={{ color: '#6b7280' }}
                >
                  Display a message in the workspace for all players
                </div>
              </div>
            </div>

            <div className="space-y-3">
              <input
                type="text"
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter') {
                    executeMessage()
                  }
                }}
                placeholder="Enter your message..."
                className="w-full px-4 py-3 rounded-xl text-sm transition-all duration-200"
                style={{
                  backgroundColor: '#0a0a0a',
                  border: '1px solid #2a2a2a',
                  color: '#ffffff',
                  outline: 'none',
                }}
                onFocus={(e) => {
                  e.currentTarget.style.borderColor = 'rgba(59, 130, 246, 0.4)'
                  e.currentTarget.style.backgroundColor = '#121212'
                  e.currentTarget.style.boxShadow = '0 0 0 3px rgba(59, 130, 246, 0.1)'
                }}
                onBlur={(e) => {
                  e.currentTarget.style.borderColor = '#2a2a2a'
                  e.currentTarget.style.backgroundColor = '#0a0a0a'
                  e.currentTarget.style.boxShadow = 'none'
                }}
              />

              <button
                onClick={executeMessage}
                disabled={!message.trim()}
                className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-sm font-semibold transition-all duration-200"
                style={{
                  backgroundColor: message.trim() ? 'rgba(59, 130, 246, 0.15)' : 'rgba(42, 42, 42, 0.5)',
                  border: message.trim() ? '1px solid rgba(59, 130, 246, 0.4)' : '1px solid #2a2a2a',
                  color: message.trim() ? '#60a5fa' : '#565656',
                  cursor: message.trim() ? 'pointer' : 'not-allowed',
                }}
                onMouseEnter={(e) => {
                  if (message.trim()) {
                    e.currentTarget.style.backgroundColor = 'rgba(59, 130, 246, 0.25)'
                    e.currentTarget.style.borderColor = 'rgba(59, 130, 246, 0.5)'
                    e.currentTarget.style.transform = 'translateY(-1px)'
                  }
                }}
                onMouseLeave={(e) => {
                  if (message.trim()) {
                    e.currentTarget.style.backgroundColor = 'rgba(59, 130, 246, 0.15)'
                    e.currentTarget.style.borderColor = 'rgba(59, 130, 246, 0.4)'
                    e.currentTarget.style.transform = 'translateY(0)'
                  }
                }}
              >
                <Send className="h-4 w-4" />
                Execute Message
              </button>
            </div>
          </div>

          <div 
            className="rounded-2xl border backdrop-blur-xl p-6 transition-all duration-300 group hover:scale-[1.02]"
            style={{
              backgroundColor: 'rgba(10, 10, 10, 0.9)',
              borderColor: '#1a1a1a',
              boxShadow: '0 4px 24px rgba(0, 0, 0, 0.4)',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.borderColor = 'rgba(168, 85, 247, 0.3)'
              e.currentTarget.style.boxShadow = '0 8px 32px rgba(168, 85, 247, 0.15)'
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.borderColor = '#1a1a1a'
              e.currentTarget.style.boxShadow = '0 4px 24px rgba(0, 0, 0, 0.4)'
            }}
          >
            <div className="flex items-start gap-4 mb-5">
              <div 
                className="p-3 rounded-xl transition-all duration-300"
                style={{
                  backgroundColor: 'rgba(168, 85, 247, 0.1)',
                  border: '1px solid rgba(168, 85, 247, 0.2)',
                }}
              >
                <Lightbulb 
                  className="h-6 w-6" 
                  style={{ color: '#a855f7' }}
                />
              </div>
              <div className="flex-1">
                <div 
                  className="font-semibold text-base mb-1"
                  style={{ color: '#ffffff' }}
                >
                  Hint Generator
                </div>
                <div 
                  className="text-xs leading-relaxed"
                  style={{ color: '#6b7280' }}
                >
                  Show a hint at the top of the screen
                </div>
              </div>
            </div>

            <div className="space-y-3">
              <input
                type="text"
                value={hint}
                onChange={(e) => setHint(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter') {
                    executeHint()
                  }
                }}
                placeholder="Enter your hint..."
                className="w-full px-4 py-3 rounded-xl text-sm transition-all duration-200"
                style={{
                  backgroundColor: '#0a0a0a',
                  border: '1px solid #2a2a2a',
                  color: '#ffffff',
                  outline: 'none',
                }}
                onFocus={(e) => {
                  e.currentTarget.style.borderColor = 'rgba(168, 85, 247, 0.4)'
                  e.currentTarget.style.backgroundColor = '#121212'
                  e.currentTarget.style.boxShadow = '0 0 0 3px rgba(168, 85, 247, 0.1)'
                }}
                onBlur={(e) => {
                  e.currentTarget.style.borderColor = '#2a2a2a'
                  e.currentTarget.style.backgroundColor = '#0a0a0a'
                  e.currentTarget.style.boxShadow = 'none'
                }}
              />

              <button
                onClick={executeHint}
                disabled={!hint.trim()}
                className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-sm font-semibold transition-all duration-200"
                style={{
                  backgroundColor: hint.trim() ? 'rgba(168, 85, 247, 0.15)' : 'rgba(42, 42, 42, 0.5)',
                  border: hint.trim() ? '1px solid rgba(168, 85, 247, 0.4)' : '1px solid #2a2a2a',
                  color: hint.trim() ? '#c084fc' : '#565656',
                  cursor: hint.trim() ? 'pointer' : 'not-allowed',
                }}
                onMouseEnter={(e) => {
                  if (hint.trim()) {
                    e.currentTarget.style.backgroundColor = 'rgba(168, 85, 247, 0.25)'
                    e.currentTarget.style.borderColor = 'rgba(168, 85, 247, 0.5)'
                    e.currentTarget.style.transform = 'translateY(-1px)'
                  }
                }}
                onMouseLeave={(e) => {
                  if (hint.trim()) {
                    e.currentTarget.style.backgroundColor = 'rgba(168, 85, 247, 0.15)'
                    e.currentTarget.style.borderColor = 'rgba(168, 85, 247, 0.4)'
                    e.currentTarget.style.transform = 'translateY(0)'
                  }
                }}
              >
                <Zap className="h-4 w-4" />
                Execute Hint
              </button>
            </div>
          </div>

          <div 
            className="rounded-2xl border backdrop-blur-xl p-6 transition-all duration-300 group hover:scale-[1.02]"
            style={{
              backgroundColor: 'rgba(10, 10, 10, 0.9)',
              borderColor: '#1a1a1a',
              boxShadow: '0 4px 24px rgba(0, 0, 0, 0.4)',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.borderColor = 'rgba(236, 72, 153, 0.3)'
              e.currentTarget.style.boxShadow = '0 8px 32px rgba(236, 72, 153, 0.15)'
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.borderColor = '#1a1a1a'
              e.currentTarget.style.boxShadow = '0 4px 24px rgba(0, 0, 0, 0.4)'
            }}
          >
            <div className="flex items-start gap-4 mb-5">
              <div 
                className="p-3 rounded-xl transition-all duration-300"
                style={{
                  backgroundColor: 'rgba(236, 72, 153, 0.1)',
                  border: '1px solid rgba(236, 72, 153, 0.2)',
                }}
              >
                <Music 
                  className="h-6 w-6" 
                  style={{ color: '#ec4899' }}
                />
              </div>
              <div className="flex-1">
                <div 
                  className="font-semibold text-base mb-1"
                  style={{ color: '#ffffff' }}
                >
                  Music Player
                </div>
                <div 
                  className="text-xs leading-relaxed"
                  style={{ color: '#6b7280' }}
                >
                  Play audio by Roblox asset ID
                </div>
              </div>
            </div>

            <div className="space-y-3">
              <input
                type="text"
                value={audioId}
                onChange={(e) => setAudioId(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter') {
                    playMusic()
                  }
                }}
                placeholder="Audio ID..."
                className="w-full px-4 py-3 rounded-xl text-sm transition-all duration-200"
                style={{
                  backgroundColor: '#0a0a0a',
                  border: '1px solid #2a2a2a',
                  color: '#ffffff',
                  outline: 'none',
                }}
                onFocus={(e) => {
                  e.currentTarget.style.borderColor = 'rgba(236, 72, 153, 0.4)'
                  e.currentTarget.style.backgroundColor = '#121212'
                  e.currentTarget.style.boxShadow = '0 0 0 3px rgba(236, 72, 153, 0.1)'
                }}
                onBlur={(e) => {
                  e.currentTarget.style.borderColor = '#2a2a2a'
                  e.currentTarget.style.backgroundColor = '#0a0a0a'
                  e.currentTarget.style.boxShadow = 'none'
                }}
              />

              <button
                onClick={playMusic}
                disabled={!audioId.trim()}
                className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-sm font-semibold transition-all duration-200"
                style={{
                  backgroundColor: audioId.trim() ? 'rgba(236, 72, 153, 0.15)' : 'rgba(42, 42, 42, 0.5)',
                  border: audioId.trim() ? '1px solid rgba(236, 72, 153, 0.4)' : '1px solid #2a2a2a',
                  color: audioId.trim() ? '#f472b6' : '#565656',
                  cursor: audioId.trim() ? 'pointer' : 'not-allowed',
                }}
                onMouseEnter={(e) => {
                  if (audioId.trim()) {
                    e.currentTarget.style.backgroundColor = 'rgba(236, 72, 153, 0.25)'
                    e.currentTarget.style.borderColor = 'rgba(236, 72, 153, 0.5)'
                    e.currentTarget.style.transform = 'translateY(-1px)'
                  }
                }}
                onMouseLeave={(e) => {
                  if (audioId.trim()) {
                    e.currentTarget.style.backgroundColor = 'rgba(236, 72, 153, 0.15)'
                    e.currentTarget.style.borderColor = 'rgba(236, 72, 153, 0.4)'
                    e.currentTarget.style.transform = 'translateY(0)'
                  }
                }}
              >
                <Music className="h-4 w-4" />
                Play Music
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
