import type { ComponentType, SectionKey } from "@/lib/types";
import EnabledSwitchRow from "./EnabledSwitchRow";

const sectionBadgeColors: Record<SectionKey, string> = {
  k8s: "border-blue-500/30 bg-blue-500/10 text-blue-400",
  tidbcluster: "border-purple-500/30 bg-purple-500/10 text-purple-400",
  sharedpool: "border-rose-500/30 bg-rose-500/10 text-rose-400",
  tidbgroup: "border-cyan-500/30 bg-cyan-500/10 text-cyan-400",
};
const badgeBase =
  "inline-flex items-center rounded-md border px-1.5 py-px text-[11px] font-medium transition-colors";
const unselectedBadgeClasses =
  "border-surface-2/40 bg-transparent text-text-muted";

export default function BumpConfigPanel({
  component,
  componentLabel,
  targetTag,
  onTargetTagChange,
  tagPlaceholder,
  availableSections,
  selectedSections,
  onToggleSection,
  sectionLabels,
  updateVariants,
  onUpdateVariantsChange,
}: {
  component: ComponentType;
  componentLabel: string;
  targetTag: string;
  onTargetTagChange: (value: string) => void;
  tagPlaceholder: string;
  availableSections: SectionKey[];
  selectedSections: Set<SectionKey>;
  onToggleSection: (section: SectionKey) => void;
  sectionLabels: Record<SectionKey, string>;
  updateVariants: boolean;
  onUpdateVariantsChange: (checked: boolean) => void;
}) {
  return (
    <div className="p-4 space-y-3 border-b border-surface-2">
      <div>
        <label htmlFor="targetTag" className="block text-sm font-medium mb-1.5">
          Target Version ({componentLabel})
        </label>
        <input
          id="targetTag"
          type="text"
          value={targetTag}
          onChange={(e) => onTargetTagChange(e.target.value)}
          placeholder={tagPlaceholder}
          className="w-full px-3 py-2.5 bg-surface-1 border border-surface-2 rounded-lg text-sm font-mono placeholder:text-text-muted focus:border-accent focus:ring-1 focus:ring-accent/30 transition-colors outline-none"
        />
      </div>

      {component !== "acs" && availableSections.length > 0 && (
        <div className="space-y-2">
          <div className="flex items-center gap-4">
            <span className="text-sm text-text-secondary">Sections:</span>
            <div className="flex gap-2 flex-wrap">
              {availableSections.map((s) => {
                const isSelected = selectedSections.has(s);
                return (
                  <label key={s} className="flex items-center gap-1.5 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={isSelected}
                      onChange={() => onToggleSection(s)}
                      className="accent-accent"
                    />
                    <span className={`${badgeBase} ${isSelected ? sectionBadgeColors[s] : unselectedBadgeClasses}`}>
                      {sectionLabels[s]}
                    </span>
                  </label>
                );
              })}
            </div>
          </div>
          {component === "vmagent" && !availableSections.includes("tidbgroup") && (
            <p className="text-xs text-text-muted">
              VMagent does not support TidbGroup section by policy.
            </p>
          )}
        </div>
      )}

      <EnabledSwitchRow
        title="Also update variant templates"
        description="Keep provider variant templates aligned with selected region files."
        checked={updateVariants}
        onChange={onUpdateVariantsChange}
      />
    </div>
  );
}