import Link from 'next/link';
import Image from 'next/image';
import { Menu, LayoutDashboard, Home, ShoppingCart } from 'lucide-react';
import { useUser, useIsAdmin } from '@/store/auth.store';

interface HeaderProps {
  onMenuClick: () => void;
  pageTitle: string;
}

export function Header({ onMenuClick, pageTitle }: HeaderProps) {
  const user = useUser();
  const isAdmin = useIsAdmin();

  return (
    <header className="sticky top-0 z-30 h-20 bg-white/70 backdrop-blur-xl border-b border-white/50 shadow-sm flex items-center justify-between px-4 lg:px-8">
      {/* Left Area */}
      <div className="flex items-center gap-4">
        <button
          onClick={onMenuClick}
          className="lg:hidden p-2 rounded-xl bg-white/50 border border-white/50 shadow-sm text-gray-500 hover:text-yellow-600 hover:bg-white transition-colors"
        >
          <Menu className="w-5 h-5" />
        </button>
        <div className="hidden sm:flex items-center gap-3">
          <Image
            src="/mascots/salto-happy.avif"
            alt="Salto Mascot"
            className="w-10 h-10 object-contain drop-shadow-sm"
            width={500}
            height={500}
          />
          <div className="w-9 h-9 rounded-xl bg-yellow-50 border border-yellow-200 shadow-sm flex items-center justify-center">
            <LayoutDashboard className="w-4 h-4 text-yellow-600" />
          </div>
          <div>
            <span className="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-0.5">
              {isAdmin ? 'Administrator' : 'User Panel'}
            </span>
            <h2 className="text-sm font-black text-gray-900 uppercase tracking-wider leading-tight">
              {pageTitle}
            </h2>
          </div>
        </div>
      </div>

      {/* Right Area */}
      <div className="flex items-center gap-3 sm:gap-4">
        {/* ── CTA Buttons ── */}
        <div className="flex items-center gap-2">
          {/* Balik ke Beranda */}
          <Link
            href="/"
            title="Kembali ke Beranda"
            className="flex items-center gap-2 px-3 py-2 rounded-xl bg-white/50 border border-white/50 text-gray-600 hover:text-gray-900 hover:bg-white shadow-sm transition-all text-xs font-bold"
          >
            <Home className="w-4 h-4" />
            <span className="hidden md:inline">Beranda</span>
          </Link>

          {!isAdmin && (
            <Link
              href="/products"
              className="flex items-center gap-2 px-3 md:px-4 py-2 rounded-xl bg-[#FFD738] hover:bg-[#FFD738]/90 text-[#1C1D1F] transition-all text-xs font-bold shadow-md shadow-[#FFD738]/20"
            >
              <ShoppingCart className="w-4 h-4" />
              <span className="hidden md:inline">Belanja Sekarang!</span>
            </Link>
          )}
        </div>

        <div className="w-px h-6 bg-gray-200 hidden sm:block mx-1" />

        {/* ── User Profile ── */}
        <div className="flex items-center gap-3">
          <div className="hidden sm:block text-right">
            <p className="text-xs font-bold text-gray-900 tracking-wide">
              {user?.name?.split(' ')[0]}
            </p>
            <p className="text-[10px] text-yellow-600 font-bold uppercase tracking-widest mt-0.5">
              ID: {user?.id?.slice(0, 6) ?? '123'}
            </p>
          </div>
          {user?.avatar_url ? (
            <Image
              src={user.avatar_url}
              alt={user.name ?? ''}
              width={36}
              height={36}
              className="rounded-full object-cover border-2 border-white shadow-sm"
            />
          ) : (
            <div className="w-9 h-9 rounded-full bg-white border border-gray-200 flex items-center justify-center font-black text-gray-500 text-sm shadow-sm">
              {user?.name?.charAt(0).toUpperCase() ?? 'U'}
            </div>
          )}
        </div>
      </div>
    </header>
  );
}