import React, { useEffect, useState } from 'react';
import { usePlayerStore } from '../../store/playerStore';

interface VideoItem { videoId: string; filename: string; }

interface Props {
  onSelect: (videoId: string, filename: string) => void;
}

export default function VideoList({ onSelect }: Props) {
  const [videos, setVideos] = useState<VideoItem[]>([]);
  const { source } = usePlayerStore();
  const activeId = source?.kind === 'server' ? source.videoId : null;

  useEffect(() => {
    fetch('/api/videos')
      .then((r) => r.json())
      .then(setVideos)
      .catch(() => {});
  }, []);

  if (videos.length === 0) {
    return (
      <div className="text-gray-500 text-sm p-4 text-center">
        서버에 영상이 없습니다
      </div>
    );
  }

  return (
    <div className="divide-y divide-gray-800">
      {videos.map((v) => (
        <button
          key={v.videoId}
          onClick={() => onSelect(v.videoId, v.filename)}
          className={`w-full text-left px-4 py-3 hover:bg-gray-800 transition-colors ${
            activeId === v.videoId ? 'bg-gray-800 border-l-2 border-blue-500' : ''
          }`}
        >
          <div className="text-sm text-white truncate">{v.filename}</div>
          <div className="text-xs text-gray-500 mt-0.5">{v.videoId}</div>
        </button>
      ))}
    </div>
  );
}