'use client'

import Link from 'next/link'
import { usePathname, useRouter } from 'next/navigation'
import {
  LayoutDashboard,
  User,
  Bookmark,
  Bell,
  LogOut,
  ChevronRight,
  ChevronLeft,
  Car,
} from 'lucide-react'
import { useEffect, useState } from 'react'
import { useMarketplacePreferences } from '@/components/MarketplaceShell'
import { clearRenterSession, loadRenterProfile } from '@/lib/renter'

const NAV_ITEMS = [
  { href: '/renter/dashboard', key: 'dashboard', icon: LayoutDashboard, exact: true },
  { href: '/renter/profile', key: 'profile', icon: User },
  { href: '/renter/saved-companies', key: 'savedCompanies', icon: Bookmark },
  { href: '/renter/notifications', key: 'notifications', icon: Bell },
] as const

const dicts = {
  en: {
    dashboard: 'Dashboard',
    profile: 'Profile',
    savedCompanies: 'Saved companies',
    notifications: 'Notifications',
    signOut: 'Sign out',
    renterPortal: 'Renter Portal',
    rights: 'All rights reserved.',
  },
  fr: {
    dashboard: 'Tableau de bord',
    profile: 'Profil',
    savedCompanies: 'Entreprises sauvegardées',
    notifications: 'Notifications',
    signOut: 'Déconnexion',
    renterPortal: 'Espace client',
    rights: 'Tous droits réservés.',
  },
  ar: {
    dashboard: 'لوحة التحكم',
    profile: 'الملف الشخصي',
    savedCompanies: 'الشركات المحفوظة',
    notifications: 'الإشعارات',
    signOut: 'تسجيل الخروج',
    renterPortal: 'بوابة المستأجر',
    rights: 'جميع الحقوق محفوظة.',
  },
} as const

function computeInitials(name: string): string {
  const parts = name.trim().split(/\s+/).filter(Boolean)
  if (parts.length === 0) return 'R'
  if (parts.length === 1) return parts[0].slice(0, 1).toUpperCase()
  return `${parts[0].slice(0, 1)}${parts[1].slice(0, 1)}`.toUpperCase()
}

