"use client";

import React, { useRef, useState, useEffect, useMemo } from "react";
import Link from "next/link";
import { QRCodeCanvas } from "qrcode.react";
import { toPng } from "html-to-image";
import { jsPDF } from "jspdf";
import { QR_STAND_PRESETS, type QrStandPreset } from "@menulio/shared";
import { AyrisFooterBadge } from "./AyrisFooterBadge";

interface QrStandGeneratorClientProps {
  restaurantName?: string;
  logoUrl?: string | null;
  slug?: string;
  categoriesList?: string[];
}

const CurvedTextWeb: React.FC<{
  text: string;
  fontSize: number;
  color: string;
  fontFamily: string;
  fontWeight?: string;
  letterSpacing?: number;
  curveDegree: number;
}> = ({ text, fontSize, color, fontFamily, fontWeight = "700", letterSpacing = 0.5, curveDegree }) => {
  const isUp = curveDegree > 0;
  const absDegree = Math.abs(curveDegree);
  const radius = Math.max(40, 420 - absDegree * 3.5);
  const charWidth = fontSize * 0.52 + (letterSpacing || 0);
  const numChars = text.length;
  const arcLength = numChars * charWidth;
  const totalAngleRad = arcLength / radius;
  const stepRad = numChars > 1 ? totalAngleRad / (numChars - 1) : 0;
  const startAngleRad = -totalAngleRad / 2;

  const maxOffsetY = Math.abs(-radius * (Math.cos(totalAngleRad / 2) - 1));
  const containerHeight = fontSize + maxOffsetY + 10;
  const containerWidth = Math.max(numChars * charWidth, radius * 2 * Math.sin(totalAngleRad / 2)) + 16;

  return (
    <div
      style={{
        position: "relative",
        width: `${containerWidth}px`,
        height: `${containerHeight}px`,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        pointerEvents: "none",
      }}
    >
      {text.split("").map((ch, i) => {
        const angleRad = startAngleRad + i * stepRad;
        const angleDeg = angleRad * (180 / Math.PI);
        const charX = radius * Math.sin(angleRad);
        const charY = isUp
          ? -radius * (Math.cos(angleRad) - 1)
          : radius * (Math.cos(angleRad) - 1);
        const charRotate = isUp ? angleDeg : -angleDeg;

        return (
          <span
            key={i}
            style={{
              position: "absolute",
              transform: `translate(${charX}px, ${charY}px) rotate(${charRotate}deg)`,
              transformOrigin: "center center",
              fontSize: `${fontSize}px`,
              color,
              fontFamily,
              fontWeight,
              letterSpacing: `${letterSpacing}px`,
              whiteSpace: "pre",
              lineHeight: 1,
            }}
          >
            {ch}
          </span>
        );
      })}
    </div>
  );
};

