"use client";

import { IconRefresh } from "@tabler/icons-react";
import { useTranslation } from "react-i18next";
import { Button } from "@kandev/ui/button";
import { Separator } from "@kandev/ui/separator";
import { WorkflowSyncDialog } from "@/components/settings/workflow-sync-dialog";
import { WorkflowSyncStatusCard } from "@/components/settings/workflow-sync-status-banner";
import { useWorkflowSync } from "@/hooks/domains/settings/use-workflow-sync";
import { settingsActionClassName } from "@/components/settings/settings-control";

// WorkflowSyncButton is the workflow sync entry point (GitHub or GitLab),
// rendered alongside the other workflow actions (Export / Import / Add). The
// dialog open state lives with the caller so button and section can sit in
// different parts of the layout.
export function WorkflowSyncButton({ onClick }: { onClick: () => void }) {
  const { t } = useTranslation();
  return (
    <Button
      type="button"
      variant="outline"
      size="sm"
      onClick={onClick}
      className={settingsActionClassName("cursor-pointer")}
      data-testid="workflow-sync-open"
    >
      <IconRefresh className="h-4 w-4 mr-2" />
      {t("workflows:syncTitle")}
    </Button>
  );
}

type WorkflowSyncSectionProps = {
  workspaceId: string;
  dialogOpen: boolean;
  onDialogOpenChange: (open: boolean) => void;
};

// WorkflowSyncSection renders the workflow-sync state inside the Workflows
// settings section: the configuration dialog (opened via WorkflowSyncButton
// in the section's action row) and — once a sync is configured — a compact
// status card above the workflow list showing what is syncing and how the
// last attempt went. Unconfigured workspaces render nothing visible.
export function WorkflowSyncSection({
  workspaceId,
  dialogOpen,
  onDialogOpenChange,
}: WorkflowSyncSectionProps) {
  const sync = useWorkflowSync(workspaceId);

  return (
    <>
      {sync.config && (
        // pl-8 matches the workflow list's drag-handle gutter so the card's
        // left edge lines up with the workflow cards below.
        <div className="mb-4 space-y-4 pl-8" data-testid="workflow-sync-section">
          <WorkflowSyncStatusCard
            config={sync.config}
            syncing={sync.syncing}
            onSyncNow={sync.handleSyncNow}
          />
          <Separator />
        </div>
      )}
      <WorkflowSyncDialog
        key={workspaceId}
        open={dialogOpen}
        onOpenChange={onDialogOpenChange}
        sync={sync}
      />
    </>
  );
}