'use client';

import React, { useState } from 'react';

export default function TestLamejs() {
  const [status, setStatus] = useState<string>('未测试');
  const [error, setError] = useState<string>('');

  const testLamejs = async () => {
    try {
      setStatus('正在加载 lamejs...');
      setError('');
      
      // 动态导入 lamejs
      const lamejsModule = await import('lamejs');
      const lamejs = lamejsModule.default || lamejsModule;
      
      console.log('lamejs 模块:', lamejs);
      console.log('Mp3Encoder:', lamejs.Mp3Encoder);
      console.log('MPEGMode:', lamejs.MPEGMode);
      
      // 测试创建编码器
      if (lamejs.Mp3Encoder) {
        const encoder = new lamejs.Mp3Encoder(1, 44100, 128);
        console.log('编码器创建成功:', encoder);
        setStatus('✅ lamejs 加载成功！');
      } else {
        setStatus('❌ Mp3Encoder 未找到');
      }
      
    } catch (err) {
      console.error('lamejs 测试失败:', err);
      setError(err instanceof Error ? err.message : '未知错误');
      setStatus('❌ 加载失败');
    }
  };

  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <div className="max-w-2xl mx-auto bg-white rounded-lg shadow-lg p-6">
        <h1 className="text-2xl font-bold mb-6 text-center">lamejs 导入测试</h1>
        
        <div className="space-y-4">
          <button
            onClick={testLamejs}
            className="w-full px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
          >
            测试 lamejs 导入
          </button>
          
          <div className="bg-gray-50 p-4 rounded-lg">
            <h3 className="font-medium mb-2">测试状态</h3>
            <p className="text-sm">{status}</p>
            {error && (
              <p className="text-sm text-red-500 mt-2">错误: {error}</p>
            )}
          </div>
          
          <div className="bg-blue-50 p-4 rounded-lg">
            <h3 className="font-medium mb-2">说明</h3>
            <p className="text-sm text-gray-600">
              这个页面用于测试 lamejs 库是否能正确导入和初始化。
              请打开浏览器控制台查看详细的日志信息。
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}
