import { FileText, Download } from "lucide-react";
import { Group, Stack, Text, Badge, ThemeIcon, ActionIcon } from "@mantine/core";

import { SectionCard } from "./SectionCard";
import { detailStyles, type BookingFileView } from "./booking-detail.styles";

export interface BookingDocumentsCardProps {
  files: BookingFileView[];
  onDownload?: (file: BookingFileView) => void;
}

/** List of attached documents with per-file download actions. */
export function BookingDocumentsCard({ files, onDownload }: BookingDocumentsCardProps) {
  return (
    <SectionCard
      icon={FileText}
      title="Documents"
      accent="indigo"
      extra={
        <Badge color="gray" variant="light" radius="sm">
          {files.length}
        </Badge>
      }
    >
      {files.length === 0 ? (
        <Text size="sm" c="dimmed">
          No documents attached.
        </Text>
      ) : (
        <Stack gap="xs">
          {files.map((file) => (
            <Group
              key={file.id}
              justify="space-between"
              wrap="nowrap"
              p="xs"
              style={detailStyles.fileRow}
              onMouseEnter={(e) => {
                e.currentTarget.style.background = "var(--mantine-color-gray-0)";
                e.currentTarget.style.borderColor = "var(--freight-brand-border)";
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.background = "transparent";
                e.currentTarget.style.borderColor = "var(--mantine-color-gray-2)";
              }}
            >
              <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
                <ThemeIcon size={32} radius="md" variant="light" color="red">
                  <FileText size={16} />
                </ThemeIcon>
                <Text size="sm" fw={500} truncate>
                  {file.name}
                </Text>
              </Group>
              <ActionIcon
                variant="subtle"
                color="gray"
                radius="md"
                onClick={() => onDownload?.(file)}
                aria-label={`Download ${file.name}`}
              >
                <Download size={16} />
              </ActionIcon>
            </Group>
          ))}
        </Stack>
      )}
    </SectionCard>
  );
}
