import { type ReactElement } from "react";
import {
  LogIn,
  LogOut,
  MessageSquareReply,
  UserPlus,
  CheckCircle2,
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

/**
 * Email Marketing primitives — WealthX DS
 *
 * Atomic building blocks for the Email Marketing Hub (BUILD-2282): campaign
 * and drip status, and drip trigger conditions. Used inside
 * CampaignSummaryCard, DripStepCard, CampaignList and DripSequenceBuilder.
 */

// ---------------------------------------------------------------------------
// EmailStatusBadge
// ---------------------------------------------------------------------------

export type EmailStatus =
  | "scheduled"
  | "sending"
  | "sent"
  | "paused"
  | "active"
  | "ended"
  /** The campaign's own setup is broken — terminal, and only deletable. */
  | "error";

const STATUS_CONFIG: Record<
  EmailStatus,
  {
    label: string;
    variant: "secondary" | "info" | "warning" | "success" | "outline" | "destructive";
  }
> = {
  scheduled: { label: "Scheduled", variant: "info" },
  sending: { label: "Sending", variant: "warning" },
  sent: { label: "Sent", variant: "success" },
  paused: { label: "Paused", variant: "outline" },
  active: { label: "Active", variant: "success" },
  ended: { label: "Ended", variant: "secondary" },
  error: { label: "Error", variant: "destructive" },
};

export interface EmailStatusBadgeProps {
  status: EmailStatus;
  className?: string;
}

/** Status badge for a campaign or drip — draft/scheduled/sending/sent/paused/active/ended. */
export function EmailStatusBadge({
  status,
  className,
}: EmailStatusBadgeProps): ReactElement {
  const config = STATUS_CONFIG[status];
  return (
    <Badge variant={config.variant} className={cn(className)}>
      {config.label}
    </Badge>
  );
}

// ---------------------------------------------------------------------------
// EmailTriggerChip
// ---------------------------------------------------------------------------

export type EmailTriggerKind =
  | "contact-added"
  | "stage-enter"
  | "stage-exit"
  | "reply"
  | "completed";

const TRIGGER_ICON: Record<EmailTriggerKind, typeof LogIn> = {
  "contact-added": UserPlus,
  "stage-enter": LogIn,
  "stage-exit": LogOut,
  reply: MessageSquareReply,
  completed: CheckCircle2,
};

export interface EmailTriggerChipProps {
  kind: EmailTriggerKind;
  /** e.g. "Client enters stage: Leads" or "Replies to any step email". */
  label: string;
  className?: string;
}

/** Icon + label chip describing a drip start/end trigger condition. */
export function EmailTriggerChip({
  kind,
  label,
  className,
}: EmailTriggerChipProps): ReactElement {
  const Icon = TRIGGER_ICON[kind];
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1.5 border border-border bg-muted/40 px-2.5 py-1 text-caption text-foreground",
        className,
      )}
    >
      <Icon className="size-3.5 shrink-0 text-muted-foreground" />
      {label}
    </span>
  );
}