'use client'

import { useEffect, useState } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { cn } from '@/lib/utils'
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import {
  Store,
  ClipboardList,
  ShoppingBag,
  UserCircle,
  Sparkles,
  X,
  ArrowUpRight,
  Info,
  BarChart2,
  Wallet,
  Settings,
} from 'lucide-react'

const menuItems = [
  { name: 'Open Order', href: '/', icon: Store, desc: 'Daftar PO live hari ini' },
  {
    name: 'Jasa Order Saya',
    href: '/my-orders',
    icon: ClipboardList,
    desc: 'Kelola PO buatan Anda',
  },
  { name: 'Pesanan Saya', href: '/my-purchases', icon: ShoppingBag, desc: 'Riwayat titipan Anda' },
  { name: 'Buku Saldo', href: '/balances', icon: Wallet, desc: 'Pantau riwayat saldo' },
  { name: 'Laporan', href: '/reports', icon: BarChart2, desc: 'Ringkasan transaksi' },
]

export function Sidebar({ isOpen, onClose }: { isOpen?: boolean; onClose?: () => void }) {
  const pathname = usePathname()
  const [userName, setUserName] = useState<string>('Pengguna')
  const [userNameAccount, setUserNameAccount] = useState<string>('Pengguna')
  const [userPhoto, setUserPhoto] = useState<string | null>(null)
  const [userRole, setUserRole] = useState<string | null>(null)
  const [userId, setUserId] = useState<string | null>(null)
  const [isLogoutOpen, setIsLogoutOpen] = useState(false)

  useEffect(() => {
    import('@/app/actions').then(({ getSessionUser }) => {
      getSessionUser().then((u) => {
        if (u) {
          setUserId(u.id)
          setUserName(u.name)
          setUserNameAccount(u.username)
          setUserRole(u.role)
          if (u.photo) setUserPhoto(u.photo)
        }
      })
    })
  }, [pathname])

  const handleLogout = async () => {
    const { logoutUser } = await import('@/app/actions')
    await logoutUser()
    window.location.href = '/login'
  }

  // Dynamic Menu Items based on role
  const finalMenuItems = [...menuItems]
  if (userRole === 'superadmin') {
    finalMenuItems.push({
      name: 'Pengaturan',
      href: '/settings/users',
      icon: Settings,
      desc: 'Konfigurasi aplikasi',
    })
  }

  return (
    <>
      {/* Mobile Backdrop */}
      {isOpen && (
        <div
          onClick={onClose}
          className="fixed inset-0 z-40 bg-slate-900/40 backdrop-blur-sm transition-opacity lg:hidden"
        />
      )}

      <aside
        className={cn(
          'fixed top-0 left-0 z-50 flex h-screen w-72 flex-col justify-between border-r border-slate-200/80 bg-white p-5 transition-transform duration-300 ease-in-out lg:sticky dark:border-slate-800 dark:bg-slate-900',
          isOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
        )}
      >
        <div className="space-y-6">
          {/* Brand Header */}
          <div className="flex items-center justify-between px-1">
            <Link href="/" className="group flex items-center gap-3">
              <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-gradient-to-br from-[#1B2CC1] to-[#121E85] text-white shadow-lg shadow-[#1B2CC1]/25 transition-all duration-300 group-hover:scale-105 group-hover:shadow-[#1B2CC1]/40">
                <Sparkles className="h-5 w-5" />
              </div>
              <div className="flex flex-col">
                <div className="flex items-center gap-1.5">
                  <span className="text-xl leading-none font-black tracking-tight text-slate-900 dark:text-white">
                    TitipIn
                  </span>
                  <span className="rounded-md bg-[#1B2CC1]/10 px-1.5 py-0.5 text-[9px] font-extrabold text-[#1B2CC1] uppercase dark:bg-blue-900/40 dark:text-blue-300">
                    Pro
                  </span>
                </div>
                <span className="mt-1 text-[11px] font-medium text-slate-400">
                  Sistem Titip Pesanan
                </span>
              </div>
            </Link>
            {onClose && (
              <button
                onClick={onClose}
                className="rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 lg:hidden"
              >
                <X className="h-5 w-5" />
              </button>
            )}
          </div>

          {/* User Profile Card */}
          <Link
            href="/profile"
            onClick={onClose}
            className="group flex items-center gap-3 rounded-2xl border border-slate-200/90 bg-slate-50/70 p-3 shadow-xs transition-all duration-200 hover:bg-slate-100/80 dark:border-slate-800 dark:bg-slate-800/40 dark:hover:bg-slate-800"
          >
            <div className="relative">
              {userPhoto ? (
                <img
                  src={userPhoto}
                  alt={userName}
                  className="h-10 w-10 rounded-xl object-cover shadow-sm ring-2 ring-white dark:ring-slate-700"
                />
              ) : (
                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-[#1B2CC1]/10 text-sm font-black text-[#1B2CC1] shadow-xs ring-2 ring-white dark:ring-slate-700">
                  {userName.charAt(0).toUpperCase()}
                </div>
              )}
              <span className="absolute -right-0.5 -bottom-0.5 h-3 w-3 rounded-full bg-emerald-500 shadow-xs ring-2 ring-white dark:ring-slate-900" />
            </div>
            <div className="flex min-w-0 flex-1 flex-col">
              <div className="flex items-center justify-between">
                <span className="truncate text-xs font-bold text-slate-800 transition-colors group-hover:text-[#1B2CC1] dark:text-slate-200">
                  {userName}
                </span>
                <ArrowUpRight className="h-3.5 w-3.5 text-slate-400 opacity-0 transition-opacity group-hover:opacity-100" />
              </div>
              <div className="mt-0.5 flex items-center gap-1.5">
                {userRole === 'superadmin' && (
                  <span className="rounded-md bg-purple-100 px-1.5 py-[2px] text-[8px] font-black tracking-wider text-purple-700 uppercase dark:bg-purple-900/30 dark:text-purple-400">
                    Admin
                  </span>
                )}
                <span className="truncate text-[10px] font-medium text-slate-500 dark:text-slate-400">
                  {userNameAccount ? `@${userNameAccount}` : 'Aktif'}
                </span>
              </div>
            </div>
          </Link>

          {/* Main Navigation */}
          <div className="space-y-1.5">
            <div className="px-3 pb-1.5 text-[10px] font-black tracking-widest text-slate-400 uppercase dark:text-slate-500">
              Navigasi Utama
            </div>
            <nav className="space-y-1">
              {finalMenuItems.map((item) => {
                const Icon = item.icon
                const isActive = pathname === item.href
                return (
                  <Link
                    key={item.href}
                    href={item.href}
                    onClick={onClose}
                    className={cn(
                      'group relative flex items-center gap-3 rounded-2xl px-3.5 py-3 text-sm font-semibold transition-all duration-200',
                      isActive
                        ? 'bg-[#1B2CC1] font-bold text-white shadow-md shadow-[#1B2CC1]/25'
                        : 'text-slate-600 hover:bg-slate-100/80 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800/60 dark:hover:text-white'
                    )}
                  >
                    <div
                      className={cn(
                        'flex h-8 w-8 items-center justify-center rounded-xl transition-colors',
                        isActive
                          ? 'bg-white/15 text-white'
                          : 'bg-slate-100 text-slate-500 group-hover:bg-[#1B2CC1]/10 group-hover:text-[#1B2CC1] dark:bg-slate-800'
                      )}
                    >
                      <Icon className="h-4 w-4" />
                    </div>
                    <div className="flex min-w-0 flex-col">
                      <span className="leading-tight">{item.name}</span>
                      <span
                        className={cn(
                          'mt-0.5 truncate text-[10px] font-normal',
                          isActive ? 'text-blue-100' : 'text-slate-400'
                        )}
                      >
                        {item.desc}
                      </span>
                    </div>
                  </Link>
                )
              })}

              {/* Logout Button */}
              {userId && (
                <>
                  <button
                    onClick={() => setIsLogoutOpen(true)}
                    className="group relative flex w-full cursor-pointer items-center gap-3 rounded-2xl px-3.5 py-3 text-sm font-semibold text-rose-600 transition-all duration-200 hover:bg-rose-50 dark:text-rose-400 dark:hover:bg-rose-950/30"
                  >
                    <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-rose-100 text-rose-500 transition-colors group-hover:bg-rose-200 dark:bg-rose-900/40 dark:group-hover:bg-rose-800/60">
                      <X className="h-4 w-4" />
                    </div>
                    <div className="flex min-w-0 flex-col text-left">
                      <span className="leading-tight">Logout</span>
                      <span className="mt-0.5 truncate text-[10px] font-normal text-rose-400/80">
                        Keluar dari akun
                      </span>
                    </div>
                  </button>

                  <Dialog open={isLogoutOpen} onOpenChange={setIsLogoutOpen}>
                    <DialogContent className="overflow-hidden rounded-3xl border-0 p-0 sm:max-w-xs">
                      <div className="px-6 pt-6 pb-2 text-center">
                        <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-rose-100 text-rose-600">
                          <X className="h-6 w-6" />
                        </div>
                        <DialogTitle className="text-xl font-black text-slate-800">
                          Konfirmasi Logout
                        </DialogTitle>
                        <p className="mt-2 text-xs text-slate-500">
                          Apakah Anda yakin ingin keluar dari akun ini?
                        </p>
                      </div>
                      <div className="flex gap-3 bg-slate-50 p-4">
                        <Button
                          type="button"
                          variant="outline"
                          onClick={() => setIsLogoutOpen(false)}
                          className="h-11 flex-1 rounded-xl"
                        >
                          Batal
                        </Button>
                        <Button
                          type="button"
                          onClick={handleLogout}
                          className="h-11 flex-1 cursor-pointer rounded-xl bg-rose-600 font-bold text-white hover:bg-rose-700"
                        >
                          Ya, Logout
                        </Button>
                      </div>
                    </DialogContent>
                  </Dialog>
                </>
              )}
            </nav>
          </div>
        </div>

        {/* Bottom Feature Card */}
        {/* <div className="p-4 rounded-2xl bg-gradient-to-br from-blue-50/80 to-slate-50 dark:from-slate-800/60 dark:to-slate-900 border border-blue-100/80 dark:border-slate-800 space-y-2">
          <div className="flex items-center gap-2 text-xs font-bold text-slate-800 dark:text-slate-200">
            <div className="w-5 h-5 rounded-lg bg-[#1B2CC1]/10 text-[#1B2CC1] flex items-center justify-center">
              <Info className="w-3 h-3" />
            </div>
            <span>Auto Rekap</span>
          </div>
          <p className="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed">
            Gunakan Generator Rekap pada detail PO untuk salin ringkasan belanja otomatis ke chat grup.
          </p>
        </div> */}
        {/* Copyright */}
        <div className="mt-4 border-t border-slate-100 pt-4 text-center dark:border-slate-800">
          <p className="text-[10px] font-medium text-slate-400">
            &copy; {new Date().getFullYear()} TitipIn - Sistem Titip Pesanan
          </p>
        </div>
      </aside>
    </>
  )
}