// Your custom metadata
const metadata = {
  userId: "user-123",
  projectId: "project-456",
  clientId: "client-789",
  workflowType: "marketing_campaign",
  campaignId: "campaign-001"
};

// Encode as base64
const encodedMetadata = btoa(JSON.stringify(metadata));

// Create embed URL with metadata
const embedUrl = `https://app.templated.io/editor?embed=${configId}&metadata=${encodedMetadata}`;

// Update embed element
document.getElementById('editor-embed').src = embedUrl;

import json
import base64

# Your custom metadata
metadata = {
    "userId": "user-123",
    "projectId": "project-456",
    "clientId": "client-789",
    "workflowType": "marketing_campaign",
    "campaignId": "campaign-001"
}

# Encode as base64
encoded_metadata = base64.b64encode(
    json.dumps(metadata).encode('utf-8')
).decode('utf-8')

# Create embed URL
embed_url = f"https://app.templated.io/editor?embed={config_id}&metadata={encoded_metadata}"

<?php
// Your custom metadata
$metadata = [
    'userId' => 'user-123',
    'projectId' => 'project-456',
    'clientId' => 'client-789',
    'workflowType' => 'marketing_campaign',
    'campaignId' => 'campaign-001'
];

// Encode as base64
$encodedMetadata = base64_encode(json_encode($metadata));

// Create embed URL
$embedUrl = "https://app.templated.io/editor?embed={$configId}&metadata={$encodedMetadata}";
?>

import React, { useState, useEffect } from 'react';

function TemplateEmbed({ configId, user, project }) {
  const [embedUrl, setEmbedUrl] = useState('');

  useEffect(() => {
    // Your custom metadata
    const metadata = {
      userId: user.id,
      projectId: project.id,
      clientId: user.clientId,
      workflowType: "marketing_campaign",
      campaignId: project.campaignId,
      timestamp: new Date().toISOString()
    };

    // Encode as base64
    const encodedMetadata = btoa(JSON.stringify(metadata));

    // Create embed URL with metadata
    const url = `https://app.templated.io/editor?embed=${configId}&metadata=${encodedMetadata}`;
    setEmbedUrl(url);
  }, [configId, user, project]);

  return (
    <iframe
      src={embedUrl}
      width="100%"
      height="600"
      frameBorder="0"
      title="Template Editor"
    />
  );
}

export default TemplateEmbed;

function createUserProfileTemplate(user) {
  const layers = {
    "user-name": {
      text: user.fullName,
      color: "#333333"
    },
    "user-title": {
      text: user.jobTitle,
      color: "#666666"
    },
    "profile-photo": {
      image_url: user.profilePicture
    },
    "company-logo": {
      image_url: user.company.logo
    },
    "background-color": {
      fill: user.company.brandColor
    }
  };

  const encodedLayers = btoa(JSON.stringify(layers));
  return `https://app.templated.io/editor/${USER_PROFILE_TEMPLATE_ID}?embed=${EMBED_CONFIG_ID}&layers=${encodedLayers}`;
}

function createCampaignTemplate(campaign) {
  const layers = {
    "campaign-title": {
      text: campaign.title,
      color: campaign.theme.primaryColor
    },
    "campaign-description": {
      text: campaign.description,
      font_size: "16px"
    },
    "hero-image": {
      image_url: campaign.heroImage
    },
    "cta-button": {
      text: campaign.ctaText,
      background: campaign.theme.buttonColor
    },
    "brand-logo": {
      image_url: campaign.brand.logo
    }
  };

  const encodedLayers = btoa(JSON.stringify(layers));
  return `https://app.templated.io/editor/${CAMPAIGN_TEMPLATE_ID}?embed=${EMBED_CONFIG_ID}&layers=${encodedLayers}`;
}

import React, { useState, useEffect, useMemo } from 'react';

