import { CanvasObject } from '../types/canvas.types';

/**
 * Utility to export canvas objects for layout definitions
 * Use this in the browser console to capture current canvas state
 */

/**
 * Converts canvas objects to a formatted layout definition
 * that can be copied directly into layouts.ts
 */
export function exportCanvasAsLayout(
  objects: CanvasObject[],
  layoutId: string,
  layoutName: string,
  thumbnailPath: string,
  variant?: 'default' | 'hf'
): string {
  const objectsCode = objects.map((obj) => {
    const indent = variant ? '        ' : '      '; // Extra indent for variant format
    let lines = [
      `${indent}{`,
      `${indent}  id: '${obj.id}',`,
      `${indent}  type: '${obj.type}',`,
      `${indent}  x: ${obj.x},`,
      `${indent}  y: ${obj.y},`,
      `${indent}  width: ${obj.width},`,
      `${indent}  height: ${obj.height},`,
      `${indent}  rotation: ${obj.rotation},`,
      `${indent}  zIndex: ${obj.zIndex},`,
    ];

    // Add type-specific properties
    if (obj.type === 'text') {
      lines.push(`${indent}  text: '${obj.text}',`);
      lines.push(`${indent}  fontSize: ${obj.fontSize},`);
      lines.push(`${indent}  fontFamily: '${obj.fontFamily}',`);
      lines.push(`${indent}  fill: '${obj.fill}',`);
      lines.push(`${indent}  bold: ${obj.bold},`);
      lines.push(`${indent}  italic: ${obj.italic},`);
      if (obj.align) lines.push(`${indent}  align: '${obj.align}',`);
      if (obj.fontWeight && obj.fontWeight !== 'normal') lines.push(`${indent}  fontWeight: '${obj.fontWeight}',`);
      if (obj.hasBackground) {
        lines.push(`${indent}  hasBackground: ${obj.hasBackground},`);
        if (obj.backgroundColor) lines.push(`${indent}  backgroundColor: '${obj.backgroundColor}',`);
      }
    } else if (obj.type === 'image' || obj.type === 'huggy') {
      lines.push(`${indent}  src: '${obj.src}',`);
      lines.push(`${indent}  name: '${obj.name || 'Untitled'}',`);
    } else if (obj.type === 'rect') {
      lines.push(`${indent}  fill: '${obj.fill}',`);
      if (obj.stroke) lines.push(`${indent}  stroke: '${obj.stroke}',`);
      if (obj.strokeWidth !== undefined) lines.push(`${indent}  strokeWidth: ${obj.strokeWidth},`);
    }

    lines.push(`${indent}},`);
    return lines.join('\n');
  }).join('\n');

  // If variant is specified, return just the objects array for that variant
  if (variant) {
    return `      ${variant}: [
${objectsCode}
      ],`;
  }

  // Old format: single objects array
  return `  ${layoutId}: {
    id: '${layoutId}',
    name: '${layoutName}',
    thumbnail: '${thumbnailPath}',
    objects: [
${objectsCode}
    ],
  },`;
}

/**
 * Logs canvas objects to console in a format ready for layouts.ts
 * Returns both the code string and a structured object for inspection
 */
export function logCanvasObjects(objects: CanvasObject[]): void {
  console.group('📐 Canvas Objects Export');

  // Show count and summary
  console.log(`Total objects: ${objects.length}`);
  console.log('Object types:', objects.map(o => o.type).join(', '));

  // Show individual objects with details
  console.group('🔍 Individual Objects');
  objects.forEach((obj, index) => {
    console.group(`${index + 1}. ${obj.type.toUpperCase()}: ${obj.id}`);
    console.log('Position:', { x: obj.x, y: obj.y });
    console.log('Size:', { width: obj.width, height: obj.height });
    console.log('Rotation:', obj.rotation);
    console.log('Z-Index:', obj.zIndex);

    if (obj.type === 'text') {
      console.log('Text:', obj.text);
      console.log('Font:', `${obj.fontSize}px ${obj.fontFamily}`);
      console.log('Color:', obj.fill);
      console.log('Styles:', { bold: obj.bold, italic: obj.italic, fontWeight: obj.fontWeight });
      if (obj.hasBackground) {
        console.log('Background:', { enabled: obj.hasBackground, color: obj.backgroundColor });
      }
    } else if (obj.type === 'image' || obj.type === 'huggy') {
      console.log('Source:', obj.src);
      console.log('Name:', obj.name);
    } else if (obj.type === 'rect') {
      console.log('Fill:', obj.fill);
      if (obj.stroke) console.log('Stroke:', obj.stroke);
    }

    console.log('Full object:', obj);
    console.groupEnd();
  });
  console.groupEnd();

  // Provide quick copy format
  console.group('📋 Ready for layouts.ts');
  console.log('Use the following format:');
  const exampleCode = exportCanvasAsLayout(
    objects,
    'myNewLayout',
    'My New Layout',
    '/assets/layouts/myNewLayout_thumbnail.png'
  );
  console.log(exampleCode);
  console.groupEnd();

  console.groupEnd();
}

/**
 * Creates a simple JSON export of canvas objects
 * Useful for quick copy-paste or saving to file
 */
export function exportAsJSON(objects: CanvasObject[]): string {
  return JSON.stringify(objects, null, 2);
}

/**
 * Prints a comparison between current objects and a specific layout
 * Useful for debugging layout loading issues
 */
export function compareWithLayout(
  currentObjects: CanvasObject[],
  layoutName: string
): void {
  console.group(`🔄 Comparison: Current Canvas vs "${layoutName}" Layout`);

  console.log('Current canvas has', currentObjects.length, 'objects');
  console.log('Compare positions, sizes, and properties manually');

  console.group('Current Objects');
  currentObjects.forEach((obj, i) => {
    console.log(`${i + 1}. [${obj.type}] ${obj.id}:`, {
      x: obj.x,
      y: obj.y,
      width: obj.width,
      height: obj.height,
      rotation: obj.rotation,
    });
  });
  console.groupEnd();

  console.groupEnd();
}