"use client";

import React, { useEffect, useState } from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import {
  LayoutDashboard,
  Compass,
  Sliders,
  Globe,
  ShieldCheck,
  LogOut,
  User,
} from "lucide-react";

interface SessionUserInfo {
  id: string;
  name: string;
  email: string;
  role: "ADMIN" | "TECHNICIAN";
  title?: string | null;
}

export default function ErpNavbar() {
  const pathname = usePathname();
  const router = useRouter();
  const [user, setUser] = useState<SessionUserInfo | null>(null);

  useEffect(() => {
    fetch("/api/auth/me")
      .then((r) => r.json())
      .then((d) => {
        if (d.user) setUser(d.user);
      })
      .catch(() => {});
  }, []);

  const handleLogout = async () => {
    await fetch("/api/auth/logout", { method: "POST" });
    router.push("/login");
    router.refresh();
  };

  const navItems = [
    {
      href: "/erp",
      label: "ERP Dashboard & Reports",
      icon: LayoutDashboard,
      active: pathname === "/erp",
      adminOnly: false,
    },
    {
      href: "/erp/field-new",
      label: "Field Data & GPS Collector",
      icon: Compass,
      active: pathname === "/erp/field-new",
      adminOnly: false,
    },
    {
      href: "/erp/settings",
      label: "Dropdowns, SKUs & Roles",
      icon: Sliders,
      active: pathname === "/erp/settings",
      adminOnly: true,
    },
  ].filter((item) => !item.adminOnly || user?.role === "ADMIN");

  return (
    <header className="no-print sticky top-0 z-40 bg-hive-950 text-white border-b-2 border-honey-500 shadow-md">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 py-3 flex flex-wrap items-center justify-between gap-4">
        <div className="flex items-center gap-3">
          <Link href="/erp" className="flex items-center gap-2.5">
            <img
              src="/images/logo-icon.png"
              alt="Davally Logo"
              className="w-9 h-9 rounded-lg bg-white p-0.5 object-contain"
            />
            <div>
              <div className="flex items-center gap-2">
                <span className="font-black text-base tracking-tight text-white">
                  DAVALLY <span className="text-honey-400">ERP & GIS</span>
                </span>
                <span className="text-[10px] font-bold uppercase px-2 py-0.5 rounded bg-honey-500/20 text-honey-300 border border-honey-500/30">
                  Secured Portal
                </span>
              </div>
              <div className="text-[11px] text-slate-400">
                Tala, Machakos • Reg: BN-79S6OBMR • Till: 1801420
              </div>
            </div>
          </Link>
        </div>

        <nav className="flex items-center gap-1.5 sm:gap-2 flex-wrap">
          {navItems.map((item) => {
            const Icon = item.icon;
            return (
              <Link
                key={item.href}
                href={item.href}
                className={`inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-xs font-bold transition ${
                  item.active
                    ? "bg-honey-500 text-hive-950 shadow-sm"
                    : "text-slate-300 hover:bg-white/10 hover:text-white"
                }`}
              >
                <Icon className="w-3.5 h-3.5" />
                <span>{item.label}</span>
              </Link>
            );
          })}

          <Link
            href="/"
            className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-semibold text-slate-300 hover:text-honey-400 border border-slate-800 ml-1"
          >
            <Globe className="w-3.5 h-3.5 text-honey-400" />
            <span className="hidden md:inline">Public Website</span>
          </Link>
        </nav>

        <div className="flex items-center gap-2.5">
          {user && (
            <div className="flex items-center gap-2 text-xs text-slate-200 bg-white/5 px-3 py-1.5 rounded-lg border border-white/10">
              {user.role === "ADMIN" ? (
                <ShieldCheck className="w-3.5 h-3.5 text-honey-400 shrink-0" />
              ) : (
                <User className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
              )}
              <span className="font-bold text-white hidden sm:inline">
                {user.name}
              </span>
              <span
                className={`text-[10px] font-black px-1.5 py-0.5 rounded ${
                  user.role === "ADMIN"
                    ? "bg-honey-500 text-hive-950"
                    : "bg-emerald-600 text-white"
                }`}
              >
                {user.role}
              </span>
            </div>
          )}

          <button
            type="button"
            onClick={handleLogout}
            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-rose-500/15 hover:bg-rose-500/25 text-rose-300 border border-rose-500/30 text-xs font-bold transition"
            title="Sign Out"
          >
            <LogOut className="w-3.5 h-3.5" />
            <span>Sign Out</span>
          </button>
        </div>
      </div>
    </header>
  );
}