/**
 * StepsBlockNode — a Lexical DecoratorNode that renders the directive's steps
 * as an in-document, non-editable diagram.
 *
 * The actual data (steps, orchestratorTaskId, etc.) does NOT live on the node
 * itself — that would require us to dispatch a Lexical update on every poll,
 * which is wasteful and fights against Lexical's content-equality model. The
 * node is a marker that says "render the steps block here", and the React
 * component pulls live data from a context provided by DocumentEditor. So when
 * `useDirective` polls and produces new steps, the StepsBlock re-renders
 * automatically without touching the editor state at all.
 */
import {
  DecoratorNode,
  type LexicalNode,
  type NodeKey,
  type SerializedLexicalNode,
  type Spread,
} from "lexical";
import { createContext, useContext, type JSX } from "react";
import type { DirectiveStep, DirectiveWithSteps, StepStatus } from "../../lib/api";

// =============================================================================
// Context provided by DocumentEditor — the StepsBlock reads live directive data
// =============================================================================

interface StepsBlockContextValue {
  directive: DirectiveWithSteps | null;
}

const StepsBlockContext = createContext<StepsBlockContextValue>({ directive: null });

export const StepsBlockContextProvider = StepsBlockContext.Provider;

// =============================================================================
// Status palette (matches StepNode.tsx for consistency)
// =============================================================================

const STATUS_COLORS: Record<StepStatus, { bg: string; border: string; text: string; pill: string }> = {
  pending: {
    bg: "bg-[#1a2540]",
    border: "border-[#2a3a5a]",
    text: "text-[#7788aa]",
    pill: "bg-[#0f1a30] text-[#7788aa] border-[#2a3a5a]",
  },
  ready: {
    bg: "bg-[#2a2a10]",
    border: "border-[#4a4a20]",
    text: "text-yellow-400",
    pill: "bg-[#1a1a08] text-yellow-300 border-[#4a4a20]",
  },
  running: {
    bg: "bg-[#0a2a1a]",
    border: "border-[#1a5a3a]",
    text: "text-green-400",
    pill: "bg-[#062014] text-green-300 border-[#1a5a3a]",
  },
  completed: {
    bg: "bg-[#0a2a2a]",
    border: "border-[#1a5a5a]",
    text: "text-emerald-400",
    pill: "bg-[#062424] text-emerald-300 border-[#1a5a5a]",
  },
  failed: {
    bg: "bg-[#2a1a1a]",
    border: "border-[#5a2a2a]",
    text: "text-red-400",
    pill: "bg-[#241010] text-red-300 border-[#5a2a2a]",
  },
  skipped: {
    bg: "bg-[#1a1a2a]",
    border: "border-[#2a2a4a]",
    text: "text-[#7788aa]",
    pill: "bg-[#101020] text-[#7788aa] border-[#2a2a4a]",
  },
};

const STATUS_LABEL: Record<StepStatus, string> = {
  pending: "PENDING",
  ready: "READY",
  running: "RUNNING",
  completed: "DONE",
  failed: "FAILED",
  skipped: "SKIP",
};

// =============================================================================
// React component rendered inside the editor body
// =============================================================================

function StepCard({ step }: { step: DirectiveStep }) {
  const colors = STATUS_COLORS[step.status] ?? STATUS_COLORS.pending;
  const label = STATUS_LABEL[step.status] ?? step.status.toUpperCase();
  return (
    <div
      className={`${colors.bg} border ${colors.border} rounded px-3 py-2 flex items-start gap-3`}
    >
      <span
        className="text-[10px] font-mono text-[#556677] shrink-0 w-5 text-right"
        aria-hidden
      >
        {String(step.orderIndex + 1).padStart(2, "0")}
      </span>
      <div className="flex-1 min-w-0">
        <div className="flex items-center justify-between gap-2">
          <span className="text-[12px] font-mono text-white truncate">
            {step.name}
          </span>
          <span
            className={`text-[9px] font-mono uppercase tracking-wide border rounded px-1.5 py-0.5 shrink-0 ${colors.pill}`}
          >
            {label}
          </span>
        </div>
        {step.description && (
          <p className="text-[10px] font-mono text-[#7788aa] truncate mt-0.5">
            {step.description}
          </p>
        )}
      </div>
    </div>
  );
}

