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

const QrTemplate3 = ({
  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, "Georgia, 'Playfair Display', serif");
  const subFont = getFontFamily(sub?.fontId, "System, -apple-system, Roboto, sans-serif");
  const ctaFont = getFontFamily(cta?.fontId, "Georgia, 'Playfair Display', serif");
  const infoFont = getFontFamily(wifi?.fontId, "System, -apple-system, Roboto, sans-serif");

  return (
    <Svg viewBox="0 0 400 650" width={300} height={487.5} {...props}>
      <Defs>
        <LinearGradient id="card-grad-3" x1="0%" x2="0%" y1="0%" y2="100%">
          <Stop offset="0%" stopColor="#fdfbf5" />
          <Stop offset="50%" stopColor="#faf4e6" />
          <Stop offset="100%" stopColor="#f7eed8" />
        </LinearGradient>
        <LinearGradient id="oven-fire-3" x1="0%" x2="0%" y1="100%" y2="0%">
          <Stop offset="0%" stopColor="#c0392b" />
          <Stop offset="50%" stopColor="#e67e22" />
          <Stop offset="100%" stopColor="#f1c40f" />
        </LinearGradient>
        <LinearGradient id="wine-grad-3" x1="0%" x2="0%" y1="0%" y2="100%">
          <Stop offset="0%" stopColor="#7b1123" />
          <Stop offset="100%" stopColor="#4a0512" />
        </LinearGradient>
        <Pattern
          id="checkered-border-3"
          width={20}
          height={20}
          patternUnits="userSpaceOnUse"
        >
          <Path fill="#b92b27" d="M0 0h20v20H0z" />
          <Path fill="#fdf8ee" d="M0 0h10v10H0zm10 10h10v10H10z" />
        </Pattern>
      </Defs>

      {/* Arka Plan */}
      <Path fill="url(#checkered-border-3)" d="M0 0h400v650H0z" />

      {/* Kart */}
      <G id="layer-card">
        <Rect
          width={356}
          height={606}
          x={22}
          y={22}
          fill="url(#card-grad-3)"
          stroke="#b92b27"
          strokeWidth={2}
          rx={20}
        />
        <Rect
          width={344}
          height={594}
          x={28}
          y={28}
          fill="none"
          stroke="#8c6239"
          strokeOpacity={0.5}
          strokeWidth={0.8}
          rx={15}
        />
        {table?.visible !== false && table?.text ? (
          <Rect
            width={140}
            height={24}
            x={130}
            y={34}
            fill="#faf4e6"
            stroke="#8c6239"
            strokeWidth={1.2}
            rx={12}
          />
        ) : null}
      </G>

      {/* İkonlar */}
      <G id="layer-icons">
        <Path
          fill="none"
          stroke="#c5a880"
          strokeLinecap="round"
          strokeWidth={1.5}
          d="M68 88q12-13 28-2 6 5 10 2m226 0q-12-13-28-2-6 5-10 2"
        />
        {/* Pizza Fırını */}
        <G id="pizza-oven" transform="translate(200 192)">
          <Rect
            width={88}
            height={6}
            x={-44}
            fill="#d7ccc8"
            stroke="#5d4037"
            rx={2}
          />
          <Path
            fill="#d7ccc8"
            stroke="#5d4037"
            strokeWidth={1.5}
            d="M-40 0a40 38 0 0 1 80 0Z"
          />
          <Path stroke="#8d6e63" d="m-30-25 7 6m6-15 4 8M0-38v9m17-5-4 8m17 1-7 6" />
          <Path fill="#3e2723" stroke="#271c19" d="M-28 0a28 26 0 0 1 56 0Z" />
          <Path fill="url(#oven-fire-3)" d="M-18 0q3-16 12-10 6-12 12-2 9-6 12 12Z" />
          <Path fill="#fff9c4" d="M-10 0q5-10 10-6 5-6 10 6Z" />
        </G>
        {/* Sol Malzemeler */}
        <G id="left-ingredients" transform="translate(108 185)">
          <Ellipse
            cx={-16}
            cy={6}
            fill="#d32f2f"
            stroke="#8e0000"
            strokeWidth={0.8}
            rx={14}
            ry={10}
            transform="rotate(-25 -16 6)"
          />
          <Ellipse
            cx={-16}
            cy={6}
            fill="#e53935"
            rx={10}
            ry={6.5}
            transform="rotate(-25 -16 6)"
          />
          <Ellipse
            cx={2}
            cy={7}
            fill="#c62828"
            stroke="#8e0000"
            strokeWidth={0.8}
            rx={13}
            ry={9}
            transform="rotate(-10 2 7)"
          />
          <Ellipse cx={2} cy={7} fill="#e53935" rx={9} ry={5.5} transform="rotate(-10 2 7)" />
          <Circle cx={2} cy={7} r={1.5} fill="#fdd835" />
          <Circle cx={16} cy={-2} r={14} fill="#e53935" stroke="#b71c1c" strokeWidth={0.8} />
          <Ellipse cx={12} cy={-6} fill="#ff8a80" opacity={0.6} rx={4} ry={2} />
          <Path
            stroke="#2e7d32"
            strokeLinecap="round"
            strokeWidth={1.5}
            d="M16-16v3m0 0-5 2m5-2 5 2m-5-2-3-2m3 2 3-2"
          />
        </G>
        {/* Sağ Malzemeler */}
        <G id="right-ingredients" transform="translate(290 182)">
          <Circle cx={-14} cy={2} r={15} fill="#e53935" stroke="#b71c1c" strokeWidth={0.8} />
          <Ellipse cx={-18} cy={-3} fill="#ff8a80" opacity={0.6} rx={4} ry={2} />
          <Path
            stroke="#2e7d32"
            strokeLinecap="round"
            strokeWidth={1.5}
            d="M-14-13v3m0 0-4 2m4-2 4 2"
          />
          <Path fill="#2e7d32" stroke="#1b5e20" strokeWidth={0.8} d="M-2 0C8-16 26-12 24 2 22 14 6 10-2 0Z" />
          <Path fill="none" stroke="#4caf50" strokeWidth={0.7} d="M-2 0q14-4 26 2" />
          <Path fill="#388e3c" stroke="#1b5e20" strokeWidth={0.8} d="M8 6c10-6 24 4 18 16-8 6-18-4-18-16Z" />
          <Path fill="none" stroke="#81c784" strokeWidth={0.7} d="M8 6q12 6 18 16" />
        </G>
        {/* Alt Pizza Dilimi */}
        <G id="footer-pizza-slice" transform="rotate(-10 3278.565 44.969)">
          <Path fill="#deac68" stroke="#8d6e63" strokeWidth={1.2} d="m0 0 46-18c4 8 6 32 0 40Z" />
          <Path fill="#fbc02d" d="m2 0 40-15c3 7 5 25 0 33Z" />
          <Circle cx={28} cy={-5} r={5} fill="#c62828" stroke="#8e0000" strokeWidth={0.8} />
          <Circle cx={32} cy={8} r={4.5} fill="#c62828" stroke="#8e0000" strokeWidth={0.8} />
          <Circle cx={16} r={3.5} fill="#c62828" stroke="#8e0000" strokeWidth={0.8} />
          <Ellipse cx={23} cy={4} fill="#2e7d32" rx={2} ry={4} transform="rotate(30 23 4)" />
          <Ellipse cx={34} cy={-11} fill="#2e7d32" rx={2} ry={3} transform="rotate(-40 34 -11)" />
        </G>
        {/* Şarap Kadehi */}
        <G id="footer-wine-glass" transform="translate(345 562)">
          <Path fill="none" stroke="#71717a" strokeWidth={1.2} d="M-14-24C-15-8-11 4 0 6 11 4 15-8 14-24Z" />
          <Path fill="url(#wine-grad-3)" d="M-13-12C-11 0-7 4 0 5.5 7 4 11 0 13-12Z" />
          <Ellipse cy={-12} fill="#991b1b" rx={13} ry={2} />
          <Path stroke="#71717a" strokeWidth={1.4} d="M0 6v22" />
          <Ellipse cy={28} fill="#e4e4e7" stroke="#71717a" strokeWidth={1.2} rx={11} ry={2} />
          <Path fill="none" stroke="#fff" strokeLinecap="round" d="M-10-20c-2 8 1 18 6 23" opacity={0.6} />
        </G>
        {/* QR Köşe Aksanları */}
        <G id="qr-corner-accents">
          <Path fill="none" stroke="#2e7d32" strokeLinecap="round" strokeWidth={3} d="M78 227v-22h22" />
          <Path fill="none" stroke="#b92b27" strokeLinecap="round" strokeWidth={3} d="M322 227v-22h-22M78 423v22h22" />
          <Path fill="none" stroke="#2e7d32" strokeLinecap="round" strokeWidth={3} d="M322 423v22h-22" />
        </G>
      </G>

      {/* QR Placeholder / Gerçek QR */}
      {!hideQr && (
        <G id="qr-placeholder" transform="translate(90 215)">
          <Rect width={220} height={220} fill="#fff" stroke="#e4e4e7" strokeWidth={2} rx={20} />
          {qrBase64 ? (
            <Image
              href={`data:image/png;base64,${qrBase64}`}
              x={10}
              y={10}
              width={200}
              height={200}
            />
          ) : (
            <>
              <Rect
                width={196}
                height={196}
                x={12}
                y={12}
                fill="#fafafa"
                stroke="#e4e4e7"
                strokeDasharray="4 3"
                rx={14}
              />
              <Text
                x={110}
                y={115}
                fill="#71717a"
                fontFamily="System, sans-serif"
                fontSize={12}
                fontWeight={700}
                textAnchor="middle"
              >
                {"QR KOD ALANI"}
              </Text>
            </>
          )}
        </G>
      )}

      {/* Metinler (Çok satırlı destekli) */}
      <G id="layer-texts">
        {/* Masa No */}
        {table?.visible !== false &&
          renderSvgLines({
            text: table?.text || "MASA NO: 01",
            x: 200,
            y: 50,
            offsetY: table?.offsetY,
            fill: "#18181b",
            fontFamily: infoFont,
            fontSize: table?.fontSize || 11,
            fontWeight: "bold",
            letterSpacing: 1.2,
          })}

        <Text
          x={200}
          y={96}
          fill="#3e2723"
          fontFamily={rNameFont}
          fontSize={24}
          textAnchor="middle"
        >
          {"PIZZERIA"}
        </Text>

        {/* Restoran Adı */}
        {rName?.visible !== false &&
          renderSvgLines({
            text: rName?.text || "BELLA NAPOLI",
            x: 200,
            y: 130,
            offsetY: rName?.offsetY,
            fill: "#18181b",
            fontFamily: rNameFont,
            fontSize: rName?.fontSize || 26,
            fontWeight: "bold",
            letterSpacing: 1,
          })}

        {/* Slogan (Enter ile çok satır olabilir) */}
        {sub?.visible !== false &&
          renderSvgLines({
            text: sub?.text || "AUTENTICA CUCINA ITALIANA",
            x: 200,
            y: 222,
            offsetY: sub?.offsetY,
            fill: "#2e7d32",
            fontFamily: subFont,
            fontSize: sub?.fontSize || 11.5,
            fontWeight: "bold",
            letterSpacing: 1.8,
          })}

        {/* CTA */}
        {cta?.visible !== false &&
          renderSvgLines({
            text: cta?.text || "MENÜYÜ GÖRMEK İÇİN OKUTUN",
            x: 200,
            y: 474,
            offsetY: cta?.offsetY,
            fill: "#b92b27",
            fontFamily: ctaFont,
            fontSize: cta?.fontSize || 13,
            fontWeight: "bold",
            letterSpacing: 1.2,
          })}

        {/* WiFi */}
        {wifi?.visible !== false &&
          renderSvgLines({
            text: wifi?.text || "WiFi: GourmetBistro  |  Şifre: lezzetli01",
            x: 200,
            y: 546,
            offsetY: wifi?.offsetY,
            fill: "#3e2723",
            fontFamily: infoFont,
            fontSize: wifi?.fontSize || 10.5,
            fontWeight: "bold",
          })}

        {/* Sosyal Medya */}
        {social?.visible !== false &&
          renderSvgLines({
            text: social?.text || "BİZİ TAKİP EDİN  |  @gourmetbistro",
            x: 200,
            y: 570,
            offsetY: social?.offsetY,
            fill: "#b92b27",
            fontFamily: infoFont,
            fontSize: social?.fontSize || 10.5,
            fontWeight: "bold",
            letterSpacing: 0.5,
          })}

      </G>
    </Svg>
  );
};

export default QrTemplate3;