function DynamicTemplateEditor({
  templateId,
  configId,
  templateType,
  userData,
  campaignData
}) {
  const [embedUrl, setEmbedUrl] = useState('');

  // Generate layers based on template type
  const layerData = useMemo(() => {
    switch (templateType) {
      case 'user-profile':
        return {
          "user-name": {
            text: userData.fullName,
            color: "#333333"
          },
          "user-title": {
            text: userData.jobTitle,
            color: "#666666"
          },
          "profile-photo": {
            image_url: userData.profilePicture
          },
          "company-logo": {
            image_url: userData.company?.logo
          },
          "background-color": {
            fill: userData.company?.brandColor || "#f0f0f0"
          }
        };

      case 'marketing-campaign':
        return {
          "campaign-title": {
            text: campaignData.title,
            color: campaignData.theme?.primaryColor || "#000000"
          },
          "campaign-description": {
            text: campaignData.description,
            font_size: "16px"
          },
          "hero-image": {
            image_url: campaignData.heroImage
          },
          "cta-button": {
            text: campaignData.ctaText,
            background: campaignData.theme?.buttonColor || "#007bff"
          },
          "brand-logo": {
            image_url: campaignData.brand?.logo
          }
        };

      default:
        return {};
    }
  }, [templateType, userData, campaignData]);

  useEffect(() => {
    if (Object.keys(layerData).length > 0) {
      const encodedLayers = btoa(JSON.stringify(layerData));
      const url = `https://app.templated.io/editor/${templateId}?embed=${configId}&layers=${encodedLayers}`;
      setEmbedUrl(url);
    }
  }, [templateId, configId, layerData]);

  return (
    <div className="template-editor-container">
      {embedUrl ? (
        <iframe
          src={embedUrl}
          width="100%"
          height="600"
          frameBorder="0"
          title="Dynamic Template Editor"
        />
      ) : (
        <div>Loading template...</div>
      )}
    </div>
  );
}

export default DynamicTemplateEditor;

function editRender(renderId, userId) {
  const metadata = {
    userId: userId,
    action: 'edit_render',
    originalRenderId: renderId,
    editMode: true
  };

  const encodedMetadata = btoa(JSON.stringify(metadata));

  const embedUrl = `https://app.templated.io/editor?embed=${EMBED_CONFIG_ID}&render=${renderId}&metadata=${encodedMetadata}`;

  // Open in modal or new window
  openEditorModal(embedUrl);
}

// Usage in your UI
document.querySelectorAll('.edit-render-btn').forEach(btn => {
  btn.addEventListener('click', (e) => {
    const renderId = e.target.dataset.renderId;
    editRender(renderId, currentUser.id);
  });
});

import React, { useState, useCallback } from 'react';

function RenderEditModal({ embedConfigId, onClose }) {
  const [embedUrl, setEmbedUrl] = useState('');
  const [isModalOpen, setIsModalOpen] = useState(false);

  const editRender = useCallback((renderId, userId) => {
    const metadata = {
      userId: userId,
      action: 'edit_render',
      originalRenderId: renderId,
      editMode: true,
      timestamp: new Date().toISOString()
    };

    const encodedMetadata = btoa(JSON.stringify(metadata));
    const url = `https://app.templated.io/editor?embed=${embedConfigId}&render=${renderId}&metadata=${encodedMetadata}`;

    setEmbedUrl(url);
    setIsModalOpen(true);
  }, [embedConfigId]);

  const closeModal = () => {
    setIsModalOpen(false);
    setEmbedUrl('');
    onClose?.();
  };

  return (
    <>
      {isModalOpen && (
        <div className="modal-overlay" onClick={closeModal}>
          <div className="modal-content" onClick={(e) => e.stopPropagation()}>
            <div className="modal-header">
              <h3>Edit Render</h3>
              <button onClick={closeModal} className="close-btn">×</button>
            </div>
            <div className="modal-body">
              <iframe
                src={embedUrl}
                width="100%"
                height="600"
                frameBorder="0"
                title="Render Editor"
              />
            </div>
          </div>
        </div>
      )}
    </>
  );
}

