import React, { useState } from 'react'
import { AudioPlayer } from '../src/components/AudioPlayer'
import { VideoPlayer } from '../src/components/VideoPlayer'
import type { SubtitleTrack } from '../src/types'
import './App.css'

function App() {
  const [videoUrl, setVideoUrl] = useState('')
  const [useDemo, setUseDemo] = useState(true)
  const [subtitleStyleEditorEnabled, setSubtitleStyleEditorEnabled] = useState(true)

  // Demo video URLs (you can replace with your own)
  const demoVideoUrl = '/player/ses.mp4'
  const demoPoster = '/player/poster.svg'
  const demoGifUrl = 'https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif'
  const demoAudioUrl = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'

  const demoSubtitles: SubtitleTrack[] = [
    {
      src: '/player/ses.srt',
      lang: 'tr',
      label: 'Türkçe',
      default: true,
    },
  ]

  const currentVideoUrl = useDemo ? demoVideoUrl : videoUrl

  return (
    <div className="app">
      <header className="app-header">
        <h1>🎬 Modern Video Player</h1>
        <p>A feature-rich, modern video player built with React</p>
      </header>

      <main className="app-main">
        <div className="video-section">
          <div className="player-wrapper">
            {currentVideoUrl ? (
              <VideoPlayer
                src={currentVideoUrl}
                poster={useDemo ? demoPoster : undefined}
                subtitles={demoSubtitles}
                subtitleStyle={{
                  fontSize: 24,
                  fontWeight: 500,
                  color: '#ffffff',
                  backgroundColor: '#0f0f0f',
                  backgroundOpacity: 0.78,
                }}
                subtitleStyleEditor={{
                  enabled: subtitleStyleEditorEnabled,
                  storageKey: 'source-player-example-subtitle-style',
                }}
                keyboardShortcuts={true}
                pictureInPicture={true}
                theme={{
                  primaryColor: '#ef4444',
                  accentColor: '#dc2626',
                }}
                onPlay={() => console.log('Playing')}
                onPause={() => console.log('Paused')}
                onTimeUpdate={(time) => console.log('Time:', time)}
              />
            ) : (
              <div className="no-video">
                <p>Enter a video URL or use the demo video</p>
              </div>
            )}
          </div>

          <div className="controls-section">
            <div className="url-input">
              <input
                type="text"
                placeholder="Enter video URL (MP4, HLS, IPTV .ts)"
                value={videoUrl}
                onChange={(e) => setVideoUrl(e.target.value)}
                disabled={useDemo}
              />
              <button onClick={() => setUseDemo(!useDemo)} className={useDemo ? 'active' : ''}>
                {useDemo ? 'Using Demo' : 'Use Demo'}
              </button>
            </div>
            <label className="toggle-row">
              <input
                type="checkbox"
                checked={subtitleStyleEditorEnabled}
                onChange={(event) => setSubtitleStyleEditorEnabled(event.target.checked)}
              />
              <span>Enable subtitle style editor (with localStorage)</span>
            </label>
          </div>
        </div>

        <div className="media-test-section">
          <h2>GIF ve Ses Önizleme</h2>
          <p className="media-test-subtitle">
            Yeni medya tiplerinin player içinde nasıl göründüğünü burada test edebilirsiniz.
          </p>

          <div className="media-test-grid">
            <article className="media-test-card">
              <h3>🖼️ Animated Image (GIF)</h3>
              <p>VideoPlayer, GIF kaynaklarını otomatik algılayıp minimal görüntü modunda açar.</p>
              <div className="media-test-player media-test-player-gif">
                <VideoPlayer
                  src={demoGifUrl}
                  aspectRatio="1:1"
                  theme={{
                    primaryColor: '#ef4444',
                    accentColor: '#dc2626',
                  }}
                />
              </div>
            </article>

            <article className="media-test-card">
              <h3>🎧 Audio Player (.mp3)</h3>
              <p>MP3/WAV gibi ses dosyaları için ayrı AudioPlayer görünümü.</p>
              <div className="media-test-player media-test-player-audio">
                <AudioPlayer
                  src={demoAudioUrl}
                  title="SoundHelix Demo Track"
                  subtitle="AudioPlayer test görünümü"
                  artwork={demoPoster}
                  playbackRates={[0.75, 1, 1.25, 1.5, 2]}
                  theme={{
                    primaryColor: '#ef4444',
                    accentColor: '#dc2626',
                  }}
                />
              </div>
            </article>
          </div>
        </div>

        <div className="features-section">
          <h2>Features</h2>
          <div className="features-grid">
            <div className="feature">
              <h3>⌨️ Keyboard Shortcuts</h3>
              <ul>
                <li>
                  <kbd>Space</kbd> or <kbd>K</kbd> - Play/Pause
                </li>
                <li>
                  <kbd>←</kbd> / <kbd>→</kbd> - Seek 5s
                </li>
                <li>
                  <kbd>J</kbd> / <kbd>L</kbd> - Seek 10s
                </li>
                <li>
                  <kbd>↑</kbd> / <kbd>↓</kbd> - Volume
                </li>
                <li>
                  <kbd>M</kbd> - Mute/Unmute
                </li>
                <li>
                  <kbd>F</kbd> - Fullscreen
                </li>
                <li>
                  <kbd>P</kbd> - Picture-in-Picture
                </li>
                <li>
                  <kbd>0-9</kbd> - Jump to %
                </li>
              </ul>
            </div>

            <div className="feature">
              <h3>📱 Touch Gestures</h3>
              <ul>
                <li>Tap - Play/Pause</li>
                <li>Double tap left - Rewind 10s</li>
                <li>Double tap right - Forward 10s</li>
                <li>Swipe left/right - Seek</li>
                <li>Swipe up/down - Volume</li>
              </ul>
            </div>

            <div className="feature">
              <h3>🎨 Modern UI</h3>
              <ul>
                <li>Clean, minimalist design</li>
                <li>Smooth animations</li>
                <li>Custom red theme</li>
                <li>Auto-hiding controls</li>
                <li>Responsive layout</li>
              </ul>
            </div>

            <div className="feature">
              <h3>🚀 Advanced Features</h3>
              <ul>
                <li>HLS streaming support</li>
                <li>HTTP Range Request (MP4)</li>
                <li>Subtitles (VTT, SRT)</li>
                <li>Subtitle style editor + live preview</li>
                <li>Multiple audio tracks</li>
                <li>Playback speed control</li>
                <li>Quality selector</li>
              </ul>
            </div>
          </div>
        </div>
      </main>

      <footer className="app-footer">
        <p>Built with React, TypeScript, and Vite</p>
        <p>Zero runtime dependencies • ~18KB gzipped core JS</p>
      </footer>
    </div>
  )
}

export default App