import Link from "next/link";
import { QR_STAND_PRESETS } from "@menulio/shared";

export default function AdminDashboardPage() {
  const presetCount = Object.keys(QR_STAND_PRESETS).length;

  return (
    <div className="max-w-6xl mx-auto space-y-8">
      {/* Karşılama Başlığı */}
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
          <h1 className="text-2xl md:text-3xl font-extrabold text-white tracking-tight">
            Menulio Sistem & Şablon Yönetimi
          </h1>
          <p className="text-zinc-400 text-sm mt-1">
            Masa standı şablonlarını, JSON şablon motorunu ve restoran görünüm ayarlarını yönetin.
          </p>
        </div>

        <div className="flex items-center gap-3 flex-wrap self-start">
          <Link
            href="/admin/menu-templates"
            className="inline-flex items-center gap-2 bg-white/5 border border-white/10 hover:bg-white/10 text-white font-bold px-4 py-2.5 rounded-xl transition-all text-sm"
          >
            <svg className="w-4 h-4 text-[#D4AF37]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
            </svg>
            Web Menü Şablon Stüdyosu
          </Link>
          <Link
            href="/admin/templates"
            className="inline-flex items-center gap-2 bg-gradient-to-r from-[#D4AF37] to-[#F59E0B] text-[#0C0C0E] font-bold px-5 py-2.5 rounded-xl shadow-lg shadow-[#D4AF37]/20 hover:opacity-95 transition-all text-sm"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v16m8-8H4" />
            </svg>
            QR Şablon Stüdyosu
          </Link>
        </div>
      </div>

      {/* İstatistik Kartları */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div className="p-5 rounded-2xl bg-[#121215] border border-white/10 space-y-2">
          <div className="text-xs font-semibold text-zinc-400 uppercase tracking-wider">
            Aktif Şablonlar
          </div>
          <div className="text-3xl font-black text-white">{presetCount} Adet</div>
          <div className="text-xs text-emerald-400 font-medium flex items-center gap-1">
            <span>●</span> Mobil & Web Canlıda
          </div>
        </div>

        <div className="p-5 rounded-2xl bg-[#121215] border border-white/10 space-y-2">
          <div className="text-xs font-semibold text-zinc-400 uppercase tracking-wider">
            Şablon Motoru Tipi
          </div>
          <div className="text-2xl font-black text-[#D4AF37]">JSON Driven</div>
          <div className="text-xs text-zinc-400 font-medium">
            0 App Store güncellemesi
          </div>
        </div>

        <div className="p-5 rounded-2xl bg-[#121215] border border-white/10 space-y-2">
          <div className="text-xs font-semibold text-zinc-400 uppercase tracking-wider">
            Baskı Çıktı Formatı
          </div>
          <div className="text-3xl font-black text-white">A5 & 300DPI</div>
          <div className="text-xs text-zinc-400 font-medium">
            PDF + Vektörel PNG
          </div>
        </div>

        <div className="p-5 rounded-2xl bg-[#121215] border border-white/10 space-y-2">
          <div className="text-xs font-semibold text-zinc-400 uppercase tracking-wider">
            API Durumu
          </div>
          <div className="text-2xl font-black text-emerald-400">Aktif & Senkron</div>
          <div className="text-xs text-zinc-400 font-medium">
            REST API v1
          </div>
        </div>
      </div>

      {/* Nasıl Çalışır / Mimari Rehber Kutusu */}
      <div className="p-6 rounded-2xl bg-gradient-to-br from-[#18181B] to-[#121215] border border-[#D4AF37]/20 relative overflow-hidden">
        <div className="relative z-10 space-y-4">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#D4AF37]/15 border border-[#D4AF37]/30 text-xs font-bold text-[#D4AF37]">
            💡 DİNAMİK ŞABLON MİMARİSİ
          </div>

          <h2 className="text-xl font-bold text-white">
            Mobil Uygulamayı Güncellemeden Yeni Şablon Yayınlama
          </h2>

          <p className="text-sm text-zinc-300 leading-relaxed max-w-3xl">
            Menulio, QR masa kartı şablonlarını doğrudan kod içine gömmek yerine <strong>JSON şablon spesifikasyonu</strong> ile çalışır.
            Admin panelinden yeni bir SVG/Görsel arka plan ve varsayılan QR/metin koordinatları tanımladığınızda,
            tüm mobil kullanıcılar uygulamayı güncellemek zorunda kalmadan yeni şablonu anında görürler.
          </p>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 pt-2">
            <div className="p-4 rounded-xl bg-black/40 border border-white/5 space-y-1.5">
              <div className="text-xs font-bold text-[#D4AF37]">1. Arka Planı Belirle</div>
              <div className="text-xs text-zinc-400">
                Figma veya Illustrator'dan SVG/PNG arka planı oluşturup yükleyin veya renk seçin.
              </div>
            </div>
            <div className="p-4 rounded-xl bg-black/40 border border-white/5 space-y-1.5">
              <div className="text-xs font-bold text-[#D4AF37]">2. QR & Katmanları Ayarla</div>
              <div className="text-xs text-zinc-400">
                QR kodun yerini, boyutunu, restoran ismi ve slogan metinlerinin varsayılan yerlerini belirleyin.
              </div>
            </div>
            <div className="p-4 rounded-xl bg-black/40 border border-white/5 space-y-1.5">
              <div className="text-xs font-bold text-[#D4AF37]">3. Tek Tıkla Yayınla</div>
              <div className="text-xs text-zinc-400">
                Kaydet butonuna bastığınız anda API üzerinden tüm restoranların mobil uygulamasına dağıtılır.
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Hızlı Şablonlar Listesi */}
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <h3 className="text-lg font-bold text-white">Mevcut Hazır Şablonlar</h3>
          <Link
            href="/admin/templates"
            className="text-xs font-semibold text-[#D4AF37] hover:underline"
          >
            Tümünü Yönet & Düzenle &rarr;
          </Link>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {Object.values(QR_STAND_PRESETS).slice(0, 4).map((preset) => (
            <div
              key={preset.key}
              className="p-4 rounded-xl bg-[#121215] border border-white/10 space-y-3 flex flex-col justify-between"
            >
              <div>
                <div className="flex items-center justify-between mb-2">
                  <span className="text-[11px] font-mono text-zinc-500">{preset.key}</span>
                  <span className="text-[10px] bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-0.5 rounded-full font-bold">
                    Aktif
                  </span>
                </div>
                <div className="font-bold text-white text-sm line-clamp-1">{preset.name}</div>
                <div className="text-xs text-zinc-400 mt-0.5">{preset.categoryName || "Masa Kartı"}</div>
              </div>

              <div className="pt-3 border-t border-white/5 flex items-center justify-between text-xs text-zinc-400">
                <span>Oran: {preset.aspectRatio || "1/1"}</span>
                <Link
                  href={`/admin/templates?key=${preset.key}`}
                  className="font-bold text-[#D4AF37] hover:underline"
                >
                  Düzenle
                </Link>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}