import { ArrowDown, ArrowRight, ArrowLeft, CircleSlash2, GitBranch } from "lucide-react";
import { cn } from "@/lib/utils";

export interface TransitionRowProps {
  type: "default" | "branch" | "end" | "back";
  label: string;
  targetLabel?: string;
  targetIndex?: number | null;
  optionSummaries?: { id: string; label: string }[];
  operator?: string;
}

export function TransitionRow({
  type,
  label,
  targetLabel,
  targetIndex,
  optionSummaries = [],
  operator,
}: TransitionRowProps) {
  const Icon = type === "branch" ? GitBranch : type === "end" ? CircleSlash2 : type === "back" ? ArrowLeft : ArrowDown;

  return (
    <div
      className={cn(
        "relative flex items-start gap-3 rounded-xl border p-3 text-xs transition-colors",
        type === "branch"
          ? "border-primary/40 bg-primary/5"
          : type === "back"
            ? "border-orange-400/40 bg-orange-50/50 dark:bg-orange-950/20"
            : "border-border/60 bg-background/90"
      )}
    >
      <div
        className={cn(
          "mt-0.5 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full",
          type === "branch" 
            ? "bg-primary text-primary-foreground" 
            : type === "back"
              ? "bg-orange-500 text-white dark:bg-orange-600"
              : "bg-muted text-muted-foreground"
        )}
      >
        <Icon className="h-4 w-4" />
      </div>
      <div className="flex flex-1 flex-col gap-2">
        <div className="flex flex-wrap items-center gap-2">
          <span
            className={cn(
              "text-[11px] font-semibold uppercase tracking-wide",
              type === "branch" 
                ? "text-primary" 
                : type === "back"
                  ? "text-orange-600 dark:text-orange-400"
                  : "text-muted-foreground"
            )}
          >
            {label}
          </span>
          {operator && (
            <span className="rounded-full bg-primary/10 px-2 py-0.5 text-[10px] uppercase tracking-wide text-primary">
              {operator}
            </span>
          )}
        </div>
        {optionSummaries.length > 0 && (
          <div className="flex flex-wrap gap-1.5">
            {optionSummaries.map((option) => (
              <span
                key={option.id}
                className="rounded-full bg-primary/10 px-2 py-1 text-[11px] font-medium text-primary"
              >
                {option.label}
              </span>
            ))}
          </div>
        )}
        <div className="flex items-center gap-2 text-sm text-foreground">
          {type === "end" ? (
            <span className="text-muted-foreground">Завершение воронки</span>
          ) : (
            <>
              <ArrowRight className="h-4 w-4 text-muted-foreground" />
              {typeof targetIndex === "number" && (
                <span className="inline-flex items-center rounded-md bg-muted px-2 py-0.5 text-[10px] font-semibold uppercase text-muted-foreground">
                  #{targetIndex + 1}
                </span>
              )}
              <span className="font-semibold">
                {targetLabel ?? "Не выбрано"}
              </span>
            </>
          )}
        </div>
      </div>
    </div>
  );
}
