'use client';

import React, { useState, useRef, useEffect } from 'react';
import { BadgeTemplate, BadgeLayer } from '@/types/newsletter';
import { supabase } from '@/lib/supabase';
import { DEFAULT_BADGE_TEMPLATES, renderCleanBadgeSvg, svgToCleanPng } from '@/lib/badgeUtils';
import { Tag, Plus, Check, Trash2, X, Upload, Eye, Move, AlignLeft, AlignCenter, AlignRight, ZoomIn, ZoomOut } from 'lucide-react';

// Priblíženie plátna v editore: rozsah posuvníka a kroky tlačidiel +/−
const CANVAS_ZOOM_MIN = 0.5;
const CANVAS_ZOOM_MAX = 4;
const CANVAS_ZOOM_STEPS = [0.5, 0.75, 1, 1.5, 2, 3, 4];

interface BadgeEditorModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSelectBadge: (badge: BadgeTemplate, renderedPngUrl?: string) => void;
  currentDiscount?: string;
  currentPriceMain?: string;
  currentPriceSub?: string;
  currentUnitPrice?: string;
}

export const BadgeEditorModal: React.FC<BadgeEditorModalProps> = ({
  isOpen,
  onClose,
  onSelectBadge,
  currentDiscount = '25%',
  currentPriceMain = '1',
  currentPriceSub = '99',
  currentUnitPrice = '1kg = 4,91 €'
}) => {
  const POPULAR_FONTS = [
    { name: 'Poppins', source: 'google' as const },
    { name: 'Montserrat', source: 'google' as const },
    { name: 'Oswald', source: 'google' as const },
    { name: 'Bebas Neue', source: 'google' as const },
    { name: 'Anton', source: 'google' as const },
    { name: 'Roboto Condensed', source: 'google' as const },
    { name: 'Barlow Semi Condensed', source: 'google' as const },
    { name: 'Inter', source: 'google' as const },
    { name: 'Open Sans', source: 'google' as const },
    { name: 'Arial Narrow', source: 'system' as const },
    { name: 'Impact', source: 'system' as const }
  ];

  const loadFontDynamically = (fontFamily: string, source: 'system' | 'google' | 'adobe' = 'google', url?: string) => {
    if (typeof document === 'undefined') return;

    if (source === 'adobe' && url) {
      const existing = document.querySelector(`link[data-adobe-font="${url}"]`);
      if (!existing) {
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = url;
        link.setAttribute('data-adobe-font', url);
        document.head.appendChild(link);
      }
    } else if (source === 'google' && fontFamily) {
      const clean = fontFamily.trim().replace(/\s+/g, '+');
      const href = `https://fonts.googleapis.com/css2?family=${clean}:wght@400;600;700;800;900&display=swap`;
      const existing = document.querySelector(`link[data-google-font="${clean}"]`);
      if (!existing) {
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = href;
        link.setAttribute('data-google-font', clean);
        document.head.appendChild(link);
      }
    }
  };

  const [badges, setBadges] = useState<BadgeTemplate[]>([]);
  const [activeBadge, setActiveBadge] = useState<BadgeTemplate | null>(null);
  const [selectedLayerId, setSelectedLayerId] = useState<string | null>(null);
  const [isExportingPng, setIsExportingPng] = useState(false);
  const [isSavingDb, setIsSavingDb] = useState(false);

  // Priblíženie plátna (len pre editor, neovplyvňuje výslednú cenovku)
  const [canvasZoom, setCanvasZoom] = useState(1);
  const canvasAreaRef = useRef<HTMLDivElement>(null);
  const hasActiveBadge = !!activeBadge;

  const zoomIn = () =>
    setCanvasZoom((z) => CANVAS_ZOOM_STEPS.find((s) => s > z) ?? z);
  const zoomOut = () =>
    setCanvasZoom((z) => [...CANVAS_ZOOM_STEPS].reverse().find((s) => s < z) ?? z);

  // Ctrl/Cmd + koliesko myši na plátne = priblíženie / oddialenie
  useEffect(() => {
    const el = canvasAreaRef.current;
    if (!el) return;
    const handleWheel = (e: WheelEvent) => {
      if (!e.ctrlKey && !e.metaKey) return;
      e.preventDefault();
      setCanvasZoom((z) =>
        e.deltaY < 0
          ? CANVAS_ZOOM_STEPS.find((s) => s > z) ?? z
          : [...CANVAS_ZOOM_STEPS].reverse().find((s) => s < z) ?? z
      );
    };
    el.addEventListener('wheel', handleWheel, { passive: false });
    return () => el.removeEventListener('wheel', handleWheel);
  }, [isOpen, hasActiveBadge]);

  // Stav pre priamy Drag & Drop vrstiev na plátne
  const [dragState, setDragState] = useState<{
    layerId: string;
    startX: number;
    startY: number;
    layerStartX: number;
    layerStartY: number;
  } | null>(null);

  const handleLayerMouseDown = (e: React.MouseEvent, layer: BadgeLayer) => {
    e.stopPropagation();
    e.preventDefault();
    setSelectedLayerId(layer.id);
    setDragState({
      layerId: layer.id,
      startX: e.clientX,
      startY: e.clientY,
      layerStartX: layer.x,
      layerStartY: layer.y
    });
  };

  const handleLayerTouchStart = (e: React.TouchEvent, layer: BadgeLayer) => {
    e.stopPropagation();
    const touch = e.touches[0];
    if (!touch) return;
    setSelectedLayerId(layer.id);
    setDragState({
      layerId: layer.id,
      startX: touch.clientX,
      startY: touch.clientY,
      layerStartX: layer.x,
      layerStartY: layer.y
    });
  };

  useEffect(() => {
    if (!dragState) return;

    const handleMouseMove = (e: MouseEvent) => {
      const deltaX = (e.clientX - dragState.startX) / canvasZoom;
      const deltaY = (e.clientY - dragState.startY) / canvasZoom;
      const newX = Math.round(dragState.layerStartX + deltaX);
      const newY = Math.round(dragState.layerStartY + deltaY);

      setActiveBadge((prev) => {
        if (!prev) return prev;
        return {
          ...prev,
          layersConfig: prev.layersConfig.map((l) =>
            l.id === dragState.layerId ? { ...l, x: newX, y: newY } : l
          )
        };
      });
    };

    const handleTouchMove = (e: TouchEvent) => {
      const touch = e.touches[0];
      if (!touch) return;
      const deltaX = (touch.clientX - dragState.startX) / canvasZoom;
      const deltaY = (touch.clientY - dragState.startY) / canvasZoom;
      const newX = Math.round(dragState.layerStartX + deltaX);
      const newY = Math.round(dragState.layerStartY + deltaY);

      setActiveBadge((prev) => {
        if (!prev) return prev;
        return {
          ...prev,
          layersConfig: prev.layersConfig.map((l) =>
            l.id === dragState.layerId ? { ...l, x: newX, y: newY } : l
          )
        };
      });
    };

    const handleDragEnd = () => {
      setDragState(null);
    };

    window.addEventListener('mousemove', handleMouseMove);
    window.addEventListener('mouseup', handleDragEnd);
    window.addEventListener('touchmove', handleTouchMove);
    window.addEventListener('touchend', handleDragEnd);

    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
      window.removeEventListener('mouseup', handleDragEnd);
      window.removeEventListener('touchmove', handleTouchMove);
      window.removeEventListener('touchend', handleDragEnd);
    };
  }, [dragState, canvasZoom]);

  // Načítanie písiem pre všetky vrstvy aktívnej cenovky
  useEffect(() => {
    if (activeBadge?.layersConfig) {
      activeBadge.layersConfig.forEach((l) => {
        if (l.fontFamily) {
          loadFontDynamically(l.fontFamily, l.fontSource || 'google', l.fontUrl);
        }
      });
    }
  }, [activeBadge]);

  // Načítanie existujúcich šablón zo Supabase + LocalStorage + Default Presets
  useEffect(() => {
    if (isOpen) {
      loadBadgesFromSupabase();
    }
  }, [isOpen]);

  const loadBadgesFromSupabase = async () => {
    let loaded: BadgeTemplate[] = [];

    try {
      const { data, error } = await supabase
        .from('badges')
        .select('*')
        .order('created_at', { ascending: false });

      if (data && !error && data.length > 0) {
        loaded = data.map((d: any) => {
          const isObj = d.layers_config && !Array.isArray(d.layers_config);
          return {
            id: d.id,
            name: d.name,
            svgRaw: d.svg_raw || '',
            layersConfig: isObj ? (d.layers_config.layers || []) : (d.layers_config || []),
            width: isObj ? (d.layers_config.width || 110) : 110,
            align: isObj ? (d.layers_config.align || 'center') : 'center',
            paddingTop: isObj ? (d.layers_config.paddingTop ?? 4) : 4,
            paddingBottom: isObj ? (d.layers_config.paddingBottom ?? 4) : 4
          };
        });
      }
    } catch (err) {
      console.warn('Error loading badges from Supabase, checking local storage:', err);
    }

    // Doplnenie z localStorage
    try {
      const localStr = localStorage.getItem('coop_custom_badges');
      if (localStr) {
        const localBadges = JSON.parse(localStr);
        if (Array.isArray(localBadges)) {
          const existingIds = new Set(loaded.map((b) => b.id));
          for (const b of localBadges) {
            if (!existingIds.has(b.id)) {
              loaded.push(b);
              existingIds.add(b.id);
            }
          }
        }
      }
    } catch (e) {}

    setBadges(loaded);
    if (!activeBadge && loaded.length > 0) {
      setActiveBadge(loaded[0]);
      if (loaded[0].layersConfig?.[0]) {
        setSelectedLayerId(loaded[0].layersConfig[0].id);
      }
    }
  };

  if (!isOpen) return null;

  // Vytvorenie novej šablóny
  const handleCreateNewTemplate = () => {
    const newBadge: BadgeTemplate = {
      id: `badge-${Date.now()}`,
      name: 'Nová vlastná cenovka',
      svgRaw: `<svg width="140" height="95" viewBox="0 0 140 95" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="140" height="95" rx="14" fill="#ffd100"/>
      </svg>`,
      width: 110,
      align: 'center',
      paddingTop: 4,
      paddingBottom: 4,
      layersConfig: [
        {
          id: `l-${Date.now()}-1`,
          type: 'text',
          text: 'AKCIA',
          x: 70,
          y: 24,
          fontSize: 16,
          fontWeight: '900',
          fill: '#e2001a',
          align: 'center'
        },
        {
          id: `l-${Date.now()}-2`,
          type: 'text',
          text: '{cena}',
          x: 70,
          y: 62,
          fontSize: 42,
          fontWeight: '900',
          fill: '#001a33',
          align: 'center'
        }
      ]
    };

    setBadges([newBadge, ...badges]);
    setActiveBadge(newBadge);
    setSelectedLayerId(newBadge.layersConfig[0].id);
  };

  // Upload vlastného SVG alebo PNG súboru ako podkladu
  const handleBackgroundUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file || !activeBadge) return;

    if (file.type.includes('svg') || file.name.toLowerCase().endsWith('.svg')) {
      const reader = new FileReader();
      reader.onload = (event) => {
        const content = event.target?.result as string;
        if (content.includes('<svg')) {
          setActiveBadge({
            ...activeBadge,
            svgRaw: content
          });
        } else {
          alert('Nahraný súbor nie je platný formát SVG.');
        }
      };
      reader.readAsText(file);
    } else if (
      file.type.includes('png') ||
      file.type.includes('image/') ||
      file.name.toLowerCase().endsWith('.png') ||
      file.name.toLowerCase().endsWith('.jpg') ||
      file.name.toLowerCase().endsWith('.jpeg') ||
      file.name.toLowerCase().endsWith('.webp')
    ) {
      const reader = new FileReader();
      reader.onload = (event) => {
        const dataUrl = event.target?.result as string;
        const img = new Image();
        img.onload = () => {
          const w = img.naturalWidth || 140;
          const h = img.naturalHeight || 95;
          const svgContent = `<svg width="${w}" height="${h}" viewBox="0 0 ${w} ${h}" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image href="${dataUrl}" xlink:href="${dataUrl}" width="${w}" height="${h}" preserveAspectRatio="xMidYMid meet"/></svg>`;
          setActiveBadge({
            ...activeBadge,
            svgRaw: svgContent
          });
        };
        img.src = dataUrl;
      };
      reader.readAsDataURL(file);
    } else {
      alert('Podporované sú len grafické súbory vo formáte SVG alebo PNG.');
    }
  };

  const activeLayer =
    activeBadge?.layersConfig?.find((l) => l.id === selectedLayerId) ||
    activeBadge?.layersConfig?.[0] ||
    null;

  const updateActiveLayer = (updates: Partial<BadgeLayer>) => {
    if (!activeBadge || !activeLayer) return;
    const updatedLayers = activeBadge.layersConfig.map((l) =>
      l.id === activeLayer.id ? { ...l, ...updates } : l
    );
    setActiveBadge({ ...activeBadge, layersConfig: updatedLayers });
  };

  const addTextLayer = (presetText: string = 'Text') => {
    if (!activeBadge) return;
    const newL: BadgeLayer = {
      id: `l-${Date.now()}`,
      type: 'text',
      text: presetText,
      x: 70,
      y: 50,
      fontSize: 16,
      fontWeight: '800',
      fill: '#ffffff',
      align: 'center'
    };
    setActiveBadge({
      ...activeBadge,
      layersConfig: [...activeBadge.layersConfig, newL]
    });
    setSelectedLayerId(newL.id);
  };

  const removeLayer = (id: string) => {
    if (!activeBadge || activeBadge.layersConfig.length <= 1) return;
    setActiveBadge({
      ...activeBadge,
      layersConfig: activeBadge.layersConfig.filter((l) => l.id !== id)
    });
  };

  const deleteBadgeTemplate = async (badgeId: string) => {
    if (confirm('Naozaj chcete zmazať túto šablónu cenovky?')) {
      // Predvolené šablóny existujú len v prehliadači (localStorage), v databáze nie sú
      if (!badgeId.startsWith('badge-preset-')) {
        try {
          await supabase.from('badges').delete().eq('id', badgeId);
        } catch (e) {}
      }
      const remaining = badges.filter((b) => b.id !== badgeId);
      setBadges(remaining);
      setActiveBadge(remaining[0] || null);
      try {
        localStorage.setItem('coop_custom_badges', JSON.stringify(remaining));
      } catch (e) {}
    }
  };

  // Uloženie šablóny do Supabase + LocalStorage (garantované uchovanie)
  const handleSaveToSupabase = async () => {
    if (!activeBadge) return;
    setIsSavingDb(true);
    try {
      const payload: any = {
        name: activeBadge.name,
        svg_raw: activeBadge.svgRaw,
        layers_config: {
          layers: activeBadge.layersConfig,
          width: activeBadge.width || 110,
          align: activeBadge.align || 'center',
          paddingTop: activeBadge.paddingTop ?? 4,
          paddingBottom: activeBadge.paddingBottom ?? 4
        }
      };

      let savedBadge: BadgeTemplate | null = null;
      const isExistingUuid = activeBadge.id && !activeBadge.id.startsWith('badge-');

      if (isExistingUuid) {
        const { data, error } = await supabase
          .from('badges')
          .update(payload)
          .eq('id', activeBadge.id)
          .select();
        if (error) throw error;
        if (data && data[0]) {
          savedBadge = {
            id: data[0].id,
            name: data[0].name,
            svgRaw: data[0].svg_raw,
            layersConfig: activeBadge.layersConfig,
            width: activeBadge.width,
            align: activeBadge.align,
            paddingTop: activeBadge.paddingTop,
            paddingBottom: activeBadge.paddingBottom
          };
        }
      } else {
        const { data, error } = await supabase
          .from('badges')
          .insert([payload])
          .select();
        if (error) throw error;
        if (data && data[0]) {
          savedBadge = {
            id: data[0].id,
            name: data[0].name,
            svgRaw: data[0].svg_raw,
            layersConfig: activeBadge.layersConfig,
            width: activeBadge.width,
            align: activeBadge.align,
            paddingTop: activeBadge.paddingTop,
            paddingBottom: activeBadge.paddingBottom
          };
        }
      }

      const targetToSave = savedBadge || activeBadge;
      const updatedList = badges.map((b) => (b.id === activeBadge.id ? targetToSave : b));
      if (!updatedList.some((b) => b.id === targetToSave.id)) {
        updatedList.unshift(targetToSave);
      }
      setBadges(updatedList);
      setActiveBadge(targetToSave);
      try {
        localStorage.setItem('coop_custom_badges', JSON.stringify(updatedList));
      } catch (e) {}

      alert('Šablóna cenovky bola úspešne uložená a je pripravená na opätovné použitie pre všetky produkty!');
    } catch (err: any) {
      console.warn('Supabase save error, persisting to local cache:', err);
      try {
        const updatedList = badges.map((b) => (b.id === activeBadge.id ? activeBadge : b));
        localStorage.setItem('coop_custom_badges', JSON.stringify(updatedList));
        alert('Šablóna bola úspešne uložená v prehliadači.');
      } catch (e) {
        alert(`Chyba pri ukladaní: ${err.message}`);
      }
    } finally {
      setIsSavingDb(false);
    }
  };

  // Vykreslenie vrstvy v React náhľade s centami ako horný index (sup) a BEZ znaku €
  const renderLayerVisualContent = (layer: BadgeLayer) => {
    const raw = layer.text || '';
    const baseFontSize = layer.fontSize || 16;
    const subFontSize = layer.indexFontSize ? `${layer.indexFontSize}px` : `${Math.max(10, Math.round(baseFontSize * 0.55))}px`;
    const subY = layer.indexOffsetY !== undefined ? `${layer.indexOffsetY}px` : '-10px';
    const subX = layer.indexOffsetX !== undefined ? `${layer.indexOffsetX}px` : '2px';

    if (raw.includes('{cena}')) {
      const parts = raw.split('{cena}');
      return (
        <span>
          {parts[0]}
          <span>{currentPriceMain}</span>
          <span
            style={{
              display: 'inline-block',
              fontSize: subFontSize,
              transform: `translate(${subX}, ${subY})`,
              fontWeight: layer.fontWeight || '700',
              lineHeight: 1
            }}
          >
            {currentPriceSub}
          </span>
          {parts[1]}
        </span>
      );
    }

    if (raw.includes('{centy}')) {
      const parts = raw.split('{centy}');
      return (
        <span>
          {parts[0]}
          <span
            style={{
              display: 'inline-block',
              fontSize: subFontSize,
              transform: `translate(${subX}, ${subY})`,
              fontWeight: layer.fontWeight || '700',
              lineHeight: 1
            }}
          >
            {currentPriceSub}
          </span>
          {parts[1]}
        </span>
      );
    }

    const replaced = raw
      .replace(/{cela_suma}/g, currentPriceMain)
      .replace(/{zlava}/g, currentDiscount.replace('-', ''))
      .replace(/{jednotkova_cena}/g, currentUnitPrice)
      .replace(/{mena}/g, '€');

    return replaced;
  };

  // Aplikovanie cenovky na produkt: čisté vektorové SVG a čistý PNG (BEZ akéhokoľvek screenshotu nástrojov/rámčekov)
  const handleApplyBadge = async () => {
    if (!activeBadge) return;
    setIsExportingPng(true);
    try {
      const cleanSvg = renderCleanBadgeSvg(
        activeBadge,
        {
          priceMain: currentPriceMain,
          priceSub: currentPriceSub,
          discountText: currentDiscount,
          unitPrice: currentUnitPrice
        },
        activeBadge.width || 110
      );

      const cleanPng = await svgToCleanPng(cleanSvg, 140, 95);
      onSelectBadge(activeBadge, cleanPng);
      onClose();
    } catch (err) {
      console.error('Apply badge error:', err);
      onSelectBadge(activeBadge);
      onClose();
    } finally {
      setIsExportingPng(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-md flex items-center justify-center p-4">
      <div className="bg-white rounded-3xl shadow-2xl max-w-6xl w-full max-h-[94vh] overflow-hidden flex flex-col border border-gray-100">
        {/* Header */}
        <div className="px-6 py-4 border-b border-gray-100 flex items-center justify-between bg-slate-50">
          <div className="flex items-center gap-3">
            <div className="w-9 h-9 rounded-xl bg-[#e2001a] flex items-center justify-center text-white shadow-sm">
              <Tag className="w-5 h-5" />
            </div>
            <div>
              <h2 className="text-base font-bold text-gray-900">
                Editor grafických cenoviek (Opakovane použiteľné šablóny)
              </h2>
              <p className="text-xs text-gray-500">
                Nastavte rozmery, zarovnanie a rozmiestnenie vrstiev. Cena a centy sú dynamické a nezamŕzajú v rastri.
              </p>
            </div>
          </div>
          <button onClick={onClose} className="p-2 text-gray-400 hover:text-gray-700 rounded-xl hover:bg-gray-200/50">
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Content Body */}
        <div className="flex-1 overflow-hidden grid grid-cols-12 divide-x divide-gray-100">
          {/* 1. Stĺpec: Šablóny a Vytvorenie novej */}
          <div className="col-span-3 p-4 overflow-y-auto space-y-3 bg-gray-50/50">
            <div className="flex items-center justify-between px-1">
              <span className="text-[11px] font-bold uppercase tracking-wider text-gray-400">
                Šablóny ({badges.length})
              </span>
              <button
                onClick={handleCreateNewTemplate}
                className="text-xs font-bold text-[#e2001a] hover:text-red-700 flex items-center gap-1 bg-red-50 hover:bg-red-100 px-2 py-1 rounded-lg transition-colors"
              >
                <Plus className="w-3.5 h-3.5" /> Nová
              </button>
            </div>

            <div className="space-y-2">
              {badges.map((b) => (
                <div
                  key={b.id}
                  onClick={() => {
                    setActiveBadge(b);
                    if (b.layersConfig?.[0]) setSelectedLayerId(b.layersConfig[0].id);
                  }}
                  className={`w-full text-left p-3 rounded-2xl border transition-all cursor-pointer relative group ${
                    activeBadge?.id === b.id
                      ? 'bg-white border-[#e2001a] shadow-md ring-2 ring-red-500/10'
                      : 'bg-white/80 border-gray-200 hover:border-gray-300'
                  }`}
                >
                  <div className="flex items-center justify-between mb-1">
                    <p className="text-xs font-bold text-gray-800 truncate">{b.name}</p>
                    {/* Zmazať sa dá každá šablóna, aj staršie predvolené (badge-preset-*) uložené v prehliadači */}
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        deleteBadgeTemplate(b.id);
                      }}
                      className="text-gray-300 hover:text-red-600 p-1 rounded transition-colors opacity-0 group-hover:opacity-100"
                      title="Zmazať šablónu"
                    >
                      <Trash2 className="w-3.5 h-3.5" />
                    </button>
                  </div>
                  <div
                    className="w-full h-12 flex items-center justify-center transform scale-75 origin-center overflow-hidden pointer-events-none"
                    dangerouslySetInnerHTML={{
                      __html: renderCleanBadgeSvg(
                        b,
                        {
                          priceMain: currentPriceMain,
                          priceSub: currentPriceSub,
                          discountText: currentDiscount,
                          unitPrice: currentUnitPrice
                        },
                        90
                      )
                    }}
                  />
                </div>
              ))}
            </div>
          </div>

          {/* 2. Stĺpec: Vektorový Canvas & Náhľad s Drag & Drop */}
          <div className="col-span-5 min-h-0 flex flex-col bg-slate-950">
            {/* Lišta plátna: názov + ovládanie priblíženia */}
            <div className="shrink-0 flex items-center justify-between gap-2 px-4 pt-4 pb-2">
              <div className="flex items-center gap-2">
                <span className="text-xs font-semibold text-slate-400 flex items-center gap-1.5">
                  <Eye className="w-3.5 h-3.5" /> Náhľad na plátne
                </span>
                <span className="text-[10px] text-blue-400 bg-blue-950/60 border border-blue-800/60 px-2.5 py-0.5 rounded-full flex items-center gap-1">
                  <Move className="w-3 h-3" /> Drag & Drop
                </span>
              </div>

              {activeBadge && (
                <div className="flex items-center gap-1 bg-slate-900/90 border border-slate-700 rounded-full px-1.5 py-1 text-slate-300">
                  <button
                    type="button"
                    onClick={zoomOut}
                    disabled={canvasZoom <= CANVAS_ZOOM_MIN}
                    className="p-1 rounded-full hover:bg-slate-700 hover:text-white disabled:opacity-30 disabled:hover:bg-transparent"
                    title="Oddialiť (Ctrl + koliesko)"
                  >
                    <ZoomOut className="w-3.5 h-3.5" />
                  </button>
                  <input
                    type="range"
                    min={CANVAS_ZOOM_MIN}
                    max={CANVAS_ZOOM_MAX}
                    step={0.05}
                    value={canvasZoom}
                    onChange={(e) => setCanvasZoom(Number(e.target.value))}
                    className="w-24 h-1 accent-blue-400 cursor-pointer"
                    title="Priblíženie plátna"
                  />
                  <button
                    type="button"
                    onClick={zoomIn}
                    disabled={canvasZoom >= CANVAS_ZOOM_MAX}
                    className="p-1 rounded-full hover:bg-slate-700 hover:text-white disabled:opacity-30 disabled:hover:bg-transparent"
                    title="Priblížiť (Ctrl + koliesko)"
                  >
                    <ZoomIn className="w-3.5 h-3.5" />
                  </button>
                  <button
                    type="button"
                    onClick={() => setCanvasZoom(1)}
                    className="min-w-[44px] text-[10px] font-mono font-bold hover:text-white"
                    title="Obnoviť na 100 %"
                  >
                    {Math.round(canvasZoom * 100)} %
                  </button>
                </div>
              )}
            </div>

            {activeBadge ? (
              <>
                {/* Priblížiteľná a posúvateľná oblasť plátna (vyplní zvyšnú výšku stĺpca) */}
                <div ref={canvasAreaRef} className="flex-1 min-h-0 overflow-auto flex">
                  {/* Rezerva okolo cenovky, aby vrstvy a popisky presahujúce podklad neboli orezané */}
                  <div className="m-auto shrink-0 p-10">
                    {/* Obal simulujúci veľkosť, zarovnanie a odsadenie */}
                    <div
                      className="flex"
                      style={{
                        zoom: canvasZoom,
                        // Obal má na obrazovke stále ~320 px (simulácia zarovnania), pri veľkom priblížení sa rozšíri na celú cenovku
                        width: `${Math.max(activeBadge.width || 110, 320 / canvasZoom)}px`,
                        justifyContent:
                          activeBadge.align === 'left'
                            ? 'flex-start'
                            : activeBadge.align === 'right'
                            ? 'flex-end'
                            : 'center',
                        paddingTop: `${activeBadge.paddingTop || 0}px`,
                        paddingBottom: `${activeBadge.paddingBottom || 0}px`
                      }}
                    >
                      <div
                        className="relative select-none"
                        style={{
                          width: `${activeBadge.width || 110}px`
                        }}
                      >
                        {/* SVG Podklad */}
                        <div
                          className="block pointer-events-none w-full"
                          dangerouslySetInnerHTML={{ __html: activeBadge.svgRaw || '' }}
                        />

                        {/* Dynamické textové vrstvy nad SVG podkladom (Drag & Drop) */}
                        {activeBadge.layersConfig.map((layer) => {
                          const isSelected = layer.id === selectedLayerId;
                          const isDraggingThis = dragState?.layerId === layer.id;
                          return (
                            <div
                              key={layer.id}
                              onMouseDown={(e) => handleLayerMouseDown(e, layer)}
                              onTouchStart={(e) => handleLayerTouchStart(e, layer)}
                              onClick={(e) => {
                                e.stopPropagation();
                                setSelectedLayerId(layer.id);
                              }}
                              style={{
                                position: 'absolute',
                                left: `${layer.x}px`,
                                top: `${layer.y}px`,
                                transform: 'translate(-50%, -50%)',
                                fontSize: `${layer.fontSize}px`,
                                fontWeight: (layer.fontWeight || '700') as any,
                                color: layer.fill,
                                fontFamily: layer.fontFamily
                                  ? `'${layer.fontFamily}', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`
                                  : 'Poppins, Arial, sans-serif',
                                whiteSpace: 'nowrap',
                                cursor: isDraggingThis ? 'grabbing' : 'grab',
                                userSelect: 'none'
                              }}
                              className={`px-1.5 py-0.5 rounded transition-all select-none ${
                                isSelected
                                  ? 'ring-2 ring-blue-400 ring-offset-2 ring-offset-slate-900 bg-blue-500/20 shadow-lg'
                                  : 'hover:outline hover:outline-1 hover:outline-white/60 hover:bg-white/10'
                              }`}
                              title="Ťahajte myšou pre zmenu pozície"
                            >
                              {renderLayerVisualContent(layer)}

                              {isSelected && (
                                <span className="absolute -top-5 left-1/2 -translate-x-1/2 text-[9px] font-mono font-bold bg-slate-900 text-blue-300 px-1.5 py-0.5 rounded shadow border border-slate-700 pointer-events-none whitespace-nowrap flex items-center gap-1 z-20">
                                  <Move className="w-2.5 h-2.5" /> {layer.x}px, {layer.y}px
                                </span>
                              )}
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  </div>
                </div>

                <div className="shrink-0 flex justify-center px-4 pb-4 pt-2">
                  {/* Info o premenných a centoch */}
                  <div className="bg-slate-900/80 border border-slate-800 rounded-xl p-3 text-[11px] text-slate-300 space-y-1.5 max-w-sm">
                    <span className="font-bold text-gray-400 block mb-0.5">Dostupné dynamické značky:</span>
                    <div className="flex flex-wrap gap-1.5 text-[10px]">
                      <span className="bg-slate-800 px-2 py-0.5 rounded font-mono text-amber-300">
                        {'{cena}'} &rarr; {currentPriceMain}
                        <sup>{currentPriceSub}</sup> (bez €)
                      </span>
                      <span className="bg-slate-800 px-2 py-0.5 rounded font-mono text-emerald-300">
                        {'{zlava}'} &rarr; {currentDiscount.replace('-', '')}
                      </span>
                      <span className="bg-slate-800 px-2 py-0.5 rounded font-mono text-blue-300">
                        {'{mena}'} &rarr; €
                      </span>
                    </div>
                  </div>
                </div>
              </>
            ) : (
              <p className="m-auto text-sm text-slate-500">Vyberte alebo vytvorte novú šablónu cenovky.</p>
            )}
          </div>

          {/* 3. Stĺpec: Konfigurácia rozmerov, zarovnania a vrstiev */}
          <div className="col-span-4 p-5 overflow-y-auto space-y-5 bg-white">
            {activeBadge ? (
              <>
                {/* Názov šablóny */}
                <div>
                  <label className="block text-xs font-semibold text-gray-700 mb-1">Názov šablóny</label>
                  <input
                    type="text"
                    value={activeBadge.name}
                    onChange={(e) => setActiveBadge({ ...activeBadge, name: e.target.value })}
                    className="w-full text-xs font-bold border border-gray-300 rounded-xl p-2.5"
                  />
                </div>

                {/* Sekcia: Rozmery, zarovnanie a odsadenie cenovky */}
                <div className="bg-gray-50 p-3.5 rounded-2xl border border-gray-200 space-y-3">
                  <span className="text-xs font-bold text-gray-800 uppercase tracking-wider block">
                    Rozmery a Zarovnanie cenovky
                  </span>

                  {/* Šírka cenovky */}
                  <div>
                    <div className="flex justify-between items-center mb-1">
                      <label className="text-[11px] font-semibold text-gray-700">Šírka cenovky</label>
                      <span className="text-[11px] font-bold text-gray-900 bg-white px-2 py-0.5 rounded border border-gray-200">
                        {activeBadge.width || 110} px
                      </span>
                    </div>
                    <input
                      type="range"
                      min="70"
                      max="180"
                      step="2"
                      value={activeBadge.width || 110}
                      onChange={(e) => setActiveBadge({ ...activeBadge, width: Number(e.target.value) })}
                      className="w-full accent-[#e2001a]"
                    />
                  </div>

                  {/* Zarovnanie na karte produktu */}
                  <div>
                    <label className="block text-[11px] font-semibold text-gray-700 mb-1">
                      Zarovnanie cenovky na produkte
                    </label>
                    <div className="grid grid-cols-3 gap-1 bg-gray-200 p-0.5 rounded-lg text-xs font-bold">
                      <button
                        type="button"
                        onClick={() => setActiveBadge({ ...activeBadge, align: 'left' })}
                        className={`py-1.5 flex items-center justify-center gap-1 rounded transition-all ${
                          (activeBadge.align || 'center') === 'left'
                            ? 'bg-white text-gray-900 shadow-sm'
                            : 'text-gray-600 hover:text-gray-900'
                        }`}
                      >
                        <AlignLeft className="w-3.5 h-3.5" /> Vľavo
                      </button>
                      <button
                        type="button"
                        onClick={() => setActiveBadge({ ...activeBadge, align: 'center' })}
                        className={`py-1.5 flex items-center justify-center gap-1 rounded transition-all ${
                          (activeBadge.align || 'center') === 'center'
                            ? 'bg-white text-gray-900 shadow-sm'
                            : 'text-gray-600 hover:text-gray-900'
                        }`}
                      >
                        <AlignCenter className="w-3.5 h-3.5" /> Na stred
                      </button>
                      <button
                        type="button"
                        onClick={() => setActiveBadge({ ...activeBadge, align: 'right' })}
                        className={`py-1.5 flex items-center justify-center gap-1 rounded transition-all ${
                          (activeBadge.align || 'center') === 'right'
                            ? 'bg-white text-gray-900 shadow-sm'
                            : 'text-gray-600 hover:text-gray-900'
                        }`}
                      >
                        <AlignRight className="w-3.5 h-3.5" /> Vpravo
                      </button>
                    </div>
                  </div>

                  {/* Odsadenie (Padding) */}
                  <div className="grid grid-cols-2 gap-2 pt-1">
                    <div>
                      <label className="block text-[10px] text-gray-600 mb-0.5">Odsadenie zhora (px)</label>
                      <input
                        type="number"
                        min="0"
                        max="40"
                        value={activeBadge.paddingTop ?? 4}
                        onChange={(e) => setActiveBadge({ ...activeBadge, paddingTop: Number(e.target.value) })}
                        className="w-full text-xs border border-gray-300 rounded-lg p-1.5 bg-white font-medium"
                      />
                    </div>
                    <div>
                      <label className="block text-[10px] text-gray-600 mb-0.5">Odsadenie zdola (px)</label>
                      <input
                        type="number"
                        min="0"
                        max="40"
                        value={activeBadge.paddingBottom ?? 4}
                        onChange={(e) => setActiveBadge({ ...activeBadge, paddingBottom: Number(e.target.value) })}
                        className="w-full text-xs border border-gray-300 rounded-lg p-1.5 bg-white font-medium"
                      />
                    </div>
                  </div>
                </div>

                {/* Upload vlastného SVG alebo PNG podkladu */}
                <div className="border border-dashed border-gray-300 rounded-2xl p-3 bg-gray-50/60">
                  <label className="block text-xs font-bold text-gray-800 mb-1 flex items-center gap-1.5">
                    <Upload className="w-3.5 h-3.5 text-[#e2001a]" />
                    Nahrať vlastný podklad cenovky (SVG alebo PNG)
                  </label>
                  <input
                    type="file"
                    accept=".svg,.png,.jpg,.jpeg,.webp,image/svg+xml,image/png,image/jpeg,image/webp"
                    onChange={handleBackgroundUpload}
                    className="text-xs text-gray-500 file:mr-2 file:py-1 file:px-2.5 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-gray-200 file:text-gray-700 hover:file:bg-gray-300 cursor-pointer w-full"
                  />
                  <p className="text-[10px] text-gray-500 mt-1">
                    Podporuje SVG vektorové tvary aj priehľadné PNG obrázky.
                  </p>
                </div>

                {/* Rýchle pridanie vrstiev */}
                <div>
                  <span className="text-xs font-bold text-gray-800 uppercase tracking-wider block mb-2">
                    Pridať vrstvu
                  </span>
                  <div className="flex flex-wrap gap-1.5">
                    <button
                      onClick={() => addTextLayer('{cena}')}
                      className="text-[11px] font-bold bg-amber-50 text-amber-800 border border-amber-200 hover:bg-amber-100 px-2 py-1 rounded-lg"
                    >
                      + Cena bez € ({'{cena}'})
                    </button>
                    <button
                      onClick={() => addTextLayer('-{zlava}')}
                      className="text-[11px] font-bold bg-red-50 text-red-800 border border-red-200 hover:bg-red-100 px-2 py-1 rounded-lg"
                    >
                      + Zľava %
                    </button>
                    <button
                      onClick={() => addTextLayer('€')}
                      className="text-[11px] font-bold bg-blue-50 text-blue-800 border border-blue-200 hover:bg-blue-100 px-2 py-1 rounded-lg"
                    >
                      + Znak €
                    </button>
                    <button
                      onClick={() => addTextLayer('{jednotkova_cena}')}
                      className="text-[11px] font-bold bg-emerald-50 text-emerald-800 border border-emerald-200 hover:bg-emerald-100 px-2 py-1 rounded-lg"
                    >
                      + Merná cena
                    </button>
                    <button
                      onClick={() => addTextLayer('AKCIA')}
                      className="text-[11px] font-bold bg-gray-100 text-gray-800 border border-gray-200 hover:bg-gray-200 px-2 py-1 rounded-lg"
                    >
                      + Vlastný text
                    </button>
                  </div>
                </div>

                {/* Zoznam a nastavenie vrstiev */}
                <div className="space-y-3 pt-2 border-t border-gray-100">
                  <span className="text-xs font-bold text-gray-800 uppercase tracking-wider block">
                    Vrstvy ({activeBadge.layersConfig.length})
                  </span>
                  <div className="flex gap-1.5 overflow-x-auto pb-1">
                    {activeBadge.layersConfig.map((l, idx) => (
                      <button
                        key={l.id}
                        onClick={() => setSelectedLayerId(l.id)}
                        className={`text-xs px-2.5 py-1 rounded-lg font-bold border transition-all whitespace-nowrap ${
                          selectedLayerId === l.id
                            ? 'bg-slate-900 text-white border-slate-900'
                            : 'bg-gray-100 text-gray-600 border-gray-200'
                        }`}
                      >
                        Vrstva {idx + 1}
                      </button>
                    ))}
                  </div>

                  {activeLayer && (
                    <div className="space-y-3 bg-gray-50 p-3.5 rounded-2xl border border-gray-200">
                      <div>
                        <label className="block text-[11px] font-semibold text-gray-700 mb-1">
                          Text / Premenná
                        </label>
                        <input
                          type="text"
                          value={activeLayer.text || ''}
                          onChange={(e) => updateActiveLayer({ text: e.target.value })}
                          className="w-full text-xs font-bold border border-gray-300 rounded-lg p-2 bg-white"
                        />
                      </div>

                      <div className="grid grid-cols-2 gap-2">
                        <div>
                          <label className="block text-[10px] text-gray-500 mb-0.5">Veľkosť fontu (px)</label>
                          <input
                            type="number"
                            value={activeLayer.fontSize || 16}
                            onChange={(e) => updateActiveLayer({ fontSize: Number(e.target.value) })}
                            className="w-full text-xs border border-gray-300 rounded-lg p-1.5 bg-white"
                          />
                        </div>
                        <div>
                          <label className="block text-[10px] text-gray-500 mb-0.5">Farba</label>
                          <div className="flex items-center gap-1.5">
                            <input
                              type="color"
                              value={activeLayer.fill || '#ffffff'}
                              onChange={(e) => updateActiveLayer({ fill: e.target.value })}
                              className="w-7 h-7 rounded cursor-pointer border-0"
                            />
                            <span className="text-[10px] font-mono">{activeLayer.fill}</span>
                          </div>
                        </div>
                      </div>

                      {/* Font výber */}
                      <div className="space-y-2 pt-2 border-t border-gray-200">
                        <label className="block text-[11px] font-semibold text-gray-700">
                          Písmo (Font) a Hrúbka
                        </label>

                        <div className="grid grid-cols-3 gap-1 bg-gray-200 p-0.5 rounded-lg text-[10px] font-bold text-center">
                          <button
                            type="button"
                            onClick={() => updateActiveLayer({ fontSource: 'google' })}
                            className={`py-1 rounded ${
                              (activeLayer.fontSource || 'google') === 'google'
                                ? 'bg-white text-gray-900 shadow-sm'
                                : 'text-gray-600 hover:text-gray-900'
                            }`}
                          >
                            Google
                          </button>
                          <button
                            type="button"
                            onClick={() => updateActiveLayer({ fontSource: 'adobe' })}
                            className={`py-1 rounded ${
                              activeLayer.fontSource === 'adobe'
                                ? 'bg-white text-gray-900 shadow-sm'
                                : 'text-gray-600 hover:text-gray-900'
                            }`}
                          >
                            Adobe
                          </button>
                          <button
                            type="button"
                            onClick={() => updateActiveLayer({ fontSource: 'system' })}
                            className={`py-1 rounded ${
                              activeLayer.fontSource === 'system'
                                ? 'bg-white text-gray-900 shadow-sm'
                                : 'text-gray-600 hover:text-gray-900'
                            }`}
                          >
                            Systém
                          </button>
                        </div>

                        {(activeLayer.fontSource || 'google') === 'google' && (
                          <div className="space-y-2">
                            <select
                              value={
                                POPULAR_FONTS.some((f) => f.name === (activeLayer.fontFamily || 'Poppins'))
                                  ? activeLayer.fontFamily || 'Poppins'
                                  : 'custom'
                              }
                              onChange={(e) => {
                                if (e.target.value !== 'custom') {
                                  loadFontDynamically(e.target.value, 'google');
                                  updateActiveLayer({ fontFamily: e.target.value, fontSource: 'google' });
                                }
                              }}
                              className="w-full text-xs border border-gray-300 rounded-lg p-1.5 bg-white font-medium"
                            >
                              {POPULAR_FONTS.filter((f) => f.source === 'google').map((f) => (
                                <option key={f.name} value={f.name}>
                                  {f.name}
                                </option>
                              ))}
                              <option value="custom">Iný Google Font...</option>
                            </select>

                            {(!POPULAR_FONTS.some((f) => f.name === (activeLayer.fontFamily || 'Poppins')) ||
                              activeLayer.fontFamily === 'custom') && (
                              <input
                                type="text"
                                placeholder="Názov Google fontu (napr. Montserrat)"
                                value={activeLayer.fontFamily === 'custom' ? '' : activeLayer.fontFamily || ''}
                                onChange={(e) => {
                                  const val = e.target.value;
                                  loadFontDynamically(val, 'google');
                                  updateActiveLayer({ fontFamily: val, fontSource: 'google' });
                                }}
                                className="w-full text-xs border border-gray-300 rounded-lg p-1.5 bg-white"
                              />
                            )}
                          </div>
                        )}

                        {activeLayer.fontSource === 'adobe' && (
                          <div className="space-y-2">
                            <input
                              type="text"
                              placeholder="Adobe Typekit CSS URL"
                              value={activeLayer.fontUrl || ''}
                              onChange={(e) => {
                                const url = e.target.value;
                                if (activeLayer.fontFamily) {
                                  loadFontDynamically(activeLayer.fontFamily, 'adobe', url);
                                }
                                updateActiveLayer({ fontUrl: url, fontSource: 'adobe' });
                              }}
                              className="w-full text-xs border border-gray-300 rounded-lg p-1.5 bg-white font-mono text-[10px]"
                            />
                            <input
                              type="text"
                              placeholder="Font Family (napr. futura-pt)"
                              value={activeLayer.fontFamily || ''}
                              onChange={(e) => {
                                const family = e.target.value;
                                if (activeLayer.fontUrl) {
                                  loadFontDynamically(family, 'adobe', activeLayer.fontUrl);
                                }
                                updateActiveLayer({ fontFamily: family, fontSource: 'adobe' });
                              }}
                              className="w-full text-xs border border-gray-300 rounded-lg p-1.5 bg-white"
                            />
                          </div>
                        )}

                        {activeLayer.fontSource === 'system' && (
                          <select
                            value={activeLayer.fontFamily || 'Arial Narrow'}
                            onChange={(e) => updateActiveLayer({ fontFamily: e.target.value, fontSource: 'system' })}
                            className="w-full text-xs border border-gray-300 rounded-lg p-1.5 bg-white font-medium"
                          >
                            <option value="Arial Narrow">Arial Narrow</option>
                            <option value="Arial">Arial</option>
                            <option value="Impact">Impact</option>
                            <option value="Trebuchet MS">Trebuchet MS</option>
                            <option value="Helvetica">Helvetica</option>
                          </select>
                        )}

                        <div>
                          <label className="block text-[10px] text-gray-500 mb-0.5">Hrúbka písma (Weight)</label>
                          <select
                            value={activeLayer.fontWeight || '700'}
                            onChange={(e) => updateActiveLayer({ fontWeight: e.target.value })}
                            className="w-full text-xs border border-gray-300 rounded-lg p-1.5 bg-white font-medium"
                          >
                            <option value="400">400 - Normal</option>
                            <option value="600">600 - SemiBold</option>
                            <option value="700">700 - Bold</option>
                            <option value="800">800 - ExtraBold</option>
                            <option value="900">900 - Black</option>
                          </select>
                        </div>
                      </div>

                      <div className="grid grid-cols-2 gap-2">
                        <div>
                          <label className="block text-[10px] text-gray-500 mb-0.5">Pozícia X ({activeLayer.x}px)</label>
                          <input
                            type="range"
                            min="0"
                            max="140"
                            value={activeLayer.x}
                            onChange={(e) => updateActiveLayer({ x: Number(e.target.value) })}
                            className="w-full"
                          />
                        </div>
                        <div>
                          <label className="block text-[10px] text-gray-500 mb-0.5">Pozícia Y ({activeLayer.y}px)</label>
                          <input
                            type="range"
                            min="0"
                            max="110"
                            value={activeLayer.y}
                            onChange={(e) => updateActiveLayer({ y: Number(e.target.value) })}
                            className="w-full"
                          />
                        </div>
                      </div>

                      {/* Nastavenie veľkosti a pozície horného indexu (centov) */}
                      {(activeLayer.text?.includes('{cena}') || activeLayer.text?.includes('{centy}')) && (
                        <div className="pt-2.5 pb-1 border-t border-blue-200/80 bg-blue-50/70 p-3 rounded-xl border border-blue-100 space-y-2.5">
                          <div className="flex items-center justify-between">
                            <span className="text-[11px] font-bold text-blue-900">
                              Nastavenie horného indexu (Centov)
                            </span>
                            <span className="text-[10px] text-blue-700 bg-blue-100 px-1.5 py-0.5 rounded font-mono font-bold">
                              {activeLayer.indexFontSize ?? Math.max(10, Math.round((activeLayer.fontSize || 16) * 0.55))}px
                            </span>
                          </div>

                          {/* Veľkosť indexu */}
                          <div>
                            <div className="flex justify-between items-center text-[10px] text-gray-600 mb-0.5">
                              <span>Veľkosť písma indexu</span>
                              <span className="font-bold text-gray-800">
                                {activeLayer.indexFontSize ?? Math.max(10, Math.round((activeLayer.fontSize || 16) * 0.55))} px
                              </span>
                            </div>
                            <input
                              type="range"
                              min="8"
                              max="40"
                              value={activeLayer.indexFontSize ?? Math.max(10, Math.round((activeLayer.fontSize || 16) * 0.55))}
                              onChange={(e) => updateActiveLayer({ indexFontSize: Number(e.target.value) })}
                              className="w-full accent-blue-600"
                            />
                          </div>

                          {/* Vertikálny posun (Hore / Dole) */}
                          <div>
                            <div className="flex justify-between items-center text-[10px] text-gray-600 mb-0.5">
                              <span>Vertikálna pozícia (Posun Hore / Dole)</span>
                              <span className="font-bold text-gray-800">
                                {activeLayer.indexOffsetY ?? -10} px
                              </span>
                            </div>
                            <input
                              type="range"
                              min="-30"
                              max="20"
                              value={activeLayer.indexOffsetY ?? -10}
                              onChange={(e) => updateActiveLayer({ indexOffsetY: Number(e.target.value) })}
                              className="w-full accent-blue-600"
                            />
                          </div>

                          {/* Horizontálna medzera (Vľavo / Vpravo) */}
                          <div>
                            <div className="flex justify-between items-center text-[10px] text-gray-600 mb-0.5">
                              <span>Horizontálna medzera (Vľavo / Vpravo)</span>
                              <span className="font-bold text-gray-800">
                                {activeLayer.indexOffsetX ?? 2} px
                              </span>
                            </div>
                            <input
                              type="range"
                              min="-10"
                              max="25"
                              value={activeLayer.indexOffsetX ?? 2}
                              onChange={(e) => updateActiveLayer({ indexOffsetX: Number(e.target.value) })}
                              className="w-full accent-blue-600"
                            />
                          </div>
                        </div>
                      )}

                      <div className="pt-1 flex justify-between items-center">
                        <button
                          onClick={() => removeLayer(activeLayer.id)}
                          className="text-[11px] text-red-600 hover:text-red-700 font-semibold flex items-center gap-1"
                        >
                          <Trash2 className="w-3 h-3" /> Zmazať vrstvu
                        </button>
                      </div>
                    </div>
                  )}
                </div>

                {/* Tlačidlo: Uložiť šablónu do DB */}
                <div className="pt-2">
                  <button
                    onClick={handleSaveToSupabase}
                    disabled={isSavingDb}
                    className="w-full py-2.5 bg-gray-900 hover:bg-black text-white text-xs font-bold rounded-xl transition-colors shadow-sm flex items-center justify-center gap-1.5"
                  >
                    <Check className="w-4 h-4 text-emerald-400" />
                    {isSavingDb ? 'Ukladám do Supabase...' : 'Uložiť túto šablónu (pre opakované použitie)'}
                  </button>
                </div>
              </>
            ) : null}
          </div>
        </div>

        {/* Footer */}
        <div className="px-6 py-4 border-t border-gray-100 bg-gray-50 flex items-center justify-between">
          <button onClick={onClose} className="px-4 py-2 text-sm font-semibold text-gray-600 hover:text-gray-900">
            Zrušiť
          </button>
          <button
            onClick={handleApplyBadge}
            disabled={isExportingPng || !activeBadge}
            className="px-6 py-2.5 text-sm font-bold bg-[#e2001a] text-white rounded-xl hover:bg-red-700 disabled:opacity-50 transition-colors shadow-md flex items-center gap-2"
          >
            <Check className="w-4 h-4" />
            {isExportingPng ? 'Pripravujem cenovku...' : 'Aplikovať cenovku na produkt'}
          </button>
        </div>
      </div>
    </div>
  );
};