import React from "react";
import { MoreHorizontal } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Switch } from "@/components/ui/switch";
import { cn } from "@/lib/utils";
import type { AiBuilderAgentItem } from "./types";

// ---------------------------------------------------------------------------
// AgentCard
// ---------------------------------------------------------------------------

export type AgentCardProps = {
  agent: AiBuilderAgentItem;
  /** Brand icon shown before the title (e.g. a platform connector's logo). */
  iconNode?: React.ReactNode;
  onToggle: (agentId: string, enabled: boolean) => void;
  onMenuClick: (agentId: string) => void;
  className?: string;
};

export function AgentCard({
  agent,
  iconNode,
  onToggle,
  onMenuClick,
  className,
}: AgentCardProps) {
  const { id, title, description, tags, isEnabled, infoBadge, isComingSoon } =
    agent;

  return (
    <Card
      className={cn(
        "flex flex-col gap-3 p-4 transition-opacity",
        isComingSoon && "opacity-60",
        className,
      )}
    >
      <div className="flex items-start justify-between gap-2">
        <div className="flex flex-1 items-center gap-2 min-w-0">
          {iconNode && (
            <span className="flex size-6 shrink-0 items-center justify-center [&>img]:size-6 [&>svg]:size-6">
              {iconNode}
            </span>
          )}
          <span className="truncate text-label-medium leading-tight">
            {title}
          </span>
          {isComingSoon && (
            <Badge variant="outline" className="shrink-0 text-xs">
              Coming Soon
            </Badge>
          )}
        </div>
        <div className="flex shrink-0 items-center gap-1">
          <Switch
            checked={isEnabled}
            disabled={isComingSoon}
            onCheckedChange={(checked) => onToggle(id, checked)}
            aria-label={`Toggle ${title}`}
          />
          <Button
            variant="ghost"
            size="icon"
            className="h-7 w-7"
            onClick={() => onMenuClick(id)}
            aria-label={`View details for ${title}`}
          >
            <MoreHorizontal className="h-4 w-4" />
          </Button>
        </div>
      </div>

      <p className="text-body-small text-muted-foreground flex-1">
        {description}
      </p>

      <div className="flex flex-col gap-2">
        {infoBadge && (
          <p className="bg-info/10 text-info px-2 py-1 text-caption">
            {infoBadge}
          </p>
        )}
        {tags.length > 0 && (
          <div className="flex flex-wrap gap-1">
            {tags.map((tag) => (
              <Badge key={tag} variant="secondary" className="text-xs">
                {tag}
              </Badge>
            ))}
          </div>
        )}
      </div>
    </Card>
  );
}

// ---------------------------------------------------------------------------
// AgentMenuModal
// ---------------------------------------------------------------------------

export type AgentMenuModalProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  agentTitle: string;
  /**
   * Agent-specific description. Callers should look this up from a
   * slug-keyed content map and fall back to the agent's own backend
   * description when no authored entry exists — never a shared generic
   * default (see agent-card.md changelog, BUILD-2354).
   */
  description?: string;
  /** Capability bullets. Omit (or pass an empty array) when no authored content exists. */
  features?: Array<{ title: string; description: string }>;
  /** Short "for example" scenario illustrating what the agent does. */
  example?: string;
  /** Data sources / fields this agent reads or writes. */
  dataTouched?: string[];
};

export function AgentMenuModal({
  open,
  onOpenChange,
  agentTitle,
  description = "Details for this agent haven't been added yet.",
  features = [],
  example,
  dataTouched,
}: AgentMenuModalProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-lg">
        <DialogHeader>
          <DialogTitle>{agentTitle}</DialogTitle>
          <DialogDescription>{description}</DialogDescription>
        </DialogHeader>

        {features.length > 0 && (
          <div className="flex flex-col gap-3 py-2">
            {features.map((feature, index) => (
              <div key={feature.title} className="flex gap-3">
                <Badge
                  variant="default"
                  className="h-6 w-6 shrink-0 p-0 text-xs font-bold"
                >
                  {index + 1}
                </Badge>
                <div className="flex flex-col gap-0.5">
                  <p className="text-label-medium">{feature.title}</p>
                  <p className="text-body-small text-muted-foreground">
                    {feature.description}
                  </p>
                </div>
              </div>
            ))}
          </div>
        )}

        {example && (
          <div className="flex flex-col gap-1">
            <p className="text-label-small text-muted-foreground">Example</p>
            <p className="text-body-small">{example}</p>
          </div>
        )}

        {dataTouched && dataTouched.length > 0 && (
          <div className="flex flex-col gap-1.5">
            <p className="text-label-small text-muted-foreground">
              Data this agent touches
            </p>
            <div className="flex flex-wrap gap-1">
              {dataTouched.map((item) => (
                <Badge key={item} variant="secondary" className="text-xs">
                  {item}
                </Badge>
              ))}
            </div>
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
}