import { Outlet, Link, useLocation } from "react-router-dom";
import { useAuth } from "@/contexts/AuthContext";
import { getRoleLabel } from "@/data/dummyData";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Fish, LogOut, ChevronRight } from "lucide-react";

const navItems = [
  { label: "Dashboard", href: "/hatchery/dashboard" },
  { label: "My Applications", href: "/hatchery/applications" },
  { label: "My Certificates", href: "/hatchery/certificates" },
];

export function HatcheryLayout() {
  const { user, logout } = useAuth();
  const location = useLocation();

  const path = location.pathname;

  let breadcrumb: string[] = ["Dashboard"];
  let title = "Dashboard";

  if (path === "/hatchery/applications") {
    breadcrumb = ["Dashboard", "My Applications"];
    title = "My Hatchery Applications";
  } else if (path.startsWith("/hatchery/applications/") && path.endsWith("/nc-response")) {
    breadcrumb = ["Dashboard", "My Applications", "NC Response"];
    title = "NC Response";
  } else if (path.startsWith("/hatchery/applications/")) {
    breadcrumb = ["Dashboard", "My Applications", "Application Details"];
    title = "Application Details";
  } else if (path === "/hatchery/certificates") {
    breadcrumb = ["Dashboard", "My Certificates"];
    title = "My Certificates";
  }

  return (
    <div className="min-h-screen bg-background flex">
      {/* Sidebar for hatchery operator */}
      <aside className="w-56 border-r border-sidebar-border bg-sidebar text-sidebar-foreground flex flex-col">
        <div className="flex items-center gap-2 h-16 px-4 border-b border-sidebar-border">
          <div className="w-8 h-8 rounded-lg bg-sidebar-primary flex items-center justify-center">
            <Fish className="w-5 h-5 text-sidebar-primary-foreground" />
          </div>
          <div>
            <p className="text-sm font-bold">SHAPHARI</p>
            <p className="text-[11px] text-sidebar-foreground/70">Hatchery Operator</p>
          </div>
        </div>

        <nav className="flex-1 overflow-y-auto py-4 px-3">
          <ul className="space-y-1 text-sm">
            {navItems.map((item) => {
              const active = path === item.href || path.startsWith(item.href + "/");
              return (
                <li key={item.href}>
                  <Link
                    to={item.href}
                    className={cn(
                      "flex items-center gap-2 rounded-lg px-3 py-2.5 text-sidebar-foreground/80 transition-colors",
                      active && "bg-sidebar-primary/20 text-sidebar-primary font-medium",
                      !active && "hover:bg-sidebar-accent hover:text-sidebar-foreground",
                    )}
                  >
                    <span className="truncate">{item.label}</span>
                  </Link>
                </li>
              );
            })}
          </ul>
        </nav>

        {user && (
          <div className="border-t border-sidebar-border p-3 flex items-center gap-3">
            <Avatar className="h-9 w-9 flex-shrink-0">
              <AvatarFallback className="bg-sidebar-primary text-sidebar-primary-foreground text-xs">
                {user.name
                  .split(" ")
                  .map((n) => n[0])
                  .join("")}
              </AvatarFallback>
            </Avatar>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium truncate">{user.name}</p>
              <p className="text-[11px] text-sidebar-foreground/60 truncate">
                {getRoleLabel(user.role)}
              </p>
            </div>
            <Button
              variant="ghost"
              size="icon"
              className="h-8 w-8 text-sidebar-foreground/60 hover:text-sidebar-foreground hover:bg-sidebar-accent"
              onClick={logout}
              title="Logout"
            >
              <LogOut className="h-4 w-4" />
            </Button>
          </div>
        )}
      </aside>

      {/* Main content with breadcrumb */}
      <div className="flex-1 flex flex-col">
        <header className="border-b border-border px-4 py-3 flex flex-col gap-1">
          <div className="flex items-center gap-1 text-xs text-muted-foreground">
            {breadcrumb.map((crumb, index) => (
              <span key={crumb} className="flex items-center gap-1">
                {index > 0 && <ChevronRight className="h-3 w-3" />}
                <span>{crumb}</span>
              </span>
            ))}
          </div>
          <h1 className="text-lg font-semibold font-display text-foreground">{title}</h1>
        </header>

        <main className="p-4 md:p-6">
          <Outlet />
        </main>
      </div>
    </div>
  );
}