"use client";

import { useEffect, useState } from "react";

import { useRouter } from "next/navigation";

import { SlidersHorizontal } from "lucide-react";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { type AuthUser, getAuthUser, login, MOCK_CREDENTIALS, ROLE_COLORS, ROLE_LABELS, type Role } from "@/lib/auth";

const DEMO_ROLES: Role[] = ["foh", "kitchen", "dispatcher", "driver", "packaging", "admin"];

export function RoleSwitcher() {
  const [user, setUser] = useState<AuthUser | null>(null);
  const router = useRouter();

  useEffect(() => {
    setUser(getAuthUser());
  }, []);

  const switchTo = (role: Role) => {
    const cred = MOCK_CREDENTIALS.find((c) => c.role === role);
    if (!cred) return;
    const authedUser = login(cred.username, cred.password);
    if (!authedUser) return;
    setUser(authedUser);
    const defaultRoutes: Record<Role, string> = {
      admin: "/dashboard",
      foh: "/orders",
      kitchen: "/kitchen",
      packaging: "/kitchen",
      dispatcher: "/dispatch",
      driver: "/driver",
    };
    router.push(defaultRoutes[role]);
  };

  if (!user) return null;

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button
          type="button"
          className="flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs hover:bg-muted transition-colors"
          title="Switch demo role"
        >
          <SlidersHorizontal className="size-3" />
          <span
            className={`inline-flex items-center rounded border px-1.5 py-0 font-medium text-[10px] ${ROLE_COLORS[user.role]}`}
          >
            {ROLE_LABELS[user.role]}
          </span>
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-48">
        <DropdownMenuLabel className="text-xs text-muted-foreground">Switch Demo Role</DropdownMenuLabel>
        <DropdownMenuSeparator />
        {DEMO_ROLES.map((role) => (
          <DropdownMenuItem
            key={role}
            onClick={() => switchTo(role)}
            className="gap-2"
          >
            <span
              className={`inline-flex items-center rounded border px-1.5 py-0 font-medium text-[10px] ${ROLE_COLORS[role]}`}
            >
              {ROLE_LABELS[role]}
            </span>
            {role === user.role && (
              <span className="ml-auto text-primary text-xs">current</span>
            )}
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}