"use client";

import React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import {
  Building2,
  LayoutDashboard,
  Users,
  CreditCard,
  Settings,
  LogOut,
  Shield,
} from "lucide-react";
import { Button } from "@/components/ui/button";

const adminNav = [
  { href: "/admin", label: "Overview", icon: LayoutDashboard },
  { href: "/admin/users", label: "Users", icon: Users },
];

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();

  return (
    <div className="min-h-screen bg-navy-50/30">
      <header className="bg-navy-900 text-white sticky top-0 z-40">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex h-14 items-center justify-between">
            <div className="flex items-center gap-4">
              <Link href="/admin" className="flex items-center gap-2">
                <div className="flex h-7 w-7 items-center justify-center rounded-md bg-navy-700">
                  <Building2 className="h-4 w-4 text-gold-400" />
                </div>
                <span className="text-base font-bold">
                  CRE<span className="text-gold-400">dispo</span>
                </span>
              </Link>
              <div className="flex items-center gap-1 bg-red-500/20 rounded-full px-2.5 py-0.5">
                <Shield className="h-3 w-3 text-red-300" />
                <span className="text-xs font-medium text-red-300">Admin</span>
              </div>

              <nav className="hidden sm:flex items-center gap-1 ml-6">
                {adminNav.map((item) => (
                  <Link
                    key={item.href}
                    href={item.href}
                    className={cn(
                      "flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
                      pathname === item.href
                        ? "bg-white/10 text-white"
                        : "text-navy-300 hover:text-white hover:bg-white/5"
                    )}
                  >
                    <item.icon className="h-4 w-4" />
                    {item.label}
                  </Link>
                ))}
              </nav>
            </div>

            <Link href="/login">
              <Button variant="ghost" size="sm" className="text-navy-300 hover:text-white hover:bg-white/10">
                <LogOut className="h-4 w-4 mr-1" />
                Logout
              </Button>
            </Link>
          </div>
        </div>
      </header>

      {/* Mobile nav */}
      <div className="sm:hidden bg-navy-800 border-b border-navy-700">
        <div className="flex overflow-x-auto px-4 py-2 gap-2">
          {adminNav.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                "flex items-center gap-1.5 px-4 py-2.5 rounded-md text-xs font-medium whitespace-nowrap transition-colors min-h-[44px]",
                pathname === item.href
                  ? "bg-white/10 text-white"
                  : "text-navy-300 hover:text-white hover:bg-white/5"
              )}
            >
              <item.icon className="h-3.5 w-3.5" />
              {item.label}
            </Link>
          ))}
        </div>
      </div>

      <main className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6 sm:py-8">{children}</main>
    </div>
  );
}
