import './admin-shared.css';
import './AdminAssignVideoPage.css';
import { uploadAssetUrl } from '../../apiConfig.js';

function displayPersonName(name, id) {
  const n = name && String(name).trim();
  if (n) return n;
  if (id != null && id !== '') return String(id);
  return '';
}

function AdminViewVideoPage({ video, onBack }) {
  const videoUrl = uploadAssetUrl(video.video);

  function pillClass() {
    const label = (video.assessment_status_name || '').toLowerCase();
    if (label.includes('complete') || label.includes('done')) return 'status-pill--success';
    if (label.includes('progress') || label.includes('ongoing')) return 'status-pill--info';
    if (label.includes('return')) return 'status-pill--danger';
    if (label.includes('verif')) return 'status-pill--info';
    return 'status-pill--warning';
  }

  return (
    <main className="dashboard-main">
      <header className="admin-page-header admin-page-header--with-actions">
        <div>
          <div className="admin-page-badge">Video details</div>
          <h1>{video.video_title || 'Untitled Video'}</h1>
          <p>View the uploaded video and its assessment details.</p>
        </div>
        <button type="button" className="admin-outline-button" onClick={onBack}>
          Back to list
        </button>
      </header>

      <div className="assign-layout">
        <div className="assign-top-layout">
          <section className="assign-video-col">
            <div className="assign-video-player">
              {videoUrl ? (
                <video
                  key={videoUrl}
                  className="assign-video-element"
                  controls
                  playsInline
                >
                  <source src={videoUrl} />
                </video>
              ) : (
                <div className="assign-video-placeholder">
                  <div className="assign-play-icon">&#9654;</div>
                  <div className="assign-video-bar">
                    <span>No video file available</span>
                  </div>
                </div>
              )}
            </div>
          </section>

          <section className="assign-details-col">
            <div className="assign-info-card">
              <h2 className="assign-info-heading">Information</h2>
              <dl className="assign-info-grid">
                <dt>Assessment ID</dt>
                <dd>{video.assessment_id}</dd>
                <dt>Video Title</dt>
                <dd>{video.video_title || '--'}</dd>
                <dt>Location</dt>
                <dd>{video.location_name || video.Location_name || '--'}</dd>
                <dt>Department</dt>
                <dd>{video.department_name || video.Department_name || '--'}</dd>
                <dt>Contract Details</dt>
                <dd>{(video.contract_details ?? video.contact_details) || '--'}</dd>
                <dt>Capture Date</dt>
                <dd>{video.video_capture_date || '--'}</dd>
                <dt>Capture Time</dt>
                <dd>{video.video_capture_time || '--'}</dd>
                <dt>Remarks</dt>
                <dd>{video.remarks || '--'}</dd>
                <dt>Executor</dt>
                <dd>{displayPersonName(video.executor_name, video.executor_id) || '--'}</dd>
                <dt>Verifier</dt>
                <dd>{displayPersonName(video.verifier_name, video.verifier_id) || '--'}</dd>
                <dt>Status</dt>
                <dd>
                  <span className={`status-pill ${pillClass()}`}>
                    {video.assessment_status_name || `Status ${video.assessment_status_id}`}
                  </span>
                </dd>
              </dl>
            </div>
          </section>
        </div>
      </div>
    </main>
  );
}

export default AdminViewVideoPage;
