'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import {
  BarChart3, Building2, MessageSquare, Plus, Wrench, Users,
  Mail, TrendingUp, Layout, Globe, Settings, Home, ChevronRight,
} from 'lucide-react'
import { useSafeSession } from '@/hooks/use-safe-session'

const NAV_ITEMS = [
  { href: '/dashboard',                icon: <BarChart3 className="w-5 h-5" />,     label: 'الإحصائيات'    },
  { href: '/dashboard/properties',     icon: <Building2 className="w-5 h-5" />,    label: 'عقاراتي'       },
  { href: '/messages',                 icon: <MessageSquare className="w-5 h-5" />,label: 'الرسائل'       },
  { href: '/dashboard/contact',        icon: <MessageSquare className="w-5 h-5" />,label: 'الاستفسارات'   },
  { href: '/properties/new',           icon: <Plus className="w-5 h-5" />,          label: 'إضافة عقار'    },
  { href: '/dashboard/craftsmen',      icon: <Wrench className="w-5 h-5" />,        label: 'الحرفيون'      },
  { href: '/dashboard/users',          icon: <Users className="w-5 h-5" />,         label: 'المستخدمين'    },
  { href: '/dashboard/newsletter',     icon: <Mail className="w-5 h-5" />,          label: 'النشرة البريدية' },
  { href: '/dashboard/analytics',      icon: <TrendingUp className="w-5 h-5" />,    label: 'التحليلات'     },
  { href: '/dashboard/vision',         icon: <Layout className="w-5 h-5" />,        label: 'أداة Vision'   },
  { href: '/dashboard/tours',          icon: <Globe className="w-5 h-5" />,         label: 'جولات 360°'    },
  { href: '/dashboard/settings',       icon: <Settings className="w-5 h-5" />,      label: 'الإعدادات'     },
]

export function DashboardSidebar() {
  const pathname = usePathname()
  const { data: session } = useSafeSession()

  const isActive = (href: string) =>
    href === '/dashboard'
      ? pathname === '/dashboard'
      : pathname === href || pathname.startsWith(`${href}/`)

  return (
    <>
      {/* Desktop sidebar */}
      <aside className="fixed top-0 right-0 h-full w-64 bg-blue-900 text-white z-30 hidden lg:flex flex-col">
        <div className="p-6 border-b border-blue-800">
          <Link href="/" className="flex items-center gap-2">
            <Building2 className="w-8 h-8 text-blue-300" />
            <span className="text-xl font-bold">عقار ديزاين</span>
          </Link>
        </div>

        <nav className="flex-1 p-4 space-y-1 overflow-y-auto">
          {NAV_ITEMS.map(item => (
            <Link
              key={item.href}
              href={item.href}
              className={`flex items-center gap-3 px-4 py-3 rounded-xl transition-colors ${
                isActive(item.href)
                  ? 'bg-blue-700 text-white'
                  : 'text-blue-100 hover:bg-blue-800 hover:text-white'
              }`}
            >
              {item.icon}
              <span className="text-sm font-medium">{item.label}</span>
            </Link>
          ))}
          <Link
            href="/dashboard/settings/home"
            className={`flex items-center gap-3 px-4 py-3 rounded-xl transition-colors mt-1 border border-blue-700 ${
              isActive('/dashboard/settings/home')
                ? 'bg-blue-700 text-white'
                : 'text-blue-100 hover:bg-blue-800 hover:text-white'
            }`}
          >
            <Home className="w-5 h-5" />
            <span className="text-sm font-medium">إعدادات الصفحة الرئيسية</span>
          </Link>
        </nav>

        <div className="p-4 border-t border-blue-800">
          <div className="flex items-center gap-3 px-4 py-3 bg-blue-800 rounded-xl">
            <div className="w-9 h-9 rounded-full bg-blue-600 flex items-center justify-center font-bold">
              {session?.user?.name?.[0] || (session?.user?.email?.[0]?.toUpperCase()) || 'م'}
            </div>
            <div className="min-w-0">
              <p className="text-sm font-medium truncate">{session?.user?.name || 'مستخدم'}</p>
              <p className="text-xs text-blue-300">{(session?.user as any)?.role === 'ADMIN' ? 'مدير' : 'مستخدم'}</p>
            </div>
          </div>
        </div>
      </aside>

      {/* Mobile header */}
      <div className="lg:hidden fixed top-0 inset-x-0 z-30 bg-blue-900 text-white">
        <div className="flex items-center justify-between px-4 py-3">
          <Link href="/dashboard" className="flex items-center gap-2">
            <Building2 className="w-6 h-6 text-blue-300" />
            <span className="font-bold">عقار ديزاين</span>
          </Link>
          <Link
            href="/dashboard/settings/home"
            className="flex items-center gap-1 text-sm bg-blue-800 hover:bg-blue-700 px-3 py-1.5 rounded-lg transition-colors"
          >
            إعدادات الرئيسية <ChevronRight className="w-4 h-4" />
          </Link>
        </div>
      </div>
    </>
  )
}