'use client'

import { useEffect, useState } from 'react'
import Link from 'next/link'
import { usePathname, useRouter } from 'next/navigation'
import { useSuperAdminStore } from '@/store/super-admin-store'
import { getAdminPath } from '@/lib/admin-path'
import { hasPermission, ROLE_LABELS, ROLE_COLORS, NAV_PERMISSIONS } from '@/lib/superadmin-permissions'
import type { SuperAdminRole, Permission } from '@/lib/superadmin-permissions'
import {
  Shield, LayoutDashboard, Package, Building2, CreditCard,
  LifeBuoy, LogOut, Menu, X, Settings, Wallet, FileText, Users, UserPlus, Mail
} from 'lucide-react'

const basePath = '/' + getAdminPath()

const allNavigation = [
  { name: 'Dashboard', href: basePath, icon: LayoutDashboard, path: '/' },
  { name: 'Paket Langganan', href: basePath + '/plans', icon: Package, path: '/plans' },
  { name: 'Tenant', href: basePath + '/tenants', icon: Building2, path: '/tenants' },
  { name: 'Langganan', href: basePath + '/subscriptions', icon: CreditCard, path: '/subscriptions' },
  { name: 'Pengaturan Bayar', href: basePath + '/payment-settings', icon: Settings, path: '/payment-settings' },
  { name: 'Pengaturan Email', href: basePath + '/email-settings', icon: Mail, path: '/email-settings' },
  { name: 'Penarikan Dana', href: basePath + '/withdrawals', icon: Wallet, path: '/withdrawals' },
  { name: 'Tiket Dukungan', href: basePath + '/tickets', icon: LifeBuoy, path: '/tickets' },
  { name: 'Halaman CMS', href: basePath + '/cms', icon: FileText, path: '/cms' },
  { name: 'Kelola Staff', href: basePath + '/staff', icon: Users, path: '/staff' },
  { name: 'Afiliasi', href: basePath + '/affiliates', icon: UserPlus, path: '/affiliates' },
]

export default function SuperAdminLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname()
  const router = useRouter()
  const { superAdmin, setSuperAdmin } = useSuperAdminStore()
  const [sidebarOpen, setSidebarOpen] = useState(false)
  const [loading, setLoading] = useState(true)

  const loginPath = basePath + '/login'
  const isLoginPage = pathname === loginPath || pathname === '/superadmin/login'

  useEffect(() => {
    if (isLoginPage) {
      setLoading(false)
      return
    }

    fetch('/api/superadmin/auth/me')
      .then(res => res.json())
      .then(data => {
        if (data.superAdmin) {
          setSuperAdmin(data.superAdmin)
        } else {
          router.push(loginPath)
        }
      })
      .catch(() => router.push(loginPath))
      .finally(() => setLoading(false))
  }, [setSuperAdmin, router, pathname, isLoginPage, loginPath])

  if (isLoginPage) {
    return <>{children}</>
  }

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
      </div>
    )
  }

  const handleLogout = async () => {
    await fetch('/api/superadmin/auth/logout', { method: 'POST' })
    useSuperAdminStore.getState().logout()
  }

  // Filter navigation based on role
  const navigation = allNavigation.filter(item => {
    const requiredPermission = NAV_PERMISSIONS[item.path]
    if (!requiredPermission) return true
    return hasPermission(superAdmin?.role || '', requiredPermission)
  })

  const roleLabel = ROLE_LABELS[(superAdmin?.role || '') as SuperAdminRole] || superAdmin?.role || ''
  const roleColor = ROLE_COLORS[(superAdmin?.role || '') as SuperAdminRole] || 'bg-indigo-100 text-indigo-800'

  return (
    <div className="min-h-screen bg-gray-50">
      {sidebarOpen && (
        <div className="fixed inset-0 z-40 lg:hidden">
          <div className="fixed inset-0 bg-black/50" onClick={() => setSidebarOpen(false)} />
          <div className="fixed inset-y-0 left-0 w-64 bg-white shadow-xl z-50">
            <SidebarContent pathname={pathname} superAdmin={superAdmin} navigation={navigation} onLogout={handleLogout} onClose={() => setSidebarOpen(false)} />
          </div>
        </div>
      )}

      <div className="hidden lg:fixed lg:inset-y-0 lg:flex lg:w-64 lg:flex-col">
        <div className="flex flex-col flex-grow bg-white border-r border-gray-200">
          <SidebarContent pathname={pathname} superAdmin={superAdmin} navigation={navigation} onLogout={handleLogout} />
        </div>
      </div>

      <div className="lg:pl-64">
        <header className="sticky top-0 z-30 bg-white border-b border-gray-200">
          <div className="flex items-center justify-between h-16 px-4 sm:px-6">
            <button onClick={() => setSidebarOpen(true)} className="lg:hidden text-gray-500 hover:text-gray-700">
              <Menu className="w-6 h-6" />
            </button>
            <div className="flex-1" />
            <div className="flex items-center gap-3">
              <span className={`badge text-xs ${roleColor}`}>{roleLabel}</span>
              <div className="flex items-center gap-2">
                <div className="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-700 font-medium text-sm">
                  {superAdmin?.name?.charAt(0).toUpperCase()}
                </div>
                <span className="hidden sm:block text-sm font-medium text-gray-700">{superAdmin?.name}</span>
              </div>
            </div>
          </div>
        </header>
        <main className="p-4 sm:p-6 lg:p-8">{children}</main>
      </div>
    </div>
  )
}

function SidebarContent({ pathname, superAdmin, navigation, onLogout, onClose }: {
  pathname: string
  superAdmin: any
  navigation: typeof allNavigation
  onLogout: () => void
  onClose?: () => void
}) {
  const roleLabel = ROLE_LABELS[(superAdmin?.role || '') as SuperAdminRole] || superAdmin?.role || ''

  return (
    <div className="flex flex-col h-full">
      <div className="flex items-center justify-between h-16 px-4 border-b border-gray-200">
        <Link href={basePath} className="flex items-center gap-2">
          <Shield className="w-8 h-8 text-indigo-600" />
          <span className="text-lg font-bold text-gray-900">RestoMenu Admin</span>
        </Link>
        {onClose && (
          <button onClick={onClose} className="lg:hidden text-gray-400 hover:text-gray-600">
            <X className="w-5 h-5" />
          </button>
        )}
      </div>

      {superAdmin && (
        <div className="px-4 py-3 border-b border-gray-200 bg-gray-50">
          <p className="text-sm font-medium text-gray-900 truncate">{superAdmin.name}</p>
          <p className="text-xs text-gray-500">{roleLabel}</p>
        </div>
      )}

      <nav className="flex-1 min-h-0 px-3 py-4 space-y-1 overflow-y-auto">
        {navigation.map((item) => {
          const isActive = item.href === basePath
            ? pathname === basePath || pathname === '/superadmin'
            : pathname.startsWith(item.href) || pathname.startsWith(item.href.replace(basePath, '/superadmin'))
          return (
            <Link key={item.href} href={item.href}
              className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
                isActive ? 'bg-indigo-50 text-indigo-700' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
              }`}>
              <item.icon className={`w-5 h-5 ${isActive ? 'text-indigo-600' : 'text-gray-400'}`} />
              {item.name}
            </Link>
          )
        })}
      </nav>

      <div className="flex-shrink-0 p-3 border-t border-gray-200">
        <button onClick={onLogout}
          className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-red-600 hover:bg-red-50 w-full transition-colors">
          <LogOut className="w-5 h-5" /> Keluar
        </button>
      </div>
    </div>
  )
}