1import {
 2  Badge,
 3  Card,
 4  CardContent,
 5  CardHeader,
 6  CardTitle,
 7  Tabs,
 8  TabsContent,
 9  TabsList,
10  TabsTrigger,
11} from "@marzneshin/common/components";
12import { NodeConfigEditor } from "./node-config-editor";
13import { LogContainer } from "../../log";
14import { useTranslation } from "react-i18next";
15import { type NodeType, useBackendStatsQuery } from "../..";
16import type { FC } from "react";
17
18export const NodeBackendSetting: FC<{ node: NodeType; backend: string }> = ({
19  node,
20  backend,
21}) => {
22  const { t } = useTranslation();
23  const nodeBackend = node.backends.find((item) => item.name === backend);
24  const { data: backendStats } = useBackendStatsQuery(node, backend);
25  return (
26    <Card>
27      <CardHeader className="flex flex-row items-center  gap-2 w-full">
28        <CardTitle className="capitalize">{backend}</CardTitle>
29        {nodeBackend?.version && (
30          <Badge className="size-fit">v{nodeBackend.version}</Badge>
31        )}
32        {backendStats === null ? (
33          <Badge variant="disabled" className="size-fit">
34            {t("unknown")}
35          </Badge>
36        ) : backendStats.running ? (
37          <Badge variant="positive" className="size-fit">
38            {t("running")}
39          </Badge>
40        ) : (
41          <Badge variant="destructive" className="size-fit">
42            {t("down")}
43          </Badge>
44        )}
45      </CardHeader>
46      <CardContent className="p-2 w-full h-1/2 flex flex-col gap-2">
47        <Tabs className="my-3 w-full h-full" defaultValue="logs">
48          <TabsList className="w-full">
49            <TabsTrigger className="w-full" value="logs">
50              {t("logs")}
51            </TabsTrigger>
52            <TabsTrigger className="w-full" value="config">
53              {t("config")}
54            </TabsTrigger>
55          </TabsList>
56          <TabsContent value="logs" className="h-full w-full">
57            <LogContainer node={node} backend={backend} />
58          </TabsContent>
59          <TabsContent value="config" className="h-full z-51">
60            <NodeConfigEditor entity={node} backend={backend} />
61          </TabsContent>
62        </Tabs>
63      </CardContent>
64    </Card>
65  );
66};