import { useState } from "react";
import {
  Anchor,
  Button,
  Card,
  List,
  Text,
  Title,
} from "@mantine/core";
import { IconChevronDown, IconChevronUp, IconExternalLink } from "@tabler/icons-react";
import { LANGFLOW_URL } from "../api";

export default function FlowHelp() {
  const [open, setOpen] = useState(false);

  return (
    <Card withBorder padding="md" mb="md">
      <Button
        variant="subtle"
        leftSection={open ? <IconChevronUp size={16} /> : <IconChevronDown size={16} />}
        onClick={() => setOpen((v) => !v)}
      >
        {open ? "Anleitung verbergen" : "Anleitung: Neuer Flow in Langflow"}
      </Button>
      {open && (
      <div>
        <Title order={4} mt="sm" mb="xs">
          So kommt ein neuer Flow in die Webapp
        </Title>
        <List size="sm" spacing="xs">
          <List.Item>
            <Text component="span" fw={600}>
              1. In Langflow entwerfen und speichern:{" "}
            </Text>
            <Anchor href={LANGFLOW_URL} target="_blank" rel="noreferrer">
              Langflow öffnen <IconExternalLink size={14} />
            </Anchor>
            . Die bestehenden Flows sind dort bereits geladen. Name vergeben, speichern.
          </List.Item>
          <List.Item>
            <Text component="span" fw={600}>
              2. Sync-Button unten klicken:{" "}
            </Text>
            holt alle Flows aus Langflow nach{" "}
            <Text component="span" ff="monospace">
              backend/flows/*.json
            </Text>{" "}
            und deployed sie danach automatisch (neue Version nur bei geändertem Inhalt,
            sonst übersprungen).
          </List.Item>
          <List.Item>
            <Text component="span" fw={600}>
              3. Prüfen:{" "}
            </Text>
            Tabelle unten zeigt Version, Autor und Status. Danach erscheint der Flow
            automatisch auf der Seite Workflows mit seinem Formular. Flows ohne
            Formular-Knoten zeigen ein Freitext-Feld.
          </List.Item>
        </List>
        <Title order={5} mt="md" mb="xs">
          Regeln
        </Title>
        <List size="sm" spacing="xs">
          <List.Item>
            Der Dateiname wird aus dem Flow-Namen erzeugt (Kleinbuchstaben,
            Bindestriche). Umbenennen erzeugt eine neue Datei.
          </List.Item>
          <List.Item>
            Eine gelöschte Datei löscht den Flow inklusive seiner Läufe
            (Datei bleibt in Git erhalten).
          </List.Item>
          <List.Item>
            Fehler stehen in der Sync-Meldung (z. B. ungültiges Flow-JSON).
            Der automatische Beobachter im Hintergrund syncet nur Dateien,
            Langflow holt nur dieser Button.
          </List.Item>
        </List>
        <Title order={5} mt="md" mb="xs">
          Formular-Felder
        </Title>
        <Text size="sm">
          Für ein Web-Formular braucht der Flow einen CustomInputForm-Knoten: jeder
          Eintrag dort ist ein Formularfeld (Name = Feld-Key, Anzeigename = Label).
          Die Verbindung ChatInput nach form_values bitte behalten — darüber kommen
          die ausgefüllten Werte an. Unbekannte Feldtypen fallen automatisch auf ein
          Textfeld zurück.
        </Text>
      </div>
      )}
    </Card>
  );
}