'use client';

/**
 * MobileBottomNav Component
 * 
 * Fixed native app-style bottom navigation bar for mobile screens (iOS/Android aesthetic).
 * Gives mobile users immediate 1-tap access to Home, Services, Search, Partner, and Account.
 */

import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Home, Sparkles, Search, Briefcase, User } from 'lucide-react';
import { useAuthStore } from '@/lib/stores/useAuthStore';

interface MobileBottomNavProps {
  locale: string;
}

export function MobileBottomNav({ locale }: MobileBottomNavProps) {
  const pathname = usePathname();
  const { isAuthenticated, openAuthModal } = useAuthStore();

  const isHome = pathname === `/${locale}` || pathname === `/${locale}/`;
  const isSearch = pathname.includes('/search');
  const isPartner = pathname.includes('/partner');

  return (
    <div className="fixed bottom-0 inset-x-0 z-40 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-xl border-t border-slate-200/80 dark:border-zinc-800 px-3 py-1.5 flex items-center justify-around md:hidden shadow-[0_-4px_20px_rgba(0,0,0,0.06)]">
      {/* 1. Home */}
      <Link
        href={`/${locale}`}
        className={`flex flex-col items-center justify-center py-1 px-2.5 rounded-xl transition-colors min-w-[56px] ${
          isHome ? 'text-brand-500 font-bold' : 'text-slate-500 dark:text-zinc-400 hover:text-slate-900 dark:hover:text-white font-medium'
        }`}
      >
        <Home className={`w-5 h-5 mb-0.5 ${isHome ? 'stroke-[2.5]' : 'stroke-2'}`} />
        <span className="text-[10px] tracking-tight">Home</span>
      </Link>

      {/* 2. Services */}
      <Link
        href={`/${locale}/search`}
        className={`flex flex-col items-center justify-center py-1 px-2.5 rounded-xl transition-colors min-w-[56px] ${
          isSearch ? 'text-brand-500 font-bold' : 'text-slate-500 dark:text-zinc-400 hover:text-slate-900 dark:hover:text-white font-medium'
        }`}
      >
        <Sparkles className={`w-5 h-5 mb-0.5 ${isSearch ? 'stroke-[2.5]' : 'stroke-2'}`} />
        <span className="text-[10px] tracking-tight">Services</span>
      </Link>

      {/* 3. Center Quick Action: Book */}
      <Link
        href={`/${locale}/search`}
        className="flex flex-col items-center justify-center -mt-4"
        aria-label="Book a service"
      >
        <div className="w-12 h-12 rounded-full bg-brand-500 text-white flex items-center justify-center shadow-brand hover:bg-brand-600 active:scale-95 transition-transform">
          <Search className="w-5 h-5 stroke-[2.5]" />
        </div>
        <span className="text-[10px] font-bold text-slate-900 dark:text-white mt-0.5">Book</span>
      </Link>

      {/* 4. Partner */}
      <Link
        href={`/${locale}/partner`}
        className={`flex flex-col items-center justify-center py-1 px-2.5 rounded-xl transition-colors min-w-[56px] ${
          isPartner ? 'text-brand-500 font-bold' : 'text-slate-500 dark:text-zinc-400 hover:text-slate-900 dark:hover:text-white font-medium'
        }`}
      >
        <Briefcase className={`w-5 h-5 mb-0.5 ${isPartner ? 'stroke-[2.5]' : 'stroke-2'}`} />
        <span className="text-[10px] tracking-tight">For Pros</span>
      </Link>

      {/* 5. Account */}
      {isAuthenticated ? (
        <Link
          href={`/${locale}/dashboard`}
          className="flex flex-col items-center justify-center py-1 px-2.5 rounded-xl text-slate-500 dark:text-zinc-400 hover:text-slate-900 dark:hover:text-white font-medium transition-colors min-w-[56px]"
        >
          <User className="w-5 h-5 mb-0.5 stroke-2 text-brand-500" />
          <span className="text-[10px] tracking-tight font-bold text-brand-500">Profile</span>
        </Link>
      ) : (
        <button
          type="button"
          onClick={() => openAuthModal('login')}
          className="flex flex-col items-center justify-center py-1 px-2.5 rounded-xl text-slate-500 dark:text-zinc-400 hover:text-slate-900 dark:hover:text-white font-medium transition-colors min-w-[56px] cursor-pointer"
        >
          <User className="w-5 h-5 mb-0.5 stroke-2" />
          <span className="text-[10px] tracking-tight">Log In</span>
        </button>
      )}
    </div>
  );
}