// pages/integrations.jsx

const INTEGRATIONS = [
  {
    emoji: '🦜', name: 'LangChain', badge: 'Stable',
    install: 'pip install vela-agent langchain',
    lang: 'python',
    code: `from langchain_aegis import AegisPythonREPL

tool = AegisPythonREPL(
    capabilities={"filesystem": ["/tmp"]}
)
result = tool.run("print('hello from sandbox')")`,
    docsTo: '/docs',
  },
  {
    emoji: '🦙', name: 'LlamaIndex', badge: 'Stable',
    install: 'pip install vela-agent llama-index-core',
    lang: 'python',
    code: `from llamaindex_aegis import AegisPythonTool
from llama_index.core.agent import ReActAgent

sandbox = AegisPythonTool(
    capabilities={"filesystem": ["/tmp"]}
)
agent = ReActAgent.from_tools([sandbox.as_llama_tool()])
response = agent.chat("What is 2**128?")`,
    docsTo: '/docs',
  },
  {
    emoji: '🤖', name: 'CrewAI', badge: 'Stable',
    install: 'pip install vela-agent crewai',
    lang: 'python',
    code: `from crewai import Agent
from crewai_aegis import AegisPythonTool

sandbox = AegisPythonTool(
    capabilities={"filesystem": ["/tmp"]}
)
coder = Agent(
    role="Python Coder",
    tools=[sandbox],
)`,
    docsTo: '/docs',
  },
  {
    emoji: '✦', name: 'OpenAI', badge: 'Stable',
    install: 'pip install vela-agent openai',
    lang: 'python',
    code: `from aegis_agent.openai_adapter import VelaOpenAITool
from openai import OpenAI

vela = VelaOpenAITool(
    capabilities={"filesystem": ["/tmp"]}
)
client = OpenAI()
response = client.chat.completions.create(
    model="gpt-4o",
    tools=[vela.tool_schema()],
    messages=[{"role": "user", "content": "2**128?"}],
)
results = vela.handle_response(response)`,
    docsTo: '/docs',
  },
  {
    emoji: '🐍', name: 'Python (sync)', badge: 'Core',
    install: 'pip install vela-agent',
    lang: 'python',
    code: `from aegis_agent import DaemonClient

client = DaemonClient(
    "/tmp/velad.sock",
    "/tmp/token.json"
)
result = client.execute(
    ["python3", "-c", "print(42)"]
)
print(result.stdout)   # "42\\n"`,
    docsTo: '/docs',
  },
  {
    emoji: '⚡', name: 'Python (async)', badge: 'Core',
    install: 'pip install vela-agent',
    lang: 'python',
    code: `from aegis_agent.async_client import AsyncDaemonClient

async with AsyncDaemonClient(
    "/tmp/velad.sock",
    "/tmp/token.json"
) as client:
    result = await client.execute(
        ["python3", "-c", "print(42)"]
    )
    print(result.stdout)`,
    docsTo: '/docs',
  },
  {
    emoji: '🌐', name: 'REST API', badge: 'Any language',
    install: null,
    lang: 'javascript',
    code: `// Works from any language
const res = await fetch(
  "https://api.getvela.io/execute",
  {
    method: "POST",
    headers: {
      "x-api-key": "vela_live_xxx",
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      language: "python",
      code: btoa("print(2**128)"),
      labels: { task: "math" },
    }),
  }
);
const { execution_id } = await res.json();`,
    docsTo: '/docs',
  },
];

const COMING_SOON = ['AutoGen (Microsoft)', 'Google Gemini / VertexAI', 'Haystack', 'DSPy', 'LangGraph'];

