import { Box, Group, Stack, Text } from "@mantine/core";
import { CheckCircle2, FileText, FileUp } from "lucide-react";

import { StepCard, StepHeader } from "./shared";

export interface OnboardingDoc {
  name: string;
  url: string;
  size: number;
  mimeType?: string;
}

function formatSize(bytes: number): string {
  if (!bytes) return "";
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}

/**
 * Read-only documents step: lists the documents the company uploaded during
 * onboarding for the active operational profile. These are attached to the
 * booking automatically at submission — the customer is never asked to re-upload.
 */
export function StepDocuments({ documents }: { documents: OnboardingDoc[] }) {
  const total = documents.length;

  return (
    <StepCard>
      <StepHeader
        icon={<FileUp size={22} />}
        title="Documents"
        description="The documents from your onboarding will be attached to this booking automatically. No re-upload is needed."
      />

      <Group
        gap={10}
        align="center"
        wrap="nowrap"
        className="rounded-xl"
        style={{
          border: "1px solid var(--mantine-color-edr-border-0)",
          backgroundColor: "var(--mantine-color-gray-0)",
          padding: "12px 16px",
        }}
      >
        <Box
          style={{
            flexShrink: 0,
            width: 32,
            height: 32,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            borderRadius: 999,
            backgroundColor: total > 0 ? "#ECF6F1" : "#FBECEC",
            color: total > 0 ? "#0A6F4D" : "#B42318",
          }}
        >
          {total > 0 ? <CheckCircle2 size={16} /> : <FileUp size={16} />}
        </Box>
        <Text size="sm" c="dimmed">
          {total > 0
            ? `${total} onboarding ${total === 1 ? "document" : "documents"} will be attached to this booking.`
            : "No onboarding documents found on your active profile. You can add documents later from the booking page."}
        </Text>
      </Group>

      {total > 0 && (
        <Stack gap={10} mt={4}>
          {documents.map((doc, i) => (
            <Group
              key={`${doc.url}-${i}`}
              gap={12}
              align="center"
              wrap="nowrap"
              className="rounded-xl"
              style={{
                border: "1px solid var(--mantine-color-edr-border-0)",
                padding: "12px 16px",
              }}
            >
              <Box
                style={{
                  flexShrink: 0,
                  width: 36,
                  height: 36,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  borderRadius: 10,
                  backgroundColor: "#EAF1FB",
                  color: "#2E5B96",
                }}
              >
                <FileText size={18} />
              </Box>
              <Box style={{ minWidth: 0, flex: 1 }}>
                <Text size="sm" fw={600} truncate>
                  {doc.name}
                </Text>
                {doc.size ? (
                  <Text size="xs" c="dimmed">
                    {formatSize(doc.size)}
                  </Text>
                ) : null}
              </Box>
              <Box
                style={{
                  flexShrink: 0,
                  display: "flex",
                  alignItems: "center",
                  gap: 6,
                  color: "#0A6F4D",
                }}
              >
                <CheckCircle2 size={15} />
                <Text size="xs" fw={600} c="#0A6F4D">
                  Uploaded
                </Text>
              </Box>
            </Group>
          ))}
        </Stack>
      )}
    </StepCard>
  );
}
