"use client";

import * as React from "react";
import { Menu, Moon, Sun, LogOut, PanelLeftOpen, Crown, ShieldCheck, Shirt, Truck, User } from "lucide-react";
import { useRouter } from "next/navigation";
import { useAuthStore } from "@/lib/stores/auth-store";
import { useSidebarStore } from "@/lib/stores/sidebar-store";
import { useThemeStore } from "@/lib/stores/theme-store";
import { ROLE_LABELS, ACTIVE_ROLES, LOCKED_ROLES, ROLE_REDIRECT } from "@/lib/constants";
import type { UserRole } from "@/lib/data/mock-data";
import { Button } from "@/components/ui/button";
import { SelectApp } from "@/components/shared/select-app";
import { DropdownApp } from "@/components/shared/dropdown-app";
import { toast } from "sonner";

const ROLE_ICONS: Record<string, React.ReactNode> = {
  owner: <Crown />,
  admin_laundry: <Shirt />,
  super_admin: <ShieldCheck />,
  driver: <Truck />,
  customer: <User />,
};

const ROLE_OPTIONS = [
  ...ACTIVE_ROLES.map((role) => ({
    value: role,
    label: ROLE_LABELS[role],
    icon: ROLE_ICONS[role],
  })),
  ...LOCKED_ROLES.map((role) => ({
    value: role,
    label: ROLE_LABELS[role],
    icon: ROLE_ICONS[role],
    disabled: true,
  })),
];

export function TopNavbar() {
  const router = useRouter();
  const { user, logout, switchRole } = useAuthStore();
  const { isCollapsed, toggle, setMobileOpen } = useSidebarStore();
  const { isDark, toggle: toggleTheme } = useThemeStore();

  const handleRoleSwitch = (role: string) => {
    if (!role || role === "---") return;
    if (LOCKED_ROLES.includes(role as UserRole)) {
      toast("Coming Soon", {
        description: `Role "${ROLE_LABELS[role as UserRole]}" akan tersedia di versi PRO.`,
      });
      return;
    }
    switchRole(role as UserRole);
    router.push(ROLE_REDIRECT[role] || "/admin/order");
  };

  const handleLogout = () => {
    logout();
    router.push("/login");
  };

  return (
    <header className="sticky top-0 z-40 h-16 d-border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
      <div className="flex items-center h-full px-4 gap-4">
        {/* Mobile hamburger */}
        <Button
          variant="ghost"
          size="icon"
          className="lg:hidden"
          onClick={() => setMobileOpen(true)}
        >
          <Menu className="size-5" />
        </Button>

        {/* Desktop: expand sidebar button — hanya muncul saat sidebar collapsed */}
        {isCollapsed && (
          <Button
            variant="ghost"
            size="icon"
            className="hidden lg:flex"
            onClick={toggle}
            title="Buka sidebar"
          >
            <PanelLeftOpen className="size-5" />
          </Button>
        )}

        <div className="flex-1" />

        {/* Role Switcher (Demo) */}
        <div className="flex items-center gap-2">
          <span className="d-text-caption hidden sm:inline">Demo Role:</span>
          <SelectApp
            value={user?.role || "admin_laundry"}
            onValueChange={handleRoleSwitch}
            options={ROLE_OPTIONS}
            placeholder="Pilih role"
            className="w-[160px] h-8 text-xs"
          />
        </div>

        {/* Theme toggle */}
        <Button variant="ghost" size="icon" onClick={toggleTheme}>
          {isDark ? <Sun className="size-4" /> : <Moon className="size-4" />}
        </Button>

        {/* User dropdown */}
        <DropdownApp
          trigger={
            <button className="flex items-center gap-2 d-rounded px-2 py-1.5 d-interactive">
              <div className="size-8 d-rounded-full d-bg-primary-soft flex items-center justify-center font-semibold text-sm">
                {user?.name?.charAt(0) || "U"}
              </div>
              <div className="hidden sm:block text-left">
                <p className="d-text-label leading-tight">{user?.name || "User"}</p>
                <p className="d-text-caption">{user?.email || ""}</p>
              </div>
            </button>
          }
          sections={[
            {
              label: user?.name ?? undefined,
              items: [{ label: user?.email || "", disabled: true }],
            },
            {
              items: [
                {
                  label: "Logout",
                  icon: <LogOut className="size-4 mr-2" />,
                  onClick: handleLogout,
                  className: "d-text-danger",
                },
              ],
            },
          ]}
        />
      </div>
    </header>
  );
}