import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Header } from '@/components/layout/header'
import { CheckCircle, Code, Key, Terminal, ArrowRight } from 'lucide-react'

export default function QuickStartPage() {
  return (
    <>
      <Header />
      <main className="min-h-screen bg-studio-black">
        <div className="container mx-auto py-12 px-4 max-w-4xl">
          <div className="mb-12 text-center">
            <h1 className="text-5xl font-bold text-white mb-4">Quick Start Guide</h1>
            <p className="text-xl text-gray-300">
              Get up and running with Phoenix Nexus Cloud in 5 minutes
            </p>
          </div>

          {/* Steps */}
          <div className="space-y-8">
            {/* Step 1 */}
            <Card>
              <CardHeader>
                <div className="flex items-center gap-4">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-phoenix-fire text-white font-bold">
                    1
                  </div>
                  <div>
                    <CardTitle>Create an Account</CardTitle>
                    <CardDescription>Sign up for Phoenix Nexus Cloud</CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <p className="text-gray-300">
                    If you don't have an account yet, create one to get started.
                  </p>
                  <Button variant="phoenix" asChild>
                    <Link href="/portal/get-started">
                      Get Started <ArrowRight className="ml-2 h-4 w-4" />
                    </Link>
                  </Button>
                </div>
              </CardContent>
            </Card>

            {/* Step 2 */}
            <Card>
              <CardHeader>
                <div className="flex items-center gap-4">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-sankofa-gold text-studio-black font-bold">
                    2
                  </div>
                  <div>
                    <CardTitle>Get Your API Key</CardTitle>
                    <CardDescription>Generate an API key from the Developer Portal</CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <p className="text-gray-300">
                    Navigate to the Developer Portal and create your first API key.
                  </p>
                  <ol className="list-decimal list-inside space-y-2 text-gray-300">
                    <li>Go to Developer Portal</li>
                    <li>Click "Create API Key"</li>
                    <li>Give it a descriptive name</li>
                    <li>Copy the key (you won't see it again!)</li>
                  </ol>
                  <Button variant="outline" asChild>
                    <Link href="/portal/developers/keys">
                      <Key className="mr-2 h-4 w-4" />
                      Manage API Keys
                    </Link>
                  </Button>
                </div>
              </CardContent>
            </Card>

            {/* Step 3 */}
            <Card>
              <CardHeader>
                <div className="flex items-center gap-4">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-neon-cyan text-studio-black font-bold">
                    3
                  </div>
                  <div>
                    <CardTitle>Install the CLI</CardTitle>
                    <CardDescription>Install the Phoenix Nexus CLI tool</CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <p className="text-gray-300">
                    Install the CLI using your preferred package manager:
                  </p>
                  <div className="space-y-2">
                    <div>
                      <p className="text-sm font-semibold text-gray-400 mb-1">npm</p>
                      <code className="block rounded bg-studio-dark px-4 py-2 font-mono text-sm text-white">
                        npm install -g @sankofa/phoenix-cli
                      </code>
                    </div>
                    <div>
                      <p className="text-sm font-semibold text-gray-400 mb-1">pnpm</p>
                      <code className="block rounded bg-studio-dark px-4 py-2 font-mono text-sm text-white">
                        pnpm add -g @sankofa/phoenix-cli
                      </code>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Step 4 */}
            <Card>
              <CardHeader>
                <div className="flex items-center gap-4">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-phoenix-fire text-white font-bold">
                    4
                  </div>
                  <div>
                    <CardTitle>Authenticate</CardTitle>
                    <CardDescription>Configure the CLI with your API key</CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <p className="text-gray-300">
                    Set your API key as an environment variable or use the login command:
                  </p>
                  <div className="space-y-2">
                    <div>
                      <p className="text-sm font-semibold text-gray-400 mb-1">Environment Variable</p>
                      <code className="block rounded bg-studio-dark px-4 py-2 font-mono text-sm text-white">
                        export PHOENIX_API_KEY=sk_live_your_key_here
                      </code>
                    </div>
                    <div>
                      <p className="text-sm font-semibold text-gray-400 mb-1">Or use login</p>
                      <code className="block rounded bg-studio-dark px-4 py-2 font-mono text-sm text-white">
                        phoenix login
                      </code>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Step 5 */}
            <Card>
              <CardHeader>
                <div className="flex items-center gap-4">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-sankofa-gold text-studio-black font-bold">
                    5
                  </div>
                  <div>
                    <CardTitle>Make Your First API Call</CardTitle>
                    <CardDescription>Test the connection with a simple query</CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <p className="text-gray-300">
                    Test your setup with a simple GraphQL query:
                  </p>
                  <pre className="rounded bg-studio-dark p-4 text-sm text-white overflow-x-auto">
{`phoenix query '
  query {
    me {
      id
      email
      name
    }
  }
'`}
                  </pre>
                  <p className="text-sm text-gray-400">
                    Or use curl to make a direct HTTP request:
                  </p>
                  <pre className="rounded bg-studio-dark p-4 text-sm text-white overflow-x-auto">
{`curl -X POST https://api.sankofa.nexus/graphql \\
  -H "Authorization: Bearer $PHOENIX_API_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{"query": "{ me { id email name } }"}'`}
                  </pre>
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Next Steps */}
          <Card className="mt-12 border-phoenix-fire/50">
            <CardHeader>
              <CardTitle>Next Steps</CardTitle>
              <CardDescription>Continue your journey with Phoenix Nexus</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid gap-4 md:grid-cols-2">
                <div className="flex items-start gap-3">
                  <CheckCircle className="mt-1 h-5 w-5 text-phoenix-fire flex-shrink-0" />
                  <div>
                    <h4 className="font-semibold text-white mb-1">Read the API Reference</h4>
                    <p className="text-sm text-gray-400 mb-2">
                      Learn about all available queries and mutations
                    </p>
                    <Button variant="outline" size="sm" asChild>
                      <Link href="/developers/docs/api/graphql">API Reference →</Link>
                    </Button>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <CheckCircle className="mt-1 h-5 w-5 text-sankofa-gold flex-shrink-0" />
                  <div>
                    <h4 className="font-semibold text-white mb-1">Explore Examples</h4>
                    <p className="text-sm text-gray-400 mb-2">
                      See real-world integration examples
                    </p>
                    <Button variant="outline" size="sm" asChild>
                      <Link href="/developers/docs/tutorials">Tutorials →</Link>
                    </Button>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </main>
    </>
  )
}

