import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { useNavigate } from "react-router-dom";
import { useDialog } from "../context/DialogContext";
import { useCompany } from "../context/CompanyContext";
import { agentsApi } from "../api/agents";
import { queryKeys } from "../lib/queryKeys";
import { AGENT_ROLES, AGENT_ADAPTER_TYPES } from "@paperclip/shared";
import {
  Dialog,
  DialogContent,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  Maximize2,
  Minimize2,
  Bot,
  User,
  Shield,
  ChevronDown,
  ChevronRight,
} from "lucide-react";
import { cn } from "../lib/utils";

const roleLabels: Record<string, string> = {
  ceo: "CEO",
  cto: "CTO",
  cmo: "CMO",
  cfo: "CFO",
  engineer: "Engineer",
  designer: "Designer",
  pm: "PM",
  qa: "QA",
  devops: "DevOps",
  researcher: "Researcher",
  general: "General",
};

const adapterLabels: Record<string, string> = {
  claude_local: "Claude (local)",
  codex_local: "Codex (local)",
  process: "Process",
  http: "HTTP",
};

export function NewAgentDialog() {
  const { newAgentOpen, closeNewAgent } = useDialog();
  const { selectedCompanyId, selectedCompany } = useCompany();
  const queryClient = useQueryClient();
  const navigate = useNavigate();
  const [expanded, setExpanded] = useState(false);

  // Identity
  const [name, setName] = useState("");
  const [title, setTitle] = useState("");
  const [role, setRole] = useState("general");
  const [reportsTo, setReportsTo] = useState("");
  const [capabilities, setCapabilities] = useState("");

  // Adapter
  const [adapterType, setAdapterType] = useState<string>("claude_local");
  const [cwd, setCwd] = useState("");
  const [promptTemplate, setPromptTemplate] = useState("");
  const [bootstrapPrompt, setBootstrapPrompt] = useState("");
  const [model, setModel] = useState("");

  // claude_local specific
  const [maxTurnsPerRun, setMaxTurnsPerRun] = useState(80);
  const [dangerouslySkipPermissions, setDangerouslySkipPermissions] = useState(true);

  // codex_local specific
  const [search, setSearch] = useState(false);
  const [dangerouslyBypassSandbox, setDangerouslyBypassSandbox] = useState(true);

  // process specific
  const [command, setCommand] = useState("");
  const [args, setArgs] = useState("");

  // http specific
  const [url, setUrl] = useState("");

  // Heartbeat
  const [heartbeatEnabled, setHeartbeatEnabled] = useState(true);
  const [intervalSec, setIntervalSec] = useState(300);
  const [wakeOnAssignment, setWakeOnAssignment] = useState(true);
  const [wakeOnOnDemand, setWakeOnOnDemand] = useState(true);
  const [wakeOnAutomation, setWakeOnAutomation] = useState(true);
  const [cooldownSec, setCooldownSec] = useState(10);

  // Runtime
  const [contextMode, setContextMode] = useState("thin");
  const [budgetMonthlyCents, setBudgetMonthlyCents] = useState(0);
  const [timeoutSec, setTimeoutSec] = useState(900);
  const [graceSec, setGraceSec] = useState(15);

  // Sections
  const [adapterOpen, setAdapterOpen] = useState(true);
  const [heartbeatOpen, setHeartbeatOpen] = useState(false);
  const [runtimeOpen, setRuntimeOpen] = useState(false);

  // Popover states
  const [roleOpen, setRoleOpen] = useState(false);
  const [reportsToOpen, setReportsToOpen] = useState(false);
  const [adapterTypeOpen, setAdapterTypeOpen] = useState(false);

  const { data: agents } = useQuery({
    queryKey: queryKeys.agents.list(selectedCompanyId!),
    queryFn: () => agentsApi.list(selectedCompanyId!),
    enabled: !!selectedCompanyId && newAgentOpen,
  });

  const isFirstAgent = !agents || agents.length === 0;
  const effectiveRole = isFirstAgent ? "ceo" : role;

  const createAgent = useMutation({
    mutationFn: (data: Record<string, unknown>) =>
      agentsApi.create(selectedCompanyId!, data),
    onSuccess: (agent) => {
      queryClient.invalidateQueries({ queryKey: queryKeys.agents.list(selectedCompanyId!) });
      reset();
      closeNewAgent();
      navigate(`/agents/${agent.id}`);
    },
  });

  function reset() {
    setName("");
    setTitle("");
    setRole("general");
    setReportsTo("");
    setCapabilities("");
    setAdapterType("claude_local");
    setCwd("");
    setPromptTemplate("");
    setBootstrapPrompt("");
    setModel("");
    setMaxTurnsPerRun(80);
    setDangerouslySkipPermissions(true);
    setSearch(false);
    setDangerouslyBypassSandbox(true);
    setCommand("");
    setArgs("");
    setUrl("");
    setHeartbeatEnabled(true);
    setIntervalSec(300);
    setWakeOnAssignment(true);
    setWakeOnOnDemand(true);
    setWakeOnAutomation(true);
    setCooldownSec(10);
    setContextMode("thin");
    setBudgetMonthlyCents(0);
    setTimeoutSec(900);
    setGraceSec(15);
    setExpanded(false);
    setAdapterOpen(true);
    setHeartbeatOpen(false);
    setRuntimeOpen(false);
  }

  function buildAdapterConfig() {
    const config: Record<string, unknown> = {};
    if (cwd) config.cwd = cwd;
    if (promptTemplate) config.promptTemplate = promptTemplate;
    if (bootstrapPrompt) config.bootstrapPromptTemplate = bootstrapPrompt;
    if (model) config.model = model;
    config.timeoutSec = timeoutSec;
    config.graceSec = graceSec;

    if (adapterType === "claude_local") {
      config.maxTurnsPerRun = maxTurnsPerRun;
      config.dangerouslySkipPermissions = dangerouslySkipPermissions;
    } else if (adapterType === "codex_local") {
      config.search = search;
      config.dangerouslyBypassApprovalsAndSandbox = dangerouslyBypassSandbox;
    } else if (adapterType === "process") {
      if (command) config.command = command;
      if (args) config.args = args.split(",").map((a) => a.trim()).filter(Boolean);
    } else if (adapterType === "http") {
      if (url) config.url = url;
    }
    return config;
  }

  function handleSubmit() {
    if (!selectedCompanyId || !name.trim()) return;
    createAgent.mutate({
      name: name.trim(),
      role: effectiveRole,
      ...(title.trim() ? { title: title.trim() } : {}),
      ...(reportsTo ? { reportsTo } : {}),
      ...(capabilities.trim() ? { capabilities: capabilities.trim() } : {}),
      adapterType,
      adapterConfig: buildAdapterConfig(),
      runtimeConfig: {
        heartbeat: {
          enabled: heartbeatEnabled,
          intervalSec,
          wakeOnAssignment,
          wakeOnOnDemand,
          wakeOnAutomation,
          cooldownSec,
        },
      },
      contextMode,
      budgetMonthlyCents,
    });
  }

  function handleKeyDown(e: React.KeyboardEvent) {
    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
      e.preventDefault();
      handleSubmit();
    }
  }

  const currentAgent = (agents ?? []).find((a) => a.id === reportsTo);

  return (
    <Dialog
      open={newAgentOpen}
      onOpenChange={(open) => {
        if (!open) {
          reset();
          closeNewAgent();
        }
      }}
    >
      <DialogContent
        showCloseButton={false}
        className={cn("p-0 gap-0 overflow-hidden", expanded ? "sm:max-w-2xl" : "sm:max-w-lg")}
        onKeyDown={handleKeyDown}
      >
        {/* Header */}
        <div className="flex items-center justify-between px-4 py-2.5 border-b border-border">
          <div className="flex items-center gap-2 text-sm text-muted-foreground">
            {selectedCompany && (
              <span className="bg-muted px-1.5 py-0.5 rounded text-xs font-medium">
                {selectedCompany.name.slice(0, 3).toUpperCase()}
              </span>
            )}
            <span className="text-muted-foreground/60">&rsaquo;</span>
            <span>New agent</span>
          </div>
          <div className="flex items-center gap-1">
            <Button
              variant="ghost"
              size="icon-xs"
              className="text-muted-foreground"
              onClick={() => setExpanded(!expanded)}
            >
              {expanded ? <Minimize2 className="h-3.5 w-3.5" /> : <Maximize2 className="h-3.5 w-3.5" />}
            </Button>
            <Button
              variant="ghost"
              size="icon-xs"
              className="text-muted-foreground"
              onClick={() => { reset(); closeNewAgent(); }}
            >
              <span className="text-lg leading-none">&times;</span>
            </Button>
          </div>
        </div>

        <div className={cn("overflow-y-auto", expanded ? "max-h-[70vh]" : "max-h-[50vh]")}>
          {/* Name */}
          <div className="px-4 pt-3">
            <input
              className="w-full text-base font-medium bg-transparent outline-none placeholder:text-muted-foreground/50"
              placeholder="Agent name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              autoFocus
            />
          </div>

          {/* Title */}
          <div className="px-4 pb-2">
            <input
              className="w-full bg-transparent outline-none text-sm text-muted-foreground placeholder:text-muted-foreground/40"
              placeholder="Title (e.g. VP of Engineering)"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
            />
          </div>

          {/* Property chips */}
          <div className="flex items-center gap-1.5 px-4 py-2 border-t border-border flex-wrap">
            {/* Role */}
            <Popover open={roleOpen} onOpenChange={setRoleOpen}>
              <PopoverTrigger asChild>
                <button
                  className={cn(
                    "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs hover:bg-accent/50 transition-colors",
                    isFirstAgent && "opacity-60 cursor-not-allowed"
                  )}
                  disabled={isFirstAgent}
                >
                  <Shield className="h-3 w-3 text-muted-foreground" />
                  {roleLabels[effectiveRole] ?? effectiveRole}
                </button>
              </PopoverTrigger>
              <PopoverContent className="w-36 p-1" align="start">
                {AGENT_ROLES.map((r) => (
                  <button
                    key={r}
                    className={cn(
                      "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
                      r === role && "bg-accent"
                    )}
                    onClick={() => { setRole(r); setRoleOpen(false); }}
                  >
                    {roleLabels[r] ?? r}
                  </button>
                ))}
              </PopoverContent>
            </Popover>

            {/* Reports To */}
            <Popover open={reportsToOpen} onOpenChange={setReportsToOpen}>
              <PopoverTrigger asChild>
                <button
                  className={cn(
                    "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs hover:bg-accent/50 transition-colors",
                    isFirstAgent && "opacity-60 cursor-not-allowed"
                  )}
                  disabled={isFirstAgent}
                >
                  <User className="h-3 w-3 text-muted-foreground" />
                  {currentAgent ? currentAgent.name : isFirstAgent ? "N/A (CEO)" : "Reports to"}
                </button>
              </PopoverTrigger>
              <PopoverContent className="w-48 p-1" align="start">
                <button
                  className={cn(
                    "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
                    !reportsTo && "bg-accent"
                  )}
                  onClick={() => { setReportsTo(""); setReportsToOpen(false); }}
                >
                  No manager
                </button>
                {(agents ?? []).map((a) => (
                  <button
                    key={a.id}
                    className={cn(
                      "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50 truncate",
                      a.id === reportsTo && "bg-accent"
                    )}
                    onClick={() => { setReportsTo(a.id); setReportsToOpen(false); }}
                  >
                    {a.name}
                    <span className="text-muted-foreground ml-auto">{roleLabels[a.role] ?? a.role}</span>
                  </button>
                ))}
              </PopoverContent>
            </Popover>

            {/* Adapter type */}
            <Popover open={adapterTypeOpen} onOpenChange={setAdapterTypeOpen}>
              <PopoverTrigger asChild>
                <button className="inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs hover:bg-accent/50 transition-colors">
                  <Bot className="h-3 w-3 text-muted-foreground" />
                  {adapterLabels[adapterType] ?? adapterType}
                </button>
              </PopoverTrigger>
              <PopoverContent className="w-40 p-1" align="start">
                {AGENT_ADAPTER_TYPES.map((t) => (
                  <button
                    key={t}
                    className={cn(
                      "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
                      t === adapterType && "bg-accent"
                    )}
                    onClick={() => { setAdapterType(t); setAdapterTypeOpen(false); }}
                  >
                    {adapterLabels[t] ?? t}
                  </button>
                ))}
              </PopoverContent>
            </Popover>
          </div>

          {/* Capabilities */}
          <div className="px-4 py-2 border-t border-border">
            <input
              className="w-full bg-transparent outline-none text-sm text-muted-foreground placeholder:text-muted-foreground/40"
              placeholder="Capabilities (what can this agent do?)"
              value={capabilities}
              onChange={(e) => setCapabilities(e.target.value)}
            />
          </div>

          {/* Adapter Config Section */}
          <CollapsibleSection
            title="Adapter Configuration"
            open={adapterOpen}
            onToggle={() => setAdapterOpen(!adapterOpen)}
          >
            <div className="space-y-3">
              <Field label="Working directory">
                <input
                  className="w-full bg-transparent outline-none text-sm font-mono placeholder:text-muted-foreground/40"
                  placeholder="/path/to/project"
                  value={cwd}
                  onChange={(e) => setCwd(e.target.value)}
                />
              </Field>
              <Field label="Prompt template">
                <textarea
                  className="w-full bg-transparent outline-none text-sm font-mono placeholder:text-muted-foreground/40 resize-none min-h-[60px]"
                  placeholder="You are agent {{ agent.name }}..."
                  value={promptTemplate}
                  onChange={(e) => setPromptTemplate(e.target.value)}
                />
              </Field>
              <Field label="Bootstrap prompt (first run)">
                <textarea
                  className="w-full bg-transparent outline-none text-sm font-mono placeholder:text-muted-foreground/40 resize-none min-h-[40px]"
                  placeholder="Optional initial setup prompt"
                  value={bootstrapPrompt}
                  onChange={(e) => setBootstrapPrompt(e.target.value)}
                />
              </Field>
              <Field label="Model">
                <input
                  className="w-full bg-transparent outline-none text-sm font-mono placeholder:text-muted-foreground/40"
                  placeholder="e.g. claude-sonnet-4-5-20250929"
                  value={model}
                  onChange={(e) => setModel(e.target.value)}
                />
              </Field>

              {adapterType === "claude_local" && (
                <>
                  <Field label="Max turns per run">
                    <input
                      type="number"
                      className="w-full bg-transparent outline-none text-sm font-mono"
                      value={maxTurnsPerRun}
                      onChange={(e) => setMaxTurnsPerRun(Number(e.target.value))}
                    />
                  </Field>
                  <ToggleField
                    label="Skip permissions"
                    checked={dangerouslySkipPermissions}
                    onChange={setDangerouslySkipPermissions}
                  />
                </>
              )}

              {adapterType === "codex_local" && (
                <>
                  <ToggleField label="Enable search" checked={search} onChange={setSearch} />
                  <ToggleField
                    label="Bypass sandbox"
                    checked={dangerouslyBypassSandbox}
                    onChange={setDangerouslyBypassSandbox}
                  />
                </>
              )}

              {adapterType === "process" && (
                <>
                  <Field label="Command">
                    <input
                      className="w-full bg-transparent outline-none text-sm font-mono placeholder:text-muted-foreground/40"
                      placeholder="e.g. node, python"
                      value={command}
                      onChange={(e) => setCommand(e.target.value)}
                    />
                  </Field>
                  <Field label="Args (comma-separated)">
                    <input
                      className="w-full bg-transparent outline-none text-sm font-mono placeholder:text-muted-foreground/40"
                      placeholder="e.g. script.js, --flag"
                      value={args}
                      onChange={(e) => setArgs(e.target.value)}
                    />
                  </Field>
                </>
              )}

              {adapterType === "http" && (
                <Field label="Webhook URL">
                  <input
                    className="w-full bg-transparent outline-none text-sm font-mono placeholder:text-muted-foreground/40"
                    placeholder="https://..."
                    value={url}
                    onChange={(e) => setUrl(e.target.value)}
                  />
                </Field>
              )}
            </div>
          </CollapsibleSection>

          {/* Heartbeat Policy Section */}
          <CollapsibleSection
            title="Heartbeat Policy"
            open={heartbeatOpen}
            onToggle={() => setHeartbeatOpen(!heartbeatOpen)}
          >
            <div className="space-y-3">
              <ToggleField label="Enabled" checked={heartbeatEnabled} onChange={setHeartbeatEnabled} />
              <Field label="Interval (seconds)">
                <input
                  type="number"
                  className="w-full bg-transparent outline-none text-sm font-mono"
                  value={intervalSec}
                  onChange={(e) => setIntervalSec(Number(e.target.value))}
                />
              </Field>
              <ToggleField label="Wake on assignment" checked={wakeOnAssignment} onChange={setWakeOnAssignment} />
              <ToggleField label="Wake on on-demand" checked={wakeOnOnDemand} onChange={setWakeOnOnDemand} />
              <ToggleField label="Wake on automation" checked={wakeOnAutomation} onChange={setWakeOnAutomation} />
              <Field label="Cooldown (seconds)">
                <input
                  type="number"
                  className="w-full bg-transparent outline-none text-sm font-mono"
                  value={cooldownSec}
                  onChange={(e) => setCooldownSec(Number(e.target.value))}
                />
              </Field>
            </div>
          </CollapsibleSection>

          {/* Runtime Section */}
          <CollapsibleSection
            title="Runtime"
            open={runtimeOpen}
            onToggle={() => setRuntimeOpen(!runtimeOpen)}
          >
            <div className="space-y-3">
              <Field label="Context mode">
                <div className="flex gap-2">
                  {(["thin", "fat"] as const).map((m) => (
                    <button
                      key={m}
                      className={cn(
                        "px-2 py-1 text-xs rounded border",
                        m === contextMode
                          ? "border-foreground bg-accent"
                          : "border-border hover:bg-accent/50"
                      )}
                      onClick={() => setContextMode(m)}
                    >
                      {m}
                    </button>
                  ))}
                </div>
              </Field>
              <Field label="Monthly budget (cents)">
                <input
                  type="number"
                  className="w-full bg-transparent outline-none text-sm font-mono"
                  value={budgetMonthlyCents}
                  onChange={(e) => setBudgetMonthlyCents(Number(e.target.value))}
                />
              </Field>
              <Field label="Timeout (seconds)">
                <input
                  type="number"
                  className="w-full bg-transparent outline-none text-sm font-mono"
                  value={timeoutSec}
                  onChange={(e) => setTimeoutSec(Number(e.target.value))}
                />
              </Field>
              <Field label="Grace period (seconds)">
                <input
                  type="number"
                  className="w-full bg-transparent outline-none text-sm font-mono"
                  value={graceSec}
                  onChange={(e) => setGraceSec(Number(e.target.value))}
                />
              </Field>
            </div>
          </CollapsibleSection>
        </div>

        {/* Footer */}
        <div className="flex items-center justify-between px-4 py-2.5 border-t border-border">
          <span className="text-xs text-muted-foreground">
            {isFirstAgent ? "This will be the CEO" : ""}
          </span>
          <Button
            size="sm"
            disabled={!name.trim() || createAgent.isPending}
            onClick={handleSubmit}
          >
            {createAgent.isPending ? "Creating..." : "Create agent"}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}

function CollapsibleSection({
  title,
  open,
  onToggle,
  children,
}: {
  title: string;
  open: boolean;
  onToggle: () => void;
  children: React.ReactNode;
}) {
  return (
    <div className="border-t border-border">
      <button
        className="flex items-center gap-2 w-full px-4 py-2 text-xs font-medium text-muted-foreground hover:bg-accent/30 transition-colors"
        onClick={onToggle}
      >
        {open ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
        {title}
      </button>
      {open && <div className="px-4 pb-3">{children}</div>}
    </div>
  );
}

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div>
      <label className="text-xs text-muted-foreground mb-1 block">{label}</label>
      {children}
    </div>
  );
}

function ToggleField({
  label,
  checked,
  onChange,
}: {
  label: string;
  checked: boolean;
  onChange: (v: boolean) => void;
}) {
  return (
    <div className="flex items-center justify-between">
      <span className="text-xs text-muted-foreground">{label}</span>
      <button
        className={cn(
          "relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
          checked ? "bg-green-600" : "bg-muted"
        )}
        onClick={() => onChange(!checked)}
      >
        <span
          className={cn(
            "inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform",
            checked ? "translate-x-4.5" : "translate-x-0.5"
          )}
        />
      </button>
    </div>
  );
}