function IntegrationCard({ item, delay }) {
  return (
    <AnimEl delay={delay}>
      <div style={{
        background: 'var(--color-surface)',
        border: '1px solid var(--color-border)',
        borderRadius: 'var(--radius-xl)',
        overflow: 'hidden',
        transition: 'border-color 0.15s',
        height: '100%',
        display: 'flex', flexDirection: 'column',
      }}
        onMouseEnter={e => e.currentTarget.style.borderColor = 'rgba(99,102,241,0.35)'}
        onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--color-border)'}
      >
        {/* Header */}
        <div style={{ padding: '1.25rem 1.5rem', borderBottom: '1px solid var(--color-border)', display: 'flex', alignItems: 'center', gap: '0.875rem' }}>
          <span style={{ fontSize: '1.75rem', lineHeight: 1 }}>{item.emoji}</span>
          <div>
            <div style={{ fontWeight: 700, fontSize: '1rem' }}>{item.name}</div>
          </div>
          <span className="badge badge-brand" style={{ marginLeft: 'auto' }}>{item.badge}</span>
        </div>

        {/* Install */}
        {item.install && (
          <div style={{ padding: '0.75rem 1.5rem', background: '#0a0a11', borderBottom: '1px solid var(--color-border)' }}>
            <code style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8125rem', color: 'var(--color-muted)' }}>
              <span style={{ color: 'var(--color-green)', userSelect: 'none' }}>$ </span>
              {item.install}
            </code>
          </div>
        )}

        {/* Code */}
        <div style={{ flex: 1, background: '#0d0d14' }}>
          <pre style={{ margin: 0, padding: '1.25rem 1.5rem', overflowX: 'auto' }}>
            <CodeInner code={item.code} lang={item.lang} />
          </pre>
        </div>

        {/* Footer */}
        <div style={{ padding: '0.875rem 1.5rem', borderTop: '1px solid var(--color-border)', display: 'flex', justifyContent: 'flex-end' }}>
          <a href={item.docsTo}
            onClick={e => { e.preventDefault(); navigate(item.docsTo); }}
            style={{ display: 'flex', alignItems: 'center', gap: '0.35rem', fontSize: '0.8125rem', color: 'var(--color-brand-400)', fontWeight: 600, textDecoration: 'none' }}
            onMouseEnter={e => e.currentTarget.style.textDecoration = 'underline'}
            onMouseLeave={e => e.currentTarget.style.textDecoration = 'none'}
          >
            View docs <IcoArrowRight size={13} />
          </a>
        </div>
      </div>
    </AnimEl>
  );
}

function IntegrationsPage() {
  useSEO("Integrations — Vela Runtime", "Connect Vela with your favorite AI frameworks.");
  return (
    <div style={{ paddingTop: '64px', minHeight: '100vh', background: 'var(--color-bg)' }}>
      {/* Hero */}
      <div style={{ padding: '5rem 0 4rem', textAlign: 'center' }} className="bg-hero-glow bg-grid">
        <div className="container">
          <AnimEl>
            <span className="badge badge-brand" style={{ marginBottom: '1.25rem' }}>Integrations</span>
            <h1 style={{ fontSize: 'clamp(2rem, 5vw, 3rem)', fontWeight: 800, letterSpacing: '-0.03em', marginBottom: '0.875rem' }}>
              Built for every AI stack
            </h1>
            <p style={{ color: 'var(--color-muted)', fontSize: '1.125rem' }}>One import. Any framework.</p>
          </AnimEl>
        </div>
      </div>

      {/* Cards grid */}
      <div className="container" style={{ padding: '3.5rem 1.5rem' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: '1.25rem', marginBottom: '5rem' }}>
          {INTEGRATIONS.map((item, i) => (
            <IntegrationCard key={item.name} item={item} delay={(i % 2) + 1} />
          ))}
        </div>

        {/* Coming soon */}
        <AnimEl>
          <div style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', padding: '2.5rem', textAlign: 'center' }}>
            <span className="badge badge-muted" style={{ marginBottom: '1.25rem' }}>Coming soon</span>
            <h2 style={{ fontWeight: 700, fontSize: '1.25rem', marginBottom: '0.75rem' }}>More integrations on the way</h2>
            <p style={{ color: 'var(--color-muted)', marginBottom: '1.75rem', fontSize: '0.9375rem' }}>
              We're actively building adapters for these frameworks. Star the repo to get notified.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.625rem', justifyContent: 'center' }}>
              {COMING_SOON.map(name => (
                <span key={name} className="badge badge-muted" style={{ fontSize: '0.875rem' }}>{name}</span>
              ))}
            </div>
          </div>
        </AnimEl>
      </div>
    </div>
  );
}

Object.assign(window, { IntegrationsPage });