'use client'

import React, { useState } from 'react'

import {
BarChart3,
Music,
QrCode,
Users,
DollarSign,
Settings,
Play,
Pause,
SkipForward,
Search,
Plus,
Download,
Eye,
TrendingUp,
Clock,
Heart,
Palette,
Home,
Volume2,
VolumeX,
ChevronUp,
ChevronDown,
X,
Ban,
AlertTriangle,
Shield,
UserX,
UserCheck
} from 'lucide-react'

const AdminPanel = () => {

const [currentView, setCurrentView] = useState('dashboard')
const [isPlaying, setIsPlaying] = useState(true)
const [currentTheme, setCurrentTheme] = useState('dark')
const [showThemeModal, setShowThemeModal] = useState(false)
const [volume, setVolume] = useState(75)
const [isMuted, setIsMuted] = useState(false)
const [queueList, setQueueList] = useState([
{ id: 1, title: "Hotel California", artist: "Eagles", votes: 18, addedBy:
"Carlos M.", duration: "6:31", status: "active" },
{ id: 2, title: "Sweet Child O' Mine", artist: "Guns N' Roses", votes: 15,
addedBy: "Ana L.", duration: "5:03", status: "active" },
{ id: 3, title: "Stairway to Heaven", artist: "Led Zeppelin", votes: 12,
addedBy: "Luis R.", duration: "8:02", status: "active" },
{ id: 4, title: "Don't Stop Believin'", artist: "Journey", votes: 8, addedBy:
"Sofia P.", duration: "4:11", status: "active" },
{ id: 5, title: "Imagine", artist: "John Lennon", votes: 6, addedBy: "Pedro
K.", duration: "3:03", status: "blocked" }
])

const themes = {
dark: {
name: "Oscuro",
background: "from-slate-900 via-purple-900 to-indigo-900",
primary: "from-indigo-500 to-purple-500",
 accent: "from-purple-600 to-pink-600",
cards: "bg-white/90",
sidebar: "bg-gray-900/95",
textPrimary: "text-white",
emoji: "🌙"
},
light: {
name: "Claro",
background: "from-blue-50 via-indigo-50 to-purple-50",
primary: "from-blue-500 to-indigo-500",
accent: "from-blue-600 to-purple-600",
cards: "bg-white/95",
sidebar: "bg-white/95",
textPrimary: "text-gray-900",
emoji: "☀️"
},
neon: {
name: "Neón",
background: "from-black via-purple-900 to-black",
primary: "from-pink-500 to-cyan-500",
accent: "from-pink-600 to-cyan-600",
cards: "bg-gray-900/90",
sidebar: "bg-black/95",
textPrimary: "text-cyan-400",
emoji: "⚡"
},
nature: {
name: "Naturaleza",
background: "from-green-900 via-emerald-800 to-teal-900",
primary: "from-green-500 to-emerald-500",
accent: "from-green-600 to-emerald-600",
cards: "bg-white/90",
sidebar: "bg-green-900/95",
textPrimary: "text-white",
emoji: "🌿"
},
sunset: {
name: "Sunset",
background: "from-orange-900 via-red-800 to-pink-900",
primary: "from-orange-500 to-red-500",
accent: "from-red-600 to-pink-600",
cards: "bg-white/90",
sidebar: "bg-orange-900/95",
textPrimary: "text-white",
emoji: "🌅"
},
ocean: {
name: "Ocean",
background: "from-blue-900 via-teal-800 to-cyan-900",
primary: "from-blue-500 to-teal-500",
accent: "from-teal-600 to-cyan-600",
cards: "bg-white/90",
sidebar: "bg-blue-900/95",
textPrimary: "text-white",
emoji: "🌊"
}
}

const theme = themes[currentTheme]

 const sidebarItems = [
{ id: 'dashboard', label: 'Dashboard', icon: BarChart3 },
{ id: 'music', label: 'Música', icon: Music },
{ id: 'qr', label: 'Códigos QR', icon: QrCode },
{ id: 'users', label: 'Usuarios', icon: Users },
{ id: 'revenue', label: 'Ingresos', icon: DollarSign },
{ id: 'settings', label: 'Configuración', icon: Settings }
]

const currentSong = {
title: "Bohemian Rhapsody",
artist: "Queen",
duration: "5:55",
currentTime: "2:34"
}

const stats = {
users: 24,
songs: 156,
revenue: 485,
votes: 89
}

const qrCodes = [
{ id: 1, name: "Mesa 1", scans: 45, location: "Entrada" },
{ id: 2, name: "Mesa 2", scans: 32, location: "Ventana" },
{ id: 3, name: "Mesa 3", scans: 28, location: "Terraza" },
{ id: 4, name: "Barra", scans: 67, location: "Bar Principal" }
]

const connectedUsers = [
{ id: 1, name: "María G.", joined: "14:30", votes: 8, status: "activo",
warnings: 0 },
{ id: 2, name: "Carlos M.", joined: "15:15", votes: 5, status: "activo",
warnings: 1 },
{ id: 3, name: "Ana L.", joined: "15:45", votes: 12, status: "activo",
warnings: 0 },
{ id: 4, name: "Luis R.", joined: "16:00", votes: 3, status: "inactivo",
warnings: 0 },
{ id: 5, name: "Pedro K.", joined: "16:30", votes: 2, status: "bloqueado",
warnings: 3 }
]

// Queue Management Functions

const moveQueueItem = (id, direction) => {
const currentIndex = queueList.findIndex(item => item.id === id)
if (
(direction === 'up' && currentIndex === 0) ||
(direction === 'down' && currentIndex === queueList.length - 1)
) {
return
}

const newQueue = [...queueList]

const newIndex = direction === 'up' ? currentIndex - 1 : currentIndex + 1

// Swap items
const temp = newQueue[currentIndex]
 newQueue[currentIndex] = newQueue[newIndex]
newQueue[newIndex] = temp

setQueueList(newQueue)
}

const removeFromQueue = (id) => {

setQueueList(queueList.filter(item => item.id !== id))
}

const blockSong = (id) => {

setQueueList(queueList.map(item =>
item.id === id ? { ...item, status: 'blocked' } : item
))
}

const skipToFront = (id) => {

const song = queueList.find(item => item.id === id)
const remainingQueue = queueList.filter(item => item.id !== id)
setQueueList([song, ...remainingQueue])
}

const handleVolumeChange = (newVolume) => {

setVolume(newVolume)
if (newVolume > 0) {
setIsMuted(false)
}
}

const toggleMute = () => {

setIsMuted(!isMuted)
}

const handleUserAction = (userId, action) => {

// Simulación de acciones de moderación
console.log(`Acción ${action} para usuario ${userId}`)
}

const renderContent = () => {

switch(currentView) {
case 'dashboard':
return (
<div className="space-y-6">
{/* Stats Cards */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div className={`${theme.cards} backdrop-blur-xl rounded-xl shadow-lg
p-6`}>
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-600">Usuarios
Activos</p>
<p className="text-3xl font-bold text-gray-
900">{stats.users}</p>
</div>
<div className={`w-12 h-12 bg-gradient-to-br ${theme.primary}
rounded-xl flex items-center justify-center`}>
<Users className="w-6 h-6 text-white" />
</div>
</div>
 <div className="mt-4">
<div className={`w-full bg-gray-200 rounded-full h-2`}>
<div className={`bg-gradient-to-r ${theme.primary} h-2 rounded-
full`} style={{width: '70%'}}></div>
</div>
</div>
</div>

<div className={`${theme.cards} backdrop-blur-xl rounded-xl shadow-lg

p-6`}>
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-600">Canciones
Hoy</p>
<p className="text-3xl font-bold text-gray-
900">{stats.songs}</p>
</div>
<div className={`w-12 h-12 bg-gradient-to-br ${theme.accent}
rounded-xl flex items-center justify-center`}>
<Music className="w-6 h-6 text-white" />
</div>
</div>
<div className="mt-4">
<div className={`w-full bg-gray-200 rounded-full h-2`}>
<div className={`bg-gradient-to-r ${theme.accent} h-2 rounded-
full`} style={{width: '85%'}}></div>
</div>
</div>
</div>

<div className={`${theme.cards} backdrop-blur-xl rounded-xl shadow-lg

p-6`}>
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-600">Ingresos
($)</p>
<p className="text-3xl font-bold text-gray-900">$
{stats.revenue}</p>
</div>
<div className={`w-12 h-12 bg-gradient-to-br from-green-500 to-
emerald-500 rounded-xl flex items-center justify-center`}>
<DollarSign className="w-6 h-6 text-white" />
</div>
</div>
<div className="mt-4">
<div className={`w-full bg-gray-200 rounded-full h-2`}>
<div className={`bg-gradient-to-r from-green-500 to-emerald-500
h-2 rounded-full`} style={{width: '60%'}}></div>
</div>
</div>
</div>

<div className={`${theme.cards} backdrop-blur-xl rounded-xl shadow-lg

p-6`}>
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-600">Votaciones</p>
<p className="text-3xl font-bold text-gray-
900">{stats.votes}</p>
 </div>
<div className={`w-12 h-12 bg-gradient-to-br from-red-500 to-
pink-500 rounded-xl flex items-center justify-center`}>
<Heart className="w-6 h-6 text-white" />
</div>
</div>
<div className="mt-4">
<div className={`w-full bg-gray-200 rounded-full h-2`}>
<div className={`bg-gradient-to-r from-red-500 to-pink-500 h-2
rounded-full`} style={{width: '45%'}}></div>
</div>
</div>
</div>
</div>

{/* Now Playing with Advanced Controls */}

<div className={`${theme.cards} backdrop-blur-xl rounded-xl shadow-lg
p-6`}>
<h3 className="text-lg font-bold text-gray-900 mb-4">Reproduciendo
Ahora</h3>
<div className="flex items-center space-x-4">
<div className={`w-16 h-16 bg-gradient-to-br ${theme.primary}
rounded-xl flex items-center justify-center`}>
<Music className="w-8 h-8 text-white" />
</div>
<div className="flex-1">
<h4 className="font-bold text-gray-900">{currentSong.title}</h4>
<p className="text-gray-600">{currentSong.artist}</p>
<div className="mt-2 flex items-center space-x-2">
<span className="text-sm text-gray-
500">{currentSong.currentTime}</span>
<div className="flex-1 bg-gray-200 rounded-full h-2">
<div className={`bg-gradient-to-r ${theme.primary} h-2
rounded-full`} style={{width: '40%'}}></div>
</div>
<span className="text-sm text-gray-
500">{currentSong.duration}</span>
</div>
</div>

{/* Volume Control */}

<div className="flex items-center space-x-3">
<button
onClick={toggleMute}
className={`p-2 rounded-lg transition-all ${
isMuted ? 'bg-red-500 text-white' : 'bg-gray-100 text-gray-
600 hover:bg-gray-200'
}`}
>
{isMuted ? <VolumeX className="w-5 h-5" /> : <Volume2
className="w-5 h-5" />}
</button>

<div className="flex items-center space-x-2">

<span className="text-sm text-gray-500 w-8">{isMuted ? 0 :
volume}%</span>
<input
type="range"
min="0"
 max="100"
value={isMuted ? 0 : volume}
onChange={(e) =>
handleVolumeChange(parseInt(e.target.value))}
className="w-20 h-2 bg-gray-200 rounded-lg appearance-none
cursor-pointer"
style={{
background: `linear-gradient(to right, rgb(99, 102, 241)
0%, rgb(99, 102, 241) ${volume}%, rgb(229, 231, 235) ${volume}%, rgb(229, 231, 235)
100%)`
}}
/>
</div>
</div>

<div className="flex space-x-2">

<button
onClick={() => setIsPlaying(!isPlaying)}
className={`bg-gradient-to-r ${theme.primary} text-white p-3
rounded-xl shadow hover:shadow-md transition-all`}
>
{isPlaying ? <Pause className="w-5 h-5" /> : <Play
className="w-5 h-5" />}
</button>
<button className={`bg-gradient-to-r ${theme.accent} text-white
p-3 rounded-xl shadow hover:shadow-md transition-all`}>
<SkipForward className="w-5 h-5" />
</button>
</div>
</div>
</div>

{/* Queue Management */}

<div className={`${theme.cards} backdrop-blur-xl rounded-xl shadow-lg
p-6`}>
<div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-bold text-gray-900">Cola de
Reproducción</h3>
<div className="flex space-x-2">
<button className={`bg-gradient-to-r ${theme.primary} text-white
px-3 py-1 rounded-lg text-sm`}>
{queueList.filter(item => item.status === 'active').length}
Activas
</button>
<button className="bg-red-500 text-white px-3 py-1 rounded-lg
text-sm">
{queueList.filter(item => item.status === 'blocked').length}
Bloqueadas
</button>
</div>
</div>

<div className="space-y-3 max-h-96 overflow-y-auto">

{queueList.map((song, index) => (
<div key={song.id} className={`p-4 rounded-lg border-2
transition-all ${
song.status === 'blocked'
? 'bg-red-50 border-red-200'
: 'bg-gray-50 border-gray-200 hover:border-gray-300'
 }`}>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<div className={`w-8 h-8 rounded-lg flex items-center
justify-center text-white text-sm font-bold ${
song.status === 'blocked' ? 'bg-red-500' : `bg-gradient-
to-r ${theme.primary}`
}`}>
{index + 1}
</div>
<div>
<p className={`font-medium ${song.status === 'blocked' ?
'text-red-900' : 'text-gray-900'}`}>
{song.title}
</p>
<p className={`text-sm ${song.status === 'blocked' ?
'text-red-600' : 'text-gray-600'}`}>
{song.artist} • {song.addedBy} • {song.duration}
</p>
</div>
</div>

<div className="flex items-center space-x-2">

<span className="flex items-center space-x-1 text-red-500
text-sm">
<Heart className="w-4 h-4" />
<span>{song.votes}</span>
</span>

{song.status === 'active' && (

<>
<button
onClick={() => moveQueueItem(song.id, 'up')}
disabled={index === 0}
className="p-1 bg-blue-500 text-white rounded
hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
>
<ChevronUp className="w-4 h-4" />
</button>
<button
onClick={() => moveQueueItem(song.id, 'down')}
disabled={index === queueList.length - 1}
className="p-1 bg-blue-500 text-white rounded
hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
>
<ChevronDown className="w-4 h-4" />
</button>
<button
onClick={() => skipToFront(song.id)}
className="p-1 bg-green-500 text-white rounded
hover:bg-green-600"
title="Mover al frente"
>
<SkipForward className="w-4 h-4" />
</button>
<button
onClick={() => blockSong(song.id)}
className="p-1 bg-yellow-500 text-white rounded
hover:bg-yellow-600"
 title="Bloquear canción"
>
<Ban className="w-4 h-4" />
</button>
</>
)}

<button
onClick={() => removeFromQueue(song.id)}
className="p-1 bg-red-500 text-white rounded hover:bg-
red-600"
title="Eliminar de la cola"
>
<X className="w-4 h-4" />
</button>
</div>
</div>
</div>
))}
</div>
</div>
</div>
)

case 'music':
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<h2 className="text-2xl font-bold text-white">Gestión Musical</h2>
<button className={`bg-gradient-to-r ${theme.primary} text-white px-4
py-2 rounded-xl shadow hover:shadow-md transition-all flex items-center space-x-
2`}>
<Plus className="w-4 h-4" />
<span>Nueva Playlist</span>
</button>
</div>

{/* Search */}

<div className={`${theme.cards} backdrop-blur-xl rounded-xl shadow-lg
p-6`}>
<h3 className="text-lg font-bold text-gray-900 mb-4">Buscar
Música</h3>
<div className="relative">
<Search className="absolute left-3 top-3 w-5 h-5 text-gray-400" />
<input
type="text"
placeholder="Buscar en YouTube, Spotify..."
className="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-
xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
/>
</div>
</div>

{/* Playlists */}

<div className={`${theme.cards} backdrop-blur-xl rounded-xl shadow-lg
p-6`}>
<h3 className="text-lg font-bold text-gray-900 mb-4">Mis
Playlists</h3>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-
4">
{['Rock Clásico', 'Pop Latino', 'Reggaeton'].map((playlist, index)
=> (
<div key={index} className="bg-gray-50 rounded-lg p-4 hover:bg-
gray-100 transition-colors cursor-pointer">
<div className={`w-full h-32 bg-gradient-to-br ${theme.primary}
rounded-lg mb-3 flex items-center justify-center`}>
<Music className="w-8 h-8 text-white" />
</div>
<h4 className="font-bold text-gray-900">{playlist}</h4>
<p className="text-sm text-gray-600">{Math.floor(Math.random()
* 50) + 10} canciones</p>
</div>
))}
</div>
</div>
</div>
)

case 'qr':
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<h2 className="text-2xl font-bold text-white">Códigos QR</h2>
<button className={`bg-gradient-to-r ${theme.primary} text-white px-4
py-2 rounded-xl shadow hover:shadow-md transition-all flex items-center space-x-
2`}>
<Plus className="w-4 h-4" />
<span>Generar QR</span>
</button>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">

{qrCodes.map((qr) => (
<div key={qr.id} className={`${theme.cards} backdrop-blur-xl
rounded-xl shadow-lg p-6`}>
<div className="flex items-center justify-between mb-4">
<div>
<h3 className="text-lg font-bold
text-gray-900">{qr.name}</h3>
<p className="text-gray-600">{qr.location}</p>
</div>
<div className="flex space-x-2">
<button className="text-gray-600 hover:text-indigo-600">
<Eye className="w-5 h-5" />
</button>
<button className="text-gray-600 hover:text-indigo-600">
<Download className="w-5 h-5" />
</button>
</div>
</div>

<div className="bg-white p-4 rounded-lg border-2 border-dashed

border-gray-300 flex items-center justify-center">
<QrCode className="w-24 h-24 text-gray-400" />
</div>

<div className="mt-4 flex items-center justify-between text-sm">

<span className="text-gray-600">Escaneos: {qr.scans}</span>
 <span className="bg-green-100 text-green-800 px-2 py-1 rounded-
full">Activo</span>
</div>
</div>
))}
</div>
</div>
)

case 'users':
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<h2 className="text-2xl font-bold text-white">Usuarios
Conectados</h2>
<div className="flex space-x-2">
<span className="bg-green-500 text-white px-3 py-1 rounded-lg text-
sm">
{connectedUsers.filter(u => u.status === 'activo').length}
Activos
</span>
<span className="bg-red-500 text-white px-3 py-1 rounded-lg text-
sm">
{connectedUsers.filter(u => u.status === 'bloqueado').length}
Bloqueados
</span>
</div>
</div>

<div className={`${theme.cards} backdrop-blur-xl rounded-xl shadow-lg

p-6`}>
<div className="space-y-4">
{connectedUsers.map((user) => (
<div key={user.id} className={`flex items-center justify-between
p-4 rounded-lg border-2 ${
user.status === 'bloqueado'
? 'bg-red-50 border-red-200'
: user.status === 'activo'
? 'bg-green-50 border-green-200'
: 'bg-gray-50 border-gray-200'
}`}>
<div className="flex items-center space-x-3">
<div className={`w-10 h-10 rounded-full flex items-center
justify-center text-white font-bold ${
user.status === 'bloqueado' ? 'bg-red-500' :
user.status === 'activo' ? `bg-gradient-to-r $
{theme.primary}` : 'bg-gray-400'
}`}>
{user.name.charAt(0)}
</div>
<div>
<p className={`font-medium ${
user.status === 'bloqueado' ? 'text-red-900' : 'text-
gray-900'
}`}>{user.name}</p>
<p className="text-sm text-gray-600">
Conectado: {user.joined} • {user.votes} votos
</p>
{user.warnings > 0 && (
 <p className="text-xs text-orange-600 flex items-center
space-x-1">
<AlertTriangle className="w-3 h-3" />
<span>{user.warnings} advertencias</span>
</p>
)}
</div>
</div>

<div className="flex items-center space-x-2">

<span className={`px-2 py-1 rounded-full text-xs ${
user.status === 'activo'
? 'bg-green-100 text-green-800'
: user.status === 'bloqueado'
? 'bg-red-100 text-red-800'
: 'bg-gray-100 text-gray-800'
}`}>
{user.status}
</span>

{user.status === 'activo' && (

<>
<button
onClick={() => handleUserAction(user.id, 'warn')}
className="p-2 bg-yellow-500 text-white rounded
hover:bg-yellow-600"
title="Advertir usuario"
>
<AlertTriangle className="w-4 h-4" />
</button>
<button
onClick={() => handleUserAction(user.id, 'ban')}
className="p-2 bg-red-500 text-white rounded hover:bg-
red-600"
title="Banear usuario"
>
<UserX className="w-4 h-4" />
</button>
</>
)}

{user.status === 'bloqueado' && (

<button
onClick={() => handleUserAction(user.id, 'unban')}
className="p-2 bg-green-500 text-white rounded hover:bg-
green-600"
title="Desbloquear usuario"
>
<UserCheck className="w-4 h-4" />
</button>
)}
</div>
</div>
))}
</div>
</div>
</div>
)
 case 'revenue':
return (
<div className="space-y-6">
<h2 className="text-2xl font-bold text-white">Reportes de Ingresos</h2>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">

<div className={`${theme.cards} backdrop-blur-xl rounded-xl shadow-lg
p-6`}>
<h3 className="text-lg font-bold text-gray-900 mb-2">Hoy</h3>
<p className="text-3xl font-bold text-green-600">$127</p>
<p className="text-sm text-gray-600">23 votaciones</p>
</div>

<div className={`${theme.cards} backdrop-blur-xl rounded-xl shadow-lg

p-6`}>
<h3 className="text-lg font-bold text-gray-900 mb-2">Esta
Semana</h3>
<p className="text-3xl font-bold text-green-600">$485</p>
<p className="text-sm text-gray-600">89 votaciones</p>
</div>

<div className={`${theme.cards} backdrop-blur-xl rounded-xl shadow-lg

p-6`}>
<h3 className="text-lg font-bold text-gray-900 mb-2">Este Mes</h3>
<p className="text-3xl font-bold text-green-600">$1,856</p>
<p className="text-sm text-gray-600">342 votaciones</p>
</div>
</div>

<div className={`${theme.cards} backdrop-blur-xl rounded-xl shadow-lg

p-6`}>
<h3 className="text-lg font-bold text-gray-900 mb-4">Desglose por
Tipo</h3>
<div className="space-y-3">
<div className="flex justify-between items-center">
<span className="text-gray-600">Votaciones ($0.50 c/u)</span>
<span className="font-bold text-gray-900">$315</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-600">Skip Queue ($1.00 c/u)</span>
<span className="font-bold text-gray-900">$127</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-600">Tips Digitales</span>
<span className="font-bold text-gray-900">$43</span>
</div>
<div className="border-t pt-2 flex justify-between items-center
font-bold">
<span className="text-gray-900">Total</span>
<span className="text-green-600">$485</span>
</div>
</div>
</div>

{/* Revenue Analytics Chart */}

<div className={`${theme.cards} backdrop-blur-xl rounded-xl shadow-lg
p-6`}>
<h3 className="text-lg font-bold text-gray-900 mb-4">Tendencia de
Ingresos (Últimos 7 días)</h3>
 <div className="grid grid-cols-7 gap-2 h-40">
{[65, 45, 78, 52, 89, 67, 94].map((height, index) => (
<div key={index} className="flex flex-col items-center">
<div className="flex-1 flex items-end">
<div
className={`w-full bg-gradient-to-t ${theme.primary}
rounded-t`}
style={{ height: `${height}%` }}
></div>
</div>
<span className="text-xs text-gray-500 mt-2">
{['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'][index]}
</span>
</div>
))}
</div>
</div>
</div>
)

case 'settings':
return (
<div className="space-y-6">
<h2 className="text-2xl font-bold text-white">Configuración
Avanzada</h2>

{/* Venue Information */}

<div className={`${theme.cards} backdrop-blur-xl rounded-xl shadow-lg
p-6`}>
<h3 className="text-lg font-bold text-gray-900 mb-4">Información del
Establecimiento</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-
700">Nombre</label>
<input
type="text"
defaultValue="Bar El Rincón"
className="mt-1 block w-full px-3 py-2 border border-gray-300
rounded-lg shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-
500"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-
700">Ubicación</label>
<input
type="text"
defaultValue="Santiago Centro"
className="mt-1 block w-full px-3 py-2 border border-gray-300
rounded-lg shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-
500"
/>
</div>
</div>
</div>

{/* Monetization Settings */}

<div className={`${theme.cards} backdrop-blur-xl rounded-xl shadow-lg
p-6`}>
<h3 className="text-lg font-bold text-gray-900 mb-4">Configuración de
Monetización</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="flex items-center justify-between">
<span className="text-gray-700">Precio por voto</span>
<input
type="number"
defaultValue="0.50"
step="0.25"
className="w-20 px-3 py-2 border border-gray-300 rounded-lg"
/>
</div>
<div className="flex items-center justify-between">
<span className="text-gray-700">Precio Skip Queue</span>
<input
type="number"
defaultValue="1.00"
step="0.25"
className="w-20 px-3 py-2 border border-gray-300 rounded-lg"
/>
</div>
</div>
</div>

{/* Volume Settings */}

<div className={`${theme.cards} backdrop-blur-xl rounded-xl shadow-lg
p-6`}>
<h3 className="text-lg font-bold text-gray-900 mb-4">Configuración de
Audio</h3>
<div className="space-y-4">
<div className="flex items-center justify-between">
<span className="text-gray-700">Volumen Máximo Permitido</span>
<div className="flex items-center space-x-2">
<input
type="range"
min="50"
max="100"
defaultValue="90"
className="w-32"
/>
<span className="text-sm text-gray-500 w-10">90%</span>
</div>
</div>
<div className="flex items-center justify-between">
<span className="text-gray-700">Volumen Mínimo Permitido</span>
<div className="flex items-center space-x-2">
<input
type="range"
min="0"
max="50"
defaultValue="10"
className="w-32"
/>
<span className="text-sm text-gray-500 w-10">10%</span>
</div>
</div>
<div className="flex items-center justify-between">
<span className="text-gray-700">Auto-reducir volumen en horarios
nocturnos</span>
<input
type="checkbox"
defaultChecked
className="w-4 h-4 text-indigo-600 border-gray-300 rounded
focus:ring-indigo-500"
/>
</div>
</div>
</div>

{/* Operating Hours */}

<div className={`${theme.cards} backdrop-blur-xl rounded-xl shadow-lg
p-6`}>
<h3 className="text-lg font-bold text-gray-900 mb-4">Horarios de
Funcionamiento</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700">Hora
de Apertura</label>
<input
type="time"
defaultValue="12:00"
className="mt-1 block w-full px-3 py-2 border border-gray-300
rounded-lg shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-
500"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700">Hora
de Cierre</label>
<input
type="time"
defaultValue="02:00"
className="mt-1 block w-full px-3 py-2 border border-gray-300
rounded-lg shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-
500"
/>
</div>
</div>
</div>

{/* Moderation Settings */}

<div className={`${theme.cards} backdrop-blur-xl rounded-xl shadow-lg
p-6`}>
<h3 className="text-lg font-bold text-gray-900 mb-4">Configuración de
Moderación</h3>
<div className="space-y-4">
<div className="flex items-center justify-between">
<span className="text-gray-700">Auto-moderación de contenido
explícito</span>
<input
type="checkbox"
defaultChecked
className="w-4 h-4 text-indigo-600 border-gray-300 rounded
focus:ring-indigo-500"
/>
</div>
<div className="flex items-center justify-between">
 <span className="text-gray-700">Límite de canciones por usuario
por hora</span>
<input
type="number"
defaultValue="5"
min="1"
max="20"
className="w-20 px-3 py-2 border border-gray-300 rounded-lg"
/>
</div>
<div className="flex items-center justify-between">
<span className="text-gray-700">Duración máxima por canción
(minutos)</span>
<input
type="number"
defaultValue="8"
min="3"
max="15"
className="w-20 px-3 py-2 border border-gray-300 rounded-lg"
/>
</div>
<div className="flex items-center justify-between">
<span className="text-gray-700">Aprobar canciones antes de
agregar a la cola</span>
<input
type="checkbox"
className="w-4 h-4 text-indigo-600 border-gray-300 rounded
focus:ring-indigo-500"
/>
</div>
</div>
</div>

{/* Save Button */}

<div className="flex justify-end">
<button className={`bg-gradient-to-r ${theme.primary} text-white px-6
py-3 rounded-xl shadow hover:shadow-md transition-all font-semibold`}>
Guardar Configuración
</button>
</div>
</div>
)

default:
return <div>Sección en desarrollo...</div>
}
}

