app/frontend/src/components/Flow/FlowPanel.tsx

import { useState } from "react"

import type { FlowDef_Input } from "@/client"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Switch } from "@/components/ui/switch"
import { PANEL_SECTION, PanelTitle, SidePanel } from "./SidePanel"

/**
 * The flow's own settings, in the same panel its nodes use — down to where the
 * name sits and how confirming a new one works.
 */
export function FlowPanel({
  open,
  definition,
  nodeCount,
  onChange,
  onDelete,
  hasDraft,
  discarding,
  onDiscardDraft,
  enabled,
  toggling,
  onToggleEnabled,
  onClose,
}: {
  open: boolean
  definition: FlowDef_Input
  nodeCount: number
  onChange: (next: FlowDef_Input) => void
  onDelete: () => void
  hasDraft: boolean
  discarding: boolean
  onDiscardDraft: () => void
  enabled: boolean
  toggling: boolean
  onToggleEnabled: (next: boolean) => void
  onClose: () => void
}) {
  const [confirmOpen, setConfirmOpen] = useState(false)
  const [discardOpen, setDiscardOpen] = useState(false)

  return (
    <>
      <SidePanel
        open={open}
        label="Flow settings"
        testId="flow-panel"
        bodyKey={definition.name}
        onClose={onClose}
        header={
          <PanelTitle
            value={definition.title ?? ""}
            placeholder={definition.name}
            label="Flow title"
            onConfirm={(title) => onChange({ ...definition, title })}
          />
        }
        footer={
          <Button
            variant="ghost"
            size="sm"
            className="text-destructive hover:text-destructive"
            onClick={() => setConfirmOpen(true)}
            data-testid="delete-flow"
          >
            Delete flow
          </Button>
        }
      >
        <div className="grid gap-6 p-4">
          <div className="grid gap-3">
            <span className={PANEL_SECTION}>Running</span>
            <div className="flex items-center justify-between gap-3">
              <p className="text-sm text-muted-foreground">
                {enabled
                  ? "The engine runs this flow: subscriptions, schedules and webhooks are live."
                  : "Stopped. Nothing of this flow is subscribed, scheduled or reachable."}
              </p>
              <Switch
                checked={enabled}
                disabled={toggling}
                onCheckedChange={onToggleEnabled}
                aria-label="Run this flow"
                data-testid="flow-enabled"
              />
            </div>
          </div>

          <div className="grid gap-3">
            <span className={PANEL_SECTION}>Contents</span>
            <p className="text-sm text-muted-foreground">
              <span className="font-mono">{definition.name}</span> namespaces
              every message in here.{" "}
              {nodeCount === 0
                ? "No nodes yet."
                : `${nodeCount} node${nodeCount === 1 ? "" : "s"}.`}
            </p>
          </div>

          {hasDraft ? (
            <div className="grid gap-3">
              <span className={PANEL_SECTION}>Unpublished changes</span>
              <p className="text-sm text-muted-foreground">
                The engine is still running the last published version of this
                flow.
              </p>
              <Button
                variant="outline"
                size="sm"
                className="h-8 justify-self-start"
                disabled={discarding}
                onClick={() => setDiscardOpen(true)}
                data-testid="discard-draft"
              >
                {discarding ? "Discarding…" : "Discard changes"}
              </Button>
            </div>
          ) : null}
        </div>
      </SidePanel>

      <Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>
              Delete {definition.title || definition.name}?
            </DialogTitle>
            <DialogDescription>
              This removes the flow and the code of its{" "}
              {nodeCount === 1 ? "node" : `${nodeCount} nodes`}. Its history
              stays in the flow store's git repository.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setConfirmOpen(false)}>
              Keep it
            </Button>
            <Button
              variant="destructive"
              onClick={() => {
                setConfirmOpen(false)
                onDelete()
              }}
              data-testid="confirm-delete-flow"
            >
              Delete flow
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={discardOpen} onOpenChange={setDiscardOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Discard the unpublished changes?</DialogTitle>
            <DialogDescription>
              The canvas goes back to the version the engine is running. What
              you edited since is dropped, though the flow store's git history
              keeps it.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDiscardOpen(false)}>
              Keep editing
            </Button>
            <Button
              variant="destructive"
              onClick={() => {
                setDiscardOpen(false)
                onDiscardDraft()
              }}
              data-testid="confirm-discard-draft"
            >
              Discard changes
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  )
}