import { ArrowRight, ArrowDown } from "lucide-react";
import { cn } from "@/lib/utils";

export interface DiagramNode {
  label: string;
  description: string;
  emphasized?: boolean;
}

export interface CapitalConnectionDiagramProps {
  nodes: readonly [DiagramNode, DiagramNode, DiagramNode];
}

/**
 * Abstract two-hop connection graphic (Sprint 7) — Organizations, ROPTS, Investors
 * & Partners as three plain labeled nodes joined by a directional line. Deliberately
 * not a literal network/logo map: no real names, counts, or entities, since none of
 * that can be truthfully depicted yet. Purely structural, brand-token colors only.
 */
export function CapitalConnectionDiagram({ nodes }: CapitalConnectionDiagramProps) {
  const [left, center, right] = nodes;

  return (
    <div
      role="img"
      aria-label={`${left.label} connect to ${right.label} through ${center.label}: ${left.description}; ${center.description}; ${right.description}.`}
      className="flex flex-col items-stretch gap-0 md:flex-row md:items-center"
    >
      <DiagramCard node={left} />

      <Connector />

      <DiagramCard node={center} />

      <Connector />

      <DiagramCard node={right} />
    </div>
  );
}

function DiagramCard({ node }: { node: DiagramNode }) {
  return (
    <div
      aria-hidden="true"
      className={cn(
        "flex-1 rounded-md border p-6 text-center",
        node.emphasized ? "border-primary/40 bg-tag-bg" : "border-line bg-paper"
      )}
    >
      <p
        className={cn(
          "font-display text-h4 font-normal",
          node.emphasized ? "text-primary-strong" : "text-ink"
        )}
      >
        {node.label}
      </p>
      <p className="mt-1.5 text-caption text-slate">{node.description}</p>
    </div>
  );
}

function Connector() {
  return (
    <div aria-hidden="true" className="flex shrink-0 items-center justify-center py-2 md:px-3 md:py-0">
      <ArrowDown className="size-4 text-primary/50 md:hidden" />
      <ArrowRight className="hidden size-4 text-primary/50 md:block" />
    </div>
  );
}