const fs = require('fs-extra');
const path = require('path');
const sharp = require('sharp');

// ============ 配置 ============
const SKETCH_DIR = path.join(__dirname, '../static/sketch');
const BACKUP_DIR = path.join(__dirname, '../static/sketch-backup');
const MAX_WIDTH = 2560;      // 最大宽度 2560px
const MAX_HEIGHT = 1440;     // 最大高度 1440px
const WEBP_QUALITY = 92;     // WebP 质量 92%
const WEBP_EFFORT = 6;       // 压缩努力程度 0-6
// ==============================

// 支持的图片格式（会被转成 WebP）
const IMAGE_EXTS = ['.png', '.jpg', '.jpeg', '.webp', '.avif'];

// 获取文件大小
function getFileSize(filePath) {
  const stats = fs.statSync(filePath);
  return stats.size;
}

function formatSize(bytes) {
  if (bytes < 1024) return bytes + 'B';
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + 'KB';
  return (bytes / (1024 * 1024)).toFixed(2) + 'MB';
}

// 处理单张图片 - 转 WebP
async function processImage(inputPath, backupPath) {
  // 备份（如果还没备份过）
  if (!fs.existsSync(backupPath)) {
    fs.ensureDirSync(path.dirname(backupPath));
    fs.copyFileSync(inputPath, backupPath);
    console.log(`📦 已备份: ${path.relative(process.cwd(), inputPath)}`);
  }

  const originalSize = getFileSize(inputPath);
  const metadata = await sharp(inputPath).metadata();
  const ext = path.extname(inputPath).toLowerCase();
  const fileName = path.basename(inputPath, ext);
  const dir = path.dirname(inputPath);

  // 构建 WebP 输出路径
  const webpPath = path.join(dir, fileName + '.webp');

  // 开始处理
  let pipeline = sharp(inputPath);

  // 缩放（如果宽度或高度超标）
  if (metadata.width > MAX_WIDTH || metadata.height > MAX_HEIGHT) {
    pipeline = pipeline.resize({
      width: MAX_WIDTH,
      height: MAX_HEIGHT,
      fit: 'inside',
      kernel: 'lanczos3',
      withoutEnlargement: true,
    });
  }

  // 转换为 WebP
  pipeline = pipeline.webp({
    quality: WEBP_QUALITY,
    alphaQuality: WEBP_QUALITY,  // 透明通道质量
    lossless: false,
    effort: WEBP_EFFORT,
    nearLossless: false,
    smartSubsample: true,        // 智能子采样
  });

  // 写入 WebP 文件
  await pipeline.toFile(webpPath);

  // 删除原图（如果不是 WebP）
  if (ext !== '.webp') {
    fs.unlinkSync(inputPath);
  } else {
    // 如果是 WebP，删除临时文件（实际上就是原文件）
    // 但我们已经覆盖了，所以不用额外操作
  }

  const newSize = getFileSize(webpPath);
  const saved = ((originalSize - newSize) / originalSize * 100).toFixed(1);
  const ratio = (newSize / originalSize * 100).toFixed(1);

  const fromExt = ext !== '.webp' ? ext.toUpperCase().replace('.', '') : 'WebP';
  console.log(`🔄 ${fromExt} → WebP: ${path.basename(inputPath)}`);
  console.log(`   📊 ${formatSize(originalSize)} → ${formatSize(newSize)} (${ratio}%，节省 ${saved}%)`);

  return { webpPath, originalPath: inputPath };
}