function RenderListItem({ render, currentUser, embedConfigId }) {
  const [modal, setModal] = useState(null);

  const handleEditClick = () => {
    setModal(
      <RenderEditModal
        embedConfigId={embedConfigId}
        onClose={() => setModal(null)}
      />
    );

    // Trigger the edit function
    const editModal = React.createRef();
    if (editModal.current) {
      editModal.current.editRender(render.id, currentUser.id);
    }
  };

  return (
    <div className="render-item">
      <img src={render.thumbnail} alt={render.name} />
      <h4>{render.name}</h4>
      <button
        onClick={handleEditClick}
        className="edit-render-btn"
      >
        Edit Render
      </button>
      {modal}
    </div>
  );
}

export { RenderEditModal, RenderListItem };

function openTemplateEditor(userId) {
  const metadata = {
    userId: userId,
    timestamp: new Date().toISOString()
  };

  const encodedMetadata = btoa(JSON.stringify(metadata));
  const embedUrl = `https://app.templated.io/editor?embed=YOUR_CONFIG_ID&metadata=${encodedMetadata}`;

  const modal = document.createElement('div');
  modal.innerHTML = `
    <div class="modal">
      <embed src="${embedUrl}" width="100%" height="700px" />
      <button onclick="this.parentElement.remove()">Close</button>
    </div>
  `;

  document.body.appendChild(modal);
}

import React, { useState } from 'react';

function TemplateEditorModal({ userId, configId, onClose }) {
  const [isOpen, setIsOpen] = useState(false);

  const embedUrl = React.useMemo(() => {
    if (!userId) return '';

    const metadata = {
      userId: userId,
      timestamp: new Date().toISOString()
    };

    const encodedMetadata = btoa(JSON.stringify(metadata));
    return `https://app.templated.io/editor?embed=${configId}&metadata=${encodedMetadata}`;
  }, [userId, configId]);

  const handleClose = () => {
    setIsOpen(false);
    onClose?.();
  };

  if (!isOpen) return null;

  return (
    <div className="modal-overlay" onClick={handleClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <iframe
          src={embedUrl}
          width="100%"
          height="700px"
          frameBorder="0"
          title="Template Editor"
        />
        <button onClick={handleClose} className="close-button">
          Close
        </button>
      </div>
    </div>
  );
}

// Usage component
function EditorLauncher({ userId, configId }) {
  const [showModal, setShowModal] = useState(false);

  return (
    <>
      <button onClick={() => setShowModal(true)}>
        Open Template Editor
      </button>

      {showModal && (
        <TemplateEditorModal
          userId={userId}
          configId={configId}
          onClose={() => setShowModal(false)}
        />
      )}
    </>
  );
}

export { TemplateEditorModal, EditorLauncher };

app.post('/webhook', (req, res) => {
  const { event, template, metadata } = req.body;

  if (event === 'save') {
    console.log(`Template ${template.id} saved by user ${metadata.userId}`);
  }

  res.status(200).json({ received: true });
});

// pages/api/webhook.js or app/api/webhook/route.js

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  try {
    const { event, template, metadata } = req.body;

    switch (event) {
      case 'save':
        await handleTemplateSave(template, metadata);
        break;
      case 'render':
        await handleTemplateRender(template, metadata);
        break;
      case 'delete':
        await handleTemplateDelete(template, metadata);
        break;
      default:
        console.log(`Unknown event: ${event}`);
    }

    res.status(200).json({ received: true });
  } catch (error) {
    console.error('Webhook error:', error);
    res.status(500).json({ error: 'Internal server error' });
  }
}

async function handleTemplateSave(template, metadata) {
  console.log(`Template ${template.id} saved by user ${metadata.userId}`);

  // Example: Save to database
  // await db.templates.update({
  //   id: template.id,
  //   userId: metadata.userId,
  //   lastModified: new Date()
  // });

  // Example: Send notification
  // await sendNotification(metadata.userId, 'Template saved successfully');
}

async function handleTemplateRender(template, metadata) {
  console.log(`Template ${template.id} rendered by user ${metadata.userId}`);

  // Example: Track usage analytics
  // await analytics.track('template_rendered', {
  //   templateId: template.id,
  //   userId: metadata.userId,
  //   timestamp: new Date()
  // });
}