function StepsBlock(): JSX.Element {
  const { directive } = useContext(StepsBlockContext);

  // While the directive is loading or absent, render a quiet placeholder so the
  // editor body still has something visible — but make sure it has the same
  // outline as the loaded view so the document doesn't reflow.
  if (!directive) {
    return (
      <div
        contentEditable={false}
        className="my-3 border border-dashed border-[rgba(117,170,252,0.2)] rounded px-3 py-4 select-none"
      >
        <div className="text-[10px] font-mono text-[#556677] uppercase tracking-wide">
          steps · loading
        </div>
      </div>
    );
  }

  const steps = [...directive.steps].sort((a, b) => a.orderIndex - b.orderIndex);
  const isOrchestratorRunning = !!directive.orchestratorTaskId;
  const completed = steps.filter((s) => s.status === "completed").length;
  const total = steps.length;
  const caption = isOrchestratorRunning
    ? "makima is editing this document"
    : total === 0
    ? "no steps yet"
    : total === 1
    ? "1 step"
    : `${total} steps`;

  return (
    <div
      // contentEditable={false} keeps Lexical from treating this as editable
      // content — the user can't put a caret inside it.
      contentEditable={false}
      // Use a small data attribute so external CSS / tests can target it.
      data-makima-block="steps"
      className="my-3 border border-[rgba(117,170,252,0.2)] rounded bg-[#091428] select-none"
    >
      {/* Caption */}
      <div className="flex items-center justify-between px-3 py-1.5 border-b border-dashed border-[rgba(117,170,252,0.15)]">
        <div className="flex items-center gap-1.5">
          {isOrchestratorRunning && (
            <span
              className="inline-block w-1.5 h-1.5 rounded-full bg-yellow-400 animate-pulse"
              aria-hidden
            />
          )}
          <span className="text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide">
            {caption}
          </span>
        </div>
        {total > 0 && (
          <span className="text-[10px] font-mono text-[#556677]">
            {completed}/{total} done
          </span>
        )}
      </div>

      {/* Step diagram */}
      {steps.length === 0 ? (
        <div className="px-3 py-4 text-[11px] font-mono text-[#556677] italic">
          {isOrchestratorRunning
            ? "Planner is generating steps…"
            : "No steps yet — start the directive or plan orders to populate."}
        </div>
      ) : (
        <ol className="px-3 py-3 flex flex-col gap-1.5">
          {steps.map((step, idx) => (
            <li key={step.id} className="relative">
              <StepCard step={step} />
              {idx < steps.length - 1 && (
                <div
                  className="absolute left-[18px] -bottom-1 h-1 w-px bg-[rgba(117,170,252,0.2)]"
                  aria-hidden
                />
              )}
            </li>
          ))}
        </ol>
      )}
    </div>
  );
}

// =============================================================================
// Lexical decorator node
// =============================================================================

export type SerializedStepsBlockNode = Spread<
  { /* No fields — the block is a marker; live data comes from context. */ },
  SerializedLexicalNode
>;

export class StepsBlockNode extends DecoratorNode<JSX.Element> {
  static getType(): string {
    return "makima-steps-block";
  }

  static clone(node: StepsBlockNode): StepsBlockNode {
    return new StepsBlockNode(node.__key);
  }

  constructor(key?: NodeKey) {
    super(key);
  }

  createDOM(): HTMLElement {
    const el = document.createElement("div");
    el.className = "makima-steps-block-host";
    return el;
  }

  updateDOM(): false {
    return false;
  }

  static importJSON(_serializedNode: SerializedStepsBlockNode): StepsBlockNode {
    return $createStepsBlockNode();
  }

  exportJSON(): SerializedStepsBlockNode {
    return {
      type: StepsBlockNode.getType(),
      version: 1,
    };
  }

  isInline(): boolean {
    return false;
  }

  isIsolated(): boolean {
    // Isolated decorator nodes can't be partially selected — the user can only
    // click into them, not drag a selection into them. That's what we want.
    return true;
  }

  isKeyboardSelectable(): boolean {
    return true;
  }

  decorate(): JSX.Element {
    return <StepsBlock />;
  }
}

export function $createStepsBlockNode(): StepsBlockNode {
  return new StepsBlockNode();
}

export function $isStepsBlockNode(
  node: LexicalNode | null | undefined,
): node is StepsBlockNode {
  return node instanceof StepsBlockNode;
}