return (
<div className={`min-h-screen bg-gradient-to-br ${theme.background}`}>
{/* Theme Modal */}
{showThemeModal && (
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-
center justify-center p-4">
<div className="bg-white rounded-2xl max-w-md w-full max-h-[80vh]
overflow-y-auto">
<div className="p-6">
<div className="flex items-center justify-between mb-6">
<h2 className="text-xl font-bold text-gray-900">Seleccionar
Tema</h2>
<button
onClick={() => setShowThemeModal(false)}
className="text-gray-500 hover:text-gray-700"
>
✕
</button>
</div>

<div className="grid grid-cols-2 gap-4">

{Object.entries(themes).map(([key, themeOption]) => (
<div
key={key}
onClick={() => {
setCurrentTheme(key)
setShowThemeModal(false)
}}
className={`relative border-2 rounded-xl p-4 cursor-pointer
transition-all ${
currentTheme === key ? 'border-indigo-500 bg-indigo-50' :
'border-gray-200 hover:border-gray-300'
}`}
>
<div className="flex flex-col items-center space-y-2">
<div className={`w-16 h-16 rounded-xl bg-gradient-to-br $
{themeOption.background} flex items-center justify-center shadow-lg`}>
<span className="text-2xl">{themeOption.emoji}</span>
</div>
<span className="font-bold text-gray-900 text-
sm">{themeOption.name}</span>
</div>
{currentTheme === key && (
<div className="absolute top-2 right-2 w-5 h-5 bg-indigo-500
rounded-full flex items-center justify-center">
<span className="text-white text-xs">✓</span>
</div>
)}
</div>
))}
</div>
</div>
</div>
</div>
)}

<div className="flex">
{/* Sidebar */}
<div className={`w-64 ${theme.sidebar} backdrop-blur-xl shadow-xl border-r
border-white/10 min-h-screen`}>
<div className="p-6">
<div className="flex items-center space-x-3 mb-8">
<div className={`w-10 h-10 bg-gradient-to-br ${theme.primary}
rounded-xl flex items-center justify-center shadow-lg`}>
<Music className="w-5 h-5 text-white" />
</div>
<div>
<h1 className={`text-lg font-black ${theme.textPrimary}`}>Social
Juke</h1>
<p className={`text-xs ${theme.textPrimary} opacity-70`}>Admin
Panel</p>
</div>
</div>

<nav className="space-y-2">
{sidebarItems.map((item) => {
const Icon = item.icon
return (
<button
key={item.id}
onClick={() => setCurrentView(item.id)}
className={`w-full flex items-center space-x-3 px-4 py-3
rounded-xl font-medium transition-all ${
currentView === item.id
? `bg-gradient-to-r ${theme.primary} text-white shadow-lg`
: `${theme.textPrimary} hover:bg-white/10`
}`}
>
<Icon className="w-5 h-5" />
<span>{item.label}</span>
</button>
)
})}
</nav>
</div>
</div>

{/* Main Content */}

<div className="flex-1">
{/* Header */}
<div className={`${theme.cards} backdrop-blur-xl shadow-sm border-b
border-gray-100`}>
<div className="px-6 py-4 flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-gray-900">
{sidebarItems.find(item => item.id === currentView)?.label ||
'Dashboard'}
</h1>
<p className="text-gray-600">Bar El Rincón - Santiago Centro</p>
</div>

<div className="flex items-center space-x-4">

<button
onClick={() => setShowThemeModal(true)}
className="text-gray-600 hover:text-indigo-600 transition-colors"
>
<div className="w-10 h-10 bg-gray-100 rounded-xl flex items-
center justify-center">
<Palette className="w-5 h-5" />
</div>
</button>

<div className="flex items-center space-x-2">

<div className="w-8 h-8 bg-green-500 rounded-full flex items-
center justify-center">
<span className="text-white text-sm font-bold">A</span>
</div>
<span className="text-gray-900 font-medium">Admin</span>
</div>
 </div>
</div>
</div>

{/* Content */}

<div className="p-6">
{renderContent()}
</div>
</div>
</div>
</div>
)
}

export default AdminPanel