'use client';

import { useEffect, useState } from 'react';
import { useRouter, usePathname } from 'next/navigation';
import Link from 'next/link';
import { useDealerAuthStore } from '@/store/dealer-auth';
import dealerApi from '@/lib/dealer-axios';
import { LayoutDashboard, FileBarChart2, Store, User, LogOut, Menu, X, Building2 } from 'lucide-react';

const navItems = [
  { href: '/dealer/dashboard', label: 'Dashboard',     icon: LayoutDashboard },
  { href: '/dealer/reports',   label: 'Laporan',       icon: FileBarChart2 },
  { href: '/dealer/outlets',   label: 'Master Outlet', icon: Store },
  { href: '/dealer/profile',   label: 'Profil',        icon: User },
];

export default function DealerLayout({ children }: { children: React.ReactNode }) {
  const router   = useRouter();
  const pathname = usePathname();
  const [ready, setReady]   = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const { dealer, clearAuth } = useDealerAuthStore();

  const publicPaths = ['/dealer/login'];

  useEffect(() => {
    useDealerAuthStore.getState().hydrate();
    const token = useDealerAuthStore.getState().token;
    if (!token && !publicPaths.includes(pathname)) {
      router.replace('/dealer/login');
    } else {
      setReady(true);
    }
  }, []);

  if (!ready) return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
      <div className="text-gray-400 text-sm">Memuat...</div>
    </div>
  );

  if (publicPaths.includes(pathname)) return <>{children}</>;

  const handleLogout = async () => {
    try { await dealerApi.post('/dealer/logout'); } catch {}
    clearAuth();
    router.push('/dealer/login');
  };

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

  return (
    <div className="min-h-screen bg-gray-50">
      <nav className="bg-white shadow-sm sticky top-0 z-40">
        <div className="max-w-5xl mx-auto px-4 py-3 flex items-center justify-between">
          {/* Logo */}
          <div className="flex items-center gap-3">
            <Link href="/dealer/dashboard" className="flex items-center gap-2">
              <div className="w-7 h-7 bg-orange-500 rounded-lg flex items-center justify-center">
                <Building2 className="w-4 h-4 text-white" />
              </div>
              <span className="font-bold text-orange-600 text-sm">Dealer Portal</span>
            </Link>
          </div>

          {/* Desktop menu */}
          <div className="hidden md:flex items-center gap-4">
            <span className="text-sm text-gray-500 truncate max-w-[160px]">{dealer?.dealer_name}</span>
            {navItems.map(({ href, label }) => (
              <Link key={href} href={href}
                className={`text-sm font-medium transition ${isActive(href) ? 'text-orange-600' : 'text-gray-600 hover:text-orange-600'}`}>
                {label}
              </Link>
            ))}
            <button onClick={handleLogout} 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={() => setMenuOpen(!menuOpen)} aria-label="Toggle menu">
            {menuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
          </button>
        </div>

        {/* Mobile dropdown */}
        {menuOpen && (
          <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 truncate">
              {dealer?.dealer_name}
            </div>
            <div className="flex flex-col gap-1">
              {navItems.map(({ href, label, icon: Icon }) => (
                <Link key={href} href={href} onClick={() => setMenuOpen(false)}
                  className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition
                    ${isActive(href) ? 'bg-orange-50 text-orange-600' : 'text-gray-700 hover:bg-gray-50'}`}>
                  <Icon className="w-4 h-4" />
                  {label}
                </Link>
              ))}
              <button onClick={() => { setMenuOpen(false); handleLogout(); }}
                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>

      <main className="max-w-5xl mx-auto px-4 py-8">{children}</main>
    </div>
  );
}