'use client';

import { useState } from 'react';
import Link from 'next/link';

const API_BASE = process.env.NEXT_PUBLIC_API_BASE ?? 'https://cypher.arcrun.dev';

const CODE_DEMOS = {
  python: `pip install arcrun

from arcrun import Arcrun

client = Arcrun()  # reads ARCRUN_API_KEY from env

# One-time setup: upload credential
client.auth.setup("notion", token="secret_xxx")

# Every time after: just bind and use
notion = client.auth.bind("notion")
pages = notion.get("/pages").json()

# Works with any of 20+ services
drive = client.auth.bind("google_drive_sa")
files = drive.get("/files").json()`,

  javascript: `npm install arcrun

import { Arcrun } from 'arcrun'

const client = new Arcrun() // reads ARCRUN_API_KEY from env

// One-time setup: upload credential
await client.auth.setup('notion', { token: 'secret_xxx' })

// Every time after: just bind and use
const notion = await client.auth.bind('notion')
const pages = await (await notion.get('/pages')).json()

// Run a deployed workflow
const result = await client.workflows.run('my-flow', {
  email: 'user@example.com'
})`,

  http: `# Works with any HTTP tool — curl, n8n, Make, Postman
POST ${API_BASE}/webhooks/named/my-workflow/trigger
X-Arcrun-API-Key: YOUR_API_KEY
Content-Type: application/json

{
  "email": "user@example.com"
}

# n8n: HTTP Request 節點，貼上即用，不需要安裝任何東西`,
};

