import { Routes, Route } from "react-router-dom";
import { AppShell, Container, Title, Group, Text } from "@mantine/core";
import { IconTopologyRing } from "@tabler/icons-react";
import { DagList } from "./pages/DagList";
import { DagDetail } from "./pages/DagDetail";
import { RunDetail } from "./pages/RunDetail";

export function App() {
  return (
    <AppShell header={{ height: 50 }} padding="md">
      <AppShell.Header>
        <Group h="100%" px="md">
          <IconTopologyRing size={24} />
          <Title order={4}>DAG Engine</Title>
          <Text size="xs" c="dimmed">
            fn_registry workflow executor
          </Text>
        </Group>
      </AppShell.Header>

      <AppShell.Main>
        <Container size="lg">
          <Routes>
            <Route path="/" element={<DagList />} />
            <Route path="/dags/:name" element={<DagDetail />} />
            <Route path="/runs/:id" element={<RunDetail />} />
          </Routes>
        </Container>
      </AppShell.Main>
    </AppShell>
  );
}