import { cn } from "~/lib/utils";

/** Shared Tailwind class strings for admin management pages. */

export const adminPageClass = "h-full overflow-auto bg-[#f3f6f9] p-6";

export const adminToolbarClass =
  "mb-3.5 flex items-center justify-between rounded-lg border border-line bg-white px-3.5 py-3";

export const adminToolbarSearchClass =
  "flex w-[280px] items-center gap-2 rounded-md border border-[#d9e2eb] bg-[#f8fafb] px-3 py-2 [&_svg]:text-[#8a99a8]";

export const adminToolbarInputClass =
  "w-full border-none bg-transparent text-xs text-[#20364c] outline-none placeholder:text-[#a0b0bf]";

export const adminReadonlyClass =
  "mb-3 rounded-md border border-[#f1d79c] bg-[#fff8e8] px-3.5 py-2.5 text-[11px] text-[#8a6416]";

export const adminEmptyClass = "p-[25px] text-center text-ink-subtle";

export const employeeNameClass =
  "flex items-center gap-2.5 [&_small]:mt-[3px] [&_small]:text-[#93a0ae] [&_strong]:text-[#23384e] [&>span]:flex [&>span]:min-w-0 [&>span]:flex-col";

export const employeeAvatarClass =
  "grid size-8 place-items-center rounded-full bg-gradient-to-br from-[#3b92ed] to-[#1869c9] text-sm font-bold text-white";

export const employeeActionsClass = "flex gap-1.5";

export const roleActionsClass = "flex gap-1.5";

export const rowButtonClass =
  "h-6 gap-1 rounded-[4px] border-[#d9e3ec] bg-white px-[9px] text-[11px] text-[#4c6c88] hover:bg-[#f7fafc] disabled:cursor-not-allowed disabled:opacity-[0.45]";

export const rowDangerButtonClass =
  "h-6 gap-1 rounded-[4px] border-[#d9e3ec] bg-white px-[9px] text-[11px] text-[#c14a4a] hover:bg-[#fdf2f2] disabled:cursor-not-allowed disabled:opacity-[0.45]";

export const roleCodeClass = "font-mono text-[11px] text-[#60758b]";

export const roleNameClass = "font-semibold text-[#23384e]";

export const permissionCountClass = "text-[#5d7488]";

export const formHintClass =
  "mt-1.5 block text-[10px] font-normal leading-normal text-[#98a5b3]";

export const roleErrorClass = "mt-1.5 text-[10px] font-medium text-[#c0392b]";

export const permissionGroupsClass = "flex flex-col gap-3.5";

export const permissionGroupClass =
  "rounded-[7px] border border-[#e3eaf1] bg-[#fafbfc] px-3 py-2.5";

export const permissionGroupTitleClass =
  "mb-2 text-[10px] font-bold tracking-wide text-[#2e86de]";

export const permissionItemClass =
  "flex cursor-pointer items-start gap-[9px] rounded-md px-2 py-[7px] hover:bg-[#f0f6fc] [&_small]:mt-0.5 [&_small]:text-[10px] [&_small]:text-[#8a99a8] [&_span]:flex [&_span]:min-w-0 [&_span]:flex-col [&_strong]:text-[11px] [&_strong]:text-[#33475c]";

export const permissionItemLockedClass =
  "cursor-not-allowed bg-[#f1f3f5] opacity-80 hover:bg-[#f1f3f5]";

export function rolePillClass(roleCode: string): string {
  return cn(
    "w-max rounded-xl px-2 py-1",
    roleCode === "admin"
      ? "bg-[#fff2d6] text-[#87580f]"
      : "bg-[#eaf4ff] text-[#1d6ab3]",
  );
}

export function statusPillClass(status: string): string {
  return cn(
    "w-max rounded-xl px-2 py-1",
    status === "disabled" || status === "locked"
      ? "bg-[#ffeded] text-[#a64b4b]"
      : "bg-[#e8f8f1] text-[#138657]",
  );
}

export function builtinBadgeClass(isBuiltin: boolean): string {
  return cn(
    "w-max rounded-xl px-2 py-1 text-[10px]",
    isBuiltin ? "bg-[#fff2d6] text-[#87580f]" : "bg-[#eaf4ff] text-[#1d6ab3]",
  );
}

export function permissionItemClassName(locked: boolean): string {
  return cn(permissionItemClass, locked && permissionItemLockedClass);
}