async function handleTemplateDelete(template, metadata) {
  console.log(`Template ${template.id} deleted by user ${metadata.userId}`);

  // Example: Clean up resources
  // await cleanupTemplateResources(template.id);
}

function openEditorWithCustomData(templateId, userData) {
  const layerData = {
    "user-name": {
      text: userData.name,
      color: "#333333",
      font_size: "24px"
    },
    "user-company": {
      text: userData.company,
      color: "#666666",
      font_size: "18px"
    },
    "profile-image": {
      image_url: userData.profileImage
    },
    "background-shape": {
      fill: userData.brandColor || "#0066CC"
    }
  };

  const encodedLayers = btoa(JSON.stringify(layerData));
  const embedUrl = `https://app.templated.io/editor/${templateId}?embed=YOUR_CONFIG_ID&layers=${encodedLayers}`;

  window.open(embedUrl, '_blank');
}

// Usage example
const userData = {
  id: 'user123',
  name: 'John Smith',
  company: 'Acme Corp',
  profileImage: 'https://example.com/profile.jpg',
  brandColor: '#FF6B35'
};

openEditorWithCustomData('template_abc123', userData);

import React, { useState, useCallback } from 'react';

function CustomTemplateEditor({ templateId, configId, userData }) {
  const [isEditorOpen, setIsEditorOpen] = useState(false);

  const generateEmbedUrl = useCallback(() => {
    const layerData = {
      "user-name": {
        text: userData.name,
        color: "#333333",
        font_size: "24px"
      },
      "user-company": {
        text: userData.company,
        color: "#666666",
        font_size: "18px"
      },
      "profile-image": {
        image_url: userData.profileImage
      },
      "background-shape": {
        fill: userData.brandColor || "#0066CC"
      }
    };

    const encodedLayers = btoa(JSON.stringify(layerData));
    return `https://app.templated.io/editor/${templateId}?embed=${configId}&layers=${encodedLayers}`;
  }, [templateId, configId, userData]);

  const openEditor = () => {
    const embedUrl = generateEmbedUrl();
    window.open(embedUrl, '_blank', 'width=1200,height=800');
  };

  const openInModal = () => {
    setIsEditorOpen(true);
  };

  return (
    <div className="template-editor-launcher">
      <div className="user-preview">
        <img src={userData.profileImage} alt={userData.name} />
        <div>
          <h3>{userData.name}</h3>
          <p>{userData.company}</p>
        </div>
      </div>

      <div className="action-buttons">
        <button onClick={openEditor} className="btn-primary">
          Open in New Tab
        </button>
        <button onClick={openInModal} className="btn-secondary">
          Open in Modal
        </button>
      </div>

      {/* Modal Implementation */}
      {isEditorOpen && (
        <div className="modal-overlay" onClick={() => setIsEditorOpen(false)}>
          <div className="modal-content" onClick={(e) => e.stopPropagation()}>
            <div className="modal-header">
              <h3>Customize Template</h3>
              <button
                onClick={() => setIsEditorOpen(false)}
                className="close-btn"
              >
                ×
              </button>
            </div>
            <iframe
              src={generateEmbedUrl()}
              width="100%"
              height="700px"
              frameBorder="0"
              title="Template Editor"
            />
          </div>
        </div>
      )}
    </div>
  );
}

// Usage in your app
function UserDashboard({ user }) {
  const templateConfig = {
    templateId: 'template_abc123',
    configId: process.env.REACT_APP_EMBED_CONFIG_ID
  };

  return (
    <div className="dashboard">
      <h2>Welcome, {user.name}</h2>
      <CustomTemplateEditor
        {...templateConfig}
        userData={user}
      />
    </div>
  );
}

export { CustomTemplateEditor, UserDashboard };