// 递归扫描文件夹
async function scanDirectory(dir, backupBaseDir) {
  const items = fs.readdirSync(dir);
  let processed = 0;
  let totalFiles = 0;
  let skipped = 0;
  let totalSaved = 0;
  let totalOriginal = 0;
  let converted = 0;

  for (const item of items) {
    const fullPath = path.join(dir, item);
    const stat = fs.statSync(fullPath);

    if (stat.isDirectory()) {
      // 跳过备份目录
      if (fullPath === BACKUP_DIR) continue;

      const subBackupDir = path.join(backupBaseDir, item);
      const result = await scanDirectory(fullPath, subBackupDir);
      processed += result.processed;
      totalFiles += result.totalFiles;
      skipped += result.skipped;
      totalSaved += result.totalSaved || 0;
      totalOriginal += result.totalOriginal || 0;
      converted += result.converted || 0;
    } else {
      const ext = path.extname(item).toLowerCase();
      if (IMAGE_EXTS.includes(ext)) {
        totalFiles++;
        try {
          const relativePath = path.relative(SKETCH_DIR, fullPath);
          const backupPath = path.join(BACKUP_DIR, relativePath);
          
          // 如果是 GIF，跳过
          if (ext === '.gif') {
            console.log(`⏭️ 跳过 GIF（保留动画）: ${path.basename(fullPath)}`);
            skipped++;
            continue;
          }

          const originalSize = getFileSize(fullPath);
          await processImage(fullPath, backupPath);
          
          // 获取新文件大小
          const fileName = path.basename(fullPath, ext);
          const dir = path.dirname(fullPath);
          const webpPath = path.join(dir, fileName + '.webp');
          const newSize = getFileSize(webpPath);
          
          totalSaved += (originalSize - newSize);
          totalOriginal += originalSize;
          converted++;
          processed++;
        } catch (err) {
          console.error(`❌ 处理失败 ${item}:`, err.message);
        }
      } else {
        skipped++;
      }
    }
  }

  return { processed, totalFiles, skipped, totalSaved, totalOriginal, converted };
}

// ============ 主程序 ============
async function main() {
  console.log('🚀 开始批量转换 WebP...\n');
  console.log(`📊 最大尺寸: ${MAX_WIDTH}×${MAX_HEIGHT}px`);
  console.log(`📊 WebP 质量: ${WEBP_QUALITY}%`);
  console.log(`📊 压缩努力度: ${WEBP_EFFORT}/6\n`);

  if (!fs.existsSync(SKETCH_DIR)) {
    console.error('❌ 找不到 static/sketch 目录');
    process.exit(1);
  }

  console.log('📊 正在扫描...');
  const result = await scanDirectory(SKETCH_DIR, BACKUP_DIR);

  const totalMB = (result.totalOriginal / (1024 * 1024)).toFixed(1);
  const savedMB = (result.totalSaved / (1024 * 1024)).toFixed(1);
  const finalMB = ((result.totalOriginal - result.totalSaved) / (1024 * 1024)).toFixed(1);
  const savedPercent = result.totalOriginal > 0 ? (result.totalSaved / result.totalOriginal * 100).toFixed(1) : 0;

  console.log('\n' + '='.repeat(50));
  console.log(`✅ 全部完成！`);
  console.log(`   📁 转换了 ${result.converted} 张图片为 WebP`);
  console.log(`   📁 处理了 ${result.processed} 张图片`);
  console.log(`   📁 共 ${result.totalFiles} 张图片（跳过 ${result.skipped} 张）`);
  console.log(`   📊 总大小: ${totalMB}MB → ${finalMB}MB`);
  console.log(`   📊 节省: ${savedMB}MB (${savedPercent}%)`);
  console.log(`   📁 原图备份在: ${BACKUP_DIR}`);
  console.log(`\n💡 所有图片已转换为 .webp 格式！`);
  console.log(`💡 如果效果不满意，可以从备份恢复：`);
  console.log(`   cp -r ${BACKUP_DIR}/* ${SKETCH_DIR}/`);
}

main().catch((err) => {
  console.error('❌ 程序出错:', err.message);
  process.exit(1);
});

import React from 'react';
import { QRCodeSVG } from 'qrcode.react';
import { useLocation } from '@docusaurus/router';

export default function QrCode({ url, size = 50 }) {
  const location = useLocation();

  // 只在博客详情页显示（路径匹配 /blog/xxx）
  const isBlogPost = /^\/blog\/[^/]+$/.test(location.pathname);
  if (!isBlogPost) return null;

  const targetUrl = url || (typeof window !== 'undefined' ? window.location.href : '');
  if (!targetUrl) return null;

  return (
    <div style={{ margin: '12px 0', textAlign: 'right' }}>
      <QRCodeSVG
        value={targetUrl}
        size={size}
        bgColor="transparent"
        fgColor="currentColor"
        level="H"
      />
      <p style={{ fontSize: '10px', color: 'var(--ifm-color-emphasis-600)', marginTop: '4px' }}>
        扫码分享本文
      </p>
    </div>
  );
}

import React from 'react';
import OriginalBlogPostItem from '@theme-original/BlogPostItem';
import QrCode from '@site/src/components/QrCode';

export default function BlogPostItemWrapper(props) {
  return (
    <>
      <OriginalBlogPostItem {...props} />
      <QrCode />
    </>
  );
}