import { FC } from "react"
import { Box, Group, Paper, ScrollArea, Stack, Text } from "@mantine/core"
import { LandingFileIcon } from "@/shared/ui/LandingFileIcon"

interface FileListProps {
  files: string[]
}

/** Расширение имени файла (нижний регистр) или пустая строка, если нет точки в имени. */
function fileExtKey(relPath: string): string {
  const base = relPath.split("/").pop() ?? relPath
  const dot = base.lastIndexOf(".")
  if (dot <= 0) return ""
  return base.slice(dot).toLowerCase()
}

function sortFilesByType(paths: string[]): string[] {
  return [...paths].sort((a, b) => {
    const extA = fileExtKey(a)
    const extB = fileExtKey(b)
    if (extA !== extB) {
      return extA.localeCompare(extB, "en", { numeric: true, sensitivity: "base" })
    }
    return a.localeCompare(b, "en", { numeric: true, sensitivity: "base" })
  })
}

const FileList: FC<FileListProps> = ({ files }) => {
  const sortedFiles = sortFilesByType(files)
  return (
    <Paper
      withBorder
      p={0}
      radius={0}
      w={{ base: "100%", md: 280 }}
      mih={{ base: 160, md: 0 }}
      style={{
        flexShrink: 0,
        display: "flex",
        flexDirection: "column",
        minHeight: 0,
      }}
    >
      <Text size="sm" fw={600} px="sm" py="xs" c="dimmed">
        Файлы лендинга
      </Text>
      <ScrollArea flex={1} type="auto" offsetScrollbars>
        <Stack gap={0} pb="xs">
          {sortedFiles.length === 0 && (
            <Text size="xs" px="sm" c="dimmed">
              Нет файлов (кроме index.html и manifest.json)
            </Text>
          )}
          {sortedFiles.map((path, i) => (
            <Group
              key={path}
              gap="xs"
              wrap="nowrap"
              align="flex-start"
              px="sm"
              py={6}
              styles={{
                root: {
                  borderTop:
                    i > 0
                      ? "1px solid var(--mantine-color-default-border)"
                      : undefined,
                },
              }}
            >
              <Box
                component="span"
                mt={2}
                style={{
                  flexShrink: 0,
                  color: "var(--mantine-color-dimmed)",
                  lineHeight: 1,
                  display: "flex",
                }}
              >
                <LandingFileIcon path={path} />
              </Box>
              <Text
                size="xs"
                ff="monospace"
                style={{ wordBreak: "break-all", flex: 1, minWidth: 0 }}
              >
                {path}
              </Text>
            </Group>
          ))}
        </Stack>
      </ScrollArea>
    </Paper>
  )
}

export default FileList