import { useEffect, useRef } from 'react'
import { FaDesktop, FaStop, FaPlay } from 'react-icons/fa'
import { Button } from '@/components/ui'

interface ScreenSharePanelProps {
  isSharing: boolean
  onStartShare: () => void
  onStopShare: () => void
  sharedScreen?: MediaStream
  sharerName?: string
}

export const ScreenSharePanel = ({
  isSharing,
  onStartShare,
  onStopShare,
  sharedScreen,
  sharerName,
}: ScreenSharePanelProps) => {
  const videoRef = useRef<HTMLVideoElement>(null)

  useEffect(() => {
    if (videoRef.current) {
      videoRef.current.srcObject = sharedScreen ?? null
    }
  }, [sharedScreen])

  return (
    <div className="bg-white rounded-lg shadow-md p-4 mb-4">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center space-x-2">
          <FaDesktop className="text-blue-600" size={20} />
          <h3 className="font-semibold text-gray-800">Ekran Paylaşımı</h3>
        </div>

        {isSharing ? (
          <Button
            type="button"
            variant="plain"
            shape="none"
            onClick={onStopShare}
            className="!inline-flex !h-auto items-center gap-2 rounded-lg !bg-red-600 !px-3 py-2 text-white transition-colors hover:!bg-red-700"
          >
            <FaStop size={16} />
            <span>Paylaşımı Durdur</span>
          </Button>
        ) : (
          <Button
            type="button"
            variant="plain"
            shape="none"
            onClick={onStartShare}
            className="!inline-flex !h-auto items-center gap-2 rounded-lg !bg-blue-600 !px-3 py-2 text-white transition-colors hover:!bg-blue-700"
          >
            <FaPlay size={16} />
            <span>Ekranı Paylaş</span>
          </Button>
        )}
      </div>

      {sharedScreen && (
        <div className="relative bg-gray-900 rounded-lg overflow-hidden aspect-video">
          <video
            ref={videoRef}
            autoPlay
            playsInline
            muted
            className="w-full h-full object-contain"
          />

          {sharerName && (
            <div className="absolute bottom-2 left-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded text-sm">
              {sharerName} ekranını paylaşıyor
            </div>
          )}
        </div>
      )}

      {isSharing && !sharedScreen && (
        <div className="bg-gray-100 rounded-lg p-8 text-center">
          <FaDesktop size={48} className="mx-auto text-gray-400 mb-4" />
          <p className="text-gray-600">Ekran paylaşımı başlatılıyor...</p>
        </div>
      )}
    </div>
  )
}