import { ChatMarkdown } from "@rakazo/chat-ui/web";
import { BotAvatar } from "@rakazo/ui-web";

export interface DelegatedTaskCardProps {
  toBotId: string;
  toBotName: string;
  color: string;
  text: string;
  status?: string;
  onClick: () => void;
}

/**
 * Rich Interactive Card shown in chat when an agent delegates a task to another bot.
 * Replaces the minimal chip with a status-driven task card.
 */
export function DelegatedTaskCard({
  toBotId,
  toBotName,
  color,
  text,
  status,
  onClick,
}: DelegatedTaskCardProps) {
  const isRunning = status === "running" || status === "active";

  return (
    <div className="my-2 flex justify-start">
      <button
        type="button"
        onClick={onClick}
        data-testid="delegated-task-card"
        className="w-[min(480px,96%)] rounded-[18px] border border-border bg-card/75 p-3.5 shadow-xs transition-all hover:border-primary/40 hover:bg-card hover:shadow-md cursor-pointer text-left"
      >
        {/* Header */}
        <div className="flex items-center justify-between gap-2">
          <div className="flex items-center gap-2.5 min-w-0">
            <BotAvatar color={color} identity={toBotId} size={22} />
            <div className="truncate font-semibold text-ui-body text-foreground">{toBotName}</div>
            <span className="rounded-md bg-muted px-1.5 py-0.5 text-ui-label font-medium text-muted-foreground uppercase tracking-wider">
              Task
            </span>
          </div>

          {/* Status Badge */}
          <div
            className={`flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-ui-body-sm font-medium shrink-0 ${
              isRunning ? "bg-warning/15 text-warning" : "bg-success/15 text-success"
            }`}
          >
            <span
              className={`h-2 w-2 rounded-full ${
                isRunning ? "bg-warning animate-ping" : "bg-success"
              }`}
            />
            <span>{isRunning ? "In Bearbeitung" : "Delegiert"}</span>
          </div>
        </div>

        {/* Task Body */}
        <div className="mt-2.5 rounded-xl border border-border/50 bg-muted/40 p-2.5 text-ui-body-sm leading-relaxed text-foreground/90">
          <div className="line-clamp-4">
            <ChatMarkdown>{text}</ChatMarkdown>
          </div>
        </div>

        {/* Footer */}
        <div className="mt-2.5 flex items-center justify-between text-ui-body-sm text-muted-foreground">
          <span className="flex items-center gap-1">
            <span className="inline-block h-1.5 w-1.5 rounded-full bg-muted-foreground/60" />
            Autonomer Hintergrund-Task
          </span>
          <span className="font-medium text-primary hover:underline flex items-center gap-1">
            Verlauf & Logs öffnen →
          </span>
        </div>
      </button>
    </div>
  );
}