import { Link } from 'react-router-dom';
import { useJobs } from '../../hooks/useJob';
import { StatusBadge } from '../../components/StatusBadge';


export function FinalList() {
  const { data: finalReviewJobs, isLoading, error } = useJobs({ 
    status: 'pending_final_review,completed' 
  });
  
  const jobs = finalReviewJobs?.jobs || [];

  if (isLoading) {
    return (
      <div className="container mx-auto px-4 py-8">
        <div className="animate-pulse">
          <div className="h-8 bg-gray-200 rounded w-1/4 mb-8"></div>
          <div className="space-y-4">
            {[...Array(5)].map((_, i) => (
              <div key={i} className="h-20 bg-gray-200 rounded"></div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="container mx-auto px-4 py-8">
        <div className="bg-red-50 border border-red-200 rounded-md p-4">
          <p className="text-red-800">Failed to load final review jobs</p>
        </div>
      </div>
    );
  }

  const pendingJobs = jobs?.filter(job => job.status === 'pending_final_review') || [];
  const completedJobs = jobs?.filter(job => job.status === 'completed') || [];

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="flex items-center justify-between mb-8">
        <h1 className="text-3xl font-bold text-gray-900">Final Review Queue</h1>
        <div className="flex space-x-4 text-sm text-gray-600">
          <span>Pending: {pendingJobs.length}</span>
          <span>Completed: {completedJobs.length}</span>
        </div>
      </div>

      {/* Pending Final Review Section */}
      <div className="mb-12">
        <h2 className="text-xl font-semibold text-gray-900 mb-4">Pending Final Review</h2>
        {pendingJobs.length === 0 ? (
          <div className="bg-gray-50 border border-gray-200 rounded-md p-8 text-center">
            <p className="text-gray-600">No jobs pending final review</p>
          </div>
        ) : (
          <div className="bg-white shadow overflow-hidden sm:rounded-md">
            <ul className="divide-y divide-gray-200">
              {pendingJobs.map((job) => {
                const languageCount = Object.keys(job.outputs || {}).length;
                const hasAudio = job.requested_outputs?.audio_description_mp3;
                
                return (
                  <li key={job.id}>
                    <Link
                      to={`/admin/final/${job.id}`}
                      className="block hover:bg-gray-50 px-4 py-4 sm:px-6"
                    >
                      <div className="flex items-center justify-between">
                        <div className="flex items-center">
                          <div className="flex-shrink-0">
                            <StatusBadge status={job.status} />
                          </div>
                          <div className="ml-4">
                            <div className="flex items-center">
                              <p className="text-sm font-medium text-indigo-600 truncate">
                                {job.title}
                              </p>
                              <span className="ml-2 text-xs text-gray-500">
                                {languageCount} languages
                                {hasAudio && ', MP3 audio'}
                              </span>
                            </div>
                            <div className="mt-2 flex items-center text-sm text-gray-500">
                              <p className="truncate">
                                Source: {job.source.original_filename || job.source.filename}
                              </p>
                              {job.source.duration_s && (
                                <p className="ml-4">Duration: {Math.round(job.source.duration_s)}s</p>
                              )}
                            </div>
                          </div>
                        </div>
                        <div className="flex items-center space-x-4">
                          <div className="text-right">
                            <p className="text-sm text-gray-900">
                              {job.requested_outputs?.languages?.join(', ') || 'N/A'}
                            </p>
                            {/* Transcreation info - HIDDEN: Not fully implemented */}
                            {/* <p className="text-xs text-gray-500">
                              {job.requested_outputs?.transcreation?.length ? 
                                `${job.requested_outputs.transcreation.length} transcreated` : 
                                'Standard translation'
                              }
                            </p> */}
                          </div>
                          <div className="flex-shrink-0">
                            <svg className="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                              <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
                            </svg>
                          </div>
                        </div>
                      </div>
                    </Link>
                  </li>
                );
              })}
            </ul>
          </div>
        )}
      </div>

      {/* Recently Completed Section */}
      <div>
        <h2 className="text-xl font-semibold text-gray-900 mb-4">Recently Completed</h2>
        {completedJobs.length === 0 ? (
          <div className="bg-gray-50 border border-gray-200 rounded-md p-8 text-center">
            <p className="text-gray-600">No recently completed jobs</p>
          </div>
        ) : (
          <div className="bg-white shadow overflow-hidden sm:rounded-md">
            <ul className="divide-y divide-gray-200">
              {completedJobs.slice(0, 10).map((job) => {
                const languageCount = Object.keys(job.outputs || {}).length;
                const hasAudio = job.requested_outputs?.audio_description_mp3;
                
                return (
                  <li key={job.id}>
                    <Link
                      to={`/admin/final/${job.id}`}
                      className="block hover:bg-gray-50 px-4 py-4 sm:px-6"
                    >
                      <div className="flex items-center justify-between">
                        <div className="flex items-center">
                          <div className="flex-shrink-0">
                            <StatusBadge status={job.status} />
                          </div>
                          <div className="ml-4">
                            <div className="flex items-center">
                              <p className="text-sm font-medium text-gray-900 truncate">
                                {job.source?.original_filename || job.id}
                              </p>
                              <span className="ml-2 text-xs text-gray-500">
                                {languageCount} languages
                                {hasAudio && ', MP3 audio'}
                              </span>
                            </div>
                            <div className="mt-2 flex items-center text-sm text-gray-500">
                              <p className="truncate">
                                Completed: {new Date(job.updated_at).toLocaleDateString()}
                              </p>
                              <p className="ml-4">
                                Created: {new Date(job.created_at).toLocaleDateString()}
                              </p>
                            </div>
                          </div>
                        </div>
                        <div className="flex items-center space-x-4">
                          <div className="text-right">
                            <p className="text-sm text-gray-900">
                              {job.requested_outputs?.languages?.join(', ') || 'N/A'}
                            </p>
                            <p className="text-xs text-gray-500">
                              Ready for download
                            </p>
                          </div>
                          <div className="flex-shrink-0">
                            <svg className="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                              <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
                            </svg>
                          </div>
                        </div>
                      </div>
                    </Link>
                  </li>
                );
              })}
            </ul>
          </div>
        )}
      </div>
    </div>
  );
}