import React, { useEffect, useMemo, useState } from "react";

const DEFAULT_MEMORIES = [
  {
    id: "mem-001",
    title: "Session continuity",
    type: "thread",
    updatedAt: "2026-04-16",
    importance: "high",
    summary: "Maintains governor-specific thread continuity and active context."
  },
  {
    id: "mem-002",
    title: "Execution preference",
    type: "governance",
    updatedAt: "2026-04-16",
    importance: "high",
    summary: "AURA provides final closure before governed action is executed."
  }
];

const DEFAULT_MESSAGES = [
  {
    id: "msg-001",
    role: "assistant",
    content:
      "I am AURA. This governor shell is active and ready. You can brief, inspect, or launch direct mode."
  }
];

function safeArray(v, fallback = []) {
  return Array.isArray(v) ? v : fallback;
}

function cx(...parts) {
  return parts.filter(Boolean).join(" ");
}

function makeThreadId(nodeKey) {
  const rand = Math.random().toString(36).slice(2, 8).toUpperCase();
  return `${String(nodeKey || "NODE").toUpperCase()}-${rand}`;
}

function statusTone(status) {
  switch (status) {
    case "GOVERNED":
    case "READY":
    case "STABLE":
      return "bg-emerald-500/15 text-emerald-300 border-emerald-500/30";
    case "DEGRADED":
    case "WATCH":
      return "bg-amber-500/15 text-amber-300 border-amber-500/30";
    case "BLOCK":
    case "CRITICAL":
      return "bg-red-500/15 text-red-300 border-red-500/30";
    default:
      return "bg-slate-500/15 text-slate-300 border-slate-500/30";
  }
}

function governorTheme(nodeKey) {
  switch (nodeKey) {
    case "jupiter":
      return {
        accent: "text-cyan-300",
        border: "border-cyan-500/30",
        glow: "shadow-cyan-500/10"
      };
    case "mars":
      return {
        accent: "text-rose-300",
        border: "border-rose-500/30",
        glow: "shadow-rose-500/10"
      };
    case "neptune":
      return {
        accent: "text-indigo-300",
        border: "border-indigo-500/30",
        glow: "shadow-indigo-500/10"
      };
    case "saturn":
      return {
        accent: "text-amber-300",
        border: "border-amber-500/30",
        glow: "shadow-amber-500/10"
      };
    case "moon":
      return {
        accent: "text-violet-300",
        border: "border-violet-500/30",
        glow: "shadow-violet-500/10"
      };
    case "sun":
      return {
        accent: "text-yellow-300",
        border: "border-yellow-500/30",
        glow: "shadow-yellow-500/10"
      };
    case "earth":
      return {
        accent: "text-emerald-300",
        border: "border-emerald-500/30",
        glow: "shadow-emerald-500/10"
      };
    case "pluto":
      return {
        accent: "text-fuchsia-300",
        border: "border-fuchsia-500/30",
        glow: "shadow-fuchsia-500/10"
      };
    default:
      return {
        accent: "text-sky-300",
        border: "border-sky-500/30",
        glow: "shadow-sky-500/10"
      };
  }
}

