"use client";

import { useState } from "react";
import AudioPlayer from "@/components/AudioPlayer";

export default function S3TestPage() {
  const [testUrl, setTestUrl] = useState("");
  const [result, setResult] = useState<Record<string, any> | null>(null);
  const [loading, setLoading] = useState(false);
  const [showAudioPlayer, setShowAudioPlayer] = useState(false);

  const testS3Access = async () => {
    if (!testUrl) return;

    setLoading(true);
    try {
      const response = await fetch(testUrl, {
        method: "HEAD",
      });

      setResult({
        status: response.status,
        statusText: response.statusText,
        headers: Object.fromEntries(response.headers.entries()),
        accessible: response.ok,
      });

      if (response.ok) {
        setShowAudioPlayer(true);
      }
    } catch (error) {
      setResult({
        error: error instanceof Error ? error.message : "未知错误",
        accessible: false,
      });
      setShowAudioPlayer(false);
    } finally {
      setLoading(false);
    }
  };

  const testAudioPlayback = async () => {
    if (!testUrl) return;

    setLoading(true);
    try {
      const response = await fetch(testUrl);
      const blob = await response.blob();

      setResult({
        ...result,
        audioTest: {
          blobSize: blob.size,
          blobType: blob.type,
          accessible: true,
        },
      });
    } catch (error) {
      setResult({
        ...result,
        audioTest: {
          error: error instanceof Error ? error.message : "未知错误",
          accessible: false,
        },
      });
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="container mx-auto p-6 max-w-4xl">
      <h1 className="text-2xl font-bold mb-6">S3 文件访问测试</h1>

      <div className="space-y-4">
        <div>
          <label className="block text-sm font-medium mb-2">S3 文件 URL:</label>
          <input
            type="text"
            value={testUrl}
            onChange={(e) => setTestUrl(e.target.value)}
            placeholder="https://your-bucket.s3.region.amazonaws.com/path/to/file.webm"
            className="w-full p-3 border border-gray-300 rounded-lg dark:bg-gray-700 dark:border-gray-600"
          />
        </div>

        <div className="flex gap-2">
          <button
            onClick={testS3Access}
            disabled={loading || !testUrl}
            className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50"
          >
            {loading ? "测试中..." : "测试访问"}
          </button>

          {result?.accessible && (
            <button
              onClick={testAudioPlayback}
              disabled={loading}
              className="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 disabled:opacity-50"
            >
              {loading ? "测试中..." : "测试音频播放"}
            </button>
          )}
        </div>

        {result && (
          <div className="mt-6 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
            <h3 className="font-semibold mb-2">测试结果:</h3>
            <pre className="text-sm overflow-auto">
              {JSON.stringify(result, null, 2)}
            </pre>
          </div>
        )}

        {showAudioPlayer && testUrl && (
          <div className="mt-6 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
            <h3 className="font-semibold mb-4">音频播放器测试:</h3>
            <AudioPlayer
              src={testUrl}
              title="S3 测试音频"
              duration={0}
              recordingId="test-id"
            />
          </div>
        )}
      </div>
    </div>
  );
}