import { Card, Group, SimpleGrid, Text, Title } from "@mantine/core";
import { Building2 } from "lucide-react";
import RoleCard from "./RoleCard";
import { CUSTOMER_ROLES } from "./companyRoles";

interface OnboardingRoleSelectProps {
  /** Currently selected profile types (e.g. ["importer"], ["importer","exporter","freight_forwarder"]). */
  value: string[];
  onChange: (next: string[]) => void;
  /** Render only the option grid — the wizard supplies its own header/card. */
  embedded?: boolean;
}

/**
 * First (and only) thing shown in the Company Profile tab during onboarding.
 * Importer / Exporter / Freight Forwarder are independent services that can be
 * picked in any combination — each becomes its own profile (with its own
 * business license) under the same company. A valid selection reveals the
 * company-profile fields.
 */
export default function OnboardingRoleSelect({
  value,
  onChange,
  embedded = false,
}: OnboardingRoleSelectProps) {
  const selected = new Set(value);

  const toggleRole = (type: string) => {
    const next = new Set(value);
    if (next.has(type)) next.delete(type);
    else next.add(type);
    onChange([...next]);
  };

  const grid = (
    <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
      {CUSTOMER_ROLES.map((role) => (
        <RoleCard
          key={role.type}
          label={role.label}
          description={role.description}
          icon={role.icon}
          selected={selected.has(role.type)}
          onClick={() => toggleRole(role.type)}
        />
      ))}
    </SimpleGrid>
  );

  if (embedded) return grid;

  return (
    <Card padding="lg">
      <Group gap="sm" mb="xs">
        <Building2 size={20} />
        <Title order={3}>What does your company do?</Title>
      </Group>
      <Text c="edr-muted" size="sm" mb="lg">
        Pick any combination of Importer, Exporter and Freight Forwarder — each
        is set up with its own business license.
      </Text>
      {grid}
    </Card>
  );
}
