import { useState } from 'react';
import { Button, Card, Group, Modal, Stack } from '@mantine/core';
import { PackageSearch, Truck } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

import { PageContainer, PageHeader } from '@/components/page';
import { WarehouseFlowWorkbench } from '@/components/warehouses';

export default function ExportWarehouseFlowPage() {
  const navigate = useNavigate();
  const [receiveOpen, setReceiveOpen] = useState(false);

  return (
    <PageContainer>
      <PageHeader
        title="Export Operations"
        subtitle="Manage export receive, terminal inventory, loading readiness, loaded items, and dispatch flow."
        action={
          <Group gap="xs">
            <Button
              fw={700}
              leftSection={<Truck size={16} />}
              onClick={() => setReceiveOpen(true)}
            >
              Receive for Loading
            </Button>
            <Button variant="light" leftSection={<PackageSearch size={16} />} onClick={() => navigate('/dashboard/import-warehouse')}>
              Import Operations
            </Button>
          </Group>
        }
      />

      <Card>
        <WarehouseFlowWorkbench direction="EXPORT" />
      </Card>

      <Modal
        opened={receiveOpen}
        onClose={() => setReceiveOpen(false)}
        title="Receive for loading"
        centered
        size="80rem"
      >
        <Stack gap="md">
          <WarehouseFlowWorkbench enabled={receiveOpen} direction="EXPORT" />
          <Group justify="flex-end">
            <Button variant="default" onClick={() => setReceiveOpen(false)}>
              Close
            </Button>
          </Group>
        </Stack>
      </Modal>
    </PageContainer>
  );
}
