"use client";

import { CheckIcon, KeyRoundIcon, LogOutIcon, MonitorIcon, UserIcon } from "lucide-react";

import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

/*
 * Top-bar identity and user menu (DB-12, ST-17). The top bar always says who is signed in, as what role,
 * at which branch, because what a role sees depends on all three. Profile and Appearance live in this menu,
 * not in Settings: they're the user's own preferences, not the pharmacy's.
 */

export type Appearance = { sidebar: "light" | "brand"; text: "default" | "large" };

const initials = (name: string) =>
  name
    .split(/\s+/)
    .map((p) => p[0])
    .slice(0, 2)
    .join("")
    .toUpperCase();

export function UserMenu({
  name,
  email,
  role,
  branch,
  appearance,
  onAppearance,
  onProfile,
  onPassword,
  onSignOut,
}: {
  name: string;
  email: string;
  role: string;
  branch: string;
  appearance: Appearance;
  onAppearance: (a: Appearance) => void;
  onProfile: () => void;
  onPassword: () => void;
  onSignOut: () => void;
}) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger className="flex cursor-pointer items-center gap-2 rounded-md px-1.5 py-1 text-left outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring" aria-label={`${name}, ${role} at ${branch}. Open user menu`}>
        <Avatar className="size-7">
          <AvatarFallback>{initials(name)}</AvatarFallback>
        </Avatar>
        <span className="hidden text-right leading-tight sm:block">
          <span className="block text-sm font-medium">{name.split(" ")[0]}</span>
          <span className="block text-xs text-muted-foreground">
            {role}
          </span>
        </span>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="min-w-60">
        <DropdownMenuGroup>
          <DropdownMenuLabel>
            <span className="block text-sm font-medium text-foreground">{name}</span>
            <span className="block text-xs font-normal">{email}</span>
            <span className="mt-1 block text-xs font-normal">
              Signed in as {role} at {branch}
            </span>
          </DropdownMenuLabel>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem onClick={onProfile}>
          <UserIcon /> Profile
        </DropdownMenuItem>
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>
            <MonitorIcon /> Appearance
          </DropdownMenuSubTrigger>
          <DropdownMenuSubContent className="min-w-44">
            <DropdownMenuGroup>
              <DropdownMenuLabel>Sidebar</DropdownMenuLabel>
              <DropdownMenuRadioGroup value={appearance.sidebar} onValueChange={(v) => onAppearance({ ...appearance, sidebar: v as Appearance["sidebar"] })}>
                <DropdownMenuRadioItem value="light">Light</DropdownMenuRadioItem>
                <DropdownMenuRadioItem value="brand">Teal</DropdownMenuRadioItem>
              </DropdownMenuRadioGroup>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuLabel>Text size</DropdownMenuLabel>
              <DropdownMenuRadioGroup value={appearance.text} onValueChange={(v) => onAppearance({ ...appearance, text: v as Appearance["text"] })}>
                <DropdownMenuRadioItem value="default">Default</DropdownMenuRadioItem>
                <DropdownMenuRadioItem value="large">Large</DropdownMenuRadioItem>
              </DropdownMenuRadioGroup>
            </DropdownMenuGroup>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
        <DropdownMenuItem onClick={onPassword}>
          <KeyRoundIcon /> Change password or passcode
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem onClick={onSignOut}>
          <LogOutIcon /> Sign out
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

/** Saved-state line for the Appearance choices, used under the menu in previews and on the Profile page. */
export function AppearanceSummary({ appearance }: { appearance: Appearance }) {
  return (
    <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
      <CheckIcon className="size-3.5" aria-hidden /> Sidebar {appearance.sidebar === "brand" ? "teal" : "light"}, {appearance.text === "large" ? "large" : "default"} text. Saved for this user on every device.
    </p>
  );
}