function editExistingRender(renderId, userId) {
  const metadata = {
    userId: userId,
    renderId: renderId,
    mode: 'edit_render'
  };

  const encodedMetadata = btoa(JSON.stringify(metadata));
  const embedUrl = `https://app.templated.io/editor?embed=YOUR_CONFIG_ID&metadata=${encodedMetadata}`;

  // Open in modal
  const modal = document.createElement('div');
  modal.className = 'render-editor-modal';
  modal.innerHTML = `
    <div class="modal-backdrop">
      <div class="modal-content">
        <div class="modal-header">
          <h3>Edit Design</h3>
          <button class="close-btn" onclick="this.closest('.render-editor-modal').remove()">×</button>
        </div>
        <iframe src="${embedUrl}" width="100%" height="800px" frameborder="0"></iframe>
      </div>
    </div>
  `;

  document.body.appendChild(modal);
}

// Alternative: Edit render with custom callback
function editRenderWithCallback(renderId, onSave) {
  const metadata = {
    renderId: renderId,
    callback: 'custom',
    onSave: onSave.toString() // Pass callback function
  };

  const encodedMetadata = btoa(JSON.stringify(metadata));
  const embedUrl = `https://app.templated.io/editor?embed=YOUR_CONFIG_ID&metadata=${encodedMetadata}`;

  return embedUrl;
}

import React, { useState, useCallback } from 'react';

function RenderEditor({ renderId, userId, configId, onSave, onClose }) {
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  const embedUrl = React.useMemo(() => {
    const metadata = {
      userId: userId,
      renderId: renderId,
      mode: 'edit_render',
      timestamp: new Date().toISOString()
    };

    const encodedMetadata = btoa(JSON.stringify(metadata));
    return `https://app.templated.io/editor?embed=${configId}&metadata=${encodedMetadata}`;
  }, [renderId, userId, configId]);

  const handleIframeLoad = () => {
    setIsLoading(false);
  };

  const handleIframeError = () => {
    setIsLoading(false);
    setError('Failed to load editor');
  };

  return (
    <div className="render-editor-modal">
      <div className="modal-backdrop" onClick={onClose}>
        <div className="modal-content" onClick={(e) => e.stopPropagation()}>
          <div className="modal-header">
            <h3>Edit Design</h3>
            <button onClick={onClose} className="close-btn">
              ×
            </button>
          </div>

          <div className="modal-body">
            {isLoading && (
              <div className="loading-overlay">
                <div className="spinner"></div>
                <p>Loading editor...</p>
              </div>
            )}

            {error && (
              <div className="error-message">
                <p>{error}</p>
                <button onClick={() => window.location.reload()}>
                  Retry
                </button>
              </div>
            )}

            <iframe
              src={embedUrl}
              width="100%"
              height="800px"
              frameBorder="0"
              title="Render Editor"
              onLoad={handleIframeLoad}
              onError={handleIframeError}
              style={{ display: error ? 'none' : 'block' }}
            />
          </div>
        </div>
      </div>
    </div>
  );
}

// Render list component with edit functionality
function RenderGallery({ renders, userId, configId }) {
  const [editingRender, setEditingRender] = useState(null);

  const handleEditRender = (render) => {
    setEditingRender(render);
  };

  const handleSaveRender = (updatedRender) => {
    // Handle save logic
    console.log('Render saved:', updatedRender);
    setEditingRender(null);
  };

  const handleCloseEditor = () => {
    setEditingRender(null);
  };

  return (
    <div className="render-gallery">
      <div className="render-grid">
        {renders.map((render) => (
          <div key={render.id} className="render-item">
            <img src={render.thumbnail} alt={render.name} />
            <div className="render-actions">
              <h4>{render.name}</h4>
              <button
                onClick={() => handleEditRender(render)}
                className="edit-btn"
              >
                Edit Design
              </button>
            </div>
          </div>
        ))}
      </div>

      {editingRender && (
        <RenderEditor
          renderId={editingRender.id}
          userId={userId}
          configId={configId}
          onSave={handleSaveRender}
          onClose={handleCloseEditor}
        />
      )}
    </div>
  );
}

