"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { ClipboardList, LogOut, Shield } from "lucide-react";

interface Props {
  children: React.ReactNode;
  officerName?: string;
  officerRole?: string;
}

const NAV = [
  { href: "/admin/cases", label: "Cases", icon: ClipboardList },
];

export default function AdminShell({ children, officerName, officerRole }: Props) {
  const pathname = usePathname();
  const router = useRouter();

  const logout = async () => {
    await fetch("/api/admin/auth/login", { method: "DELETE" });
    router.replace("/admin/login");
  };

  return (
    <div className="min-h-screen bg-[#f7faf8]">
      <header className="border-b border-[#042718]/8 bg-white">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between gap-4">
          <div className="flex items-center gap-3">
            <div className="w-9 h-9 rounded-lg bg-[#198F38]/10 flex items-center justify-center">
              <Shield className="w-5 h-5 text-[#198F38]" />
            </div>
            <div>
              <p className="font-onest text-sm font-semibold text-[#042718]">AGNET Officer Portal</p>
              <p className="font-inter text-xs text-[#042718]/50">Case review & scoring</p>
            </div>
          </div>
          <div className="flex items-center gap-3">
            {officerName && (
              <span className="hidden sm:inline font-inter text-xs text-[#042718]/60">
                {officerName}
                {officerRole && (
                  <span className="ml-1.5 px-1.5 py-0.5 rounded bg-[#042718]/5 capitalize">{officerRole.replace("_", " ")}</span>
                )}
              </span>
            )}
            <button
              type="button"
              onClick={logout}
              className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-[#042718]/10 text-[#042718]/70 font-inter text-xs hover:bg-[#042718]/5 cursor-pointer"
            >
              <LogOut className="w-3.5 h-3.5" />
              Sign out
            </button>
          </div>
        </div>
        <nav className="max-w-6xl mx-auto px-4 sm:px-6 flex gap-1 pb-3">
          {NAV.map(({ href, label, icon: Icon }) => {
            const active = pathname.startsWith(href);
            return (
              <Link
                key={href}
                href={href}
                className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg font-inter text-sm transition-colors ${
                  active
                    ? "bg-[#198F38]/10 text-[#198F38] font-medium"
                    : "text-[#042718]/60 hover:bg-[#042718]/5"
                }`}
              >
                <Icon className="w-4 h-4" />
                {label}
              </Link>
            );
          })}
        </nav>
      </header>
      <main className="max-w-6xl mx-auto px-4 sm:px-6 py-8">{children}</main>
    </div>
  );
}