/**
 * CsvImportTagStep — the "assign tags" panel for the contact CSV import flow.
 * Tags entered here apply to every contact in the imported batch. Optional —
 * the broker can leave it empty. Composes {@link TagInput}; pure & controlled.
 */
import { type ReactElement } from "react";
import { cn } from "@/lib/utils";
import { TagInput } from "./tag-input";

export interface CsvImportTagStepProps {
  /** Tags to apply to the whole batch (controlled). */
  tags: string[];
  onChange: (next: string[]) => void;
  /** The broker's existing tag library, for autocomplete. */
  suggestions?: string[];
  /** Number of contacts in the batch, shown in the helper line. */
  contactCount?: number;
  disabled?: boolean;
  className?: string;
}

export function CsvImportTagStep({
  tags,
  onChange,
  suggestions = [],
  contactCount,
  disabled = false,
  className,
}: CsvImportTagStepProps): ReactElement {
  return (
    <div
      className={cn("flex flex-col gap-2", className)}
      data-slot="csv-import-tag-step"
    >
      <div className="flex flex-col gap-0.5">
        <p className="text-label-medium text-foreground">
          Add tags{" "}
          <span className="text-body-small text-muted-foreground">
            (optional)
          </span>
        </p>
        <p className="text-body-small text-muted-foreground">
          {contactCount != null
            ? `Applied to all ${contactCount} imported contacts.`
            : "Applied to all imported contacts."}{" "}
          Use tags to group and target them in campaigns.
        </p>
      </div>
      <TagInput
        value={tags}
        onChange={onChange}
        suggestions={suggestions}
        disabled={disabled}
        placeholder="Add a tag for this batch…"
        aria-label="Add tags to imported contacts"
      />
    </div>
  );
}

export default CsvImportTagStep;