'use client';

import { useState } from 'react';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import { useAuthStore } from '@/store/auth';
import api from '@/lib/axios';
import toast from 'react-hot-toast';
import { Globe, Menu, X, Gift, Star, ClipboardList, User, LogOut } from 'lucide-react';

const navLinks = [
  { href: '/dashboard/claim',   label: 'Klaim',      icon: Gift },
  { href: '/dashboard/rewards', label: 'Reward',     icon: ClipboardList },
  { href: '/dashboard/redeem',  label: 'Tukar Poin', icon: Star },
  { href: '/dashboard/profile', label: 'Profil',     icon: User },
];

export default function UserNavbar() {
  const router   = useRouter();
  const pathname = usePathname();
  const { user, clearAuth } = useAuthStore();
  const [open, setOpen] = useState(false);

  const logout = async () => {
    try { await api.post('/end-user/logout'); } catch {}
    clearAuth();
    toast.success('Berhasil keluar');
    router.push('/login');
  };

  const isActive = (href: string) => pathname === href;

  return (
    <nav className="bg-white shadow-sm sticky top-0 z-40">
      <div className="max-w-4xl mx-auto px-4 py-3 flex items-center justify-between">
        {/* Logo + Go To Website */}
        <div className="flex items-center gap-3">
          <Link href="/dashboard" className="text-xl font-bold text-blue-700">Bonus-MU</Link>
          <Link
            href="/"
            className="hidden sm:flex items-center gap-1 text-xs text-sky-600 hover:text-sky-800 font-medium border border-sky-200 rounded-full px-3 py-1 hover:bg-sky-50 transition"
          >
            <Globe className="w-3 h-3" />
            Go To Website
          </Link>
        </div>

        {/* Desktop menu */}
        <div className="hidden md:flex items-center gap-4">
          <span className="text-sm text-gray-500">Halo, {user?.full_name}</span>
          {navLinks.map(({ href, label }) => (
            <Link
              key={href}
              href={href}
              className={`text-sm font-medium transition ${isActive(href) ? 'text-blue-700' : 'text-gray-600 hover:text-blue-700'}`}
            >
              {label}
            </Link>
          ))}
          <button onClick={logout} className="text-sm text-red-500 hover:text-red-700 font-medium">Keluar</button>
        </div>

        {/* Mobile hamburger */}
        <button
          className="md:hidden p-2 rounded-lg text-gray-600 hover:bg-gray-100 transition"
          onClick={() => setOpen(!open)}
          aria-label="Toggle menu"
        >
          {open ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
        </button>
      </div>

      {/* Mobile dropdown */}
      {open && (
        <div className="md:hidden border-t border-gray-100 bg-white px-4 pb-4">
          <div className="pt-3 pb-2 text-sm text-gray-500 font-medium">
            Halo, {user?.full_name}
          </div>
          <div className="flex flex-col gap-1">
            <Link
              href="/"
              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-sky-600 hover:bg-sky-50 transition"
              onClick={() => setOpen(false)}
            >
              <Globe className="w-4 h-4" />
              Go To Website
            </Link>
            {navLinks.map(({ href, label, icon: Icon }) => (
              <Link
                key={href}
                href={href}
                onClick={() => setOpen(false)}
                className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition
                  ${isActive(href) ? 'bg-blue-50 text-blue-700' : 'text-gray-700 hover:bg-gray-50'}`}
              >
                <Icon className="w-4 h-4" />
                {label}
              </Link>
            ))}
            <button
              onClick={() => { setOpen(false); logout(); }}
              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-red-500 hover:bg-red-50 transition text-left"
            >
              <LogOut className="w-4 h-4" />
              Keluar
            </button>
          </div>
        </div>
      )}
    </nav>
  );
}