import {
  Anchor,
  Badge,
  Card,
  FileInput,
  Group,
  Stack,
  Text,
  ThemeIcon,
} from "@mantine/core";
import { FileText, Paperclip, Upload } from "lucide-react";

import type { LicenseFile } from "@/services/companies.service";

const ROLE_LABELS: Record<string, string> = {
  importer: "Importer",
  exporter: "Exporter",
  freight_forwarder: "Freight Forwarder",
  dj_freight_forwarder: "DJ Freight Forwarder",
  transporter: "Transporter",
};

export interface RoleLicenseProfile {
  id: string;
  type: string;
  reference: string;
  /** License files already uploaded for this profile (rehydration). */
  existingFiles: LicenseFile[];
}

interface RoleLicenseStepProps {
  /** One card per operational role/profile. */
  profiles: RoleLicenseProfile[];
  /** Newly-selected files per profile id (not yet uploaded). */
  value: Record<string, File[]>;
  onChange: (value: Record<string, File[]>) => void;
}

/**
 * Final onboarding step: collect a business license (one or more files) for
 * each operational role the company holds. Each role gets its own multi-file
 * input; already-uploaded files are listed for context.
 */
export default function RoleLicenseStep({
  profiles,
  value,
  onChange,
}: RoleLicenseStepProps) {
  const setFiles = (profileId: string, files: File[]) => {
    onChange({ ...value, [profileId]: files });
  };

  return (
    <Stack gap="md">
      <Text size="sm" c="edr-muted">
        Upload the business license for each of your operational profiles. You
        can attach more than one document per profile.
      </Text>

      {profiles.map((profile) => {
        const label = ROLE_LABELS[profile.type] ?? profile.type;
        const selected = value[profile.id] ?? [];
        const hasAny = selected.length > 0 || profile.existingFiles.length > 0;

        return (
          <Card key={profile.id} padding="lg" withBorder>
            <Group justify="space-between" mb="sm" wrap="nowrap">
              <Group gap="sm" wrap="nowrap">
                <ThemeIcon
                  size={40}
                  radius="md"
                  variant="light"
                  color="edr-green"
                >
                  <FileText size={20} />
                </ThemeIcon>
                <div>
                  <Text fw={700} c="edr-text" fz={15}>
                    {label} — Business License
                  </Text>
                  <Text size="xs" c="edr-muted" ff="monospace">
                    {profile.reference}
                  </Text>
                </div>
              </Group>
              {hasAny && (
                <Badge color="edr-green" variant="light">
                  Provided
                </Badge>
              )}
            </Group>

            {profile.existingFiles.length > 0 && (
              <Stack gap={4} mb="sm">
                {profile.existingFiles.map((f) => (
                  <Group key={f.url} gap={6} wrap="nowrap">
                    <Paperclip size={13} className="text-edr-muted" />
                    <Anchor
                      href={f.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      size="xs"
                    >
                      {f.name}
                    </Anchor>
                  </Group>
                ))}
              </Stack>
            )}

            <FileInput
              multiple
              clearable
              accept="application/pdf,image/png,image/jpeg"
              leftSection={<Upload size={16} />}
              placeholder={
                profile.existingFiles.length > 0
                  ? "Upload more / replace files"
                  : "Select license file(s)"
              }
              value={selected}
              onChange={(files) => setFiles(profile.id, files ?? [])}
            />
          </Card>
        );
      })}
    </Stack>
  );
}
