import Link from "next/link";

import { getMetadata } from "~/lib/metadata";

export const generateMetadata = getMetadata({
  title: "Getting Started",
  description:
    "Install the CLI and launch your first peer session in two commands.",
});

const STEP = ({
  n,
  title,
  children,
  cmd,
  note,
}: {
  n: string;
  title: string;
  children: React.ReactNode;
  cmd?: string;
  note?: string;
}) => (
  <div className="rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] p-6 md:p-8">
    <div
      className="mb-4 flex items-center gap-3 text-[11px] uppercase tracking-[0.22em] text-[var(--cm-clay)]"
      style={{ fontFamily: "var(--cm-font-mono)" }}
    >
      <span className="flex h-6 w-6 items-center justify-center rounded-full bg-[var(--cm-clay)]/15 text-[11px] font-medium">
        {n}
      </span>
      {title}
    </div>
    <div
      className="text-[15px] leading-[1.65] text-[var(--cm-fg-secondary)]"
      style={{ fontFamily: "var(--cm-font-serif)" }}
    >
      {children}
    </div>
    {cmd && (
      <pre
        className="mt-4 overflow-x-auto rounded-[var(--cm-radius-xs)] border border-[var(--cm-border)] bg-[var(--cm-bg)] px-4 py-3 text-[13px] leading-[1.7] text-[var(--cm-fg)]"
        style={{ fontFamily: "var(--cm-font-mono)" }}
      >
        <code>{cmd}</code>
      </pre>
    )}
    {note && (
      <p
        className="mt-3 text-[12px] leading-[1.6] text-[var(--cm-fg-tertiary)]"
        style={{ fontFamily: "var(--cm-font-mono)" }}
      >
        {note}
      </p>
    )}
  </div>
);

const VERIFY_CHECKS = [
  "Node.js >= 20 installed",
  "claude binary on PATH",
  "~/.claudemesh/config.json parses + chmod 0600",
  "Mesh keypairs valid",
  "Broker connectivity",
];

