import type { ReactNode } from "react";
import { Badge, Box, Group, Stack, Text, ThemeIcon } from "@mantine/core";
import { Check, type LucideIcon } from "lucide-react";

export interface ActionShellProps {
  icon: LucideIcon;
  title: string;
  subtitle?: string;
  /** When true the action is already done — children are hidden, a done badge shows. */
  done?: boolean;
  /**
   * Keep the input controls mounted alongside the done badge. For actions whose
   * value stays correctable after completion (e.g. customs risk), rather than
   * the default one-and-done actions.
   */
  keepChildrenWhenDone?: boolean;
  doneLabel?: ReactNode;
  children: ReactNode;
}

/**
 * Consistent container for one GL action card: icon, title, and either the
 * input controls (pending) or a completed badge (done). Keeps every GL action
 * visually uniform inside {@link GlActionsPanel}.
 */
export function ActionShell({
  icon: Icon,
  title,
  subtitle,
  done,
  keepChildrenWhenDone,
  doneLabel,
  children,
}: ActionShellProps) {
  return (
    <Box
      p="md"
      style={{
        border: "1px solid var(--mantine-color-gray-2)",
        borderRadius: 12,
      }}
    >
      <Group justify="space-between" align="flex-start" wrap="nowrap" mb="sm">
        <Group gap="sm" wrap="nowrap">
          <ThemeIcon variant="light" color="edr-green" radius="md" size={32}>
            <Icon size={16} />
          </ThemeIcon>
          <Stack gap={0}>
            <Text size="sm" fw={600}>
              {title}
            </Text>
            {subtitle ? (
              <Text size="xs" c="dimmed">
                {subtitle}
              </Text>
            ) : null}
          </Stack>
        </Group>
        {done ? (
          typeof doneLabel === "string" || !doneLabel ? (
            <Badge
              color="edr-green"
              variant="light"
              radius="sm"
              leftSection={<Check size={12} />}
            >
              {doneLabel ?? "Done"}
            </Badge>
          ) : (
            doneLabel
          )
        ) : null}
      </Group>
      {!done || keepChildrenWhenDone ? children : null}
    </Box>
  );
}