export default function HomePage() {
  const [activeTab, setActiveTab] = useState<'python' | 'javascript' | 'http'>('python');

  return (
    <div className="flex flex-col min-h-screen bg-[#0a0a0a] text-[#ededed]">
      {/* Nav */}
      <nav className="flex items-center justify-between px-6 py-4 border-b border-[#1a1a1a]">
        <span className="text-white font-bold text-lg tracking-tight">arcrun</span>
        <div className="flex items-center gap-4 text-sm">
          <Link href="/integrations" className="text-[#666] hover:text-white transition-colors">Integrations</Link>
          <Link href="/api-docs" className="text-[#666] hover:text-white transition-colors">API</Link>
          <a href="https://github.com/richblack/arcrun" target="_blank" rel="noopener noreferrer"
            className="text-[#666] hover:text-white transition-colors">GitHub</a>
          <Link href="/login"
            className="bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-1.5 rounded-md text-sm font-medium transition-colors">
            Get API Key
          </Link>
        </div>
      </nav>

      {/* Hero */}
      <section className="flex flex-col items-center text-center px-6 pt-24 pb-16">
        <div className="inline-flex items-center gap-2 bg-[#1a1a2e] text-indigo-400 text-xs px-3 py-1 rounded-full mb-6 border border-indigo-900/50">
          <span className="w-1.5 h-1.5 bg-indigo-400 rounded-full animate-pulse inline-block"></span>
          Open Source · Free API Key · No Credit Card
        </div>

        <h1 className="text-5xl md:text-6xl font-bold text-white mb-4 leading-tight max-w-3xl">
          Stop fighting OAuth.
        </h1>
        <p className="text-xl md:text-2xl text-[#888] mb-3 max-w-2xl">
          One API key. Every service. Works anywhere.
        </p>
        <p className="text-[#555] max-w-xl mb-10">
          arcrun handles Google, Notion, GitHub, Slack authentication
          so your Python / JS code doesn&apos;t have to.
        </p>

        <div className="flex gap-3 flex-wrap justify-center">
          <Link href="/login"
            className="bg-indigo-600 hover:bg-indigo-500 text-white px-6 py-3 rounded-lg font-medium transition-colors">
            Get API Key — Free
          </Link>
          <a href="https://github.com/richblack/arcrun" target="_blank" rel="noopener noreferrer"
            className="border border-[#333] hover:border-[#555] text-[#aaa] hover:text-white px-6 py-3 rounded-lg font-medium transition-colors">
            View on GitHub
          </a>
        </div>
      </section>

      {/* Before / After */}
      <section className="max-w-4xl mx-auto px-6 pb-16 w-full">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
          <div className="bg-[#111] border border-[#222] rounded-xl p-6">
            <div className="text-[#555] text-xs mb-3 font-mono uppercase tracking-wider">Before</div>
            <div className="text-red-400 text-sm font-mono space-y-1 opacity-70">
              <div>40 行 OAuth 程式碼</div>
              <div>GCP Console 設定</div>
              <div>debug 兩天</div>
              <div>Service Account JSON</div>
              <div>token 過期再修一次</div>
            </div>
          </div>
          <div className="flex items-center justify-center text-[#333] text-4xl font-thin select-none">→</div>
          <div className="bg-[#111] border border-indigo-900/50 rounded-xl p-6">
            <div className="text-indigo-400 text-xs mb-3 font-mono uppercase tracking-wider">After</div>
            <pre className="text-green-400 text-sm font-mono leading-relaxed">
{`from arcrun import auth

drive = auth.bind(
  "google_drive"
)
# done.`}
            </pre>
          </div>
        </div>
      </section>

      {/* Code Demo */}
      <section className="max-w-3xl mx-auto px-6 pb-20 w-full">
        <div className="bg-[#111] border border-[#222] rounded-xl overflow-hidden">
          <div className="flex border-b border-[#1e1e1e]">
            {(['python', 'javascript', 'http'] as const).map(tab => (
              <button
                key={tab}
                onClick={() => setActiveTab(tab)}
                className={`px-5 py-3 text-sm font-medium transition-colors cursor-pointer ${
                  activeTab === tab
                    ? 'text-white border-b-2 border-indigo-500 bg-[#0d0d1a]'
                    : 'text-[#555] hover:text-[#aaa]'
                }`}
              >
                {tab === 'python' ? 'Python' : tab === 'javascript' ? 'JavaScript' : 'HTTP / n8n'}
              </button>
            ))}
          </div>
          <div className="p-6 overflow-x-auto">
            <pre className="text-sm text-[#cdd6f4] leading-relaxed">
              <code>{CODE_DEMOS[activeTab]}</code>
            </pre>
          </div>
        </div>
        {activeTab === 'http' && (
          <p className="text-[#444] text-sm mt-3 text-center">
            n8n 用戶：用 HTTP Request 節點，不需要安裝任何東西
          </p>
        )}
      </section>

      {/* Features */}
      <section className="max-w-4xl mx-auto px-6 pb-20 w-full">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {[
            { title: '20+ 服務開箱即用', desc: 'Google、Notion、GitHub、Slack、OpenAI、Stripe... 全部一個 bind() 搞定。', icon: '🔌' },
            { title: 'AI-first 設計', desc: 'Token 消耗極小，YAML workflow 幾十個 token，讓 AI 直接讀寫執行。', icon: '🤖' },
            { title: '完全開源', desc: 'MIT 授權。Self-host 在你自己的 Cloudflare，或使用我們的 hosted 服務。', icon: '🔓' },
          ].map(f => (
            <div key={f.title} className="bg-[#111] border border-[#1e1e1e] rounded-xl p-6">
              <div className="text-2xl mb-3">{f.icon}</div>
              <h3 className="text-white font-semibold mb-2">{f.title}</h3>
              <p className="text-[#555] text-sm leading-relaxed">{f.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="border-t border-[#1a1a1a] py-16 text-center px-6">
        <h2 className="text-3xl font-bold text-white mb-3">準備好了嗎？</h2>
        <p className="text-[#555] mb-8">免費取得 API Key，不需要信用卡。</p>
        <Link href="/login"
          className="bg-indigo-600 hover:bg-indigo-500 text-white px-8 py-3 rounded-lg font-medium transition-colors">
          免費取得 API Key
        </Link>
      </section>

      {/* Footer */}
      <footer className="border-t border-[#1a1a1a] py-8 px-6 text-center text-[#333] text-sm mt-auto">
        <div className="flex items-center justify-center gap-6">
          <Link href="/integrations" className="hover:text-[#777] transition-colors">Integrations</Link>
          <Link href="/api-docs" className="hover:text-[#777] transition-colors">API Docs</Link>
          <a href="https://github.com/richblack/arcrun" target="_blank" rel="noopener noreferrer"
            className="hover:text-[#777] transition-colors">GitHub</a>
        </div>
        <p className="mt-4">arcrun — MIT License</p>
      </footer>
    </div>
  );
}