import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { 
  ArrowLeft, 
  Copy, 
  Code, 
  Terminal,
  Globe,
  Key
} from 'lucide-react';
import { Link } from 'react-router-dom';
import { toast } from 'sonner';

const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000/api/v1';

export default function ApiDocs() {
  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text);
    toast.success('Copied to clipboard');
  };

  const curlExample = `curl -X POST ${API_BASE_URL}/public/send-email \\
  -H "Content-Type: application/json" \\
  -H "X-API-Key: your_api_key_here" \\
  -d '{
    "to_email": "recipient@example.com",
    "subject": "Hello from API",
    "body": "This is a test email sent via SMTP API",
    "from_name": "Your App"
  }'`;

  const pythonExample = `import requests

url = "${API_BASE_URL}/public/send-email"
headers = {
    "Content-Type": "application/json",
    "X-API-Key": "your_api_key_here"
}
data = {
    "to_email": "recipient@example.com",
    "subject": "Hello from API",
    "body": "This is a test email sent via SMTP API",
    "from_name": "Your App"
}

response = requests.post(url, json=data, headers=headers)
print(response.json())`;

  const javascriptExample = `const response = await fetch('${API_BASE_URL}/public/send-email', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-API-Key': 'your_api_key_here'
  },
  body: JSON.stringify({
    to_email: 'recipient@example.com',
    subject: 'Hello from API',
    body: 'This is a test email sent via SMTP API',
    from_name: 'Your App'
  })
});

const result = await response.json();
console.log(result);`;

  const phpExample = `<?php
$url = '${API_BASE_URL}/public/send-email';
$data = [
    'to_email' => 'recipient@example.com',
    'subject' => 'Hello from API',
    'body' => 'This is a test email sent via SMTP API',
    'from_name' => 'Your App'
];

$ch = curl_init($url);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    'Content-Type: application/json',
    'X-API-Key: your_api_key_here'
]);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$response = curl_exec($ch);
curl_close($ch);

echo $response;
?>`;

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center gap-4">
              <Link to="/dashboard">
                <Button variant="ghost" size="sm">
                  <ArrowLeft className="h-4 w-4 mr-2" />
                  Back
                </Button>
              </Link>
              <h1 className="text-xl font-bold text-gray-900">API Documentation</h1>
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="space-y-8">
          {/* Introduction */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Globe className="h-5 w-5" />
                Getting Started
              </CardTitle>
              <CardDescription>
                Learn how to integrate SMTP API Service into your applications
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <p className="text-gray-600">
                The SMTP API Service provides a simple REST API for sending emails using your own SMTP servers. 
                To get started, you'll need an API key which you can generate from the API Keys section.
              </p>
              
              <div className="bg-blue-50 p-4 rounded-lg">
                <h4 className="font-medium text-blue-900 mb-2 flex items-center gap-2">
                  <Key className="h-4 w-4" />
                  Base URL
                </h4>
                <code className="text-sm text-blue-800 bg-blue-100 px-2 py-1 rounded">
                  {API_BASE_URL}
                </code>
              </div>
            </CardContent>
          </Card>

          {/* Authentication */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Key className="h-5 w-5" />
                Authentication
              </CardTitle>
              <CardDescription>
                All API requests require authentication using an API key
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <p className="text-gray-600">
                Include your API key in the request headers as <code>X-API-Key</code>.
              </p>
              
              <div className="bg-gray-900 text-gray-100 p-4 rounded-lg">
                <div className="flex justify-between items-center mb-2">
                  <span className="text-sm text-gray-400">Header</span>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="text-gray-400 hover:text-white"
                    onClick={() => copyToClipboard('X-API-Key: your_api_key_here')}
                  >
                    <Copy className="h-4 w-4" />
                  </Button>
                </div>
                <code className="text-sm">
                  X-API-Key: your_api_key_here
                </code>
              </div>
            </CardContent>
          </Card>

          {/* Send Email Endpoint */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Code className="h-5 w-5" />
                Send Email
              </CardTitle>
              <CardDescription>
                Send an email using your configured SMTP server
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="flex items-center gap-4">
                <Badge className="bg-green-100 text-green-800">POST</Badge>
                <code className="text-sm">/public/send-email</code>
              </div>

              <div>
                <h4 className="font-medium mb-2">Request Body</h4>
                <table className="w-full text-sm">
                  <thead>
                    <tr className="border-b">
                      <th className="text-left py-2 px-4 font-medium">Field</th>
                      <th className="text-left py-2 px-4 font-medium">Type</th>
                      <th className="text-left py-2 px-4 font-medium">Required</th>
                      <th className="text-left py-2 px-4 font-medium">Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr className="border-b">
                      <td className="py-2 px-4"><code>to_email</code></td>
                      <td className="py-2 px-4">string</td>
                      <td className="py-2 px-4"><Badge>Yes</Badge></td>
                      <td className="py-2 px-4">Recipient email address</td>
                    </tr>
                    <tr className="border-b">
                      <td className="py-2 px-4"><code>subject</code></td>
                      <td className="py-2 px-4">string</td>
                      <td className="py-2 px-4"><Badge>Yes</Badge></td>
                      <td className="py-2 px-4">Email subject line</td>
                    </tr>
                    <tr className="border-b">
                      <td className="py-2 px-4"><code>body</code></td>
                      <td className="py-2 px-4">string</td>
                      <td className="py-2 px-4"><Badge>Yes</Badge></td>
                      <td className="py-2 px-4">Email body content</td>
                    </tr>
                    <tr className="border-b">
                      <td className="py-2 px-4"><code>from_name</code></td>
                      <td className="py-2 px-4">string</td>
                      <td className="py-2 px-4"><Badge variant="secondary">No</Badge></td>
                      <td className="py-2 px-4">Sender name</td>
                    </tr>
                    <tr className="border-b">
                      <td className="py-2 px-4"><code>from_email</code></td>
                      <td className="py-2 px-4">string</td>
                      <td className="py-2 px-4"><Badge variant="secondary">No</Badge></td>
                      <td className="py-2 px-4">Sender email (must be allowed by SMTP)</td>
                    </tr>
                    <tr className="border-b">
                      <td className="py-2 px-4"><code>is_html</code></td>
                      <td className="py-2 px-4">boolean</td>
                      <td className="py-2 px-4"><Badge variant="secondary">No</Badge></td>
                      <td className="py-2 px-4">Whether body is HTML (default: false)</td>
                    </tr>
                  </tbody>
                </table>
              </div>

              <div>
                <h4 className="font-medium mb-2">Response</h4>
                <div className="bg-gray-900 text-gray-100 p-4 rounded-lg">
                  <pre className="text-sm overflow-x-auto">
{`{
  "success": true,
  "message": "Email sent successfully"
}`}
                  </pre>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Code Examples */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Terminal className="h-5 w-5" />
                Code Examples
              </CardTitle>
              <CardDescription>
                Copy-paste ready examples in multiple languages
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Tabs defaultValue="curl" className="w-full">
                <TabsList className="grid w-full grid-cols-4">
                  <TabsTrigger value="curl">cURL</TabsTrigger>
                  <TabsTrigger value="python">Python</TabsTrigger>
                  <TabsTrigger value="javascript">JavaScript</TabsTrigger>
                  <TabsTrigger value="php">PHP</TabsTrigger>
                </TabsList>
                
                <TabsContent value="curl">
                  <div className="bg-gray-900 text-gray-100 p-4 rounded-lg">
                    <div className="flex justify-between items-center mb-2">
                      <span className="text-sm text-gray-400">cURL</span>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="text-gray-400 hover:text-white"
                        onClick={() => copyToClipboard(curlExample)}
                      >
                        <Copy className="h-4 w-4" />
                      </Button>
                    </div>
                    <pre className="text-sm overflow-x-auto">{curlExample}</pre>
                  </div>
                </TabsContent>
                
                <TabsContent value="python">
                  <div className="bg-gray-900 text-gray-100 p-4 rounded-lg">
                    <div className="flex justify-between items-center mb-2">
                      <span className="text-sm text-gray-400">Python</span>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="text-gray-400 hover:text-white"
                        onClick={() => copyToClipboard(pythonExample)}
                      >
                        <Copy className="h-4 w-4" />
                      </Button>
                    </div>
                    <pre className="text-sm overflow-x-auto">{pythonExample}</pre>
                  </div>
                </TabsContent>
                
                <TabsContent value="javascript">
                  <div className="bg-gray-900 text-gray-100 p-4 rounded-lg">
                    <div className="flex justify-between items-center mb-2">
                      <span className="text-sm text-gray-400">JavaScript</span>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="text-gray-400 hover:text-white"
                        onClick={() => copyToClipboard(javascriptExample)}
                      >
                        <Copy className="h-4 w-4" />
                      </Button>
                    </div>
                    <pre className="text-sm overflow-x-auto">{javascriptExample}</pre>
                  </div>
                </TabsContent>
                
                <TabsContent value="php">
                  <div className="bg-gray-900 text-gray-100 p-4 rounded-lg">
                    <div className="flex justify-between items-center mb-2">
                      <span className="text-sm text-gray-400">PHP</span>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="text-gray-400 hover:text-white"
                        onClick={() => copyToClipboard(phpExample)}
                      >
                        <Copy className="h-4 w-4" />
                      </Button>
                    </div>
                    <pre className="text-sm overflow-x-auto">{phpExample}</pre>
                  </div>
                </TabsContent>
              </Tabs>
            </CardContent>
          </Card>

          {/* Error Handling */}
          <Card>
            <CardHeader>
              <CardTitle>Error Handling</CardTitle>
              <CardDescription>
                Common error responses and their meanings
              </CardDescription>
            </CardHeader>
            <CardContent>
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b">
                    <th className="text-left py-2 px-4 font-medium">Status Code</th>
                    <th className="text-left py-2 px-4 font-medium">Error</th>
                    <th className="text-left py-2 px-4 font-medium">Description</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="border-b">
                    <td className="py-2 px-4"><Badge variant="destructive">401</Badge></td>
                    <td className="py-2 px-4">Invalid API key</td>
                    <td className="py-2 px-4">The provided API key is invalid or revoked</td>
                  </tr>
                  <tr className="border-b">
                    <td className="py-2 px-4"><Badge variant="destructive">400</Badge></td>
                    <td className="py-2 px-4">Missing fields</td>
                    <td className="py-2 px-4">Required fields are missing in the request</td>
                  </tr>
                  <tr className="border-b">
                    <td className="py-2 px-4"><Badge variant="destructive">500</Badge></td>
                    <td className="py-2 px-4">SMTP error</td>
                    <td className="py-2 px-4">Failed to send email via SMTP server</td>
                  </tr>
                </tbody>
              </table>
            </CardContent>
          </Card>
        </div>
      </main>
    </div>
  );
}
