import { ArrowUpRight, BookOpen, Download, ExternalLink, Github, Network, Terminal, Twitter } from "lucide-react";
import LiveDashboard from "@/components/live-dashboard";
import { EXPLORER_URL, PONS_FACTORY } from "@/lib/pons";

const optionalLinks = [
  { label: "Terms", href: process.env.NEXT_PUBLIC_TERMS_URL },
  { label: "GitHub", href: process.env.NEXT_PUBLIC_GITHUB_URL, icon: Github },
  { label: "X", href: process.env.NEXT_PUBLIC_X_URL ?? "https://x.com/robinhoodzoi", icon: Twitter },
];

export default function Home() {
  return (
    <>
      <a className="skip-link" href="#main-content">Skip to main content</a>
      <nav className="topbar" aria-label="Primary navigation">
        <a className="brand" href="#top" aria-label="Zoi Agent home">
          <img className="brand-avatar" src="/zoi-agent-avatar-v2.png" alt="" aria-hidden="true" />
          <span className="brand-mark" aria-hidden="true"><i /><i /><i /></span>
          <span className="brand-wordmark">ZOI AGENT</span>
        </a>
        <div className="nav-links">
          <a href="#live">Live Activity</a><a href="#about">About</a><a href="#buyback">Buyback Rules</a>
          <a href="https://docs.ponsfamily.com" target="_blank" rel="noreferrer">Documentation</a>
        </div>
        <div className="nav-utility">
          <div className="network-state" title="Robinhood Chain mainnet"><span className="status-pulse" aria-hidden="true" /><span>Robinhood Chain</span><code>4663</code></div>
          <a className="official-x" href="https://x.com/robinhoodzoi" target="_blank" rel="noreferrer" aria-label="Zoi Agent on X" title="Zoi Agent on X"><Twitter size={14} /></a>
          <a className="nav-button" href={EXPLORER_URL} target="_blank" rel="noreferrer"><span>Blockscout</span><ArrowUpRight size={14} /></a>
        </div>
      </nav>

      <main id="main-content" tabIndex={-1}>
        <LiveDashboard />
        <section className="about-section" id="about" aria-labelledby="about-title">
          <header className="about-heading">
            <div>
              <span>Introducing Zoi Agent</span>
              <h2 id="about-title">From social momentum to verifiable onchain execution.</h2>
            </div>
            <div className="about-lead">
              <p>Most meme launches begin with a screenshot, a group chat and a lot of noise.</p>
              <strong>We are building something different.</strong>
              <p>Zoi Agent is a self-hosted autonomous agent that turns social momentum into public onchain execution.</p>
            </div>
          </header>

          <div className="about-chapters">
            <article>
              <span>01</span>
              <h3>Discover and reason</h3>
              <p>Zoi watches X for emerging narratives, filters spam and duplicated content, then sends the strongest signals to 5.6sol for deeper analysis.</p>
              <p>The model studies growth velocity, engagement quality, the accounts spreading a topic, and whether the trend is beginning or already exhausted.</p>
            </article>
            <article>
              <span>02</span>
              <h3>Launch and collect</h3>
              <p>When a signal passes strategy and risk checks, Zoi can launch a token through Pons on Robinhood Chain. The token and its Uniswap V3 pool are created onchain.</p>
              <p>Pons currently allocates 70% of trading fees to the creator. Zoi monitors and claims those rewards automatically.</p>
            </article>
            <article>
              <span>03</span>
              <h3>Buy back in public</h3>
              <p>Half of creator revenue is assigned to an onchain buyback budget. Before execution, Zoi checks the contract, liquidity, quote, slippage, price impact and transaction simulation.</p>
              <p>This is not a simulated dashboard. Launches, fee claims and buybacks resolve to public transaction hashes that anyone can verify on Blockscout.</p>
            </article>
            <article>
              <span>04</span>
              <h3>Self-hosted by design</h3>
              <p>Run Zoi on your own computer, VPS or server. The AI never holds the private key and cannot directly sign transactions. It proposes; an independent execution layer validates and signs.</p>
              <p>The website is only a public window into the system. It shows live activity and verifiable results. It never takes custody of user funds.</p>
            </article>
          </div>

          <div className="about-ownership">
            <div><span>Your computer.</span><span>Your API keys.</span><span>Your strategy.</span><span>Your capital.</span><strong>Your Agent.</strong></div>
            <p>This is not a promise of profit. It is an experiment in making the path from social signal to onchain action more autonomous, transparent and verifiable.</p>
          </div>

          <ol className="about-flow" aria-label="Zoi Agent execution flow">
            <li>X trends</li><li>5.6sol analysis</li><li>Pons launch</li><li>Automatic fee claims</li><li>Robinhood Chain buybacks</li>
          </ol>
        </section>
        <section className="install-section" id="install" aria-labelledby="install-title">
          <header className="install-intro">
            <div>
              <span>Self-hosted runtime</span>
              <h2 id="install-title">Run the Agent on your own infrastructure.</h2>
            </div>
            <div>
              <p>Install the self-hosted runtime with Docker Desktop or Docker Engine on Linux, macOS, Windows or a VPS. API keys and the execution wallet remain on your machine.</p>
              <a href="/zoi-agent-source.zip" download><Download size={14} /> Download source</a>
              <a href="/install-zoi-agent.sh" download><Terminal size={14} /> Download installer</a>
              <a href="/install-zoi-agent.ps1" download><Terminal size={14} /> Windows installer</a>
            </div>
          </header>
          <div className="install-terminal" aria-label="npm installation commands">
            <div className="install-terminal-head"><span><Terminal size={14} /> Docker Desktop / Linux / macOS</span><code>zoi-agent</code></div>
            <pre><code>{`curl -fsSL https://ponsagent.com/install-zoi-agent.sh -o install-zoi-agent.sh
bash install-zoi-agent.sh
cd ~/zoi-agent
nano apps/agent/.env
docker compose -f docker-compose.agent.yml up -d --build`}</code></pre>
          </div>
          <div className="install-notes">
            <span><strong>01</strong>The installer downloads the source and creates a private <code>.env</code>.</span>
            <span><strong>02</strong>Run <code>doctor</code> inside the container before enabling live execution.</span>
            <span><strong>03</strong>Keep the Agent running on your own computer or VPS with Docker Compose.</span>
          </div>
        </section>
        <section className="signal-section" id="signal" aria-labelledby="signal-title">
          <div className="signal-copy">
            <span>Signal layer / X + 5.6sol</span>
            <h2 id="signal-title">Noise enters.<br />A decision leaves.</h2>
            <p>Zoi ranks momentum, provenance and risk before any Pons transaction is considered. The model proposes; the execution layer verifies.</p>
            <dl className="signal-facts">
              <div><dt>Input</dt><dd>X trend velocity</dd></div>
              <div><dt>Reasoning</dt><dd>5.6sol structured output</dd></div>
              <div><dt>Gate</dt><dd>Deterministic risk checks</dd></div>
            </dl>
          </div>
          <figure className="signal-image">
            <img src="/zoi-trend-intelligence.png" alt="Zoi Agent filtering a field of social signals into verified onchain nodes" />
            <figcaption>Signal filtering is an input to execution, not a trade receipt.</figcaption>
          </figure>
        </section>
        <section className="buyback-section" id="buyback">
          <header className="buyback-intro">
            <span>Capital policy / immutable allocation</span>
            <h2>35% of gross fee revenue returns to the market.</h2>
            <p>The rule is visible before execution. There is no fixed buyback cap; execution remains bounded by the available ledger balance, gas, slippage and price impact.</p>
          </header>
          <div className="buyback-layout">
            <div className="buyback-ledger">
              <div className="allocation-sequence" aria-label="Buyback allocation calculation">
                <RuleMetric index="01" label="Pool fee" value="1%" detail="of trading volume" />
                <RuleMetric index="02" label="Creator share" value="70%" detail="of collected fees" />
                <RuleMetric index="03" label="Buyback allocation" value="50%" detail="of creator revenue" />
                <RuleMetric index="04" label="Effective buyback" value="0.35%" detail="of trading volume" accent />
              </div>
              <div className="allocation-formula">
                <code>1% fee × 70% creator share × 50% allocation</code><span>=</span><strong>35% of gross fee revenue</strong>
              </div>
            </div>
            <figure className="buyback-image">
              <img src="/zoi-buyback-engine.png" alt="Zoi Agent routing creator fees into reserve and timed onchain buyback paths" />
              <figcaption>Allocation is recorded before execution. The ledger is the boundary.</figcaption>
            </figure>
          </div>
        </section>
      </main>

      <footer>
        <div className="footer-brand"><span className="brand-mark compact" aria-hidden="true"><i /><i /><i /></span><div><strong>ZOI AGENT</strong><span>Robinhood Chain / mainnet</span></div></div>
        <div className="footer-facts">
          <div><span>Factory</span><a href={`${EXPLORER_URL}/address/${PONS_FACTORY}`} target="_blank" rel="noreferrer">{`${PONS_FACTORY.slice(0, 6)}…${PONS_FACTORY.slice(-4)}`} <ExternalLink size={12} /></a></div>
          <div><span>Status</span><strong className="footer-online"><i /> Operational</strong></div>
        </div>
        <div className="footer-links">
          <a href="https://docs.ponsfamily.com" target="_blank" rel="noreferrer"><BookOpen size={13} /> Docs</a>
          <a href={EXPLORER_URL} target="_blank" rel="noreferrer"><Network size={13} /> Blockscout</a>
          {optionalLinks.map(({ label, href, icon: Icon }) => href ? <a key={label} href={href} target="_blank" rel="noreferrer">{Icon ? <Icon size={13} /> : null}{label}</a> : <span key={label} className="footer-link-pending" title={`${label} link not configured`}>{Icon ? <Icon size={13} /> : null}{label}</span>)}
        </div>
      </footer>
    </>
  );
}

function RuleMetric({ index, label, value, detail, accent = false }: { index: string; label: string; value: string; detail: string; accent?: boolean }) {
  return <div className={accent ? "rule-metric accent" : "rule-metric"}><span>{index}</span><div><small>{label}</small><strong>{value}</strong><p>{detail}</p></div></div>;
}
