/**
 * MobileOptimizedLayout Component - Mobile-optimized admin panel layout
 */

import { useState } from 'react'
import { useAccount } from 'wagmi'

interface MobileOptimizedLayoutProps {
  children: React.ReactNode
}

export default function MobileOptimizedLayout({ children }: MobileOptimizedLayoutProps) {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const { address } = useAccount()

  // Detect mobile device
  const isMobile = typeof window !== 'undefined' && window.innerWidth < 768

  if (!isMobile) {
    return <>{children}</>
  }

  return (
    <div className="mobile-layout">
      {/* Mobile Header */}
      <div className="bg-white/10 backdrop-blur-xl border-b border-white/20 sticky top-0 z-50">
        <div className="px-4 py-3 flex items-center justify-between">
          <button
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            className="text-white text-2xl"
          >
            ☰
          </button>
          <h1 className="text-lg font-bold text-white">Admin Panel</h1>
          {address && (
            <div className="text-white/70 text-xs font-mono">
              {address.slice(0, 6)}...{address.slice(-4)}
            </div>
          )}
        </div>
      </div>

      {/* Mobile Menu */}
      {mobileMenuOpen && (
        <div className="fixed inset-0 bg-black/90 z-50 p-4">
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-xl font-bold text-white">Menu</h2>
            <button
              onClick={() => setMobileMenuOpen(false)}
              className="text-white text-2xl"
            >
              ✕
            </button>
          </div>
          {/* Menu items would go here */}
          <div className="text-white/70 text-sm">
            Mobile menu navigation (implement based on AdminPanel tabs)
          </div>
        </div>
      )}

      {/* Content */}
      <div className="p-4">{children}</div>
    </div>
  )
}
