"use client";

import Link from "next/link";

export default function ApiDocsPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-zinc-900 dark:via-black dark:to-zinc-900">
      <div className="mx-auto max-w-5xl px-4 py-12">
        {/* Header */}
        <div className="mb-8 flex items-center justify-between">
          <Link
            href="/"
            className="flex items-center gap-2 text-blue-600 hover:text-blue-700 dark:text-blue-400"
          >
            <svg
              className="h-5 w-5"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M10 19l-7-7m0 0l7-7m-7 7h18"
              />
            </svg>
            Ana Sayfa
          </Link>
        </div>

        {/* Title */}
        <div className="mb-12 text-center">
          <h1 className="mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-5xl font-bold text-transparent dark:from-blue-400 dark:to-purple-400">
            API Dokümantasyonu
          </h1>
          <p className="text-xl text-gray-600 dark:text-gray-300">
            Image Manipulation API - REST API Kullanım Kılavuzu
          </p>
        </div>

        {/* Content */}
        <div className="space-y-8">
          {/* Base URL */}
          <section className="rounded-xl bg-white p-6 shadow-lg dark:bg-zinc-800/50">
            <h2 className="mb-4 text-2xl font-bold text-gray-900 dark:text-white">
              Base URL
            </h2>
            <div className="rounded-lg bg-gray-100 p-4 dark:bg-zinc-900">
              <code className="text-blue-600 dark:text-blue-400">
                https://v2.beyhano.com.tr
              </code>
            </div>
          </section>

          {/* Authentication */}
          <section className="rounded-xl bg-white p-6 shadow-lg dark:bg-zinc-800/50">
            <h2 className="mb-4 text-2xl font-bold text-gray-900 dark:text-white">
              Authentication
            </h2>
            <p className="mb-4 text-gray-600 dark:text-gray-300">
              İki yöntem desteklenir: <strong>JWT</strong> (login/register ile alınan token) veya
              hesabınız için oluşturduğunuz <strong>API anahtarı</strong> (
              <code className="text-sm">img_</code> ile başlar). İkisi de aynı header ile
              gönderilir:
            </p>
            <div className="rounded-lg bg-gray-100 p-4 dark:bg-zinc-900">
              <code className="text-sm text-gray-800 dark:text-gray-200">
                Authorization: Bearer &lt;jwt_token_veya_img_..._api_key&gt;
              </code>
            </div>
            <p className="mt-4 text-gray-600 dark:text-gray-300">
              API anahtarını web arayüzünde profil sayfasından oluşturabilirsiniz; isteğe bağlı
              gün sınırı koyabilir veya süresiz bırakabilirsiniz. Admin, kullanıcı anahtarlarının
              süresini panelden güncelleyebilir.
            </p>
          </section>

          {/* Endpoints */}
          <section className="rounded-xl bg-white p-6 shadow-lg dark:bg-zinc-800/50">
            <h2 className="mb-6 text-2xl font-bold text-gray-900 dark:text-white">
              Endpoints
            </h2>

            {/* Register */}
            <div className="mb-8 border-l-4 border-green-500 pl-4">
              <div className="mb-2 flex items-center gap-2">
                <span className="rounded bg-green-100 px-2 py-1 text-xs font-semibold text-green-800 dark:bg-green-900/30 dark:text-green-400">
                  POST
                </span>
                <code className="text-sm font-mono text-gray-700 dark:text-gray-300">
                  /api/v1/auth/register
                </code>
              </div>
              <p className="mb-3 text-gray-600 dark:text-gray-400">
                Yeni kullanıcı kaydı oluşturur ve JWT token döner.
              </p>
              <div className="rounded-lg bg-gray-100 p-4 dark:bg-zinc-900">
                <pre className="text-sm text-gray-800 dark:text-gray-200">
{`{
  "email": "user@example.com",
  "password": "minimum8karakter",
  "name": "Kullanıcı Adı"
}`}
                </pre>
              </div>
            </div>

            {/* Login */}
            <div className="mb-8 border-l-4 border-blue-500 pl-4">
              <div className="mb-2 flex items-center gap-2">
                <span className="rounded bg-blue-100 px-2 py-1 text-xs font-semibold text-blue-800 dark:bg-blue-900/30 dark:text-blue-400">
                  POST
                </span>
                <code className="text-sm font-mono text-gray-700 dark:text-gray-300">
                  /api/v1/auth/login
                </code>
              </div>
              <p className="mb-3 text-gray-600 dark:text-gray-400">
                Mevcut kullanıcı ile giriş yapar ve JWT token döner.
              </p>
              <div className="rounded-lg bg-gray-100 p-4 dark:bg-zinc-900">
                <pre className="text-sm text-gray-800 dark:text-gray-200">
{`{
  "email": "user@example.com",
  "password": "minimum8karakter"
}`}
                </pre>
              </div>
            </div>

            {/* API Keys */}
            <div className="mb-8 border-l-4 border-teal-500 pl-4">
              <div className="mb-2 flex flex-wrap items-center gap-2">
                <span className="rounded bg-teal-100 px-2 py-1 text-xs font-semibold text-teal-800 dark:bg-teal-900/30 dark:text-teal-400">
                  GET
                </span>
                <code className="text-sm font-mono text-gray-700 dark:text-gray-300">
                  /api/v1/api-keys
                </code>
              </div>
              <p className="mb-2 text-gray-600 dark:text-gray-400">
                Oturum veya Bearer ile: kendi API anahtarlarınızı listeler (tam değer dönmez).
              </p>
              <div className="mb-4 flex flex-wrap items-center gap-2">
                <span className="rounded bg-teal-100 px-2 py-1 text-xs font-semibold text-teal-800 dark:bg-teal-900/30 dark:text-teal-400">
                  POST
                </span>
                <code className="text-sm font-mono text-gray-700 dark:text-gray-300">
                  /api/v1/api-keys
                </code>
              </div>
              <p className="text-gray-600 dark:text-gray-400">
                Body:{" "}
                <code className="text-xs">
                  {`{ "name": "Etiket", "expiresInDays": 30 }`}
                </code>{" "}
                — <code className="text-xs">expiresInDays</code> yok/null/0 ise süresiz.
                Yanıtta tam anahtar yalnızca bir kez gelir.
              </p>
            </div>

            {/* Upload Image */}
            <div className="mb-8 border-l-4 border-purple-500 pl-4">
              <div className="mb-2 flex items-center gap-2">
                <span className="rounded bg-purple-100 px-2 py-1 text-xs font-semibold text-purple-800 dark:bg-purple-900/30 dark:text-purple-400">
                  POST
                </span>
                <code className="text-sm font-mono text-gray-700 dark:text-gray-300">
                  /api/v1/images/upload
                </code>
              </div>
              <p className="mb-3 text-gray-600 dark:text-gray-400">
                Resim yükler, belirtilen boyut/kalite/formatta işler ve kaydeder. (multipart/form-data)
              </p>
              <div className="space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <div><strong>file</strong> (required): Resim dosyası (max 10MB)</div>
                <div><strong>width</strong> (optional): Genişlik (px), default: 800</div>
                <div><strong>height</strong> (optional): Yükseklik (px), default: 600</div>
                <div><strong>quality</strong> (optional): Kalite (1-100), default: 90</div>
                <div><strong>format</strong> (optional): jpeg, png, webp, avif</div>
              </div>
            </div>

            {/* List Images */}
            <div className="mb-8 border-l-4 border-yellow-500 pl-4">
              <div className="mb-2 flex items-center gap-2">
                <span className="rounded bg-yellow-100 px-2 py-1 text-xs font-semibold text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
                  GET
                </span>
                <code className="text-sm font-mono text-gray-700 dark:text-gray-300">
                  /api/v1/images
                </code>
              </div>
              <p className="text-gray-600 dark:text-gray-400">
                Kullanıcının tüm resimlerini listeler.
              </p>
            </div>

            {/* Delete Image */}
            <div className="border-l-4 border-red-500 pl-4">
              <div className="mb-2 flex items-center gap-2">
                <span className="rounded bg-red-100 px-2 py-1 text-xs font-semibold text-red-800 dark:bg-red-900/30 dark:text-red-400">
                  DELETE
                </span>
                <code className="text-sm font-mono text-gray-700 dark:text-gray-300">
                  /api/v1/images/:id
                </code>
              </div>
              <p className="text-gray-600 dark:text-gray-400">
                Belirtilen ID'ye sahip resmi siler.
              </p>
            </div>
          </section>

          {/* Example Code */}
          <section className="rounded-xl bg-white p-6 shadow-lg dark:bg-zinc-800/50">
            <h2 className="mb-4 text-2xl font-bold text-gray-900 dark:text-white">
              Örnek Kullanım (JavaScript)
            </h2>
            <div className="rounded-lg bg-gray-100 p-4 dark:bg-zinc-900">
              <pre className="overflow-x-auto text-sm text-gray-800 dark:text-gray-200">
{`// 1. Kayıt ol
const registerResponse = await fetch(
  'https://image.beyhano.com.tr/api/v1/auth/register',
  {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      email: 'user@example.com',
      password: 'securepassword123',
      name: 'Kullanıcı'
    })
  }
);
const { data } = await registerResponse.json();
const token = data.accessToken;

// 2. Resim yükle
const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('width', '1920');
formData.append('quality', '85');
formData.append('format', 'webp');

const uploadResponse = await fetch(
  'https://image.beyhano.com.tr/api/v1/images/upload',
  {
    method: 'POST',
    headers: { 'Authorization': \`Bearer \${token}\` },
    body: formData
  }
);
const uploadData = await uploadResponse.json();
console.log('URL:', uploadData.data.image.url);`}
              </pre>
            </div>
          </section>

          {/* Features */}
          <section className="rounded-xl bg-white p-6 shadow-lg dark:bg-zinc-800/50">
            <h2 className="mb-4 text-2xl font-bold text-gray-900 dark:text-white">
              Özellikler ve Limitler
            </h2>
            <div className="grid gap-4 sm:grid-cols-2">
              <div>
                <h3 className="mb-2 font-semibold text-gray-900 dark:text-white">
                  ✅ Desteklenen Formatlar
                </h3>
                <ul className="space-y-1 text-gray-600 dark:text-gray-400">
                  <li>• JPEG / JPG</li>
                  <li>• PNG</li>
                  <li>• WebP</li>
                  <li>• AVIF</li>
                  <li>• GIF</li>
                </ul>
              </div>
              <div>
                <h3 className="mb-2 font-semibold text-gray-900 dark:text-white">
                  ⚙️ Limitler
                </h3>
                <ul className="space-y-1 text-gray-600 dark:text-gray-400">
                  <li>• Max dosya: 10MB</li>
                  <li>• Max boyut: 10000x10000 px</li>
                  <li>• Token süresi: 7 gün</li>
                  <li>• HTTPS zorunlu (production)</li>
                </ul>
              </div>
            </div>
          </section>

          {/* Download Full Docs */}
          <section className="rounded-xl bg-gradient-to-r from-blue-600 to-purple-600 p-6 text-center text-white shadow-lg">
            <h3 className="mb-2 text-xl font-bold">Detaylı Dokümantasyon</h3>
            <p className="mb-4">
              Tüm endpoint'ler, hata kodları ve örnekler için tam dokümantasyonu indirin.
            </p>
            <a
              href="https://github.com/yourusername/image-api"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 rounded-full bg-white px-6 py-3 font-semibold text-blue-600 transition-transform hover:scale-105"
            >
              <svg
                className="h-5 w-5"
                fill="currentColor"
                viewBox="0 0 24 24"
              >
                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
              </svg>
              GitHub'da Görüntüle
            </a>
          </section>
        </div>
      </div>
    </div>
  );
}