// Hook for render editing functionality
function useRenderEditor(configId) {
  const [isEditing, setIsEditing] = useState(false);
  const [currentRender, setCurrentRender] = useState(null);

  const editRender = useCallback((renderId, userId) => {
    setCurrentRender({ id: renderId, userId });
    setIsEditing(true);
  }, []);

  const closeEditor = useCallback(() => {
    setIsEditing(false);
    setCurrentRender(null);
  }, []);

  return {
    isEditing,
    currentRender,
    editRender,
    closeEditor,
    RenderEditorComponent: isEditing && currentRender ? (
      <RenderEditor
        renderId={currentRender.id}
        userId={currentRender.userId}
        configId={configId}
        onClose={closeEditor}
      />
    ) : null
  };
}

export { RenderEditor, RenderGallery, useRenderEditor };

function cloneTemplate(templateId, userId, customizations = {}) {
  const metadata = {
    userId: userId,
    mode: 'clone',
    templateId: templateId,
    customizations: customizations
  };

  const encodedMetadata = btoa(JSON.stringify(metadata));
  const embedUrl = `https://app.templated.io/editor/${templateId}?embed=YOUR_CONFIG_ID&metadata=${encodedMetadata}`;

  // Open in new tab
  const newWindow = window.open(embedUrl, '_blank');

  // Optional: Listen for completion
  const checkClosed = setInterval(() => {
    if (newWindow.closed) {
      clearInterval(checkClosed);
      console.log('Template clone editor closed');
      // Handle post-clone actions
    }
  }, 1000);
}

// Example with product customization
function customizeProduct(productId, templateId) {
  const customizations = {
    productId: productId,
    allowedElements: ['text', 'image'], // Restrict editing
    hiddenLayers: ['background', 'logo'], // Lock certain layers
    requiredFields: ['customer_name', 'order_number']
  };

  cloneTemplate(templateId, 'customer_123', customizations);
}

// Usage examples
const templateId = 'template_xyz789';
const userId = 'user_456';

// Basic clone
cloneTemplate(templateId, userId);

// Clone with restrictions
cloneTemplate(templateId, userId, {
  allowedElements: ['text'],
  maxTemplates: 5
});

import React, { useState, useEffect, useRef } from 'react';

function TemplateCloneButton({ templateId, configId, userId, onComplete, customizations = {} }) {
  const [isLoading, setIsLoading] = useState(false);
  const popupRef = useRef(null);

  const handleClone = () => {
    setIsLoading(true);

    const metadata = {
      userId: userId,
      mode: 'clone',
      templateId: templateId,
      customizations: customizations,
      returnUrl: window.location.href,
      timestamp: new Date().toISOString()
    };

    const encodedMetadata = btoa(JSON.stringify(metadata));
    const embedUrl = `https://app.templated.io/editor/${templateId}?embed=${configId}&metadata=${encodedMetadata}`;

    // Use popup window for better UX
    popupRef.current = window.open(
      embedUrl,
      'template-clone',
      'width=1200,height=800,scrollbars=yes,resizable=yes'
    );

    // Listen for completion message
    const messageHandler = (event) => {
      if (event.origin === 'https://app.templated.io' && event.data.type === 'template_saved') {
        popupRef.current.close();
        setIsLoading(false);
        onComplete?.(event.data.template);
        window.removeEventListener('message', messageHandler);
      }
    };

    window.addEventListener('message', messageHandler);

    // Handle popup closed manually
    const checkClosed = setInterval(() => {
      if (popupRef.current?.closed) {
        clearInterval(checkClosed);
        setIsLoading(false);
        window.removeEventListener('message', messageHandler);
      }
    }, 1000);
  };

  return (
    <button
      onClick={handleClone}
      disabled={isLoading}
      className="clone-template-btn"
    >
      {isLoading ? 'Opening Editor...' : 'Customize This Design'}
    </button>
  );
}

