'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useEffect, useState } from 'react'
import { 
  MdDashboard, 
  MdPeople, 
  MdAccountBalanceWallet, 
  MdAttachMoney, 
  MdPayment,
  MdPerson,
  MdHistory
} from 'react-icons/md'
import { useMockWallet } from '@/context/MockWalletContext'

interface SidebarProps {
  isOpen: boolean
  onClose: () => void
}

export default function Sidebar({ isOpen, onClose }: SidebarProps) {
  const pathname = usePathname()
  const { address, disconnectWallet } = useMockWallet()
  const [member, setMember] = useState<{ memberId: string; name: string } | null>(null)

  useEffect(() => {
    // Close sidebar drawer on route change
    onClose()

    // Load session info
    const session = localStorage.getItem('memberSession')
    if (session) {
      try {
        setMember(JSON.parse(session))
      } catch (e) {
        console.error(e)
      }
    }
  }, [pathname]) // refresh when pathname changes

  const navItems = [
    { name: 'Dashboard', path: '/dashboard', icon: <MdDashboard size={20} /> },
    { name: 'My Profile', path: '/profile', icon: <MdPerson size={20} /> },
    { name: 'Network & Team', path: '/network', icon: <MdPeople size={20} /> },
    { name: 'Deposit & Topup', path: '/topup', icon: <MdAccountBalanceWallet size={20} /> },
    { name: 'Swap (Buy / Sell)', path: '/buy-mtc', icon: <MdAttachMoney size={20} /> },
    { name: 'Transaction', path: '/transactions', icon: <MdHistory size={20} /> },
    { name: 'Withdraw & Transfer', path: '/withdrawal', icon: <MdPayment size={20} /> },
    { name: 'Income Reports', path: '/income', icon: <MdAttachMoney size={20} /> },
  ]

  return (
    <aside className={`fixed inset-y-0 left-0 z-50 w-64 bg-slate-950/95 border-r border-violet-950/30 flex flex-col backdrop-blur-2xl transition-transform duration-300 lg:relative lg:translate-x-0 ${
      isOpen ? 'translate-x-0' : '-translate-x-full'
    }`}>
      {/* Brand logo header */}
      <div className="p-6 flex items-center justify-between border-b border-violet-950/30 relative">
        <div className="flex flex-col items-center flex-1">
          <div className="logo-text-animated text-4xl font-black tracking-widest mb-1 select-none">
            MTE7
          </div>
          <h1 className="text-[10px] uppercase font-bold tracking-widest text-slate-400">
            Decentralized Portal
          </h1>
        </div>

        {/* Mobile close button */}
        <button 
          onClick={onClose}
          className="absolute top-4 right-4 text-slate-400 hover:text-white p-1 lg:hidden rounded-lg hover:bg-slate-900 cursor-pointer"
        >
          ✕
        </button>
      </div>

      {/* Wallet info (Primary Web3 Identity) */}
      <div className="p-4 border-b border-violet-950/30 bg-violet-950/10">
        <div className="flex items-center justify-between mb-2">
          <span className="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Web3 Wallet</span>
          <span className="flex items-center gap-1">
            <span className={`w-1.5 h-1.5 rounded-full ${address ? 'bg-emerald-500 animate-pulse' : 'bg-rose-500'}`}></span>
            <span className="text-[9px] uppercase font-bold text-slate-500">{address ? 'Connected' : 'Offline'}</span>
          </span>
        </div>
        <p className="text-xs font-mono text-indigo-400 bg-indigo-950/35 py-2 px-3 rounded-xl border border-violet-500/10 truncate font-semibold">
          {address ? address : 'No Wallet Connected'}
        </p>
      </div>

      {/* Linked Profile info (Secondary Off-chain Identity) */}
      {member && (
        <div className="p-4 border-b border-violet-950/30 bg-indigo-950/5">
          <div className="flex items-center gap-3">
            <div className="w-8 h-8 rounded-full border border-violet-500/25 bg-violet-950/50 flex items-center justify-center overflow-hidden">
              <img 
                src={`https://api.dicebear.com/7.x/initials/svg?seed=${member.name}&backgroundColor=6366f1`} 
                alt="avatar" 
                className="w-full h-full object-cover"
              />
            </div>
            <div className="overflow-hidden">
              <p className="text-xs font-bold text-slate-350 truncate">{member.name}</p>
              <p className="text-[10px] font-mono text-violet-400">ID: {member.memberId}</p>
            </div>
          </div>
        </div>
      )}

      {/* Navigation items */}
      <nav className="flex-1 p-4 space-y-1.5 overflow-y-auto">
        {navItems.map((item) => {
          const isActive = pathname === item.path || pathname.startsWith(`${item.path}/`)
          return (
            <Link 
              key={item.path} 
              href={item.path}
              className={`flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-350 border ${
                isActive 
                  ? 'bg-violet-600/15 text-violet-300 border-violet-500/20 shadow-md shadow-violet-500/5' 
                  : 'text-slate-400 hover:bg-violet-950/20 hover:text-slate-200 border-transparent'
              }`}
            >
              <span className={isActive ? 'text-violet-400' : 'text-slate-400'}>{item.icon}</span>
              <span className="font-medium text-sm">{item.name}</span>
            </Link>
          )
        })}
      </nav>

      {/* Disconnect/Exit */}
      <div className="p-4 border-t border-violet-950/30">
        <button 
          onClick={() => {
            disconnectWallet()
            window.location.href = '/'
          }}
          className="w-full flex items-center justify-center gap-2 px-4 py-2.5 text-xs font-semibold text-rose-400 bg-rose-450/10 hover:bg-rose-500/15 rounded-xl transition-colors border border-rose-500/10 hover:border-rose-500/20 cursor-pointer"
        >
          Disconnect & Exit
        </button>
      </div>
    </aside>
  )
}