edr-platform/apps/edr-freight-web/backoffice/src/components/contracts/PhasedUploadedFileRow.tsx

import { Badge, Box, Button, Group, Paper, Text, ThemeIcon, Tooltip } from "@mantine/core";
import { Download, Eye, FileText } from "lucide-react";
import { isViewable } from "@edr/ui-common";

import { fileViewUrl } from "@/constants/apiConfig";

export interface PhasedUploadedFileRowProps {
  label: string;
  file: { id: string; name: string };
  onView?: (file: { name: string; url: string }) => void;
  onDownload?: (file: { id: string; name: string }) => void;
  compact?: boolean;
}

/** Inline preview row for a phased customs upload (declaration, transit permit, DO, etc.). */
export function PhasedUploadedFileRow({
  label,
  file,
  onView,
  onDownload,
  compact = false,
}: PhasedUploadedFileRowProps) {
  const viewUrl = fileViewUrl(file.id);
  const canPreview = isViewable({ name: file.name, url: viewUrl });

  return (
    <Paper
      withBorder
      radius="md"
      p={compact ? "xs" : "sm"}
      style={{
        borderColor: "var(--mantine-color-edr-green-3)",
        background:
          "linear-gradient(135deg, var(--mantine-color-edr-green-0) 0%, #FFFFFF 75%)",
      }}
    >
      <Group justify="space-between" wrap="nowrap" align="center">
        <Group gap={10} wrap="nowrap" style={{ minWidth: 0 }}>
          <ThemeIcon variant="light" color="edr-green" radius="md" size={compact ? 32 : 36}>
            <FileText size={compact ? 15 : 17} />
          </ThemeIcon>
          <Box style={{ minWidth: 0 }}>
            <Text size="sm" fw={600} truncate>
              {label}
            </Text>
            <Group gap={6} wrap="nowrap" mt={2}>
              <Badge size="xs" variant="light" color="edr-green" radius="sm">
                Uploaded
              </Badge>
              <Text size="xs" c="dimmed" truncate>
                {file.name}
              </Text>
            </Group>
          </Box>
        </Group>
        <Group gap={6} wrap="nowrap">
          {canPreview && onView ? (
            <Tooltip label="Preview">
              <Button
                size="compact-xs"
                variant="default"
                radius="md"
                leftSection={<Eye size={13} />}
                onClick={() => onView({ name: file.name, url: viewUrl })}
              >
                View
              </Button>
            </Tooltip>
          ) : null}
          {onDownload ? (
            <Tooltip label="Download">
              <Button
                size="compact-xs"
                variant="light"
                radius="md"
                leftSection={<Download size={13} />}
                onClick={() => onDownload({ id: file.id, name: file.name })}
              >
                Download
              </Button>
            </Tooltip>
          ) : null}
        </Group>
      </Group>
    </Paper>
  );
}

export function findWorkflowFile(
  files: Array<{ code: string; file: { id: string; name: string } | null }> | undefined,
  code: string,
): { id: string; name: string } | null {
  return files?.find((f) => f.code === code)?.file ?? null;
}