"use client";

import Link from "next/link";
import { Home, Building, Calendar, Heart, Bell, Settings } from "lucide-react";
import React, { useEffect, useState } from "react";
import { useNotifications } from "@/app/contexts/NotificationsContext";

export default function BottomNav({ isOwner }) {
  const { unreadCount } = useNotifications();
  const [isMounted, setIsMounted] = useState(false);
  const bookingsHref = isOwner ? "/owner/reservations" : "/reservations";

  useEffect(() => {
    setIsMounted(true);
  }, []);

  const items = [
    { href: "/", label: "الرئيسية", icon: Home },
    { href: "/properties", label: "عقاراتنا", icon: Building },
    { href: bookingsHref, label: "الحجوزات", icon: Calendar },
    { href: "/favorites", label: "المفضلة", icon: Heart },
    { href: "/notifications", label: "الإشعارات", icon: Bell, badge: isMounted ? unreadCount : 0 },
    { href: "/settings", label: "الإعدادات", icon: Settings },
  ];

  return (
    <nav className="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50">
      <div className="bg-white/95 backdrop-blur-sm border border-gray-200 rounded-3xl shadow-lg px-2 py-2 flex items-center gap-3">
        {items.map((it) => {
          const Icon = it.icon;
          return (
            <Link
              key={it.href}
              href={it.href}
              className="relative group flex flex-col items-center justify-center px-2.5 py-2 text-gray-700 hover:text-amber-600 transition-colors"
            >
              <div className="relative">
                <Icon className="w-6 h-6" />
                {it.badge > 0 && (
                  <div className="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">
                    {it.badge > 9 ? "9+" : it.badge}
                  </div>
                )}
              </div>
              <div className="absolute -top-10 left-1/2 -translate-x-1/2 bg-gray-800 text-white text-xs rounded-lg px-2.5 py-1.5 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none shadow-lg">
                {it.label}
              </div>
              <div className="mt-1 text-xs text-center" aria-hidden>
                {it.label}
              </div>
            </Link>
          );
        })}
      </div>
    </nav>
  );
}