export function QrStandGeneratorClient({
  restaurantName = "THE URBAN BURGER",
  logoUrl = null,
  slug = "kebapci-sinan-3",
  categoriesList = [],
}: QrStandGeneratorClientProps) {
  const [selectedKey, setSelectedKey] = useState<string>("qr-4");
  const [downloadingPng, setDownloadingPng] = useState(false);
  const [downloadingPdf, setDownloadingPdf] = useState(false);
  const [customTemplates, setCustomTemplates] = useState<any[]>([]);
  const standRef = useRef<HTMLDivElement>(null);

  // Fetch dynamic templates from Admin API & local storage
  useEffect(() => {
    async function loadTemplates() {
      // 1. LocalStorage cache for immediate response
      try {
        const local = localStorage.getItem("menulio_qr_templates_v2");
        if (local) {
          const parsed = JSON.parse(local);
          if (Array.isArray(parsed) && parsed.length > 0) {
            setCustomTemplates(parsed);
          }
        }
      } catch {}

      // 2. Fetch from API
      try {
        const res = await fetch("/api/qr-templates");
        if (res.ok) {
          const data = await res.json();
          if (data.templates && Array.isArray(data.templates) && data.templates.length > 0) {
            setCustomTemplates(data.templates);
          }
        }
      } catch {}
    }
    loadTemplates();
  }, []);

  // Filter to show ONLY active templates defined in Admin Panel
  const displayTemplatesList = useMemo(() => {
    if (customTemplates && customTemplates.length > 0) {
      return customTemplates.filter((t: any) => t.isActive !== false);
    }
    return Object.values(QR_STAND_PRESETS);
  }, [customTemplates]);

  const allTemplatesMap = useMemo(() => {
    const map: Record<string, any> = {};
    displayTemplatesList.forEach((t: any) => {
      if (t.key) {
        map[t.key] = t;
      }
    });
    return map;
  }, [displayTemplatesList]);

  const templateKeys = Object.keys(allTemplatesMap);
  const fallbackKey = templateKeys[0] || "qr-1";
  const activePreset = allTemplatesMap[selectedKey] || allTemplatesMap[fallbackKey] || displayTemplatesList[0] || (Object.values(QR_STAND_PRESETS)[0] as any);

  useEffect(() => {
    if (templateKeys.length > 0 && templateKeys[0] && !allTemplatesMap[selectedKey]) {
      setSelectedKey(templateKeys[0]);
    }
  }, [templateKeys, selectedKey, allTemplatesMap]);
  const targetUrl = `https://menul.io/${slug}`;

  const displayCategories =
    categoriesList.length > 0 ? categoriesList.slice(0, 4) : (activePreset.categories || []);

  async function handleDownloadPng() {
    if (!standRef.current) return;
    setDownloadingPng(true);
    try {
      const dataUrl = await toPng(standRef.current, {
        cacheBust: true,
        pixelRatio: 3, // 300 DPI high resolution
      });
      const link = document.createElement("a");
      link.download = `${slug}-masa-stant-qr.png`;
      link.href = dataUrl;
      link.click();
    } catch (err) {
      console.error("PNG indirme hatası:", err);
      alert("PNG indirilemedi. Lütfen tekrar deneyin.");
    } finally {
      setDownloadingPng(false);
    }
  }

  async function handleDownloadPdf() {
    if (!standRef.current) return;
    setDownloadingPdf(true);
    try {
      const dataUrl = await toPng(standRef.current, {
        cacheBust: true,
        pixelRatio: 3,
      });

      // A5 dimensions in mm: 148 x 210
      const pdf = new jsPDF({
        orientation: "portrait",
        unit: "mm",
        format: "a5",
      });

      const pdfWidth = pdf.internal.pageSize.getWidth();
      const pdfHeight = pdf.internal.pageSize.getHeight();

      pdf.addImage(dataUrl, "PNG", 0, 0, pdfWidth, pdfHeight);
      pdf.save(`${slug}-masa-stant-a5.pdf`);
    } catch (err) {
      console.error("PDF indirme hatası:", err);
      alert("PDF indirilemedi. Lütfen tekrar deneyin.");
    } finally {
      setDownloadingPdf(false);
    }
  }

  return (
    <div className="min-h-screen bg-stone-950 text-stone-100 flex flex-col font-sans select-none">
      {/* Top Navbar */}
      <header className="border-b border-stone-800/80 bg-stone-900/90 backdrop-blur-xl sticky top-0 z-50 px-4 sm:px-6 py-3.5">
        <div className="max-w-7xl mx-auto flex items-center justify-between">
          <div className="flex items-center gap-3">
            <Link href="/" className="font-black text-xl tracking-tight text-amber-400">
              MENULIO
            </Link>
            <span className="text-stone-600 hidden sm:inline">/</span>
            <span className="text-xs font-semibold text-stone-400 hidden sm:inline">
              Masa Stant QR Jeneratörü
            </span>
          </div>

          <div className="flex items-center gap-3">
            <Link
              href="/admin/templates"
              className="text-xs font-bold px-3 py-1.5 rounded-lg bg-stone-800 hover:bg-stone-700 text-amber-400 border border-stone-700 transition-all"
            >
              ⚙ Admin Stüdyosu
            </Link>

            <Link
              href="/"
              className="text-xs font-bold px-4 py-2 rounded-xl bg-amber-500 hover:bg-amber-400 text-stone-950 transition-all shadow-md shadow-amber-500/20"
            >
              Ana Sayfa →
            </Link>
          </div>
        </div>
      </header>

      {/* Main Content Area */}
      <main className="flex-1 max-w-6xl w-full mx-auto p-4 sm:p-8 flex flex-col lg:flex-row gap-8 items-center lg:items-start justify-center">
        {/* Left Panel: Preset Selectors & Download Controls */}
        <div className="w-full lg:w-96 flex flex-col gap-6">
          <div className="bg-stone-900/80 border border-stone-800 p-6 rounded-3xl space-y-4 shadow-xl">
            <div>
              <span className="text-xs font-bold uppercase tracking-wider text-amber-400">
                1. Stant Teması Seçin
              </span>
              <h1 className="text-xl sm:text-2xl font-extrabold text-white mt-1">
                Masa Kartı Şablonları
              </h1>
              <p className="text-xs text-stone-400 mt-1 leading-relaxed">
                Restoranınızın konseptine uygun masa stant tasarımını seçin. Admin panelinden güncellenen tüm şablonlar burada canlı senkronize edilir.
              </p>
            </div>

            {/* Presets List */}
            <div className="space-y-2.5 pt-2 max-h-[380px] overflow-y-auto pr-1">
              {Object.values(allTemplatesMap).map((preset: any) => {
                const isSelected = preset.key === selectedKey;
                return (
                  <button
                    key={preset.key}
                    onClick={() => setSelectedKey(preset.key)}
                    className={`w-full p-3.5 rounded-2xl border text-left transition-all flex items-center justify-between ${
                      isSelected
                        ? "bg-amber-500/10 border-amber-500 text-amber-400 shadow-md shadow-amber-500/5"
                        : "bg-stone-950/60 border-stone-800 text-stone-300 hover:border-stone-700"
                    }`}
                  >
                    <div className="flex items-center gap-3">
                      <div
                        className="w-4 h-4 rounded-full border border-white/20 shadow-sm shrink-0"
                        style={{
                          background:
                            preset.plaqueBg || preset.plaqueColor || preset.bgGradient || "#1A1A1E",
                        }}
                      />
                      <div className="min-w-0">
                        <div className="text-xs font-bold truncate">{preset.name}</div>
                        <div className="text-[10px] text-stone-400">
                          {preset.categoryName || "Masa Kartı Şablonu"}
                        </div>
                      </div>
                    </div>
                    {isSelected && <span className="text-xs font-bold shrink-0">✓</span>}
                  </button>
                );
              })}
            </div>
          </div>

          {/* Action Download Buttons */}
          <div className="bg-stone-900/80 border border-stone-800 p-6 rounded-3xl space-y-3.5 shadow-xl">
            <span className="text-xs font-bold uppercase tracking-wider text-stone-400">
              2. Baskı Çıktısı Alın
            </span>

            {/* PNG Download Button */}
            <button
              onClick={handleDownloadPng}
              disabled={downloadingPng}
              className="w-full py-3.5 px-4 rounded-2xl bg-amber-500 hover:bg-amber-400 text-stone-950 font-extrabold text-sm transition-all shadow-lg shadow-amber-500/20 flex items-center justify-center gap-2 cursor-pointer"
            >
              {downloadingPng ? (
                <span>Hazırlanıyor...</span>
              ) : (
                <>
                  <svg className="w-5 h-5 fill-current" viewBox="0 0 24 24">
                    <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
                  </svg>
                  <span>PNG Olarak İndir (300 DPI Ultra HD)</span>
                </>
              )}
            </button>

            {/* PDF Download Button */}
            <button
              onClick={handleDownloadPdf}
              disabled={downloadingPdf}
              className="w-full py-3.5 px-4 rounded-2xl bg-stone-800 hover:bg-stone-700 text-white font-extrabold text-sm border border-stone-700 transition-all flex items-center justify-center gap-2 cursor-pointer"
            >
              {downloadingPdf ? (
                <span>Hazırlanıyor...</span>
              ) : (
                <>
                  <svg className="w-5 h-5 fill-current" viewBox="0 0 24 24">
                    <path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H8V4h12v12zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6z" />
                  </svg>
                  <span>PDF Olarak İndir (A5 Matbaa Baskı)</span>
                </>
              )}
            </button>
          </div>
        </div>

        {/* Right Panel: Stand Live Visual Canvas Preview */}
        <div className="flex-1 flex flex-col items-center justify-center w-full">
          <div
            className="p-6 sm:p-10 rounded-[3rem] shadow-2xl flex items-center justify-center border border-white/5"
            style={{ background: activePreset.bgGradient || "#0C0C0E" }}
          >
            {/* Dynamic JSON Layer Engine (If template has layers/qrConfig from Admin Panel) */}
            {activePreset.layers && activePreset.qrConfig ? (
              <div
                ref={standRef}
                className="w-[360px] sm:w-[380px] rounded-[2.5rem] relative overflow-hidden shadow-[0_25px_60px_rgba(0,0,0,0.6)] border-2 border-white/10 aspect-[400/650] bg-[#121215]"
                style={{
                  background:
                    activePreset.bgType === "image" && activePreset.bgImageUrl
                      ? `url(${activePreset.bgImageUrl}) center/cover no-repeat`
                      : activePreset.bgGradient || activePreset.plaqueBg || activePreset.plaqueColor || "#121215",
                }}
              >
                {/* SVG/Image Background */}
                {activePreset.bgImageUrl && activePreset.bgType !== "image" && (
                  <img
                    src={activePreset.bgImageUrl}
                    alt={activePreset.name}
                    className="absolute inset-0 w-full h-full object-contain pointer-events-none"
                  />
                )}

                {/* Dynamic QR Code Box */}
                <div
                  className="absolute transform -translate-x-1/2 -translate-y-1/2 shadow-xl flex items-center justify-center z-10"
                  style={{
                    left: `${activePreset.qrConfig.xPercent || 50}%`,
                    top: `${activePreset.qrConfig.yPercent || 50}%`,
                    width: `${activePreset.qrConfig.size || 160}px`,
                    height: `${activePreset.qrConfig.size || 160}px`,
                    borderRadius: `${activePreset.qrConfig.borderRadius || 20}px`,
                    backgroundColor: activePreset.qrConfig.bgBoxColor || "#FFFFFF",
                    padding: `${activePreset.qrConfig.padding || 12}px`,
                    border: activePreset.qrConfig.borderWidth
                      ? `${activePreset.qrConfig.borderWidth}px solid ${activePreset.qrConfig.borderColor}`
                      : "none",
                  }}
                >
                  <QRCodeCanvas
                    value={targetUrl}
                    size={activePreset.qrConfig.size || 160}
                    bgColor={activePreset.qrConfig.bgBoxColor || "#ffffff"}
                    fgColor="#111111"
                    level="H"
                    style={{ width: "100%", height: "100%" }}
                    includeMargin={false}
                  />
                </div>

                {/* Text Layers */}
                {activePreset.layers.map((layer: any) => {
                  let textVal = layer.text;
                  if (textVal.includes("REST ORAN") || textVal.includes("RESTORAN İSMİ") || textVal.includes("GUSTO")) {
                    textVal = restaurantName;
                  }

                  return (
                    <div
                      key={layer.id}
                      className="absolute left-1/2 -translate-x-1/2 transform -translate-y-1/2 text-center pointer-events-none z-10 w-full px-4 flex items-center justify-center"
                      style={{
                        top: `${layer.yPercent}%`,
                      }}
                    >
                      {layer.curveDegree ? (
                        <CurvedTextWeb
                          text={textVal}
                          fontSize={layer.fontSize || 20}
                          color={layer.color || "#FFFFFF"}
                          fontFamily={layer.fontFamily || "serif"}
                          fontWeight={layer.fontWeight || "700"}
                          letterSpacing={layer.letterSpacing || 0.5}
                          curveDegree={layer.curveDegree}
                        />
                      ) : (
                        <span
                          style={{
                            fontSize: `${layer.fontSize || 20}px`,
                            color: layer.color || "#FFFFFF",
                            fontFamily: layer.fontFamily || "serif",
                            fontWeight: layer.fontWeight || "700",
                            letterSpacing: `${layer.letterSpacing || 0.5}px`,
                            lineHeight: 1.2,
                          }}
                        >
                          {textVal}
                        </span>
                      )}
                    </div>
                  );
                })}
              </div>
            ) : activePreset.svgTemplateUrl ? (
              <div
                ref={standRef}
                className="w-[360px] sm:w-[380px] rounded-[2.5rem] relative overflow-hidden shadow-[0_25px_60px_rgba(0,0,0,0.6)] border-2 border-white/10 aspect-[400/650]"
              >
                {/* Vector SVG Background */}
                <img
                  src={activePreset.svgTemplateUrl}
                  alt={activePreset.name}
                  className="absolute inset-0 w-full h-full object-contain pointer-events-none"
                />

                {/* Dynamic QR Code Canvas Overlay */}
                <div className="absolute top-[33.08%] left-1/2 -translate-x-1/2 w-[55%] aspect-square rounded-[20px] p-3 shadow-xl flex items-center justify-center bg-white z-10 border border-zinc-200">
                  <QRCodeCanvas
                    value={targetUrl}
                    size={220}
                    bgColor="#ffffff"
                    fgColor="#111111"
                    level="H"
                    style={{ width: "100%", height: "100%" }}
                    includeMargin={false}
                  />
                </div>
              </div>
            ) : (
              <div
                ref={standRef}
                className="w-[360px] sm:w-[380px] min-h-[660px] rounded-[2.5rem] p-7 flex flex-col items-center text-center relative shadow-[0_25px_60px_rgba(0,0,0,0.6)] border-2"
                style={{
                  background: activePreset.plaqueBg || activePreset.plaqueColor || "#1A1A1E",
                  borderColor: activePreset.borderAccent || "#D4AF37",
                }}
              >
                {/* Inner Line Accent */}
                <div
                  className="absolute inset-2.5 rounded-[2rem] border pointer-events-none"
                  style={{ borderColor: activePreset.borderAccent }}
                />

                {/* 01. Brand Badge */}
                <header className="flex flex-col items-center text-center mt-2 z-10">
                  <div
                    className="border-2 rounded-xl px-4 py-2 flex flex-col items-center mb-4 shadow-md"
                    style={{
                      borderColor: activePreset.logoBorder,
                      backgroundColor: activePreset.logoBg,
                    }}
                  >
                    {logoUrl ? (
                      <img
                        src={logoUrl}
                        alt={restaurantName}
                        className="h-10 w-auto max-w-[140px] object-contain mb-1"
                      />
                    ) : null}
                    <span
                      className="font-black text-xl tracking-wider uppercase font-['Montserrat'] leading-tight"
                      style={{ color: activePreset.accentText }}
                    >
                      {restaurantName}
                    </span>
                  </div>

                  {/* Scan Action Text */}
                  <h2
                    className="font-['Montserrat'] font-black text-2xl sm:text-3xl tracking-tight uppercase leading-[0.95] drop-shadow-sm"
                    style={{ color: activePreset.headerText }}
                  >
                    DİJİTAL MENÜ<br />
                    <span className="tracking-wide">KAMERANIZLA TARATIN</span>
                  </h2>
                </header>

                {/* 02. Centered Custom QR Code Box */}
                <section
                  className="w-60 h-60 sm:w-64 sm:h-64 rounded-3xl p-5 shadow-2xl flex items-center justify-center my-6 relative border border-black/15 z-10"
                  style={{ backgroundColor: activePreset.qrBg }}
                >
                  <QRCodeCanvas
                    value={targetUrl}
                    size={200}
                    bgColor={activePreset.qrBg}
                    fgColor={activePreset.qrColor}
                    level="H"
                    includeMargin={false}
                  />
                </section>

                {/* 03. Category Highlights Footer */}
                <footer className="w-full relative px-4 text-center z-10 pb-2 flex-1 flex flex-col justify-end">
                  <p
                    className="text-xs tracking-wide mb-3 font-semibold"
                    style={{ color: activePreset.subText }}
                  >
                    Telefonunuzun kamerasını doğrultun
                  </p>

                  {/* Category Text Stack */}
                  <div
                    className="flex flex-col gap-1.5 max-w-[210px] mx-auto font-['Montserrat'] font-extrabold uppercase tracking-widest text-sm sm:text-base"
                    style={{ color: activePreset.headerText }}
                  >
                    {displayCategories.map((cat: string, idx: number) => (
                      <div key={idx} className="w-full">
                        <div className="py-0.5">{cat}</div>
                        {idx < displayCategories.length - 1 && (
                          <div
                            className="w-full h-[1px] my-0.5"
                            style={{ backgroundColor: activePreset.dividerColor }}
                          />
                        )}
                      </div>
                    ))}
                  </div>
                </footer>
              </div>
            )}
          </div>
        </div>

        <AyrisFooterBadge className="mt-8 border-t border-white/10" />
      </main>
    </div>
  );
}