// Advanced template clone component with modal support
function TemplateCloneModal({ templateId, configId, userId, isOpen, onClose, onComplete }) {
  const [embedUrl, setEmbedUrl] = useState('');

  useEffect(() => {
    if (isOpen && templateId) {
      const metadata = {
        userId: userId,
        mode: 'clone',
        templateId: templateId,
        modalMode: true,
        timestamp: new Date().toISOString()
      };

      const encodedMetadata = btoa(JSON.stringify(metadata));
      setEmbedUrl(`https://app.templated.io/editor/${templateId}?embed=${configId}&metadata=${encodedMetadata}`);
    }
  }, [isOpen, templateId, configId, userId]);

  if (!isOpen) return null;

  return (
    <div className="template-clone-modal">
      <div className="modal-overlay" onClick={onClose}>
        <div className="modal-content" onClick={(e) => e.stopPropagation()}>
          <div className="modal-header">
            <h3>Clone Template</h3>
            <button onClick={onClose} className="close-btn">×</button>
          </div>
          <div className="modal-body">
            <iframe
              src={embedUrl}
              width="100%"
              height="700px"
              frameBorder="0"
              title="Template Clone Editor"
            />
          </div>
        </div>
      </div>
    </div>
  );
}

// Template gallery with clone functionality
function TemplateGallery({ templates, configId, userId }) {
  const [cloneModal, setCloneModal] = useState({ isOpen: false, templateId: null });

  const handleCloneTemplate = (templateId) => {
    setCloneModal({ isOpen: true, templateId });
  };

  const handleCloneComplete = (newTemplate) => {
    console.log('Template cloned:', newTemplate);
    setCloneModal({ isOpen: false, templateId: null });
    // Refresh template list or show success message
  };

  const handleCloseModal = () => {
    setCloneModal({ isOpen: false, templateId: null });
  };

  return (
    <div className="template-gallery">
      <div className="template-grid">
        {templates.map((template) => (
          <div key={template.id} className="template-card">
            <img src={template.thumbnail} alt={template.name} />
            <div className="template-info">
              <h4>{template.name}</h4>
              <p>{template.description}</p>
              <div className="template-actions">
                <TemplateCloneButton
                  templateId={template.id}
                  configId={configId}
                  userId={userId}
                  onComplete={handleCloneComplete}
                />
                <button
                  onClick={() => handleCloneTemplate(template.id)}
                  className="btn-secondary"
                >
                  Clone in Modal
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>

      <TemplateCloneModal
        templateId={cloneModal.templateId}
        configId={configId}
        userId={userId}
        isOpen={cloneModal.isOpen}
        onClose={handleCloseModal}
        onComplete={handleCloneComplete}
      />
    </div>
  );
}

// Custom hook for template cloning
function useTemplateClone(configId) {
  const [isCloning, setIsCloning] = useState(false);
  const [clonedTemplates, setClonedTemplates] = useState([]);

  const cloneTemplate = (templateId, userId, customizations = {}) => {
    setIsCloning(true);

    return new Promise((resolve, reject) => {
      const metadata = {
        userId,
        mode: 'clone',
        templateId,
        customizations,
        timestamp: new Date().toISOString()
      };

               const encodedMetadata = btoa(JSON.stringify(metadata));
      const embedUrl = `https://app.templated.io/editor/${templateId}?embed=${configId}&metadata=${encodedMetadata}`;

      const popup = window.open(embedUrl, 'template-clone', 'width=1200,height=800');

      const messageHandler = (event) => {
        if (event.origin === 'https://app.templated.io' && event.data.type === 'template_saved') {
          popup.close();
          setIsCloning(false);
          setClonedTemplates(prev => [...prev, event.data.template]);
          resolve(event.data.template);
          window.removeEventListener('message', messageHandler);
        }
      };

      window.addEventListener('message', messageHandler);

      const checkClosed = setInterval(() => {
        if (popup.closed) {
          clearInterval(checkClosed);
          setIsCloning(false);
          window.removeEventListener('message', messageHandler);
          reject(new Error('Popup closed by user'));
        }
      }, 1000);
    });
  };

  return {
    isCloning,
    clonedTemplates,
    cloneTemplate
  };
}

export {
  TemplateCloneButton,
  TemplateCloneModal,
  TemplateGallery,
  useTemplateClone
};