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

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

  return (
    <Svg width={300} height={435} viewBox="0 0 400 580" {...props}>
      <Defs>
        <G id="b6">
          <Path
            fill="none"
            stroke="#c59b58"
            strokeLinecap="round"
            strokeWidth={1.2}
            d="M0 0c10 25 12 55 5 85"
          />
          <Path
            fill="#f4efe6"
            stroke="#c59b58"
            strokeWidth={1.1}
            d="M3 15c-11-5-15 9-1 9 4 0 4-6 1-9Z"
          />
          <Path
            fill="#f4efe6"
            stroke="#9e4d28"
            strokeWidth={1.1}
            d="M5 22c11-6 17 6 3 10-4 0-4-6-3-10Zm2 20c-12-6-17 8-3 10 4 0 4-6 3-10Z"
          />
          <Path
            fill="#f4efe6"
            stroke="#c59b58"
            strokeWidth={1.1}
            d="M8 50c12-6 16 8 2 12-4 0-4-7-2-12ZM6 70c-10-5-14 8-2 10 3 0 4-6 2-10Z"
          />
          <Path
            fill="#f4efe6"
            stroke="#9e4d28"
            strokeWidth={1.1}
            d="M5 78c11-4 15 8 3 12-4 0-4-6-3-12Z"
          />
          <Circle cx={-10} cy={18} r={1.5} fill="#c59b58" />
          <Circle cx={18} cy={46} r={1.5} fill="#9e4d28" />
        </G>
        <G id="a6">
          <Path
            fill="#a64423"
            d="M0-18C4-12 8-6 8 0c6-4 8 6 4 12 4-2 6 4 2 8S2 26 0 26s-10-2-14-6-2-10 2-8c-4-6-2-16 4-12 0-6 4-12 8-18"
          />
          <Path
            fill="#f4efe6"
            d="M-4 4v8c0 3 2 4 4 4v8c2-8 4-9 4-12V4H3v7c0 2-1.5 3-3 3s-3-1-3-3V4Z"
          />
          <Path stroke="#f4efe6" d="M0 4v8" />
        </G>
      </Defs>
      <Path fill="#434b54" d="M0 0h400v580H0z" />
      <Rect
        width={360}
        height={548}
        x={20}
        y={16}
        fill="#f6efe3"
        stroke="#122a42"
        strokeWidth={1.5}
        rx={16}
      />
      <Path
        fill="none"
        stroke="#122a42"
        strokeWidth={1.2}
        d="M46 32h308a12 12 0 0 1 12 12v492a12 12 0 0 1-12 12H46a12 12 0 0 1-12-12V44a12 12 0 0 1 12-12Z"
      />
      <Path
        fill="none"
        stroke="#122a42"
        strokeWidth={1.2}
        d="M34 46a12 12 0 0 0 12-12m320 12a12 12 0 0 1-12-12M34 534a12 12 0 0 1 12 12m320-12a12 12 0 0 0-12 12"
      />
      <Path stroke="#c59b58" d="M34 135h332M34 500h332" />
      <Use href="#a6" transform="matrix(.85 0 0 .85 200 52)" />
      <Use href="#b6" transform="matrix(.8 0 0 .8 42 42)" />
      <Use href="#b6" transform="matrix(-.8 0 0 .8 358 42)" />
      <Use href="#b6" transform="matrix(.95 0 0 .95 40 185)" />
      <Use href="#b6" transform="matrix(-.95 0 0 .95 360 185)" />
      <Use href="#a6" transform="matrix(.65 0 0 .65 68 320)" />
      <Use href="#a6" transform="matrix(.65 0 0 .65 332 320)" />
      <Use href="#b6" transform="matrix(.95 0 0 .95 40 360)" />
      <Use href="#b6" transform="matrix(-.95 0 0 .95 360 360)" />

      {/* QR Placeholder / Gerçek QR */}
      {!hideQr && (
        <G transform="translate(95 205)">
          <Path
            fill="#fdfbf7"
            stroke="#122a42"
            strokeWidth={3}
            d="M0 0h210v210H0z"
          />
          <Path
            fill="none"
            stroke="#c59b58"
            strokeWidth={1.5}
            d="M4 4h202v202H4z"
          />
          {qrBase64 ? (
            <Image
              href={`data:image/png;base64,${qrBase64}`}
              x={10}
              y={10}
              width={190}
              height={190}
            />
          ) : (
            <>
              <Path
                fill="#faf8f5"
                stroke="#122a42"
                strokeDasharray="4 3"
                d="M12 12h186v186H12z"
              />
              <Circle
                cx={105}
                cy={95}
                r={16}
                fill="#f6efe3"
                stroke="#c59b58"
                strokeWidth={1.2}
              />
              <Use href="#a6" transform="matrix(.45 0 0 .45 105 93)" />
              <Text
                x={105}
                y={128}
                fill="#122a42"
                fontFamily="System, sans-serif"
                fontSize={11}
                fontWeight="bold"
                letterSpacing={1.5}
                textAnchor="middle"
              >
                {"QR KOD ALANI"}
              </Text>
            </>
          )}
        </G>
      )}

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

        {/* Restoran Başlığı */}
        {rName?.visible !== false &&
          renderSvgLines({
            text: rName?.text || "THE STONEHEARTH GRILL",
            x: 200,
            y: 84,
            offsetY: rName?.offsetY,
            fill: "#a64423",
            fontFamily: rNameFont,
            fontSize: rName?.fontSize || 19,
            fontWeight: "bold",
            letterSpacing: 1.5,
          })}

        {/* Slogan */}
        {sub?.visible !== false &&
          renderSvgLines({
            text: sub?.text || "SCAN. ORDER. ENJOY.",
            x: 200,
            y: 118,
            offsetY: sub?.offsetY,
            fill: "#122a42",
            fontFamily: subFont,
            fontSize: sub?.fontSize || 10,
            fontWeight: "bold",
            letterSpacing: 2,
          })}

        {/* CTA */}
        {cta?.visible !== false &&
          renderSvgLines({
            text: cta?.text || "VIEW OUR MENU & ORDER ONLINE",
            x: 200,
            y: 160,
            offsetY: cta?.offsetY,
            fill: "#122a42",
            fontFamily: ctaFont,
            fontSize: cta?.fontSize || 13,
            fontWeight: "bold",
            letterSpacing: 0.5,
          })}

        {/* WiFi */}
        {wifi?.visible !== false &&
          renderSvgLines({
            text: wifi?.text || "FREE WIFI: StonehearthGuest | PW: Grill720",
            x: 200,
            y: 524,
            offsetY: wifi?.offsetY,
            fill: "#222",
            fontFamily: infoFont,
            fontSize: wifi?.fontSize || 9,
            fontWeight: "bold",
            letterSpacing: 0.2,
          })}

        {/* Sosyal Medya */}
        {social?.visible !== false &&
          renderSvgLines({
            text: social?.text || "Follow Us @StonehearthGrill",
            x: 200,
            y: 540,
            offsetY: social?.offsetY,
            fill: "#222",
            fontFamily: infoFont,
            fontSize: social?.fontSize || 9,
            fontWeight: "bold",
            letterSpacing: 0.2,
          })}
      </G>
    </Svg>
  );
};

export default QrTemplate6;