export default function RenterShell({ children }: { children: React.ReactNode }) {
  const pathname = usePathname()
  const router = useRouter()
  const { language } = useMarketplacePreferences()
  const dict = dicts[language]
  const isRtl = language === 'ar'
  const [open, setOpen] = useState(false)
  const [userInitials, setUserInitials] = useState('R')
  const [userName, setUserName] = useState<string | null>(null)
  const [userEmail, setUserEmail] = useState<string | null>(null)

  useEffect(() => {
    loadRenterProfile()
      .then((profile) => {
        const fullName = `${profile.firstName ?? ''} ${profile.lastName ?? ''}`.trim()
        setUserName(fullName || profile.email.split('@')[0])
        setUserEmail(profile.email)
        setUserInitials(computeInitials(fullName || profile.email))
      })
      .catch(() => {})
  }, [])

  useEffect(() => {
    setOpen(false)
  }, [pathname])

  function signOut() {
    clearRenterSession()
    router.push('/')
  }

  const isActive = (item: (typeof NAV_ITEMS)[number]) => {
    if ('exact' in item && item.exact) return pathname === item.href
    return pathname.startsWith(item.href)
  }

  const activeNav = NAV_ITEMS.find((item) => isActive(item))
  const pageTitle = activeNav ? (dict[activeNav.key as keyof typeof dict] as string) : dict.dashboard

  return (
    <div className="site-page flex min-h-screen">
      {open && (
        <div
          className="fixed inset-0 z-30 bg-blue-950/50 lg:hidden"
          onClick={() => setOpen(false)}
        />
      )}

      {!open && (
        <button
          onClick={() => setOpen(true)}
          aria-label="Open sidebar"
          className={[
            'fixed top-1/2 z-50 -translate-y-1/2 flex items-center justify-center w-6 h-14 bg-blue-950 text-white shadow-lg lg:hidden',
            isRtl ? 'right-0 rounded-l-lg' : 'left-0 rounded-r-lg',
          ].join(' ')}
        >
          {isRtl ? <ChevronLeft className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />}
        </button>
      )}

      <aside
        className={[
          'fixed inset-y-0 z-40 flex w-64 flex-col bg-blue-950 transition-transform duration-300',
          isRtl ? 'right-0' : 'left-0',
          'lg:translate-x-0',
          open ? 'translate-x-0' : isRtl ? 'translate-x-full' : '-translate-x-full',
        ].join(' ')}
      >
        <div className="flex items-center gap-3 border-b border-blue-900/50 px-6 py-5">
          <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-orange-500 overflow-hidden">
            <Car className="h-4 w-4 text-white" />
          </div>
          <span className="truncate text-sm font-bold tracking-wide text-white">
            {dict.renterPortal}
          </span>
        </div>

        <nav className="flex-1 space-y-0.5 overflow-y-auto px-3 py-4">
          {NAV_ITEMS.map((item) => {
            const Icon = item.icon
            const active = isActive(item)
            return (
              <Link
                key={item.href}
                href={item.href}
                className={[
                  'flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors',
                  active
                    ? 'bg-orange-500 text-white'
                    : 'text-slate-400 hover:bg-blue-900/40 hover:text-white',
                ].join(' ')}
              >
                <Icon className="h-4 w-4 flex-shrink-0" />
                {dict[item.key as keyof typeof dict] as string}
              </Link>
            )
          })}
        </nav>

        <div className="border-t border-stone-800 px-3 py-4">
          <div className="flex items-center gap-3 rounded-lg px-3 py-2">
            <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-orange-500 text-xs font-semibold text-white">
              {userInitials}
            </div>
            <div className="min-w-0 flex-1">
              {userName && (
                <p className="truncate text-sm font-medium text-white">{userName}</p>
              )}
              {userEmail && (
                <p className="truncate text-xs text-stone-400">{userEmail}</p>
              )}
            </div>
          </div>
          <button
            onClick={signOut}
            className="mt-2 flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-400 transition-colors hover:bg-blue-900/40 hover:text-white"
          >
            <LogOut className="h-4 w-4" />
            {dict.signOut}
          </button>
        </div>

        <button
          onClick={() => setOpen(false)}
          aria-label="Close sidebar"
          className={[
            'absolute top-1/2 z-10 -translate-y-1/2 flex items-center justify-center w-5 h-14 bg-blue-950 text-white shadow-lg lg:hidden',
            isRtl ? '-left-5 rounded-l-lg' : '-right-5 rounded-r-lg',
          ].join(' ')}
        >
          {isRtl ? <ChevronRight className="h-3.5 w-3.5" /> : <ChevronLeft className="h-3.5 w-3.5" />}
        </button>
      </aside>

      <div
        className={[
          'flex min-h-screen min-w-0 flex-1 flex-col',
          isRtl ? 'lg:mr-64' : 'lg:ml-64',
        ].join(' ')}
      >
        <header className="flex h-16 items-center justify-between border-b border-stone-200/80 bg-white/80 px-6 backdrop-blur transition-colors dark:border-blue-900 dark:bg-blue-950/70">
          <h1 className="text-lg font-semibold text-stone-900 dark:text-stone-100">{pageTitle}</h1>
          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-orange-500 text-xs font-semibold text-white">
            {userInitials}
          </div>
        </header>

        <main className="flex-1 overflow-y-auto py-8">
          {children}
        </main>

        <footer className="border-t border-stone-200/80 bg-white/80 px-6 py-4 backdrop-blur transition-colors dark:border-blue-900 dark:bg-blue-950/70">
          <p className="text-center text-xs text-stone-400 dark:text-stone-500">
            &copy; {new Date().getFullYear()} RentalDriveGo. {dict.rights}
          </p>
        </footer>
      </div>
    </div>
  )
}