Stirling-PDF/frontend/src/core/components/shared/FileCard.tsx

import { useState } from "react";
import {
  Card,
  Stack,
  Text,
  Group,
  Badge,
  Button,
  Box,
  Image,
  ThemeIcon,
  ActionIcon,
  Tooltip,
  Loader,
} from "@mantine/core";
import { useTranslation } from "react-i18next";
import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
import StorageIcon from "@mui/icons-material/Storage";
import VisibilityIcon from "@mui/icons-material/Visibility";
import EditIcon from "@mui/icons-material/Edit";

import { StirlingFileStub } from "@app/types/fileContext";
import { getFileSize, getFileDate } from "@app/utils/fileUtils";
import { useIndexedDBThumbnail } from "@app/hooks/useIndexedDBThumbnail";

interface FileCardProps {
  file: File;
  fileStub?: StirlingFileStub;
  onRemove: () => void;
  onDoubleClick?: () => void;
  onView?: () => void;
  onEdit?: () => void;
  isSelected?: boolean;
  onSelect?: () => void;
  isSupported?: boolean; // Whether the file format is supported by the current tool
}

const FileCard = ({
  file,
  fileStub,
  onRemove,
  onDoubleClick,
  onView,
  onEdit,
  isSelected,
  onSelect,
  isSupported = true,
}: FileCardProps) => {
  const { t } = useTranslation();
  // Use record thumbnail if available, otherwise fall back to IndexedDB lookup
  const { thumbnail: indexedDBThumb, isGenerating } =
    useIndexedDBThumbnail(fileStub);
  const thumb = fileStub?.thumbnailUrl || indexedDBThumb;
  const [isHovered, setIsHovered] = useState(false);

  // Show loading state during hydration: PDF file without thumbnail yet
  const isPdf = file.type === "application/pdf";
  const isHydrating = isPdf && !thumb && !isGenerating;

  return (
    <Card
      shadow="xs"
      radius="md"
      withBorder
      p="xs"
      style={{
        width: 225,
        minWidth: 180,
        maxWidth: 260,
        cursor: onDoubleClick && isSupported ? "pointer" : undefined,
        position: "relative",
        border: isSelected
          ? "2px solid var(--mantine-color-blue-6)"
          : undefined,
        backgroundColor: isSelected ? "var(--mantine-color-blue-0)" : undefined,
        opacity: isSupported ? 1 : 0.5,
        filter: isSupported ? "none" : "grayscale(50%)",
      }}
      onDoubleClick={onDoubleClick}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      onClick={onSelect}
      data-testid="file-card"
      data-tour="file-card-checkbox"
    >
      <Stack gap={6} align="center">
        <Box
          style={{
            border: "2px solid #e0e0e0",
            borderRadius: 8,
            width: 90,
            height: 120,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            margin: "0 auto",
            background: "#fafbfc",
            position: "relative",
          }}
        >
          {/* Hover action buttons */}
          {isHovered && (onView || onEdit) && (
            <div
              style={{
                position: "absolute",
                top: 4,
                right: 4,
                display: "flex",
                gap: 4,
                zIndex: 10,
                backgroundColor: "rgba(255, 255, 255, 0.9)",
                borderRadius: 4,
                padding: 2,
              }}
              onClick={(e) => e.stopPropagation()}
            >
              {onView && (
                <Tooltip label="View in Viewer">
                  <ActionIcon
                    size="sm"
                    variant="subtle"
                    color="blue"
                    onClick={(e) => {
                      e.stopPropagation();
                      onView();
                    }}
                  >
                    <VisibilityIcon style={{ fontSize: 16 }} />
                  </ActionIcon>
                </Tooltip>
              )}
              {onEdit && (
                <Tooltip label="Open in File Editor">
                  <ActionIcon
                    size="sm"
                    variant="subtle"
                    color="orange"
                    onClick={(e) => {
                      e.stopPropagation();
                      onEdit();
                    }}
                  >
                    <EditIcon style={{ fontSize: 16 }} />
                  </ActionIcon>
                </Tooltip>
              )}
            </div>
          )}
          {thumb ? (
            <Image
              src={thumb}
              alt="PDF thumbnail"
              height={110}
              width={80}
              fit="contain"
              radius="sm"
            />
          ) : isGenerating || isHydrating ? (
            <Stack align="center" justify="center" gap="xs">
              <Loader size="sm" />
              <Text size="xs" c="dimmed">
                Loading...
              </Text>
            </Stack>
          ) : (
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <ThemeIcon
                variant="light"
                color={file.size > 100 * 1024 * 1024 ? "orange" : "red"}
                size={60}
                radius="sm"
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <PictureAsPdfIcon style={{ fontSize: 40 }} />
              </ThemeIcon>
              {file.size > 100 * 1024 * 1024 && (
                <Text size="xs" c="dimmed" mt={4}>
                  Large File
                </Text>
              )}
            </div>
          )}
        </Box>

        <Text fw={500} size="sm" lineClamp={1} ta="center">
          {file.name}
        </Text>

        <Group gap="xs" justify="center">
          <Badge color="red" variant="light" size="sm">
            {getFileSize(file)}
          </Badge>
          <Badge color="blue" variant="light" size="sm">
            {getFileDate(file)}
          </Badge>
          {fileStub?.id && (
            <Badge
              color="green"
              variant="light"
              size="sm"
              leftSection={<StorageIcon style={{ fontSize: 12 }} />}
            >
              DB
            </Badge>
          )}
          {!isSupported && (
            <Badge color="orange" variant="filled" size="sm">
              {t("fileManager.unsupported", "Unsupported")}
            </Badge>
          )}
        </Group>

        <Button
          color="red"
          size="xs"
          variant="light"
          onClick={(e) => {
            e.stopPropagation();
            onRemove();
          }}
          mt={4}
        >
          {t("delete", "Remove")}
        </Button>
      </Stack>
    </Card>
  );
};

export default FileCard;