import React from "react";
import { Text as SvgText, type SvgProps } from "react-native-svg";
import QrTemplate1 from "./QrTemplateLumiere";
import QrTemplate2 from "./QrTemplate2";
import QrTemplate3 from "./QrTemplate3";
import QrTemplate4 from "./QrTemplate4";
import QrTemplate5 from "./QrTemplate5";
import QrTemplate6 from "./QrTemplate6";
import QrTemplate8 from "./QrTemplate8";
import QrTemplate9 from "./QrTemplate9";

export interface TextItemConfig {
  text: string;
  fontSize?: number;
  fontId?: string;
  offsetY?: number; // Dikey konum kaydırma (yukarı / aşağı)
  visible?: boolean;
}

export interface QrCustomFields {
  restaurantName: TextItemConfig;
  subtitle: TextItemConfig;
  tableNo: TextItemConfig;
  ctaText: TextItemConfig;
  wifiText: TextItemConfig;
  socialText: TextItemConfig;
}

export interface QrTemplateProps extends SvgProps {
  qrBase64?: string;
  fields?: Partial<QrCustomFields>;
}

// Türkçe karakterleri (İ, ı, Ş, ş, Ğ, ğ, Ü, ü, Ö, ö, Ç, ç) eksiksiz destekleyen sistem fontları
export const FONT_OPTIONS = [
  {
    id: "sans",
    label: "Modern Sans",
    fontFamily: "System, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif",
  },
  {
    id: "serif",
    label: "Zarif Serif",
    fontFamily: "Georgia, 'Times New Roman', serif",
  },
  {
    id: "times",
    label: "Klasik (Times)",
    fontFamily: "'Times New Roman', Times, Georgia, serif",
  },
  {
    id: "palatino",
    label: "Lüks Palatino",
    fontFamily: "Palatino, 'Palatino Linotype', Georgia, serif",
  },
  {
    id: "trebuchet",
    label: "Dinamik",
    fontFamily: "'Trebuchet MS', 'Segoe UI', Arial, sans-serif",
  },
];

export function getFontFamily(fontId?: string, defaultFamily = "Georgia, serif"): string {
  if (!fontId) return defaultFamily;
  const found = FONT_OPTIONS.find((f) => f.id === fontId);
  return found ? found.fontFamily : defaultFamily;
}

// Çok satırlı (Enter / \n) ve dikey kaydırmalı (offsetY) SVG metin render fonksiyonu
export function renderSvgLines({
  text,
  x,
  y,
  offsetY = 0,
  lineHeight,
  fill,
  fontFamily,
  fontSize,
  fontWeight = "normal",
  letterSpacing,
  textAnchor = "middle",
}: {
  text?: string;
  x: number;
  y: number;
  offsetY?: number;
  lineHeight?: number;
  fill?: string;
  fontFamily?: string;
  fontSize?: number;
  fontWeight?: string | number;
  letterSpacing?: number;
  textAnchor?: "middle" | "start" | "end";
}) {
  if (!text) return null;
  const lines = text.split("\n");
  const computedLineHeight = lineHeight || (fontSize ? fontSize * 1.25 : 18);
  const startY = y + (offsetY || 0);

  return (
    <>
      {lines.map((line, idx) => (
        <SvgText
          key={idx}
          x={x}
          y={startY + idx * computedLineHeight}
          fill={fill}
          fontFamily={fontFamily}
          fontSize={fontSize}
          fontWeight={fontWeight}
          letterSpacing={letterSpacing}
          textAnchor={textAnchor}
        >
          {line}
        </SvgText>
      ))}
    </>
  );
}

// Yeni component eklemek için buraya import edip COMPONENT_TEMPLATES'e kaydet
export const COMPONENT_TEMPLATES: Record<
  string,
  React.FC<QrTemplateProps>
> = {
  "qr-1": QrTemplate1,
  "qr-2": QrTemplate2,
  "qr-3": QrTemplate3,
  "qr-4": QrTemplate4,
  "qr-5": QrTemplate5,
  "qr-6": QrTemplate6,
  "qr-8": QrTemplate8,
  "qr-9": QrTemplate9,
};

// Her template'in aspect ratio'su (width/height)
export const TEMPLATE_ASPECT_RATIOS: Record<string, number> = {
  "qr-1": 1,            // 600x600 = 1:1
  "qr-2": 400 / 650,     // 400x650 = standart kart
  "qr-3": 400 / 650,     // 400x650 = standart kart
  "qr-4": 400 / 580,     // 400x580 = zarif altın çerçeve
  "qr-5": 380 / 500,     // 380x500 = PNG arka planlı modern kart
  "qr-6": 400 / 580,     // 400x580 = taş & ızgara vintage stant
  "qr-8": 1,            // 1024x1024 = 1:1 Emerald Gold Özel Tasarım
  "qr-9": 1,            // 1024x1024 = 1:1 Vintage Table Menu Özel Tasarım
};