Untitled

import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import './SeeVideos.css';
import useVideoStore from '../stores/uploadedVideosStore';

const SeeVideos = () => {
  const { id } = useParams(); // URL'den gelen id
  const { videos, fetchVideos, error } = useVideoStore();
  const [loading, setLoading] = useState(false);
  const [comments, setComments] = useState({}); // Videolar için yorumlar

  useEffect(() => {
    const loadVideos = async () => {
      if (!id) {
        console.error('No ID found in URL');
        return;
      }
      console.log('Fetching videos for ID:', id);
      setLoading(true);

      // Yeni bir mülakat yüklenmeden önce mevcut videoları geçici olarak sıfırla
      useVideoStore.setState({ videos: [] });

      try {
        await fetchVideos(id); // Backend'den videoları çek
      } catch (err) {
        if (err.response && err.response.status === 404) {
          console.warn('No videos found for this interview.');
        } else {
          console.error('Error fetching videos:', err);
        }
      } finally {
        setLoading(false);
      }
    };
    loadVideos();
  }, [id, fetchVideos]);

  // Yorum kaydetme
  const handleSaveComment = (videoId) => {
    const comment = comments[videoId]?.trim();
    if (!comment) {
      alert('Lütfen bir yorum girin!');
      return;
    }
    alert(`Yorum kaydedildi: ${comment}`);
    // API entegrasyonu için burada bir POST isteği yapılabilir.
    setComments((prev) => ({ ...prev, [videoId]: '' })); // Yorumu sıfırla
  };

  // Video silme
  const handleDeleteVideo = (videoId) => {
    if (window.confirm('Bu videoyu silmek istediğinizden emin misiniz?')) {
      console.log(`Video silindi: ${videoId}`);
      // API entegrasyonu için burada bir DELETE isteği yapılabilir.
      useVideoStore.setState((prev) => ({
        videos: prev.videos.filter((video) => video._id !== videoId),
      }));
    }
  };

  if (!Array.isArray(videos)) {
    console.error('Videos is not an array:', videos);
    return <p>Videolar yüklenirken bir hata oluştu.</p>;
  }

  return (
    <div className="see-videos-page">
      <h1>Videolar</h1>
      {loading && <p>Videolar yükleniyor...</p>}
      {error && <p className="see-videos-error">{error}</p>}
      {!loading && videos.length > 0 ? (
        <div className="see-videos-list">
          {videos.map((video, index) => (
            <div key={video._id} className="see-videos-item">
              <h3>Video {index + 1}</h3>
              <video controls>
                <source src={video.videoUrl} type="video/webm" />
                Tarayıcınız video etiketini desteklemiyor.
              </video>
              {video.candidate && (
                <div className="see-videos-candidate-info">
                  <p>
                    <strong>Ad:</strong> {video.candidate.firstName}{' '}
                    {video.candidate.lastName}
                  </p>
                  <p>
                    <strong>Email:</strong> {video.candidate.email}
                  </p>
                  <p>
                    <strong>Telefon:</strong> {video.candidate.phone}
                  </p>
                </div>
              )}
              {/* Yorum Alanı */}
              <textarea
                className="comment-area"
                placeholder="Bu video hakkında yorum yapın..."
                value={comments[video._id] || ''}
                onChange={(e) =>
                  setComments((prev) => ({
                    ...prev,
                    [video._id]: e.target.value,
                  }))
                }
              />
              <button
                className="save-comment-btn"
                onClick={() => handleSaveComment(video._id)}
              >
                Yorumu Kaydet
              </button>
              {/* Sil Butonu */}
              <button
                className="delete-video-btn"
                onClick={() => handleDeleteVideo(video._id)}
              >
                Sil
              </button>
            </div>
          ))}
        </div>
      ) : (
        !loading && <p className="see-videos-no-videos">Kayıtlı video bulunamadı.</p>
      )}
    </div>
  );
};

export default SeeVideos;