import domtoimage from "dom-to-image";

/**
 * گرفتن اسکرین‌شات با dom-to-image و برگرداندن فایل برای آپلود
 */
export const captureScreenshotAsFile = async (
  templateName: string
): Promise<File | null> => {
  try {
    console.log("📸 Starting screenshot capture for upload...");

    const element = await findAndValidateElement();
    if (!element) {
      console.error("❌ Element not found");
      return null;
    }

    // آماده‌سازی element
    const htmlElement = element as HTMLElement;
    const originalTransform = htmlElement.style.transform;
    const originalPosition = htmlElement.style.position;

    htmlElement.style.transform = "scale(1)";
    htmlElement.style.position = "relative";

    // صبر برای render کامل
    await new Promise((resolve) => setTimeout(resolve, 1000));

    const options = {
      quality: 1,
      bgcolor: "#ffffff",
      width: element.offsetWidth,
      height: element.offsetHeight,
      style: {
        transform: "scale(1)",
        transformOrigin: "top left",
      },
    };

    const dataUrl = await domtoimage.toPng(element, options);
    // بازگردانی استایل‌های اصلی
    htmlElement.style.transform = originalTransform;
    htmlElement.style.position = originalPosition;

    // تبدیل dataURL به File
    const response = await fetch(dataUrl);
    const blob = await response.blob();
    const file = new File([blob], `${templateName}-template.png`, {
      type: "image/png",
    });

    console.log("✅ Screenshot file created successfully:", file);
    return file;
  } catch (error) {
    console.error("❌ Screenshot capture failed:", error);
    return null;
  }
};

/**
 * تابع اصلی - استفاده از dom-to-image و برگرداندن فایل
 */
export const capturePersonalityScreenshot = async (
  templateName: string
): Promise<File | null> => {
  console.log("🎯 Starting screenshot capture...");

  try {
    const screenshotFile = await captureScreenshotAsFile(templateName);
    if (screenshotFile) {
      console.log("✅ Screenshot captured successfully");
      return screenshotFile;
    } else {
      console.error("❌ Screenshot capture failed");
      return null;
    }
  } catch (error) {
    console.error("❌ Screenshot error:", error);
    return null;
  }
};

/**
 * پیدا کردن و بررسی element
 */
const findAndValidateElement = async (): Promise<HTMLElement | null> => {
  console.log("🔍 Looking for personality element...");

  const selectors = [
    ".personality-template",
    '[class*="personality-template"]',
    ".flex-1.bg-white.rounded-4xl.p-8",
    ".bg-white.rounded-4xl.p-8",
    'div[class*="bg-white"][class*="rounded-4xl"]',
  ];

  for (let i = 0; i < selectors.length; i++) {
    const selector = selectors[i];
    console.log(`🔍 Trying selector ${i + 1}/${selectors.length}: ${selector}`);

    const elements = document.querySelectorAll(selector);
    console.log(`   Found ${elements.length} elements`);

    for (let j = 0; j < elements.length; j++) {
      const element = elements[j] as HTMLElement;

      const rect = element.getBoundingClientRect();
      const isVisible = rect.width > 0 && rect.height > 0;
      const hasContent = element.innerHTML.trim().length > 0;

      console.log(`   Element ${j + 1}:`, {
        visible: isVisible,
        hasContent,
        dimensions: `${rect.width}x${rect.height}`,
        className: element.className.slice(0, 50) + "...",
      });

      if (isVisible && hasContent) {
        console.log(`✅ Found valid element with selector: ${selector}`);
        return element;
      }
    }
  }

  console.log("❌ No valid elements found");
  return null;
};

/**
 * تابع debug برای بررسی element
 */
export const debugPersonalityElement = () => {
  console.log("🔍 === DEBUG: Personality Element Detection ===");

  const selectors = [
    ".personality-template",
    '[class*="personality-template"]',
    ".flex-1.bg-white.rounded-4xl.p-8",
    ".bg-white.rounded-4xl",
    "table",
  ];

  let foundElements = 0;

  selectors.forEach((selector, index) => {
    const elements = document.querySelectorAll(selector);
    console.log(`${index + 1}. "${selector}": ${elements.length} elements`);

    elements.forEach((el, elIndex) => {
      const htmlEl = el as HTMLElement;
      const rect = htmlEl.getBoundingClientRect();

      console.log(`   [${elIndex + 1}]`, {
        visible: rect.width > 0 && rect.height > 0,
        size: `${rect.width}x${rect.height}`,
        hasContent: htmlEl.innerHTML.trim().length > 0,
        className: htmlEl.className.slice(0, 40) + "...",
      });

      if (rect.width > 0 && rect.height > 0) {
        foundElements++;
      }
    });
  });

  console.log(`📊 Summary: ${foundElements} visible elements found`);
  console.log("=========================================");

  return {
    found: foundElements > 0,
    totalElements: foundElements,
  };
};