import { Box, Group, Text, ThemeIcon, UnstyledButton } from "@mantine/core";
import { Check } from "lucide-react";

export interface RoleCardProps {
  label: string;
  description: string;
  icon: React.ReactNode;
  /** Highlighted because the user just selected it (toggleable). */
  selected?: boolean;
  /** Non-interactive because a profile for this role already exists. */
  locked?: boolean;
  /**
   * Approved by a reviewer. Drives the green "granted" treatment, which a
   * merely-locked role (e.g. still pending review) must not receive.
   */
  approved?: boolean;
  /** Small note under the description, e.g. "Active · IM-00001". */
  lockedNote?: string;
  /** Mantine color for {@link lockedNote}; matches the role's status. */
  lockedNoteColor?: string;
  /** Extra muted line under {@link lockedNote}, e.g. the reviewer's note. */
  detail?: string;
  /**
   * Interactive content (e.g. a resubmit button) rendered inside the card.
   * Only honoured on a locked card — the interactive variant is itself a
   * button, and buttons cannot nest.
   */
  action?: React.ReactNode;
  onClick?: () => void;
}

/**
 * The selectable company-role card used by both the onboarding role picker and
 * the add-only roles card in settings. Visual mirror of the onboarding
 * account-type cards.
 */
export default function RoleCard({
  label,
  description,
  icon,
  selected = false,
  locked = false,
  approved = false,
  lockedNote,
  lockedNoteColor = "edr-green",
  detail,
  action,
  onClick,
}: RoleCardProps) {
  const highlighted = selected || approved;

  const className = `group block rounded-lg border! p-5! text-left transition-all duration-200 ${
    highlighted
      ? "border-[var(--mantine-color-edr-green-5)]! bg-edr-soft!"
      : "border-edr-border! bg-edr-card!"
  } ${
    locked
      ? "cursor-default"
      : "hover:-translate-y-0.5 hover:border-[var(--mantine-color-edr-green-5)]! hover:bg-edr-soft"
  }`;

  const content = (
    <Group gap="md" wrap="nowrap" align="start">
      <ThemeIcon
        size={56}
        radius="lg"
        variant={highlighted ? "filled" : "light"}
        color="edr-green"
        className="shrink-0"
      >
        {icon}
      </ThemeIcon>
      <Box className="min-w-0 flex-1">
        <Text fw={700} c="edr-text" fz={15}>
          {label}
        </Text>
        <Text size="xs" c="edr-muted" mt={4} lh={1.5}>
          {description}
        </Text>
        {lockedNote && (
          <Text size="xs" c={lockedNoteColor} mt={6} fw={600}>
            {lockedNote}
          </Text>
        )}
        {locked && detail && (
          <Text size="xs" c="edr-muted" mt={4} lh={1.5}>
            {detail}
          </Text>
        )}
        {locked && action && <Box mt="sm">{action}</Box>}
      </Box>
      {highlighted && (
        <Check
          size={18}
          className="shrink-0 text-[var(--mantine-color-edr-green-6)]"
        />
      )}
    </Group>
  );

  // A locked card is display-only, so it renders as a plain box — which also
  // lets `action` hold real buttons without nesting them inside a button.
  if (locked) {
    return <Box className={className}>{content}</Box>;
  }

  return (
    <UnstyledButton type="button" onClick={onClick} className={className}>
      {content}
    </UnstyledButton>
  );
}
