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

const Widgets = () => {
  return (
    <div className="space-y-8">
      <div className="space-y-4">
        <h1 className="text-4xl font-bold tracking-tight text-foreground">Status Widgets</h1>
        <p className="text-xl text-muted-foreground">
          Embeddable web components to display real-time uptime status on your website.
        </p>
      </div>

      {/* Quick Start */}
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold text-foreground">Quick Start</h2>
        <p className="text-muted-foreground">
          Add the status widget to any HTML page with a single script tag:
        </p>
        <div className="bg-muted/50 rounded-lg p-4">
          <pre className="text-sm text-foreground overflow-x-auto">{`<script src="https://cdn.uptime.link/widget.js"></script>
<uptime-status endpoint="https://api.example.com"></uptime-status>`}</pre>
        </div>
      </div>

      {/* Widget Types */}
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold text-foreground">Widget Types</h2>

        <div className="space-y-6">
          {/* Status Badge */}
          <div className="space-y-2">
            <h3 className="text-lg font-medium text-foreground">Status Badge</h3>
            <p className="text-sm text-muted-foreground">
              A compact badge showing current status.
            </p>
            <div className="bg-muted/50 rounded-lg p-4">
              <pre className="text-sm text-foreground overflow-x-auto">{`<uptime-badge
  endpoint="https://api.example.com"
  label="API Status"
></uptime-badge>`}</pre>
            </div>
          </div>

          {/* Status Card */}
          <div className="space-y-2">
            <h3 className="text-lg font-medium text-foreground">Status Card</h3>
            <p className="text-sm text-muted-foreground">
              A card showing status, uptime percentage, and response time.
            </p>
            <div className="bg-muted/50 rounded-lg p-4">
              <pre className="text-sm text-foreground overflow-x-auto">{`<uptime-card
  endpoint="https://api.example.com"
  name="API Server"
  show-uptime="true"
  show-response-time="true"
></uptime-card>`}</pre>
            </div>
          </div>

          {/* Status Page */}
          <div className="space-y-2">
            <h3 className="text-lg font-medium text-foreground">Status Page</h3>
            <p className="text-sm text-muted-foreground">
              A full status page with multiple endpoints.
            </p>
            <div className="bg-muted/50 rounded-lg p-4">
              <pre className="text-sm text-foreground overflow-x-auto">{`<uptime-page
  endpoints='[
    {"url": "https://api.example.com", "name": "API"},
    {"url": "https://app.example.com", "name": "Web App"},
    {"url": "https://db.internal:5432", "name": "Database"}
  ]'
  title="System Status"
></uptime-page>`}</pre>
            </div>
          </div>
        </div>
      </div>

      {/* Customization */}
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold text-foreground">Customization</h2>
        <p className="text-muted-foreground">
          Customize the appearance using CSS variables:
        </p>
        <div className="bg-muted/50 rounded-lg p-4">
          <pre className="text-sm text-foreground overflow-x-auto">{`<style>
  uptime-card {
    --uptime-bg: #1a1a1a;
    --uptime-text: #ffffff;
    --uptime-up: #10b981;
    --uptime-down: #ef4444;
    --uptime-border: #333333;
    --uptime-radius: 8px;
  }
</style>`}</pre>
        </div>
      </div>

      {/* Attributes */}
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold text-foreground">Attributes</h2>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-border">
                <th className="text-left py-2 px-3 font-medium text-foreground">Attribute</th>
                <th className="text-left py-2 px-3 font-medium text-foreground">Type</th>
                <th className="text-left py-2 px-3 font-medium text-foreground">Description</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-border">
              <tr>
                <td className="py-2 px-3"><code className="text-emerald-500">endpoint</code></td>
                <td className="py-2 px-3 text-muted-foreground">string</td>
                <td className="py-2 px-3 text-muted-foreground">URL to monitor</td>
              </tr>
              <tr>
                <td className="py-2 px-3"><code className="text-emerald-500">name</code></td>
                <td className="py-2 px-3 text-muted-foreground">string</td>
                <td className="py-2 px-3 text-muted-foreground">Display name for the endpoint</td>
              </tr>
              <tr>
                <td className="py-2 px-3"><code className="text-emerald-500">refresh</code></td>
                <td className="py-2 px-3 text-muted-foreground">number</td>
                <td className="py-2 px-3 text-muted-foreground">Refresh interval in seconds (default: 60)</td>
              </tr>
              <tr>
                <td className="py-2 px-3"><code className="text-emerald-500">show-uptime</code></td>
                <td className="py-2 px-3 text-muted-foreground">boolean</td>
                <td className="py-2 px-3 text-muted-foreground">Show uptime percentage</td>
              </tr>
              <tr>
                <td className="py-2 px-3"><code className="text-emerald-500">show-response-time</code></td>
                <td className="py-2 px-3 text-muted-foreground">boolean</td>
                <td className="py-2 px-3 text-muted-foreground">Show response time</td>
              </tr>
              <tr>
                <td className="py-2 px-3"><code className="text-emerald-500">theme</code></td>
                <td className="py-2 px-3 text-muted-foreground">"light" | "dark" | "auto"</td>
                <td className="py-2 px-3 text-muted-foreground">Color theme</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* React Integration */}
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold text-foreground">React Integration</h2>
        <p className="text-muted-foreground">
          Use the React wrapper for type-safe integration:
        </p>
        <div className="bg-muted/50 rounded-lg p-4">
          <pre className="text-sm text-foreground overflow-x-auto">{`import { StatusCard, StatusPage } from '@uptime.link/react';

function MyStatusPage() {
  return (
    <StatusPage
      endpoints={[
        { url: 'https://api.example.com', name: 'API' },
        { url: 'https://app.example.com', name: 'Web App' }
      ]}
      title="System Status"
      theme="dark"
    />
  );
}`}</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/sdk">
              TypeScript SDK
              <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 Widgets;