import React from 'react';
import { Link } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { ArrowRight, ArrowLeft, ExternalLink } from 'lucide-react';

const CodeBlock = ({ children, title }: { children: string; title?: string }) => (
  <div className="rounded-lg border border-border overflow-hidden">
    {title && (
      <div className="px-4 py-2 bg-muted/50 border-b border-border text-xs font-medium text-muted-foreground">
        {title}
      </div>
    )}
    <pre className="p-4 overflow-x-auto bg-muted/30">
      <code className="text-sm font-mono text-foreground">{children}</code>
    </pre>
  </div>
);

const QuickStart = () => {
  return (
    <div className="space-y-8">
      {/* Header */}
      <div className="space-y-4">
        <h1 className="text-4xl font-bold tracking-tight text-foreground">
          Quick Start
        </h1>
        <p className="text-xl text-muted-foreground leading-relaxed">
          Get started with idp.global in under 5 minutes. Choose between using our
          free hosted platform or self-hosting with Docker.
        </p>
      </div>

      {/* Option 1: Hosted Platform */}
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold text-foreground">Option 1: Use Free Hosted Platform</h2>
        <p className="text-muted-foreground">
          The fastest way to get started. Create your free account on idp.global and start using
          it immediately. No installation required.
        </p>
        <div className="space-y-3">
          <div className="flex items-start gap-3">
            <span className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-xs font-bold shrink-0">1</span>
            <div>
              <p className="font-medium text-foreground">Create your account</p>
              <p className="text-sm text-muted-foreground">
                Visit <a href="https://idp.global" className="text-primary hover:underline">idp.global</a> and sign up for a free account.
              </p>
            </div>
          </div>
          <div className="flex items-start gap-3">
            <span className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-xs font-bold shrink-0">2</span>
            <div>
              <p className="font-medium text-foreground">Create an organization</p>
              <p className="text-sm text-muted-foreground">
                Set up your first organization and invite team members.
              </p>
            </div>
          </div>
          <div className="flex items-start gap-3">
            <span className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-xs font-bold shrink-0">3</span>
            <div>
              <p className="font-medium text-foreground">Register your application</p>
              <p className="text-sm text-muted-foreground">
                Create an OAuth/OIDC client for your app and get your credentials.
              </p>
            </div>
          </div>
        </div>
        <Button asChild>
          <a href="https://idp.global">
            Get Started Free
            <ExternalLink className="ml-2 h-4 w-4" />
          </a>
        </Button>
      </div>

      {/* Option 2: Self-Host */}
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold text-foreground">Option 2: Self-Host with Docker</h2>
        <p className="text-muted-foreground">
          Deploy your own instance for complete control over your data and infrastructure.
        </p>

        <h3 className="text-lg font-medium text-foreground">Prerequisites</h3>
        <ul className="list-disc list-inside text-muted-foreground space-y-1 ml-2">
          <li>Docker installed on your server</li>
          <li>MongoDB instance (local or cloud)</li>
          <li>A domain name pointing to your server</li>
        </ul>

        <h3 className="text-lg font-medium text-foreground">1. Pull the Docker image</h3>
        <CodeBlock title="Terminal">
{`docker pull code.foss.global/idp.global/idp.global`}
        </CodeBlock>

        <h3 className="text-lg font-medium text-foreground">2. Run the container</h3>
        <CodeBlock title="Terminal">
{`docker run -d \\
  -p 2999:2999 \\
  -e MONGODB_URL=mongodb://your-mongo:27017/idp \\
  -e IDP_BASEURL=https://your-domain.com \\
  -e INSTANCE_NAME=my-idp \\
  code.foss.global/idp.global/idp.global`}
        </CodeBlock>

        <h3 className="text-lg font-medium text-foreground">3. Access your instance</h3>
        <p className="text-muted-foreground">
          Your idp.global instance is now running on port 2999. Configure your reverse proxy
          (nginx, traefik, etc.) to handle HTTPS and route traffic to the container.
        </p>

        <Button variant="outline" asChild>
          <Link to="/docs/docker">
            Full Docker Guide
            <ArrowRight className="ml-2 h-4 w-4" />
          </Link>
        </Button>
      </div>

      {/* Integrate with your app */}
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold text-foreground">Integrate with Your Application</h2>
        <p className="text-muted-foreground">
          Once you have access to an idp.global instance, install the TypeScript client:
        </p>

        <CodeBlock title="Terminal">
{`npm install @idp.global/idpclient`}
        </CodeBlock>

        <h3 className="text-lg font-medium text-foreground">Basic Usage</h3>
        <CodeBlock title="app.ts">
{`import { IdpClient } from '@idp.global/idpclient';

// Initialize the client
const idpClient = new IdpClient('https://idp.global');

// Enable WebSocket connection for real-time updates
await idpClient.enableTypedSocket();

// Check if user is logged in
const isLoggedIn = await idpClient.determineLoginStatus();

if (isLoggedIn) {
  // Get current user info
  const userInfo = await idpClient.whoIs();
  console.log('User:', userInfo.user);

  // Get user's organizations
  const orgs = await idpClient.getRolesAndOrganizations();
  console.log('Organizations:', orgs.organizations);
}`}
        </CodeBlock>

        <Button variant="outline" asChild>
          <Link to="/docs/sdk">
            Full SDK Documentation
            <ArrowRight className="ml-2 h-4 w-4" />
          </Link>
        </Button>
      </div>

      {/* Navigation */}
      <div className="flex justify-between pt-8 border-t border-border">
        <Button variant="ghost" asChild>
          <Link to="/docs">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Introduction
          </Link>
        </Button>
        <Button variant="ghost" asChild>
          <Link to="/docs/docker">
            Docker Deployment
            <ArrowRight className="ml-2 h-4 w-4" />
          </Link>
        </Button>
      </div>
    </div>
  );
};

export default QuickStart;