"use client";

import { Fragment, memo, useMemo, useState } from "react";
import { IconCheck, IconChevronDown, IconLogicBuffer } from "@tabler/icons-react";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@kandev/ui/tooltip";
import { Popover, PopoverContent, PopoverTrigger } from "@kandev/ui/popover";
import { Button } from "@kandev/ui/button";
import type { WorkflowSnapshotData } from "@/lib/state/slices/kanban/types";
import type { AgentProfileOption } from "@/lib/state/slices";
import { AgentLogo } from "@/components/agent-logo";

type StepItem = {
  id: string;
  title: string;
  color: string;
  position: number;
  agent_profile_id?: string;
  is_start_step?: boolean;
};

function InlineSteps({
  steps,
  agentProfiles,
}: {
  steps: StepItem[];
  agentProfiles: AgentProfileOption[];
}) {
  if (steps.length === 0) return null;
  return (
    <div className="flex items-center gap-1.5 text-xs text-muted-foreground whitespace-nowrap">
      {steps.map((s, i) => {
        const stepProfile = s.agent_profile_id
          ? agentProfiles.find((p) => p.id === s.agent_profile_id)
          : null;
        return (
          <Fragment key={s.id}>
            {i > 0 && <span className="text-muted-foreground/40">{"\u2192"}</span>}
            <span className="flex items-center gap-1">
              <span
                className="h-1.5 w-1.5 rounded-full shrink-0"
                style={{ backgroundColor: s.color || "hsl(var(--muted-foreground))" }}
              />
              {s.title}
              {s.is_start_step && (
                <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <span className="text-[10px] text-muted-foreground/60 leading-none">*</span>
                    </TooltipTrigger>
                    <TooltipContent>Start step</TooltipContent>
                  </Tooltip>
                </TooltipProvider>
              )}
              {stepProfile && (
                <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <span data-testid="step-agent-logo">
                        <AgentLogo
                          agentName={stepProfile.agent_name}
                          size={12}
                          className="shrink-0"
                        />
                      </span>
                    </TooltipTrigger>
                    <TooltipContent>{stepProfile.label}</TooltipContent>
                  </Tooltip>
                </TooltipProvider>
              )}
            </span>
          </Fragment>
        );
      })}
    </div>
  );
}

type WorkflowSelectorRowProps = {
  workflows: Array<{
    id: string;
    name: string;
    description?: string | null;
    agent_profile_id?: string;
  }>;
  snapshots: Record<string, WorkflowSnapshotData>;
  selectedWorkflowId: string | null;
  onWorkflowChange: (workflowId: string) => void;
  lastUsedWorkflowId?: string | null;
  agentProfiles: AgentProfileOption[];
};

export const WorkflowSelectorRow = memo(function WorkflowSelectorRow({
  workflows,
  snapshots,
  selectedWorkflowId,
  onWorkflowChange,
  lastUsedWorkflowId,
  agentProfiles,
}: WorkflowSelectorRowProps) {
  const [open, setOpen] = useState(false);

  const selectedWorkflow = useMemo(
    () => workflows.find((w) => w.id === selectedWorkflowId),
    [workflows, selectedWorkflowId],
  );

  // Sort workflows: last-used first, then original order (which is already by sort_order)
  const sortedWorkflows = useMemo(() => {
    if (!lastUsedWorkflowId) return workflows;
    return [...workflows].sort((a, b) => {
      if (a.id === lastUsedWorkflowId) return -1;
      if (b.id === lastUsedWorkflowId) return 1;
      return 0;
    });
  }, [workflows, lastUsedWorkflowId]);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          type="button"
          variant="ghost"
          className="w-auto justify-between cursor-pointer"
          data-testid="workflow-selector-trigger"
        >
          <IconLogicBuffer className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
          <span className="truncate">{selectedWorkflow?.name ?? "Select workflow"}</span>
          <IconChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto min-w-[300px] max-w-none p-1" align="start">
        <div className="text-muted-foreground px-2 py-1.5 text-xs border-b">Workflow</div>
        {sortedWorkflows.map((wf) => {
          const isSelected = wf.id === selectedWorkflowId;
          const snapshot = snapshots[wf.id];
          const steps = snapshot ? [...snapshot.steps].sort((a, b) => a.position - b.position) : [];
          return (
            <button
              key={wf.id}
              type="button"
              onClick={() => {
                onWorkflowChange(wf.id);
                setOpen(false);
              }}
              className="w-full flex flex-col gap-1 px-2 py-1.5 rounded-sm hover:bg-muted transition-colors cursor-pointer text-left relative pr-8"
            >
              <div className="flex items-center gap-2">
                <IconLogicBuffer className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
                <span className="text-sm">{wf.name}</span>
                {wf.agent_profile_id &&
                  (() => {
                    const wfProfile = agentProfiles.find((p) => p.id === wf.agent_profile_id);
                    return wfProfile ? (
                      <TooltipProvider>
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <span data-testid="workflow-agent-logo">
                              <AgentLogo
                                agentName={wfProfile.agent_name}
                                size={14}
                                className="shrink-0"
                              />
                            </span>
                          </TooltipTrigger>
                          <TooltipContent>{wfProfile.label}</TooltipContent>
                        </Tooltip>
                      </TooltipProvider>
                    ) : null;
                  })()}
              </div>
              {steps.length > 0 && (
                <div className="pl-[calc(0.875rem+0.5rem)]">
                  <InlineSteps steps={steps} agentProfiles={agentProfiles} />
                </div>
              )}
              {isSelected && (
                <IconCheck className="absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4" />
              )}
            </button>
          );
        })}
      </PopoverContent>
    </Popover>
  );
});