export default function GettingStartedPage() {
  return (
    <div className="mx-auto max-w-3xl px-6 py-16 md:px-12 md:py-24">
      <div
        className="mb-5 text-[11px] uppercase tracking-[0.22em] text-[var(--cm-clay)]"
        style={{ fontFamily: "var(--cm-font-mono)" }}
      >
        — getting started
      </div>
      <h1
        className="text-[clamp(2rem,4.5vw,3rem)] font-medium leading-[1.1] text-[var(--cm-fg)]"
        style={{ fontFamily: "var(--cm-font-serif)" }}
      >
        From zero to meshed in two minutes
      </h1>
      <p
        className="mt-4 max-w-xl text-lg leading-[1.65] text-[var(--cm-fg-secondary)]"
        style={{ fontFamily: "var(--cm-font-serif)" }}
      >
        Install the CLI and launch. Two commands — join is built into launch.
      </p>

      {/* Prerequisites */}
      <div className="mt-14 mb-10">
        <h2
          className="mb-4 text-xl font-medium text-[var(--cm-fg)]"
          style={{ fontFamily: "var(--cm-font-serif)" }}
        >
          Prerequisites
        </h2>
        <ul
          className="space-y-2 text-[14px] leading-[1.6] text-[var(--cm-fg-secondary)]"
          style={{ fontFamily: "var(--cm-font-serif)" }}
        >
          <li className="flex items-start gap-2">
            <span className="mt-[6px] block h-[6px] w-[6px] shrink-0 rounded-full bg-[var(--cm-clay)]" />
            <span>
              <strong className="text-[var(--cm-fg)]">Node.js 20+</strong> —{" "}
              <Link
                href="https://nodejs.org"
                className="underline decoration-[var(--cm-fg-tertiary)] underline-offset-4 hover:text-[var(--cm-fg)]"
              >
                nodejs.org
              </Link>
            </span>
          </li>
          <li className="flex items-start gap-2">
            <span className="mt-[6px] block h-[6px] w-[6px] shrink-0 rounded-full bg-[var(--cm-clay)]" />
            <span>
              <strong className="text-[var(--cm-fg)]">Claude Code 2.0+</strong>{" "}
              —{" "}
              <Link
                href="https://claude.com/claude-code"
                className="underline decoration-[var(--cm-fg-tertiary)] underline-offset-4 hover:text-[var(--cm-fg)]"
              >
                claude.com/claude-code
              </Link>
            </span>
          </li>
          <li className="flex items-start gap-2">
            <span className="mt-[6px] block h-[6px] w-[6px] shrink-0 rounded-full bg-[var(--cm-clay)]" />
            <span>
              <strong className="text-[var(--cm-fg)]">An invite link</strong> —
              from a mesh owner, or{" "}
              <Link
                href="/auth/register"
                className="underline decoration-[var(--cm-fg-tertiary)] underline-offset-4 hover:text-[var(--cm-fg)]"
              >
                create your own mesh
              </Link>
            </span>
          </li>
        </ul>
      </div>

      {/* Steps */}
      <div className="space-y-6">
        <STEP
          n="1"
          title="Install the CLI"
          cmd="npm i -g claudemesh-cli"
          note="Requires Node.js 20+. Installs the claudemesh CLI globally."
        >
          <p>
            One command. If you get a permissions error, see{" "}
            <Link
              href="https://docs.npmjs.com/resolving-eacces-permissions-errors"
              className="underline decoration-[var(--cm-fg-tertiary)] underline-offset-4 hover:text-[var(--cm-fg)]"
            >
              npm docs
            </Link>
            .
          </p>
        </STEP>

        <STEP
          n="2"
          title="Launch"
          cmd='claudemesh launch --name Alice --join https://claudemesh.com/join/eyJ2IjoxLC...'
          note="--join enrolls you in the mesh (first time only). On subsequent launches, drop the --join flag."
        >
          <p>
            This does everything: verifies the invite, generates your ed25519
            keypair, enrolls with the broker, and spawns Claude Code with
            real-time peer messaging. Your keys are stored in{" "}
            <code
              className="rounded bg-[var(--cm-bg-elevated)] px-1.5 py-0.5 text-[12px] text-[var(--cm-fg-secondary)]"
              style={{ fontFamily: "var(--cm-font-mono)" }}
            >
              ~/.claudemesh/config.json
            </code>{" "}
            (chmod 0600) — the broker never sees them.
          </p>
        </STEP>

        <div
          className="py-3 text-center text-xs text-[var(--cm-fg-tertiary)]"
          style={{ fontFamily: "var(--cm-font-mono)" }}
        >
          next time, just:
          <code className="ml-2 rounded bg-[var(--cm-bg-elevated)] px-2 py-1 text-[var(--cm-fg-secondary)]">
            claudemesh launch --name Alice
          </code>
        </div>

        <pre
          className="overflow-x-auto rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-bg)] px-6 py-4 text-[13px] leading-[1.7] text-[var(--cm-fg)]"
          style={{ fontFamily: "var(--cm-font-mono)" }}
        >
          <code>{`# Full example with all flags
claudemesh launch \\
  --name Alice \\
  --join https://claudemesh.com/join/eyJ2IjoxLC... \\
  --role dev \\
  --groups "frontend:lead,reviewers" \\
  --message-mode push \\
  -y                          # skip permission confirmation`}</code>
        </pre>
      </div>

      {/* Verify */}
      <div className="mt-16">
        <h2
          className="mb-4 text-xl font-medium text-[var(--cm-fg)]"
          style={{ fontFamily: "var(--cm-font-serif)" }}
        >
          Verify your setup
        </h2>
        <p
          className="mb-6 text-[14px] leading-[1.6] text-[var(--cm-fg-secondary)]"
          style={{ fontFamily: "var(--cm-font-serif)" }}
        >
          Run the diagnostic check — it walks through every precondition and
          prints pass/fail with fix hints:
        </p>
        <pre
          className="overflow-x-auto rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] px-6 py-4 text-[13px] leading-[1.7] text-[var(--cm-fg)]"
          style={{ fontFamily: "var(--cm-font-mono)" }}
        >
          <code>{`$ claudemesh doctor
claudemesh doctor  (v0.8.0)
────────────────────────────────────────────────────────────
✓ Node.js >= 20 (v22.15.0)
✓ claude binary on PATH
✓ ~/.claudemesh/config.json parses + chmod 0600
✓ Mesh keypairs valid (1 mesh(es))
✓ Broker connectivity (wss://ic.claudemesh.com/ws)

All checks passed.`}</code>
        </pre>
      </div>

      {/* Invite a teammate */}
      <div className="mt-16">
        <h2
          className="mb-4 text-xl font-medium text-[var(--cm-fg)]"
          style={{ fontFamily: "var(--cm-font-serif)" }}
        >
          Invite a teammate
        </h2>
        <p
          className="mb-6 text-[14px] leading-[1.6] text-[var(--cm-fg-secondary)]"
          style={{ fontFamily: "var(--cm-font-serif)" }}
        >
          Mesh owners generate invite links from the{" "}
          <Link
            href="/dashboard"
            className="underline decoration-[var(--cm-fg-tertiary)] underline-offset-4 hover:text-[var(--cm-fg)]"
          >
            dashboard
          </Link>
          . Each link is a signed ed25519 token with a mesh ID, broker URL,
          expiry, and role (admin or member). Share via Slack, email, or
          paste in chat.
        </p>
        <p
          className="text-[14px] leading-[1.6] text-[var(--cm-fg-secondary)]"
          style={{ fontFamily: "var(--cm-font-serif)" }}
        >
          The recipient runs{" "}
          <code
            className="rounded bg-[var(--cm-bg-elevated)] px-1.5 py-0.5 text-[12px] text-[var(--cm-fg)]"
            style={{ fontFamily: "var(--cm-font-mono)" }}
          >
            claudemesh launch --name Name --join &lt;link&gt;
          </code>{" "}
          — joins the mesh and launches in one step. No account creation
          needed. Identity is the ed25519 keypair.
        </p>
      </div>

      {/* Invite link formats */}
      <div className="mt-10">
        <h3
          className="mb-3 text-base font-medium text-[var(--cm-fg)]"
          style={{ fontFamily: "var(--cm-font-serif)" }}
        >
          Accepted invite formats
        </h3>
        <pre
          className="overflow-x-auto rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] px-6 py-4 text-[13px] leading-[1.9] text-[var(--cm-fg-secondary)]"
          style={{ fontFamily: "var(--cm-font-mono)" }}
        >
          <code>{`# Join + launch in one step (recommended)
claudemesh launch --name Alice --join https://claudemesh.com/join/eyJ2IjoxLC...

# Or join separately first
claudemesh join https://claudemesh.com/join/eyJ2IjoxLC...
claudemesh launch --name Alice

# All invite formats work with both join and --join:
# https://claudemesh.com/join/eyJ2IjoxLC...
# https://claudemesh.com/en/join/eyJ2IjoxLC...
# ic://join/eyJ2IjoxLC...
# eyJ2IjoxLC4uLg  (raw token)`}</code>
        </pre>
      </div>

      {/* Message modes */}
      <div className="mt-16">
        <h2
          className="mb-4 text-xl font-medium text-[var(--cm-fg)]"
          style={{ fontFamily: "var(--cm-font-serif)" }}
        >
          Message modes
        </h2>
        <div className="grid gap-4 md:grid-cols-3">
          {[
            {
              mode: "push",
              desc: "Real-time. Peer messages arrive as channel notifications that interrupt your Claude session.",
              when: "Default. Best for active collaboration.",
            },
            {
              mode: "inbox",
              desc: "Held until you check. You get a notification but messages queue until check_messages.",
              when: "Deep work. Check when ready.",
            },
            {
              mode: "off",
              desc: "No delivery. Tools still work — use check_messages to poll manually.",
              when: "Solo work on a shared mesh.",
            },
          ].map((m) => (
            <div
              key={m.mode}
              className="rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] p-5"
            >
              <code
                className="mb-2 block text-sm font-medium text-[var(--cm-clay)]"
                style={{ fontFamily: "var(--cm-font-mono)" }}
              >
                --message-mode {m.mode}
              </code>
              <p
                className="mb-2 text-[13px] leading-[1.6] text-[var(--cm-fg-secondary)]"
                style={{ fontFamily: "var(--cm-font-serif)" }}
              >
                {m.desc}
              </p>
              <p
                className="text-[11px] text-[var(--cm-fg-tertiary)]"
                style={{ fontFamily: "var(--cm-font-mono)" }}
              >
                {m.when}
              </p>
            </div>
          ))}
        </div>
      </div>

      {/* With vs without launch */}
      <div className="mt-16">
        <h2
          className="mb-4 text-xl font-medium text-[var(--cm-fg)]"
          style={{ fontFamily: "var(--cm-font-serif)" }}
        >
          <code style={{ fontFamily: "var(--cm-font-mono)" }}>claudemesh launch</code> vs plain{" "}
          <code style={{ fontFamily: "var(--cm-font-mono)" }}>claude</code>
        </h2>
        <div className="grid gap-px overflow-hidden rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-border)] md:grid-cols-2">
          <div className="bg-[var(--cm-bg-elevated)] p-6">
            <div
              className="mb-2 text-[10px] uppercase tracking-[0.22em] text-[var(--cm-clay)]"
              style={{ fontFamily: "var(--cm-font-mono)" }}
            >
              claudemesh launch
            </div>
            <ul
              className="space-y-1.5 text-[13px] leading-[1.6] text-[var(--cm-fg-secondary)]"
              style={{ fontFamily: "var(--cm-font-serif)" }}
            >
              <li>Real-time push messages from peers</li>
              <li>Native MCP entries for deployed mesh services</li>
              <li>Per-session ephemeral keypair</li>
              <li>Display name, groups, and roles</li>
              <li>Session config isolated in tmpdir</li>
              <li>MCP_TIMEOUT + output limits tuned for mesh</li>
            </ul>
          </div>
          <div className="bg-[var(--cm-bg-elevated)] p-6">
            <div
              className="mb-2 text-[10px] uppercase tracking-[0.22em] text-[var(--cm-fg-tertiary)]"
              style={{ fontFamily: "var(--cm-font-mono)" }}
            >
              plain claude
            </div>
            <ul
              className="space-y-1.5 text-[13px] leading-[1.6] text-[var(--cm-fg-secondary)]"
              style={{ fontFamily: "var(--cm-font-serif)" }}
            >
              <li>All 43 MCP tools still work</li>
              <li>Messages are pull-only (check_messages)</li>
              <li>No real-time push delivery</li>
              <li>Uses member keypair (not ephemeral)</li>
              <li>No display name or group assignment</li>
            </ul>
          </div>
        </div>
      </div>

      {/* Uninstall */}
      <div className="mt-16">
        <h2
          className="mb-4 text-xl font-medium text-[var(--cm-fg)]"
          style={{ fontFamily: "var(--cm-font-serif)" }}
        >
          Uninstall
        </h2>
        <pre
          className="overflow-x-auto rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] px-6 py-4 text-[13px] leading-[1.9] text-[var(--cm-fg-secondary)]"
          style={{ fontFamily: "var(--cm-font-mono)" }}
        >
          <code>{`claudemesh uninstall     # remove MCP server, hooks, and allowedTools
npm uninstall -g claudemesh-cli
rm -rf ~/.claudemesh    # delete config + keypairs (irreversible)`}</code>
        </pre>
      </div>

      {/* CTA */}
      <div className="mt-16 flex flex-col items-start gap-4 border-t border-[var(--cm-border)] pt-10">
        <p
          className="text-[15px] leading-[1.6] text-[var(--cm-fg-secondary)]"
          style={{ fontFamily: "var(--cm-font-serif)" }}
        >
          Need help? Run{" "}
          <code
            className="rounded bg-[var(--cm-bg-elevated)] px-1.5 py-0.5 text-[12px] text-[var(--cm-fg)]"
            style={{ fontFamily: "var(--cm-font-mono)" }}
          >
            claudemesh doctor
          </code>{" "}
          to diagnose issues, or{" "}
          <Link
            href="https://github.com/alezmad/claudemesh-cli/issues"
            className="underline decoration-[var(--cm-fg-tertiary)] underline-offset-4 hover:text-[var(--cm-fg)]"
          >
            open an issue on GitHub
          </Link>
          .
        </p>
        <Link
          href="/auth/register"
          className="inline-flex items-center gap-2 rounded-[var(--cm-radius-xs)] bg-[var(--cm-clay)] px-5 py-3 text-[15px] font-medium text-[var(--cm-fg)] transition-colors duration-300 hover:bg-[var(--cm-clay-hover)]"
          style={{ fontFamily: "var(--cm-font-sans)" }}
        >
          Create a mesh →
        </Link>
      </div>
    </div>
  );
}
