"use client";

import { Button, Flex, Group, Paper, Stack, Text, Title } from "@mantine/core";
import { IconArrowLeft, IconFileImport } from "@tabler/icons-react";
import React, { useState } from "react";
import { useNavigate } from "react-router";
import type { AccessScope } from "@/lib/features/types";
import type { EDMFolder } from "@/lib/features/edm/types";
import { EDMImportPanel } from "../_components/EDMImportPanel";

interface Props {
  initialFolders: EDMFolder[];
  accessScope: AccessScope;
}

/**
 * Import as a full page rather than a modal.
 *
 * The flow is four steps and can involve uploading a dozen images one at a
 * time; a modal makes that cramped, and an accidental click outside it used to
 * throw away a parsed bundle. A route also means the step you are on survives a
 * refresh of the tab and can be linked to.
 */
export default function EDMImportClientPage({ initialFolders, accessScope }: Props) {
  const navigate = useNavigate();
  const [folders] = useState<EDMFolder[]>(initialFolders);

  if (!accessScope.create) {
    return (
      <Stack px={28} py={20}>
        <Text c="dimmed">You do not have permission to create email templates.</Text>
      </Stack>
    );
  }

  return (
    <Stack px={28} py={20} gap="lg">
      <Flex justify="space-between" align="center">
        <Group gap="sm">
          <IconFileImport size={24} />
          <div>
            <Title order={3}>Import email template</Title>
            <Text size="sm" c="dimmed">
              Upload a zip from your designer, a single .html file, or a whole
              archive of templates at once.
            </Text>
          </div>
        </Group>
        <Button
          variant="light"
          color="gray"
          leftSection={<IconArrowLeft size={16} />}
          onClick={() => navigate("/admin/edm")}
        >
          Back to templates
        </Button>
      </Flex>

      <Paper withBorder p="xl" radius="md">
        <EDMImportPanel
          folders={folders}
          // The panel fires onCreated and then onClose, so only onClose
          // navigates — otherwise both would push the same route.
          onCreated={() => {}}
          onBatchImported={() => {}}
          // The list refetches on mount, so it picks up whatever was just
          // created without extra plumbing.
          onClose={() => navigate("/admin/edm")}
        />
      </Paper>
    </Stack>
  );
}