import React, { useState, useEffect } from 'react';
import VideoPlayer from './VideoPlayer';
import { PlayIcon } from '@heroicons/react/24/solid';

const LandingPage = () => {
  const [streamUrl, setStreamUrl] = useState('');
  const [isPlaying, setIsPlaying] = useState(false);

  useEffect(() => {
    // 禁用滚动
    document.body.style.overflow = 'hidden';

    // 组件卸载时恢复滚动
    return () => {
      document.body.style.overflow = 'unset';
    };
  }, []);

  const handleUrlSubmit = (e) => {
    e.preventDefault();
    if (streamUrl) {
      setIsPlaying(true);
    }
  };

  return (
    <div className="h-screen flex flex-col items-center justify-center bg-cover bg-center"
         style={{ backgroundImage: "url('https://source.unsplash.com/random/1920x1080?landscape')" }}>
      <div className="absolute inset-0 bg-black opacity-60"></div>
      <div className="z-10 w-full max-w-6xl px-4 sm:px-6 lg:px-8">
        <div className="mb-8">
          {isPlaying ? (
            <div className="aspect-w-16 aspect-h-9">
              <VideoPlayer streamUrl={streamUrl} autoPlay={true} />
            </div>
          ) : (
            <div className="aspect-w-16 aspect-h-9 bg-gray-800 rounded-lg shadow-lg flex items-center justify-center">
            </div>
          )}
        </div>
        <form onSubmit={handleUrlSubmit} className="flex flex-col sm:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-4">
          <input
            type="text"
            value={streamUrl}
            onChange={(e) => setStreamUrl(e.target.value)}
            placeholder="Enter M3U8 URL"
            className="w-full sm:flex-grow p-4 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
          />
          <button
            type="submit"
            className="w-full sm:w-auto px-6 py-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300 flex items-center justify-center"
          >
            <PlayIcon className="h-6 w-6 mr-2" />
            Play
          </button>
        </form>
      </div>
    </div>
  );
};

export default LandingPage;
