"use client";

import React from "react";
import Link from "next/link";
import { useCart } from "@/context/CartContext";
import { LogoMark } from "@/components/Logo";
import { ShoppingCart, Home, BookOpen, ListChecks, PackageCheck } from "lucide-react";

interface PageNavProps {
  active?: "catalogue" | "price-list";
}

export const PageNav: React.FC<PageNavProps> = ({ active }) => {
  const { totalCartItemsCount, subtotal, setIsCartOpen, setIsTrackerOpen } = useCart();

  return (
    <header className="sticky top-0 z-40 bg-white border-b border-slate-200 shadow-sm print:hidden">
      <div className="bg-slate-900 text-slate-100 text-xs py-2 px-4">
        <div className="max-w-7xl mx-auto flex justify-between items-center">
          <span className="font-medium text-slate-300 hidden sm:inline">
            Free Courier Delivery on orders over <strong className="text-white">R750</strong> &bull; Nationwide South Africa
          </span>
          <span className="font-medium text-slate-300 sm:hidden">Free SA Courier over R750</span>
          <button
            onClick={() => setIsTrackerOpen(true)}
            className="flex items-center gap-1 hover:text-amber-400 transition-colors font-medium"
          >
            <PackageCheck className="w-3.5 h-3.5 text-amber-400" /> Track Order
          </button>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between gap-4">
        <Link href="/" className="flex items-center gap-2.5 group shrink-0">
          <LogoMark className="w-11 h-11 group-hover:scale-105 transition-transform" />
          <div className="flex flex-col leading-none">
            <span className="font-black text-lg tracking-tight" style={{ color: "#0E9C8E" }}>
              DIVERSE
            </span>
            <span className="font-black tracking-[0.16em] text-[10px]" style={{ color: "#C9B79C" }}>
              STATIONERY
            </span>
          </div>
        </Link>

        <nav className="flex items-center gap-1 sm:gap-2">
          <Link
            href="/"
            className="px-3 py-2 rounded-xl text-xs font-bold text-slate-700 hover:bg-slate-100 transition-colors flex items-center gap-1.5"
          >
            <Home className="w-4 h-4" /> <span className="hidden sm:inline">Shop</span>
          </Link>
          <Link
            href="/catalogue"
            className={`px-3 py-2 rounded-xl text-xs font-bold transition-colors flex items-center gap-1.5 ${
              active === "catalogue" ? "bg-teal-600 text-white" : "text-slate-700 hover:bg-slate-100"
            }`}
          >
            <BookOpen className="w-4 h-4" /> <span className="hidden sm:inline">Catalogue</span>
          </Link>
          <Link
            href="/price-list"
            className={`px-3 py-2 rounded-xl text-xs font-bold transition-colors flex items-center gap-1.5 ${
              active === "price-list" ? "bg-teal-600 text-white" : "text-slate-700 hover:bg-slate-100"
            }`}
          >
            <ListChecks className="w-4 h-4" /> <span className="hidden sm:inline">Price List</span>
          </Link>

          <button
            onClick={() => setIsCartOpen(true)}
            className="ml-1 flex items-center gap-2 bg-blue-950 hover:bg-slate-900 text-white px-3 py-2 rounded-xl transition-all shadow-md"
          >
            <div className="relative">
              <ShoppingCart className="w-5 h-5 text-amber-400" />
              {totalCartItemsCount > 0 && (
                <span className="absolute -top-2 -right-2.5 bg-amber-500 text-slate-950 font-black text-[11px] w-5 h-5 rounded-full flex items-center justify-center border-2 border-blue-950">
                  {totalCartItemsCount}
                </span>
              )}
            </div>
            <span className="hidden sm:flex flex-col text-left leading-none">
              <span className="text-[10px] text-slate-300 font-medium uppercase">Cart</span>
              <span className="text-xs font-bold text-amber-300">R{subtotal.toFixed(2)}</span>
            </span>
          </button>
        </nav>
      </div>
    </header>
  );
};