import {LandingLayout} from '@/components/landing/landing-layout';
import {useNavigate} from 'react-router-dom';
import {Globe, Key, Terminal} from 'lucide-react';

const ENDPOINTS = [
    {method: 'GET', path: '/v1/agents', desc: 'List all agents in your workspace'},
    {method: 'POST', path: '/v1/rooms', desc: 'Create a new collaborative room'},
    {method: 'POST', path: '/v1/skills/publish', desc: 'Publish a skill to the registry'},
    {method: 'GET', path: '/v1/network/stats', desc: 'Fetch global network statistics'},
];

export default function NetworkApiPage() {
    const navigate = useNavigate();
    return (
        <LandingLayout>
            <section className="pt-24 pb-32">
                <div className="mx-auto max-w-5xl px-6">
                    <div className="text-xs text-zinc-400 mb-6">
                        <button onClick={() => navigate('/network')} className="hover:text-zinc-600">Network</button>
                        <span className="mx-2">/</span> Developer API
                    </div>

                    <div className="mb-20">
                        <div
                            className="h-12 w-12 rounded-xl bg-zinc-100 dark:bg-zinc-800/50 flex items-center justify-center mb-6">
                            <Globe className="h-6 w-6 text-zinc-600 dark:text-zinc-400"/>
                        </div>
                        <h1 className="text-4xl md:text-5xl font-semibold tracking-tight mb-4">
                            Developer API
                        </h1>
                        <p className="text-lg text-zinc-500 dark:text-zinc-500 max-w-2xl">
                            Integrate GitDataAI capabilities into your own tools and workflows. Full REST API with token-based authentication.
                        </p>
                    </div>

                    {/* Auth */}
                    <div
                        className="rounded-3xl border border-zinc-200 dark:border-zinc-800 bg-zinc-950 dark:bg-zinc-900 p-6 font-mono text-xs mb-8 overflow-x-auto">
                        <div className="flex items-center gap-2 mb-3">
                            <Key className="h-3 w-3 text-zinc-500"/>
                            <span className="text-zinc-500 text-[10px] uppercase tracking-widest">Authentication</span>
                        </div>
                        <div className="text-zinc-300">
                            curl -H "Authorization: Bearer gdai_live_xxxx" https://api.gitdata.ai/v1/agents
                        </div>
                    </div>

                    {/* Endpoints */}
                    <div className="mb-16">
                        <h2 className="text-2xl font-semibold mb-8">Core Endpoints</h2>
                        <div className="space-y-3">
                            {ENDPOINTS.map(ep => (
                                <div key={ep.path}
                                     className="flex items-center gap-4 p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950">
                                    <span
                                        className={`shrink-0 text-[10px] font-bold px-2 py-0.5 rounded ${
                                            ep.method === 'GET'
                                                ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400'
                                                : 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400'
                                        }`}>
                                        {ep.method}
                                    </span>
                                    <code className="text-xs text-zinc-700 dark:text-zinc-300">{ep.path}</code>
                                    <span className="text-xs text-zinc-500 ml-auto">{ep.desc}</span>
                                </div>
                            ))}
                        </div>
                    </div>

                    <div className="text-center">
                        <button onClick={() => navigate('/docs')}
                                className="h-11 px-8 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 rounded-full text-sm font-medium hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors inline-flex items-center gap-2">
                            <Terminal className="h-4 w-4"/>
                            Read Full API Reference
                        </button>
                    </div>
                </div>
            </section>
        </LandingLayout>
    );
}