"use client";

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

const portalNav = [
  { href: "/portal", label: "Dashboard", icon: LayoutDashboard },
  { href: "/portal/deals", label: "Deals", icon: FileText },
  { href: "/portal/preferences", label: "Preferences", icon: Settings },
];

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

  return (
    <div className="min-h-screen bg-navy-50/30">
      {/* Portal Header */}
      <header className="bg-white border-b border-navy-100 sticky top-0 z-40">
        <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
          <div className="flex h-16 items-center justify-between">
            <Link href="/portal" className="flex items-center gap-2">
              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-navy-800">
                <Building2 className="h-4 w-4 text-gold-400" />
              </div>
              <span className="text-lg font-bold text-navy-900">
                CRE<span className="text-gold-500">dispo</span>
              </span>
              <span className="text-xs bg-navy-100 text-navy-600 rounded-full px-2 py-0.5 font-medium">
                Buyer Portal
              </span>
            </Link>

            <nav className="hidden sm:flex items-center gap-1">
              {portalNav.map((item) => (
                <Link
                  key={item.href}
                  href={item.href}
                  className={cn(
                    "flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors",
                    pathname === item.href
                      ? "bg-navy-800 text-white"
                      : "text-navy-600 hover:bg-navy-50"
                  )}
                >
                  <item.icon className="h-4 w-4" />
                  {item.label}
                </Link>
              ))}
            </nav>

            <Link href="/login">
              <Button variant="ghost" size="sm" className="text-navy-500">
                <LogOut className="h-4 w-4 mr-1" />
                Logout
              </Button>
            </Link>
          </div>
        </div>
      </header>

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

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