import type { ReactNode } from "react";
import { Button } from "@/components/ui/Button";
import { isFileSyncMode, type BumpMode } from "../model/file-sync";

interface SelectStepSectionProps {
  mode: BumpMode;
  sourceRegionId: string;
  sourceStatusHasDiff?: boolean;
  sourceOverlapsTargets: boolean;
  effectiveSelectedCount: number;
  isTagValid: boolean;
  targetTag: string;
  selectedCount: number;
  canPreview: boolean;
  previewing: boolean;
  onBack: () => void;
  onPreview: () => void;
  targetRegionsPanel: ReactNode;
  configPanel: ReactNode;
}

export function SelectStepSection({
  mode,
  sourceRegionId,
  sourceStatusHasDiff,
  sourceOverlapsTargets,
  effectiveSelectedCount,
  isTagValid,
  targetTag,
  selectedCount,
  canPreview,
  previewing,
  onBack,
  onPreview,
  targetRegionsPanel,
  configPanel,
}: SelectStepSectionProps) {
  return (
    <section className="space-y-4">
      {targetRegionsPanel}

      <div className="bg-surface-0 rounded-lg border border-surface-2 overflow-hidden">
        {configPanel}
      </div>

      <div className="flex items-center gap-3">
        <Button
          onClick={onBack}
          variant="secondary"
        >
          Back
        </Button>
        <Button
          onClick={onPreview}
          disabled={!canPreview}
          aria-busy={previewing}
        >
          {previewing ? "Generating Preview..." : "Preview Changes"}
        </Button>
        {mode === "image" && !isTagValid && targetTag.length > 0 && (
          <span className="text-xs text-danger">Invalid tag format</span>
        )}
        {mode === "image" && isTagValid && selectedCount === 0 && (
          <span className="text-xs text-warning">Select at least one region</span>
        )}
        {isFileSyncMode(mode) && !sourceRegionId && (
          <span className="text-xs text-warning">Select a source region</span>
        )}
        {isFileSyncMode(mode) && sourceRegionId && sourceStatusHasDiff !== true && (
          <span className="text-xs text-warning">Source region is not ready for preview</span>
        )}
        {isFileSyncMode(mode) && sourceOverlapsTargets && effectiveSelectedCount > 0 && (
          <span className="text-xs text-warning">Source region is excluded from the target set.</span>
        )}
        {isFileSyncMode(mode) && sourceOverlapsTargets && effectiveSelectedCount === 0 && (
          <span className="text-xs text-warning">
            No sync targets remain after excluding the source region.
          </span>
        )}
      </div>
    </section>
  );
}