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

const QuickStart = () => {
  return (
    <div className="space-y-8">
      <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">
          Get uptime.link running and monitoring your first endpoint in under 5 minutes.
        </p>
      </div>

      {/* Prerequisites */}
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold text-foreground">Prerequisites</h2>
        <ul className="space-y-2">
          {['Node.js 18+ or Docker', 'npm or pnpm package manager'].map((item) => (
            <li key={item} className="flex items-center gap-2 text-muted-foreground">
              <CheckCircle2 className="h-4 w-4 text-emerald-500" />
              {item}
            </li>
          ))}
        </ul>
      </div>

      {/* Step 1 */}
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold text-foreground">1. Install the CLI</h2>
        <p className="text-muted-foreground">
          Install the uptime.link CLI globally using npm or pnpm:
        </p>
        <div className="bg-muted/50 rounded-lg p-4">
          <code className="text-sm text-foreground">npm install -g @uptime.link/cli</code>
        </div>
        <p className="text-sm text-muted-foreground">
          Or with pnpm:
        </p>
        <div className="bg-muted/50 rounded-lg p-4">
          <code className="text-sm text-foreground">pnpm add -g @uptime.link/cli</code>
        </div>
      </div>

      {/* Step 2 */}
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold text-foreground">2. Scan Your Network</h2>
        <p className="text-muted-foreground">
          Run the detector to discover services on your local network:
        </p>
        <div className="bg-muted/50 rounded-lg p-4">
          <code className="text-sm text-foreground">uptime scan</code>
        </div>
        <p className="text-sm text-muted-foreground">
          This will scan common ports and detect running services like HTTP servers, databases, and more.
        </p>
      </div>

      {/* Step 3 */}
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold text-foreground">3. Add a Monitor</h2>
        <p className="text-muted-foreground">
          Add an endpoint to monitor:
        </p>
        <div className="bg-muted/50 rounded-lg p-4">
          <pre className="text-sm text-foreground overflow-x-auto">{`uptime add https://api.example.com --interval 60`}</pre>
        </div>
        <p className="text-sm text-muted-foreground">
          This adds the endpoint to your monitoring list with 60-second check intervals.
        </p>
      </div>

      {/* Step 4 */}
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold text-foreground">4. View Status</h2>
        <p className="text-muted-foreground">
          Check the status of all monitored endpoints:
        </p>
        <div className="bg-muted/50 rounded-lg p-4">
          <code className="text-sm text-foreground">uptime status</code>
        </div>
        <p className="text-sm text-muted-foreground">
          You'll see a table with the current status, response time, and uptime percentage for each endpoint.
        </p>
      </div>

      {/* Using the SDK */}
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold text-foreground">Using the SDK</h2>
        <p className="text-muted-foreground">
          For programmatic access, install the TypeScript SDK:
        </p>
        <div className="bg-muted/50 rounded-lg p-4">
          <code className="text-sm text-foreground">npm install @uptime.link/sdk</code>
        </div>
        <div className="bg-muted/50 rounded-lg p-4 mt-4">
          <pre className="text-sm text-foreground overflow-x-auto">{`import { UptimeClient } from '@uptime.link/sdk';

const client = new UptimeClient();

// Check a single endpoint
const result = await client.check('https://api.example.com');
console.log(result.status, result.responseTime);

// Scan local network
const services = await client.scanNetwork();
console.log('Found services:', services);`}</pre>
        </div>
      </div>

      {/* Next steps */}
      <div className="space-y-4 pt-4 border-t border-border">
        <h2 className="text-xl font-semibold text-foreground">Next Steps</h2>
        <div className="flex flex-wrap gap-3">
          <Button variant="outline" asChild>
            <Link to="/docs/cli">
              CLI Reference
              <ArrowRight className="ml-2 h-4 w-4" />
            </Link>
          </Button>
          <Button variant="outline" asChild>
            <Link to="/docs/widgets">
              Status Widgets
              <ArrowRight className="ml-2 h-4 w-4" />
            </Link>
          </Button>
          <Button variant="outline" asChild>
            <Link to="/docs/detector">
              Network Detector
              <ArrowRight className="ml-2 h-4 w-4" />
            </Link>
          </Button>
        </div>
      </div>
    </div>
  );
};

export default QuickStart;