'use client'

import Link from 'next/link'
import { useSession, signOut } from 'next-auth/react'
import { useState } from 'react'
import { formatRupiah } from '@/lib/utils'

export default function Navbar() {
  const { data: session } = useSession()
  const [menuOpen, setMenuOpen] = useState(false)
  const [dropdownOpen, setDropdownOpen] = useState(false)

  return (
    <nav style={{
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      zIndex: 100,
      background: 'rgba(10, 10, 15, 0.9)',
      backdropFilter: 'blur(20px)',
      borderBottom: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{
        maxWidth: '1280px',
        margin: '0 auto',
        padding: '0 24px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: '64px',
      }}>
        {/* Logo */}
        <Link href="/" style={{ textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '10px' }}>
          <img
  src="/assets/icons/logo.gif" // Pastikan nama file Anda benar
  alt="AmaneNime Logo"
  style={{
    width: 'auto',
    height: '58px', // Sesuaikan tinggi (misalnya antara 56px - 58px agar proporsional di navbar 64px)
    objectFit: 'contain',
    // backgroundColor: '#111118' telah dihapus agar transparansi berfungsi
  }}
  onError={(e) => {
    (e.target as HTMLImageElement).src = "/logo.gif";
    (e.target as HTMLImageElement).onerror = null;
  }}
/>
        </Link>

        {/* Desktop Nav Links */}
        <div className="hidden md:flex items-center gap-1">
          {[
            { href: '/games', label: 'Top Up Game' },
            { href: '/products', label: 'App Premium' },
            { href: '/pterodactyl', label: 'Panel Hosting' },
            { href: '/smm', label: 'SMM Panel' },
            { href: '/otp', label: 'Nomor OTP' },
            { href: '/check-order', label: 'Cek Order' },
          ].map(link => (
            <Link key={link.href} href={link.href} style={{
              padding: '8px 14px',
              borderRadius: '8px',
              fontSize: '14px',
              fontWeight: 500,
              color: '#94a3b8',
              textDecoration: 'none',
              transition: 'all 0.2s',
            }}
              onMouseEnter={e => { (e.target as HTMLElement).style.color = '#f59e0b'; (e.target as HTMLElement).style.background = 'rgba(245,158,11,0.08)' }}
              onMouseLeave={e => { (e.target as HTMLElement).style.color = '#94a3b8'; (e.target as HTMLElement).style.background = 'transparent' }}
            >
              {link.label}
            </Link>
          ))}
        </div>

        {/* Right Side */}
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          {session ? (
            <div style={{ position: 'relative' }}>
              <button
                onClick={() => setDropdownOpen(!dropdownOpen)}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: '10px',
                  background: 'rgba(245,158,11,0.08)',
                  border: '1px solid rgba(245,158,11,0.2)',
                  borderRadius: '10px',
                  padding: '8px 14px',
                  cursor: 'pointer',
                  color: '#f1f5f9',
                }}
              >
                <div style={{
                  width: 28,
                  height: 28,
                  borderRadius: '50%',
                  background: 'linear-gradient(135deg, #f59e0b, #d97706)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: '12px',
                  fontWeight: 700,
                  color: '#000',
                }}>
                  {session.user?.name?.[0]?.toUpperCase() || 'U'}
                </div>
                <div className="hidden md:block">
                  <div style={{ fontSize: '13px', fontWeight: 600 }}>{session.user?.name?.split(' ')[0]}</div>
                  <div style={{ fontSize: '11px', color: '#f59e0b' }}>{formatRupiah(Number((session.user as any)?.balance || 0))}</div>
                </div>
              </button>

              {dropdownOpen && (
                <div style={{
                  position: 'absolute',
                  top: 'calc(100% + 8px)',
                  right: 0,
                  background: '#16161f',
                  border: '1px solid rgba(255,255,255,0.08)',
                  borderRadius: '12px',
                  padding: '8px',
                  minWidth: '180px',
                  boxShadow: '0 20px 60px rgba(0,0,0,0.5)',
                  zIndex: 50,
                }}>
                  {(session.user as any)?.role === 'ADMIN' && (
                    <Link href="/admin" style={{ display: 'block', padding: '10px 12px', borderRadius: '8px', fontSize: '14px', color: '#f59e0b', textDecoration: 'none', fontWeight: 600 }}
                      onClick={() => setDropdownOpen(false)}>
                      ⚙️ Admin Panel
                    </Link>
                  )}
                  <Link href="/dashboard" style={{ display: 'block', padding: '10px 12px', borderRadius: '8px', fontSize: '14px', color: '#94a3b8', textDecoration: 'none' }}
                    onClick={() => setDropdownOpen(false)}>📊 Dashboard</Link>
                  <Link href="/dashboard/orders" style={{ display: 'block', padding: '10px 12px', borderRadius: '8px', fontSize: '14px', color: '#94a3b8', textDecoration: 'none' }}
                    onClick={() => setDropdownOpen(false)}>📦 Pesanan</Link>
                  <Link href="/dashboard/wallet" style={{ display: 'block', padding: '10px 12px', borderRadius: '8px', fontSize: '14px', color: '#94a3b8', textDecoration: 'none' }}
                    onClick={() => setDropdownOpen(false)}>💰 Saldo</Link>
                  <Link href="/dashboard/profile" style={{ display: 'block', padding: '10px 12px', borderRadius: '8px', fontSize: '14px', color: '#94a3b8', textDecoration: 'none' }}
                    onClick={() => setDropdownOpen(false)}>👤 Profil</Link>
                  <hr style={{ border: 'none', borderTop: '1px solid rgba(255,255,255,0.06)', margin: '6px 0' }} />
                  <button
                    onClick={() => { signOut({ callbackUrl: '/' }); setDropdownOpen(false) }}
                    style={{ width: '100%', padding: '10px 12px', borderRadius: '8px', fontSize: '14px', color: '#ef4444', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left' }}
                  >
                    🚪 Logout
                  </button>
                </div>
              )}
            </div>
          ) : (
            <Link href="/auth/login" className="btn btn-primary" style={{ fontSize: '13px', padding: '8px 18px' }}>
              Masuk
            </Link>
          )}

          {/* Mobile Menu Toggle */}
          <button 
            className="md:hidden"
            onClick={() => setMenuOpen(!menuOpen)}
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              width: '36px',
              height: '36px',
              background: 'rgba(255,255,255,0.05)',
              border: '1px solid rgba(255,255,255,0.1)',
              borderRadius: '8px',
              color: '#f1f5f9',
              cursor: 'pointer',
              fontSize: '18px'
            }}
          >
            {menuOpen ? '✕' : '☰'}
          </button>
        </div>
      </div>

      {/* Mobile Nav Menu */}
      {menuOpen && (
        <div className="md:hidden animate-slide-in" style={{
          background: '#0a0a0f',
          borderTop: '1px solid rgba(255,255,255,0.06)',
          borderBottom: '1px solid rgba(255,255,255,0.06)',
          padding: '12px 24px',
          display: 'flex',
          flexDirection: 'column',
          gap: '8px',
          boxShadow: '0 10px 30px rgba(0,0,0,0.5)',
          position: 'absolute',
          top: '64px',
          left: 0,
          right: 0,
          zIndex: 99
        }}>
          {[
            { href: '/games', label: 'Top Up Game', icon: '🎮' },
            { href: '/products', label: 'App Premium', icon: '📱' },
            { href: '/pterodactyl', label: 'Panel Hosting', icon: '☁️' },
            { href: '/smm', label: 'SMM Panel', icon: '🚀' },
            { href: '/otp', label: 'Nomor OTP', icon: '💬' },
            { href: '/check-order', label: 'Cek Order', icon: '🔍' },
          ].map(link => (
            <Link key={link.href} href={link.href} style={{
              display: 'flex',
              alignItems: 'center',
              gap: '12px',
              padding: '12px 14px',
              borderRadius: '10px',
              fontSize: '15px',
              fontWeight: 600,
              color: '#f1f5f9',
              textDecoration: 'none',
              background: 'rgba(255,255,255,0.03)',
              border: '1px solid rgba(255,255,255,0.02)'
            }} onClick={() => setMenuOpen(false)}>
              <span style={{ fontSize: '18px' }}>{link.icon}</span>
              {link.label}
            </Link>
          ))}
        </div>
      )}
    </nav>
  )
}