function DefaultDirectPanel({ node, metrics, onLaunchAction, threadId }) {
  const [command, setCommand] = useState("");
  const [output, setOutput] = useState("Joker command input is live.");
  const [files, setFiles] = useState([]);
  const [status, setStatus] = useState("READY");

  async function handleFiles(event) {
    const picked = Array.from(event.target.files || []);
    const loaded = [];

    for (const file of picked) {
      try {
        const text = await file.text();
        loaded.push({
          name: file.name,
          type: file.type || "application/octet-stream",
          size: file.size,
          text
        });
      } catch (error) {
        loaded.push({
          name: file.name,
          type: file.type || "application/octet-stream",
          size: file.size,
          text: "",
          error: String(error)
        });
      }
    }

    setFiles(loaded);
    setOutput(
      JSON.stringify(
        {
          message: "Files loaded into Joker intake.",
          files: loaded.map((f) => ({
            name: f.name,
            type: f.type,
            size: f.size
          }))
        },
        null,
        2
      )
    );
  }

  async function send(action = "execute") {
    if (!String(command || "").trim() && files.length === 0) {
      setStatus("FAILED");
      setOutput("No command or files provided.");
      return;
    }

    setStatus(action === "dry_run" ? "CONFIRM" : "EXECUTING");

    const payload = {
      threadId,
      governor: node?.name || "JUPITER",
      identity: node?.auraName || "AURA",
      mode: "COMMAND",
      action,
      command,
      files,
      timestamp: new Date().toISOString()
    };

    try {
      const res = await fetch("/api/command", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload)
      });

      const text = await res.text();
      let data;
      try {
        data = JSON.parse(text);
      } catch {
        data = { raw: text };
      }

      if (!res.ok) {
        setStatus("FAILED");
        setOutput(
          JSON.stringify(
            {
              error: "Request failed",
              status: res.status,
              statusText: res.statusText,
              response: data
            },
            null,
            2
          )
        );
        return;
      }

      setStatus(action === "dry_run" ? "CONFIRM" : "COMPLETE");
      setOutput(JSON.stringify(data, null, 2));
    } catch (error) {
      setStatus("FAILED");
      setOutput(
        JSON.stringify(
          {
            error: String(error),
            hint: "Verify /api/command exists.",
            payload
          },
          null,
          2
        )
      );
    }
  }

  async function copyOutput() {
    try {
      await navigator.clipboard.writeText(output);
      setStatus("COMPLETE");
    } catch {
      setStatus("FAILED");
    }
  }

  function downloadOutput() {
    const blob = new Blob([output], { type: "text/plain;charset=utf-8" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "joker-output.txt";
    document.body.appendChild(a);
    a.click();
    a.remove();
    URL.revokeObjectURL(url);
  }

  function clearAll() {
    setCommand("");
    setFiles([]);
    setStatus("READY");
    setOutput("Cleared.");
  }

  return (
    <div className="grid gap-4">
      <div className="rounded-2xl border border-white/10 bg-white/5 p-4">
        <div className="mb-3 text-sm font-semibold text-white/80">Command Input</div>

        <textarea
          value={command}
          onChange={(e) => setCommand(e.target.value)}
          placeholder="Issue governed command"
          rows={6}
          className="w-full rounded-xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white outline-none placeholder:text-white/30"
        />

        <div className="mt-3 flex flex-wrap gap-3">
          <button
            onClick={() => send("execute")}
            className="rounded-xl bg-white px-4 py-3 text-sm font-medium text-black transition hover:bg-white/90"
          >
            Execute
          </button>

          <button
            onClick={() => send("dry_run")}
            className="rounded-xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white transition hover:bg-black/30"
          >
            Dry Run
          </button>

          <label className="rounded-xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white transition hover:bg-black/30 cursor-pointer">
            Upload Files
            <input type="file" multiple onChange={handleFiles} className="hidden" />
          </label>

          <button
            onClick={copyOutput}
            className="rounded-xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white transition hover:bg-black/30"
          >
            Copy Output
          </button>

          <button
            onClick={downloadOutput}
            className="rounded-xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white transition hover:bg-black/30"
          >
            Download Output
          </button>

          <button
            onClick={clearAll}
            className="rounded-xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white transition hover:bg-black/30"
          >
            Clear
          </button>
        </div>

        <div className="mt-3 text-xs text-white/50">Status: {status}</div>
      </div>

      <div className="rounded-2xl border border-white/10 bg-white/5 p-4">
        <div className="mb-3 text-sm font-semibold text-white/80">Files in Intake</div>
        <div className="space-y-2 text-sm text-white/70">
          {files.length === 0
            ? "No files loaded."
            : files.map((file, index) => (
                <div key={`${file.name}-${index}`} className="rounded-xl bg-black/20 p-3">
                  {index + 1}. {file.name} · {file.type || "unknown"} · {file.size} bytes
                </div>
              ))}
        </div>
      </div>

      <div className="rounded-2xl border border-white/10 bg-white/5 p-4">
        <div className="mb-3 text-sm font-semibold text-white/80">Output</div>
        <pre className="overflow-x-auto whitespace-pre-wrap text-sm text-white/80">{output}</pre>
      </div>

      <div className="rounded-2xl border border-white/10 bg-white/5 p-4">
        <div className="mb-3 text-sm font-semibold text-white/80">Live Metrics</div>
        <div className="grid grid-cols-2 gap-3 text-sm">
          {safeArray(metrics).map((m) => (
            <div key={m.label} className="rounded-xl bg-black/20 p-3">
              <div className="text-white/50">{m.label}</div>
              <div className="mt-1 text-lg font-semibold text-white">{m.value}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="rounded-2xl border border-white/10 bg-white/5 p-4">
        <div className="mb-3 text-sm font-semibold text-white/80">Direct Actions</div>
        <div className="grid gap-3">
          {safeArray(node.directActions).map((action) => (
            <button
              key={action.key}
              onClick={() => onLaunchAction(action)}
              className="rounded-xl border border-white/10 bg-black/20 px-4 py-3 text-left text-sm text-white transition hover:bg-black/30"
            >
              <div className="font-medium">{action.label}</div>
              <div className="mt-1 text-white/50">{action.description}</div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function DefaultMemoryTable({ memories }) {
  return (
    <div className="overflow-hidden rounded-2xl border border-white/10 bg-white/5">
      <div className="border-b border-white/10 px-4 py-3 text-sm font-semibold text-white/80">
        Memory Rail
      </div>
      <div className="overflow-x-auto">
        <table className="min-w-full text-sm">
          <thead className="bg-black/20 text-white/50">
            <tr>
              <th className="px-4 py-3 text-left font-medium">Title</th>
              <th className="px-4 py-3 text-left font-medium">Type</th>
              <th className="px-4 py-3 text-left font-medium">Importance</th>
              <th className="px-4 py-3 text-left font-medium">Updated</th>
            </tr>
          </thead>
          <tbody>
            {safeArray(memories).map((m) => (
              <tr key={m.id} className="border-t border-white/5 text-white/80">
                <td className="px-4 py-3">
                  <div className="font-medium">{m.title}</div>
                  <div className="mt-1 text-xs text-white/50">{m.summary}</div>
                </td>
                <td className="px-4 py-3">{m.type}</td>
                <td className="px-4 py-3">{m.importance}</td>
                <td className="px-4 py-3">{m.updatedAt}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function DefaultChatPanel({
  messages,
  input,
  setInput,
  onSend,
  threadId,
  nodeName,
  auraName
}) {
  return (
    <div className="flex h-full min-h-[420px] flex-col overflow-hidden rounded-2xl border border-white/10 bg-white/5">
      <div className="flex items-center justify-between border-b border-white/10 px-4 py-3">
        <div>
          <div className="text-sm font-semibold text-white/90">
            {auraName} / {nodeName}
          </div>
          <div className="text-xs text-white/50">Thread ID: {threadId}</div>
        </div>
        <div className="rounded-full border border-white/10 bg-black/20 px-3 py-1 text-xs text-white/60">
          Chat First
        </div>
      </div>

      <div className="flex-1 space-y-3 overflow-y-auto px-4 py-4">
        {safeArray(messages).map((m) => (
          <div
            key={m.id}
            className={cx(
              "max-w-[88%] rounded-2xl px-4 py-3 text-sm",
              m.role === "assistant"
                ? "bg-slate-800 text-white"
                : "ml-auto bg-sky-900/60 text-white"
            )}
          >
            <div className="mb-1 text-[10px] uppercase tracking-wide text-white/40">
              {m.role === "assistant" ? auraName : "You"}
            </div>
            <div>{m.content}</div>
          </div>
        ))}
      </div>

      <div className="border-t border-white/10 p-3">
        <div className="flex gap-2">
          <input
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder={`Speak to ${auraName} in ${nodeName} mode...`}
            className="flex-1 rounded-xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white outline-none placeholder:text-white/30"
          />
          <button
            onClick={onSend}
            className="rounded-xl bg-white px-4 py-3 text-sm font-medium text-black transition hover:bg-white/90"
          >
            Send
          </button>
        </div>
      </div>
    </div>
  );
}

export default function NodeShell({
  node = {
    key: "jupiter",
    name: "Jupiter",
    subtitle: "Capital Governor",
    auraName: "AURA",
    status: "READY",
    description:
      "Independent governor node with chat-first interaction, direct launch, memory continuity, and execution control.",
    briefing:
      "AURA is active in this governor. You can request a briefing, inspect the dashboard, or launch direct mode.",
    directActions: [
      {
        key: "dashboard",
        label: "Open Dashboard",
        description: "Bypass chat and open the active governor dashboard."
      },
      {
        key: "signals",
        label: "Show Signals",
        description: "Open current governed signal view."
      },
      {
        key: "execution",
        label: "Execution Panel",
        description: "Open governed execution controls."
      }
    ]
  },
  initialMessages = DEFAULT_MESSAGES,
  initialMemories = DEFAULT_MEMORIES,
  metrics = [
    { label: "Admissibility", value: "0.74" },
    { label: "Coherence", value: "0.81" },
    { label: "Thread State", value: "Active" },
    { label: "Execution", value: "Guarded" }
  ],
  renderDirectPanel,
  renderMemoryPanel,
  onLaunchAction,
  onSendMessage
}) {
  const theme = useMemo(() => governorTheme(node.key), [node.key]);
  const [threadId] = useState(() => makeThreadId(node.key));
  const [messages, setMessages] = useState(initialMessages);
  const [memories] = useState(initialMemories);
  const [input, setInput] = useState("");
  const [mode, setMode] = useState("briefing");

  useEffect(() => {
    setMessages(initialMessages);
  }, [initialMessages]);

  function handleLaunchAction(action) {
    if (action && action.key) {
      setMode(action.key);
    }
    if (typeof onLaunchAction === "function") {
      onLaunchAction({
        action,
        node,
        threadId
      });
    }
  }

  function handleSend() {
    const trimmed = String(input || "").trim();
    if (!trimmed) return;

    const userMessage = {
      id: `user-${Date.now()}`,
      role: "user",
      content: trimmed
    };

    const assistantMessage = {
      id: `assistant-${Date.now() + 1}`,
      role: "assistant",
      content:
        typeof onSendMessage === "function"
          ? onSendMessage({
              text: trimmed,
              node,
              threadId,
              mode
            }) || `AURA received your request in ${node.name} mode.`
          : `AURA received your request in ${node.name} mode.`
    };

    setMessages((prev) => [...prev, userMessage, assistantMessage]);
    setInput("");
  }

  return (
    <div className="min-h-screen bg-[#050816] text-white">
      <div className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
        <div
          className={cx(
            "mb-6 rounded-3xl border bg-white/[0.03] p-5 shadow-2xl",
            theme.border,
            theme.glow
          )}
        >
          <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
            <div>
              <div className={cx("text-xs font-semibold uppercase tracking-[0.24em]", theme.accent)}>
                {node.auraName || "AURA"} / {node.name}
              </div>
              <h1 className="mt-2 text-3xl font-semibold tracking-tight">
                {node.subtitle || node.name}
              </h1>
              <p className="mt-3 max-w-3xl text-sm text-white/60">
                {node.description}
              </p>
            </div>

            <div className="flex flex-wrap gap-2">
              <div
                className={cx(
                  "rounded-full border px-3 py-1 text-xs",
                  statusTone(node.status)
                )}
              >
                {node.status}
              </div>
              <div className="rounded-full border border-white/10 bg-black/20 px-3 py-1 text-xs text-white/60">
                Thread: {threadId}
              </div>
              <div className="rounded-full border border-white/10 bg-black/20 px-3 py-1 text-xs text-white/60">
                Mode: {mode}
              </div>
            </div>
          </div>
        </div>

        <div className="mb-6 grid gap-6 lg:grid-cols-[1.15fr_0.85fr]">
          <DefaultChatPanel
            messages={messages}
            input={input}
            setInput={setInput}
            onSend={handleSend}
            threadId={threadId}
            nodeName={node.name}
            auraName={node.auraName || "AURA"}
          />

          <div className="space-y-6">
            <div className="rounded-2xl border border-white/10 bg-white/5 p-4">
              <div className="mb-2 text-sm font-semibold text-white/80">
                Governor Briefing
              </div>
              <div className="text-sm text-white/60">{node.briefing}</div>

              <div className="mt-4 flex flex-wrap gap-2">
                <button
                  onClick={() => setMode("briefing")}
                  className={cx(
                    "rounded-xl border px-3 py-2 text-sm transition",
                    mode === "briefing"
                      ? "border-white/20 bg-white/10 text-white"
                      : "border-white/10 bg-black/20 text-white/70 hover:bg-black/30"
                  )}
                >
                  Briefing
                </button>
                <button
                  onClick={() => setMode("dashboard")}
                  className={cx(
                    "rounded-xl border px-3 py-2 text-sm transition",
                    mode === "dashboard"
                      ? "border-white/20 bg-white/10 text-white"
                      : "border-white/10 bg-black/20 text-white/70 hover:bg-black/30"
                  )}
                >
                  Direct
                </button>
                <button
                  onClick={() => setMode("memory")}
                  className={cx(
                    "rounded-xl border px-3 py-2 text-sm transition",
                    mode === "memory"
                      ? "border-white/20 bg-white/10 text-white"
                      : "border-white/10 bg-black/20 text-white/70 hover:bg-black/30"
                  )}
                >
                  Memory
                </button>
              </div>
            </div>

            <div className="rounded-2xl border border-white/10 bg-white/5 p-4">
              <div className="mb-3 text-sm font-semibold text-white/80">
                System Strip
              </div>
              <div className="grid grid-cols-2 gap-3 text-sm">
                <div className="rounded-xl bg-black/20 p-3">
                  <div className="text-white/50">Governor</div>
                  <div className="mt-1 font-medium text-white">{node.name}</div>
                </div>
                <div className="rounded-xl bg-black/20 p-3">
                  <div className="text-white/50">AURA Identity</div>
                  <div className="mt-1 font-medium text-white">
                    {node.auraName || "AURA"}
                  </div>
                </div>
                <div className="rounded-xl bg-black/20 p-3">
                  <div className="text-white/50">Thread</div>
                  <div className="mt-1 font-medium text-white">{threadId}</div>
                </div>
                <div className="rounded-xl bg-black/20 p-3">
                  <div className="text-white/50">Status</div>
                  <div className="mt-1 font-medium text-white">{node.status}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="space-y-6">
          {mode === "memory" ? (
            renderMemoryPanel ? (
              renderMemoryPanel({ node, memories, threadId })
            ) : (
              <DefaultMemoryTable memories={memories} />
            )
          ) : renderDirectPanel ? (
            renderDirectPanel({
              node,
              metrics,
              mode,
              threadId,
              onLaunchAction: handleLaunchAction
            })
          ) : (
            <DefaultDirectPanel
              node={node}
              metrics={metrics}
              onLaunchAction={handleLaunchAction}
              threadId={threadId}
            />
          )}
        </div>
      </div>
    </div>
  );
}
<!-- normalized: links merged from alternate build -->
<nav class="normalized-merged-nav" style="display:flex;flex-wrap:wrap;gap:8px;padding:8px">
  <a href="/">/</a>
  <a href="/capital-lane">Capital Lane</a>
  <a href="/live-streams">Live Streams</a>
  <a href="/node-embodiment">Node Embodiment</a>
</nav>

<!-- normalized: buttons merged from alternate build -->
<div class="normalized-merged-buttons" style="display:flex;flex-wrap:wrap;gap:8px;padding:8px">
<button class="btn quick" onclick="quickSend('Engine intake — where are we at?')">Engine intake — where are we at?</button>
<button class="btn quick" onclick="quickSend('Which planets have the most active streams?')">Planet stream status</button>
<button class="btn quick" onclick="quickSend('How many nodes are embodied so far?')">Node embodiment status</button>
<button class="btn quick" onclick="quickSend('What databases are pending activation?')">Pending databases</button>
</div>
<script src="/aura-planet-mining-widget.js"></script>
<script src="/aura-thinking.js"></script>
<script src="/aura-embodiment-bootstrap.js"></script>