import { Link } from 'react-router-dom';
import { useAuthStore } from '../lib/auth';
import { useJobs, useProductionQueueStats, useBriefs } from '../hooks/useJob';
import { StatusBadge } from '../components/StatusBadge';
import type { Job } from '../types/api';

export function Dashboard() {
  const { user, isAuthenticated } = useAuthStore();
  const { data: jobsData, isLoading, error } = useJobs({
    mine: user?.role === 'client'
  }, {
    enabled: isAuthenticated && !!user
  });
  const { data: queueStats } = useProductionQueueStats();
  const { data: briefsData } = useBriefs();

  const jobs = jobsData?.jobs || [];

  const ACTIVE_STATUSES = ['created', 'ingesting', 'ai_processing', 'translating', 'tts_generating', 'rendering_video', 'rendering_qc', 'pending_qc', 'qc_feedback', 'pending_final_review'];
  const now = Date.now();
  const MS_24H = 24 * 60 * 60 * 1000;

  const stats = {
    total: jobs.length,
    pending: jobs.filter((j: Job) => ['created', 'ingesting', 'ai_processing', 'translating', 'tts_generating', 'rendering_video', 'rendering_qc'].includes(j.status)).length,
    inQC: jobs.filter((j: Job) => ['pending_qc', 'qc_feedback'].includes(j.status)).length,
    completed: jobs.filter((j: Job) => j.status === 'completed').length,
    finalReview: jobs.filter((j: Job) => j.status === 'pending_final_review').length,
    aiProcessing: jobs.filter((j: Job) => ['ingesting', 'ai_processing', 'translating', 'tts_generating', 'rendering_video'].includes(j.status)).length,
    failed: jobs.filter((j: Job) => ['tts_failed', 'render_failed'].includes(j.status)).length,
    overdue: jobs.filter((j: Job) => j.deadline && new Date(j.deadline).getTime() < now && !['completed', 'rejected'].includes(j.status)).length,
    stuck: jobs.filter((j: Job) => ACTIVE_STATUSES.includes(j.status) && (now - new Date(j.updated_at).getTime()) > MS_24H).length,
    awaitingUpload: (briefsData ?? []).filter(b => b.status === 'submitted').length,
    pendingQcHandoff: jobs.filter((j: Job) => j.status === 'ai_processing' && !(j.language_qc && Object.keys(j.language_qc).length > 0)).length,
  };

  const renderRoleSpecificContent = () => {
    switch (user?.role) {
      case 'client':
        return (
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {/* Quick Upload Section */}
            <div className="bg-gradient-to-br from-blue-500 via-blue-600 to-purple-700 rounded-2xl p-8 text-white">
              <div className="flex items-center mb-4">
                <div className="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center mr-4">
                  <span className="text-2xl">🚀</span>
                </div>
                <h2 className="text-2xl font-bold">Quick Upload</h2>
              </div>
              <p className="text-blue-100 mb-6 leading-relaxed">
                Transform your videos into accessible content with AI-powered captions, audio descriptions, and multi-language support.
              </p>
              <Link
                to="/jobs/new"
                className="inline-flex items-center bg-white text-blue-600 px-6 py-3 rounded-lg hover:bg-blue-50 transition-all duration-200 font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
              >
                <span className="mr-2">📤</span>
                Upload New Video
              </Link>
            </div>

            {/* Feature Highlights */}
            <div className="space-y-6">
              <h3 className="text-xl font-bold text-gray-900 mb-4">✨ Platform Features</h3>
              <div className="space-y-4">
                <div className="flex items-start space-x-4 p-4 bg-white rounded-xl border border-gray-100 shadow-sm">
                  <div className="w-10 h-10 bg-gradient-to-br from-green-400 to-green-600 rounded-lg flex items-center justify-center flex-shrink-0">
                    <span className="text-white">🤖</span>
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-1">AI-Powered Processing</h4>
                    <p className="text-gray-600 text-sm">Advanced machine learning generates accurate captions and descriptions</p>
                  </div>
                </div>
                <div className="flex items-start space-x-4 p-4 bg-white rounded-xl border border-gray-100 shadow-sm">
                  <div className="w-10 h-10 bg-gradient-to-br from-purple-400 to-purple-600 rounded-lg flex items-center justify-center flex-shrink-0">
                    <span className="text-white">🌍</span>
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-1">Multi-Language Support</h4>
                    <p className="text-gray-600 text-sm">Professional translation services for 50+ languages</p>
                  </div>
                </div>
                <div className="flex items-start space-x-4 p-4 bg-white rounded-xl border border-gray-100 shadow-sm">
                  <div className="w-10 h-10 bg-gradient-to-br from-orange-400 to-red-500 rounded-lg flex items-center justify-center flex-shrink-0">
                    <span className="text-white">👁️</span>
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-1">Quality Assurance</h4>
                    <p className="text-gray-600 text-sm">Human reviewers ensure perfect accessibility compliance</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        );
      
      case 'project_manager':
        return (
          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
            <Link
              to="/admin/final"
              className="group bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl p-6 text-white hover:shadow-xl transition-all duration-200 transform hover:-translate-y-0.5"
            >
              <div className="flex items-center mb-3">
                <div className="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center mr-3">
                  <span className="text-xl">✅</span>
                </div>
                <h3 className="text-lg font-bold">Final Review</h3>
              </div>
              <p className="text-3xl font-bold mb-1">{stats.finalReview}</p>
              <p className="text-indigo-100 text-sm mb-4">awaiting your approval</p>
              <p className="text-sm font-semibold text-white/80 group-hover:text-white">Review now →</p>
            </Link>

            <Link
              to="/admin/qc"
              className="group bg-gradient-to-br from-amber-400 to-orange-500 rounded-2xl p-6 text-white hover:shadow-xl transition-all duration-200 transform hover:-translate-y-0.5"
            >
              <div className="flex items-center mb-3">
                <div className="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center mr-3">
                  <span className="text-xl">🔍</span>
                </div>
                <h3 className="text-lg font-bold">In QC Review</h3>
              </div>
              <p className="text-3xl font-bold mb-1">{stats.inQC}</p>
              <p className="text-amber-100 text-sm mb-4">languages being reviewed</p>
              <p className="text-sm font-semibold text-white/80 group-hover:text-white">View QC queue →</p>
            </Link>

            <Link
              to="/jobs/new"
              className="group bg-gradient-to-br from-green-400 to-emerald-600 rounded-2xl p-6 text-white hover:shadow-xl transition-all duration-200 transform hover:-translate-y-0.5"
            >
              <div className="flex items-center mb-3">
                <div className="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center mr-3">
                  <span className="text-xl">📤</span>
                </div>
                <h3 className="text-lg font-bold">New Job</h3>
              </div>
              <p className="text-green-100 text-sm mb-4">
                Upload a new video and configure accessibility outputs
              </p>
              <p className="text-sm font-semibold text-white/80 group-hover:text-white">Upload now →</p>
            </Link>

            <Link
              to="/jobs?overdue=true"
              className={`group rounded-2xl p-6 text-white hover:shadow-xl transition-all duration-200 transform hover:-translate-y-0.5 ${stats.overdue > 0 ? 'bg-gradient-to-br from-red-500 to-rose-700' : 'bg-gradient-to-br from-gray-400 to-gray-500'}`}
            >
              <div className="flex items-center mb-3">
                <div className="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center mr-3">
                  <span className="text-xl">{stats.overdue > 0 ? '⏰' : '✓'}</span>
                </div>
                <h3 className="text-lg font-bold">Overdue</h3>
              </div>
              <p className="text-3xl font-bold mb-1">{stats.overdue}</p>
              <p className="text-white/80 text-sm mb-4">past deadline, not completed</p>
              <p className="text-sm font-semibold text-white/80 group-hover:text-white">View overdue →</p>
            </Link>

            <Link
              to="/jobs?stuck=true"
              className={`group rounded-2xl p-6 text-white hover:shadow-xl transition-all duration-200 transform hover:-translate-y-0.5 ${stats.stuck > 0 ? 'bg-gradient-to-br from-yellow-500 to-amber-700' : 'bg-gradient-to-br from-gray-400 to-gray-500'}`}
            >
              <div className="flex items-center mb-3">
                <div className="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center mr-3">
                  <span className="text-xl">{stats.stuck > 0 ? '🐢' : '✓'}</span>
                </div>
                <h3 className="text-lg font-bold">Stuck &gt; 24h</h3>
              </div>
              <p className="text-3xl font-bold mb-1">{stats.stuck}</p>
              <p className="text-white/80 text-sm mb-4">no progress in over 24 hours</p>
              <p className="text-sm font-semibold text-white/80 group-hover:text-white">Investigate →</p>
            </Link>
          </div>
        );

      case 'production':
        return (
          <>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="bg-gradient-to-br from-blue-500 via-blue-600 to-indigo-700 rounded-2xl p-8 text-white">
              <div className="flex items-center mb-4">
                <div className="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center mr-4">
                  <span className="text-2xl">⚙️</span>
                </div>
                <h2 className="text-2xl font-bold">AI Pipeline</h2>
              </div>
              <p className="text-blue-100 mb-2 text-lg font-semibold">
                {stats.aiProcessing} jobs processing
              </p>
              <p className="text-blue-100 mb-6 leading-relaxed">
                Monitor ingestion, transcription, translation, and rendering across all active jobs.
              </p>
              <Link
                to="/jobs?status=ingesting,ai_processing,translating,tts_generating,rendering_video"
                className="inline-flex items-center bg-white text-blue-600 px-6 py-3 rounded-lg hover:bg-blue-50 transition-all duration-200 font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
              >
                View pipeline →
              </Link>
            </div>

            <div className={`bg-gradient-to-br ${stats.awaitingUpload > 0 ? 'from-violet-500 to-purple-700' : 'from-gray-400 to-gray-500'} rounded-2xl p-8 text-white`}>
              <div className="flex items-center mb-4">
                <div className="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center mr-4">
                  <span className="text-2xl">📥</span>
                </div>
                <h2 className="text-2xl font-bold">Awaiting Upload</h2>
              </div>
              <p className="text-white/80 mb-2 text-lg font-semibold">
                {stats.awaitingUpload} submitted brief{stats.awaitingUpload !== 1 ? 's' : ''} need video
              </p>
              <p className="text-white/70 mb-6 leading-relaxed">
                Briefs approved by client but video not yet uploaded.
              </p>
              {stats.awaitingUpload > 0 && (
                <Link
                  to="/briefs?status=submitted"
                  className="inline-flex items-center bg-white text-purple-600 px-6 py-3 rounded-lg hover:bg-purple-50 transition-all duration-200 font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
                >
                  View briefs →
                </Link>
              )}
            </div>

            <div className={`bg-gradient-to-br ${stats.pendingQcHandoff > 0 ? 'from-orange-400 to-amber-600' : 'from-gray-400 to-gray-500'} rounded-2xl p-8 text-white`}>
              <div className="flex items-center mb-4">
                <div className="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center mr-4">
                  <span className="text-2xl">🔄</span>
                </div>
                <h2 className="text-2xl font-bold">Pending QC Handoff</h2>
              </div>
              <p className="text-white/80 mb-2 text-lg font-semibold">
                {stats.pendingQcHandoff} job{stats.pendingQcHandoff !== 1 ? 's' : ''} awaiting linguist
              </p>
              <p className="text-white/70 mb-6 leading-relaxed">
                AI processing complete but no linguist assigned yet.
              </p>
              {stats.pendingQcHandoff > 0 && (
                <Link
                  to="/jobs?status=ai_processing"
                  className="inline-flex items-center bg-white text-amber-600 px-6 py-3 rounded-lg hover:bg-amber-50 transition-all duration-200 font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
                >
                  Assign now →
                </Link>
              )}
            </div>

            <div className={`bg-gradient-to-br ${stats.failed > 0 ? 'from-red-500 to-red-700' : 'from-gray-400 to-gray-500'} rounded-2xl p-8 text-white`}>
              <div className="flex items-center mb-4">
                <div className="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center mr-4">
                  <span className="text-2xl">{stats.failed > 0 ? '🚨' : '✓'}</span>
                </div>
                <h2 className="text-2xl font-bold">Failures</h2>
              </div>
              <p className="text-white/80 mb-2 text-lg font-semibold">
                {stats.failed} jobs need attention
              </p>
              <p className="text-white/70 mb-6 leading-relaxed">
                {stats.failed > 0
                  ? 'Jobs failed during processing. Click to retry or investigate.'
                  : 'No failures. All systems running normally.'}
              </p>
              {stats.failed > 0 && (
                <Link
                  to="/jobs?status=tts_failed,render_failed"
                  className="inline-flex items-center bg-white text-red-600 px-6 py-3 rounded-lg hover:bg-red-50 transition-all duration-200 font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
                >
                  Investigate →
                </Link>
              )}
            </div>
          </div>

          {/* Queue depth panel — refreshes every 10s */}
          {queueStats && (
            <div className="mt-6 bg-white border border-gray-200 rounded-xl p-5 shadow-sm">
              <div className="flex items-center justify-between mb-3">
                <h3 className="text-sm font-semibold text-gray-700">Celery Queue Depth</h3>
                <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${queueStats.total_pending > 0 ? 'bg-blue-100 text-blue-700' : 'bg-green-100 text-green-700'}`}>
                  {queueStats.total_pending} pending
                </span>
              </div>
              <div className="grid grid-cols-4 gap-3">
                {Object.entries(queueStats.queues)
                  .sort(([a], [b]) => a.localeCompare(b))
                  .map(([queue, count]) => (
                    <div key={queue} className="flex flex-col items-center bg-gray-50 rounded-lg p-2">
                      <span className={`text-lg font-bold ${count > 0 ? 'text-blue-600' : 'text-gray-400'}`}>{count}</span>
                      <span className="text-xs text-gray-500 mt-0.5">{queue}</span>
                    </div>
                  ))}
              </div>
            </div>
          )}
          </>
        );

      case 'reviewer':
      case 'linguist':
      case 'admin':
        return (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="bg-gradient-to-br from-yellow-400 via-orange-500 to-red-500 rounded-2xl p-8 text-white">
              <div className="flex items-center mb-4">
                <div className="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center mr-4">
                  <span className="text-2xl">🔍</span>
                </div>
                <h2 className="text-2xl font-bold">Quality Control</h2>
              </div>
              <p className="text-orange-100 mb-2 text-lg font-semibold">
                {stats.inQC} jobs awaiting review
              </p>
              <p className="text-orange-100 mb-6 leading-relaxed">
                Review AI-generated content for accuracy and compliance with accessibility standards.
              </p>
              <Link
                to="/admin/qc"
                className="inline-flex items-center bg-white text-orange-600 px-6 py-3 rounded-lg hover:bg-orange-50 transition-all duration-200 font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
              >
                Start Reviewing →
              </Link>
            </div>
            
            <div className="bg-gradient-to-br from-green-400 via-emerald-500 to-teal-600 rounded-2xl p-8 text-white">
              <div className="flex items-center mb-4">
                <div className="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center mr-4">
                  <span className="text-2xl">✅</span>
                </div>
                <h2 className="text-2xl font-bold">Final Approval</h2>
              </div>
              <p className="text-green-100 mb-2 text-lg font-semibold">
                Jobs ready for delivery
              </p>
              <p className="text-green-100 mb-6 leading-relaxed">
                Complete the final review process and approve jobs for client delivery.
              </p>
              <Link
                to="/admin/final"
                className="inline-flex items-center bg-white text-green-600 px-6 py-3 rounded-lg hover:bg-green-50 transition-all duration-200 font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
              >
                Review Finals →
              </Link>
            </div>
          </div>
        );
      
      default:
        return null;
    }
  };

  return (
    <div className="p-8">
      {/* Welcome Header */}
      <div className="mb-8">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold text-gray-900 mb-2">
              Welcome back, {user?.email?.split('@')[0] || 'User'}! 👋
            </h1>
            <p className="text-gray-600 text-lg">
              Here's what's happening with your video accessibility projects
            </p>
          </div>
          
          <div className="hidden md:flex items-center space-x-4">
            <div className="text-right">
              <p className="text-sm text-gray-500">Today</p>
              <p className="text-lg font-semibold text-gray-900">
                {new Date().toLocaleDateString('en-US', { 
                  weekday: 'long',
                  month: 'short', 
                  day: 'numeric' 
                })}
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <Link
          to="/jobs"
          className="group bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-lg hover:border-gray-200 transition-all duration-200 transform hover:-translate-y-1"
        >
          <div className="flex items-center justify-between">
            <div>
              <div className="flex items-center space-x-3 mb-3">
                <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center">
                  <span className="text-white text-lg">📋</span>
                </div>
                <h3 className="text-sm font-medium text-gray-500">Total Jobs</h3>
              </div>
              <p className="text-3xl font-bold text-gray-900 mb-1">{stats.total}</p>
              <p className="text-sm text-blue-600 group-hover:text-blue-700 font-medium">View all →</p>
            </div>
          </div>
        </Link>
        
        <Link
          to="/jobs?status=created,ingesting,ai_processing,translating,tts_generating,rendering_video,rendering_qc"
          className="group bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-lg hover:border-gray-200 transition-all duration-200 transform hover:-translate-y-1"
        >
          <div className="flex items-center justify-between">
            <div>
              <div className="flex items-center space-x-3 mb-3">
                <div className="w-10 h-10 bg-gradient-to-br from-orange-500 to-red-500 rounded-lg flex items-center justify-center">
                  <span className="text-white text-lg">⚙️</span>
                </div>
                <h3 className="text-sm font-medium text-gray-500">Processing</h3>
              </div>
              <p className="text-3xl font-bold text-gray-900 mb-1">{stats.pending}</p>
              <p className="text-sm text-orange-600 group-hover:text-orange-700 font-medium">View processing →</p>
            </div>
          </div>
        </Link>
        
        <Link
          to={user?.role === 'client' ? '/jobs?status=pending_qc,qc_feedback' : '/admin/qc'}
          className="group bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-lg hover:border-gray-200 transition-all duration-200 transform hover:-translate-y-1"
        >
          <div className="flex items-center justify-between">
            <div>
              <div className="flex items-center space-x-3 mb-3">
                <div className="w-10 h-10 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-lg flex items-center justify-center">
                  <span className="text-white text-lg">🔍</span>
                </div>
                <h3 className="text-sm font-medium text-gray-500">In QC Review</h3>
              </div>
              <p className="text-3xl font-bold text-gray-900 mb-1">{stats.inQC}</p>
              <p className="text-sm text-yellow-600 group-hover:text-yellow-700 font-medium">
                {user?.role === 'client' ? 'View in QC →' : 'Review now →'}
              </p>
            </div>
          </div>
        </Link>
        
        <Link
          to="/jobs?status=completed"
          className="group bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-lg hover:border-gray-200 transition-all duration-200 transform hover:-translate-y-1"
        >
          <div className="flex items-center justify-between">
            <div>
              <div className="flex items-center space-x-3 mb-3">
                <div className="w-10 h-10 bg-gradient-to-br from-green-500 to-emerald-600 rounded-lg flex items-center justify-center">
                  <span className="text-white text-lg">✅</span>
                </div>
                <h3 className="text-sm font-medium text-gray-500">Completed</h3>
              </div>
              <p className="text-3xl font-bold text-gray-900 mb-1">{stats.completed}</p>
              <p className="text-sm text-green-600 group-hover:text-green-700 font-medium">View completed →</p>
            </div>
          </div>
        </Link>
      </div>

      {/* Role-specific content */}
      {renderRoleSpecificContent()}

      {/* Recent Jobs */}
      <div className="mt-8">
        <div className="flex items-center justify-between mb-6">
          <h2 className="text-2xl font-bold text-gray-900">Recent Activity</h2>
          {jobs.length > 0 && (
            <Link
              to={user?.role === 'client' ? '/jobs' : '/admin/qc'}
              className="text-blue-600 hover:text-blue-700 font-medium flex items-center"
            >
              View all jobs
              <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </Link>
          )}
        </div>

        <div className="bg-white rounded-2xl shadow-sm border border-gray-100">
          {isLoading ? (
            <div className="p-8">
              <div className="animate-pulse space-y-6">
                {[1, 2, 3].map((i) => (
                  <div key={i} className="flex items-center space-x-4">
                    <div className="w-12 h-12 bg-gray-200 rounded-xl"></div>
                    <div className="flex-1 space-y-2">
                      <div className="h-4 bg-gray-200 rounded w-3/4"></div>
                      <div className="h-3 bg-gray-200 rounded w-1/2"></div>
                    </div>
                    <div className="w-20 h-6 bg-gray-200 rounded-full"></div>
                  </div>
                ))}
              </div>
            </div>
          ) : error ? (
            <div className="p-8 text-center">
              <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <span className="text-2xl">⚠️</span>
              </div>
              <p className="text-red-600 font-medium">Error loading jobs. Please try again.</p>
            </div>
          ) : jobs.length === 0 ? (
            <div className="p-8 text-center">
              <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <span className="text-2xl">📋</span>
              </div>
              <h3 className="text-lg font-semibold text-gray-900 mb-2">No jobs yet</h3>
              <p className="text-gray-500 mb-4">
                {['client', 'admin'].includes(user?.role || '') 
                  ? 'Upload your first video to get started!' 
                  : 'No jobs to review at this time.'}
              </p>
              {['client', 'admin'].includes(user?.role || '') && (
                <Link
                  to="/jobs/new"
                  className="inline-flex items-center bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors font-medium"
                >
                  <span className="mr-2">📤</span>
                  Upload Your First Video
                </Link>
              )}
            </div>
          ) : (
            <div className="divide-y divide-gray-100">
              {jobs.slice(0, 5).map((job: Job, index) => (
                <Link
                  key={job.id}
                  to={`/jobs/${job.id}`}
                  className="block p-6 hover:bg-gray-50 transition-colors"
                >
                  <div className="flex items-center space-x-4">
                    <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center flex-shrink-0">
                      <span className="text-white font-bold text-sm">
                        {(index + 1).toString().padStart(2, '0')}
                      </span>
                    </div>
                    <div className="flex-1 min-w-0">
                      <h3 className="font-semibold text-gray-900 mb-1 truncate">{job.title}</h3>
                      <div className="flex items-center space-x-4 text-sm text-gray-500">
                        <span>Created {new Date(job.created_at).toLocaleDateString()}</span>
                        {job.source?.original_filename && (
                          <span>• {job.source.original_filename}</span>
                        )}
                      </div>
                    </div>
                    <div className="flex items-center space-x-3">
                      <StatusBadge status={job.status} />
                      <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                      </svg>
                    </div>
                  </div>
                </Link>
              ))}
            </div>
          )}
          
          {jobs.length > 5 && (
            <div className="p-4 bg-gray-50 border-t border-gray-100 rounded-b-2xl">
              <Link
                to={user?.role === 'client' ? '/jobs' : '/admin/qc'}
                className="block text-center text-blue-600 hover:text-blue-700 font-medium"
              >
                View {jobs.length - 5} more jobs →
              </Link>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}