import * as React from "react";
import Svg, {
  Image,
  G,
  Rect,
  Path,
  Text,
} from "react-native-svg";
import { type QrTemplateProps, getFontFamily, renderSvgLines } from "./common";

// eslint-disable-next-line @typescript-eslint/no-require-imports
const bgImage = require("../../../assets/templates/5.png");

const QrTemplate5 = ({
  qrBase64,
  fields,
  hideQr,
  ...props
}: QrTemplateProps) => {
  const rName = fields?.restaurantName;
  const sub = fields?.subtitle;
  const table = fields?.tableNo;
  const cta = fields?.ctaText;
  const wifi = fields?.wifiText;
  const social = fields?.socialText;

  const rNameFont = getFontFamily(rName?.fontId, "System, -apple-system, Roboto, sans-serif");
  const subFont = getFontFamily(sub?.fontId, "System, -apple-system, Roboto, sans-serif");
  const ctaFont = getFontFamily(cta?.fontId, "System, -apple-system, Roboto, sans-serif");
  const infoFont = getFontFamily(wifi?.fontId, "System, -apple-system, Roboto, sans-serif");

  return (
    <Svg width={300} height={394.7} viewBox="0 0 380 500" {...props}>
      {/* PNG Arka Plan */}
      <Image
        width={380}
        height={500}
        href={bgImage}
        preserveAspectRatio="none"
      />

      {/* QR Placeholder / Live QR */}
      {!hideQr && (
        <G transform="translate(108 206)">
          <Rect
            width={164}
            height={164}
            fill="#fff"
            stroke="#dce5ea"
            strokeWidth={1.2}
            rx={16}
          />
          <Path
            fill="none"
            stroke="#003554"
            strokeLinecap="round"
            strokeWidth={3}
            d="M6 30V12a6 6 0 0 1 6-6h18m128 24V12a6 6 0 0 0-6-6h-18M6 134v18a6 6 0 0 0 6 6h18m128-24v18a6 6 0 0 1-6 6h-18"
          />
          {qrBase64 ? (
            <Image
              href={`data:image/png;base64,${qrBase64}`}
              x={12}
              y={12}
              width={140}
              height={140}
            />
          ) : (
            <>
              <Rect
                width={140}
                height={140}
                x={12}
                y={12}
                fill="#fafcfd"
                stroke="#003554"
                strokeDasharray="4 3"
                strokeOpacity={0.2}
                rx={10}
              />
              <Text
                x={82}
                y={87}
                fill="#003554"
                fontFamily="System, sans-serif"
                fontSize={11}
                fontWeight={700}
                letterSpacing={1}
                textAnchor="middle"
              >
                {"QR KOD ALANI"}
              </Text>
            </>
          )}
        </G>
      )}

      {/* Metinler */}
      <G fill="#003554" textAnchor="middle">
        {/* Masa Numarası */}
        {table?.visible !== false &&
          renderSvgLines({
            text: table?.text || "MASA NO: 01",
            x: 190,
            y: 40,
            offsetY: table?.offsetY,
            fill: "#003554",
            fontFamily: infoFont,
            fontSize: table?.fontSize || 11,
            fontWeight: "bold",
            letterSpacing: 1.5,
          })}

        {/* Restoran Başlığı */}
        {rName?.visible !== false &&
          renderSvgLines({
            text: rName?.text || "THE URBAN FORK",
            x: 190,
            y: 86,
            offsetY: rName?.offsetY,
            fill: "#003554",
            fontFamily: rNameFont,
            fontSize: rName?.fontSize || 24,
            fontWeight: "bold",
            letterSpacing: 1,
          })}

        {/* Yönlendirme (CTA) */}
        {cta?.visible !== false &&
          renderSvgLines({
            text: cta?.text || "DİJİTAL MENÜYÜ GÖRÜNTÜLE",
            x: 190,
            y: 160,
            offsetY: cta?.offsetY,
            fill: "#003554",
            fontFamily: ctaFont,
            fontSize: cta?.fontSize || 13,
            fontWeight: "bold",
            letterSpacing: 0.5,
          })}

        {/* Slogan (Enter ile çok satır olabilir) */}
        {sub?.visible !== false &&
          renderSvgLines({
            text: sub?.text || "FRESH FLAVORS DAILY",
            x: 190,
            y: 402,
            offsetY: sub?.offsetY,
            fill: "#003554",
            fontFamily: subFont,
            fontSize: sub?.fontSize || 13,
            fontWeight: "bold",
            letterSpacing: 0.8,
          })}

        {/* WiFi */}
        {wifi?.visible !== false &&
          renderSvgLines({
            text: wifi?.text || "WiFi: UrbanFork | Şifre: urban2026",
            x: 190,
            y: 430,
            offsetY: wifi?.offsetY,
            fill: "#003554",
            fontFamily: infoFont,
            fontSize: wifi?.fontSize || 10,
            fontWeight: 700,
            letterSpacing: 0.2,
          })}

        {/* Sosyal Medya */}
        {social?.visible !== false &&
          renderSvgLines({
            text: social?.text || "@theurbanfork",
            x: 190,
            y: 454,
            offsetY: social?.offsetY,
            fill: "#003554",
            fontFamily: infoFont,
            fontSize: social?.fontSize || 10,
            fontWeight: 700,
            letterSpacing: 0.2,
          })}
      </G>
    </Svg>
  );
};

export default QrTemplate5;
