import { cn } from "@/lib/utils";
import { Badge } from "@/components/ui/badge";
import { Checkbox } from "@/components/ui/checkbox";
import { Switch } from "@/components/ui/switch";

/**
 * Pipeline domain primitives — WealthX DS
 *
 * Complex domain-specific atoms for the Pipeline / Loan CRM feature
 * that cannot be expressed as simple use-cases of existing primitives.
 *
 * Simple patterns (priority dot, days chip, loan type badge, progress bar)
 * are documented as use-cases in their respective base component stories
 * (Badge, Chip, Progress) — not exported as separate components.
 *
 * Layer: L2 Domain Primitive
 */

// ---------------------------------------------------------------------------
// TaskCheckItem
// ---------------------------------------------------------------------------

export interface TaskCheckItemProps {
  /** Task display title. */
  title: string;
  /** Whether the task has been completed. */
  completed: boolean;
  /** Name of the AI agent assigned to this task, if any. */
  aiAgentName?: string | null;
  /**
   * When `aiAgentName` is set and this prop is provided (true/false),
   * a "Allow Agent to Auto Complete" switch is shown beneath the agent badge.
   * Omit this prop to hide the switch entirely.
   */
  autoCompleteEnabled?: boolean;
  /** Called when the auto-complete switch is toggled. */
  onAutoCompleteToggle?: () => void;
  /** Called when the checkbox is toggled. */
  onToggle?: () => void;
  /** Disables interaction (e.g. while saving). */
  disabled?: boolean;
  /**
   * Text size for the task title.
   * - "xs" (default) — 12px, for compact card usage
   * - "sm" — 14px, for standalone / drawer usage
   */
  size?: "xs" | "sm";
  className?: string;
}

/**
 * A single task row with a checkbox, title (strikethrough when done),
 * and an optional AI agent chip.
 *
 * Used in two contexts:
 * - `OpportunityCard` (kanban card) — default `size="xs"` (12px), compact
 * - `StageTimeline` (drawer Tasks tab) — `size="sm"` (14px), standalone
 *
 * Data source: `Opportunity.tasks[]` from `loan-crm.ts`
 * - `completed` ← `task.completedTaskId !== null`
 * - `aiAgentName` ← `task.aiAgentName`
 */
export function TaskCheckItem({
  title,
  completed,
  aiAgentName,
  autoCompleteEnabled,
  onAutoCompleteToggle,
  onToggle,
  disabled = false,
  size = "xs",
  className,
}: TaskCheckItemProps) {
  return (
    <div
      className={cn(
        "flex cursor-pointer items-start gap-2 py-1.5",
        disabled && "pointer-events-none opacity-60",
        className,
      )}
      onClick={() => onToggle?.()}
      data-slot="task-check-item"
    >
      {/*
       * Wrapper span stops click propagation so the outer div's onClick doesn't
       * double-fire when the user clicks the Checkbox button directly.
       * (Radix Checkbox renders as <button> — clicking it fires onCheckedChange,
       * then the event would bubble to the div and call onToggle a second time.)
       */}
      <span onClick={(e) => e.stopPropagation()} className="mt-0.5 shrink-0">
        <Checkbox
          checked={completed}
          onCheckedChange={() => onToggle?.()}
          disabled={disabled}
        />
      </span>
      <span className="flex min-w-0 flex-1 flex-col gap-0.5">
        <span
          className={cn(
            "leading-snug text-foreground",
            size === "sm" ? "text-sm" : "text-xs",
            completed && "text-muted-foreground line-through",
          )}
        >
          {title}
        </span>
        {aiAgentName && (
          <Badge variant="secondary" className="gap-1 text-[10px]">
            <span
              className="size-1.5 rounded-full bg-primary"
              aria-hidden="true"
            />
            {aiAgentName}
          </Badge>
        )}
        {aiAgentName && autoCompleteEnabled !== undefined && (
          <span
            className="flex items-center gap-1.5"
            onClick={(e) => e.stopPropagation()}
          >
            <Switch
              checked={autoCompleteEnabled}
              onCheckedChange={() => onAutoCompleteToggle?.()}
              disabled={disabled}
              className="scale-75 origin-left"
              aria-label="Allow agent to auto complete"
            />
            <span className="text-[10px] text-muted-foreground">
              Allow Agent to Auto Complete
            </span>
          </span>
        )}
      </span>
    </div>
  );
}
