import { Bot, FileText, History, Loader2, RefreshCw, Search, Target } from 'lucide-react';

import { Link } from '@inertiajs/react';

import type { ActiveJob } from '@/types';

interface GlobalJobNotificationsProps {
  jobs: ActiveJob[];
}

function JobIcon({ type, status }: { type: ActiveJob['type']; status: string }) {
  const iconClass =
    status === 'pending'
      ? 'h-4 w-4 text-warning'
      : 'h-4 w-4 text-blue-600 dark:text-blue-400 animate-spin';

  if (status === 'pending') {
    switch (type) {
      case 'ai_draft':
        return <Bot className={iconClass} aria-hidden="true" />;
      case 'analysis':
        return <Search className={iconClass} aria-hidden="true" />;
      case 'cannibalization':
        return <Target className={iconClass} aria-hidden="true" />;
      case 'topic_clustering':
        return <FileText className={iconClass} aria-hidden="true" />;
      case 'freshness_analysis':
        return <RefreshCw className={iconClass} aria-hidden="true" />;
      case 'batch_ai':
        return <History className={iconClass} aria-hidden="true" />;
      default:
        return <Search className={iconClass} aria-hidden="true" />;
    }
  }

  return <Loader2 className={iconClass} aria-hidden="true" />;
}

function formatTimeRemaining(seconds: number): string {
  if (seconds < 60) {
    return '< 1m';
  }

  const minutes = Math.floor(seconds / 60);
  const hours = Math.floor(minutes / 60);
  const days = Math.floor(hours / 24);

  if (days > 0) {
    const remainingHours = hours % 24;
    return remainingHours > 0 ? `${days}d ${remainingHours}h` : `${days}d`;
  }

  if (hours > 0) {
    const remainingMinutes = minutes % 60;
    return remainingMinutes > 0 ? `${hours}h ${remainingMinutes}m` : `${hours}h`;
  }

  return `${minutes}m`;
}

function jobLabel(job: ActiveJob): string {
  let baseLabel: string;

  switch (job.type) {
    case 'ai_draft': {
      const progress = job.total > 0 ? ` (${job.completed}/${job.total})` : '';
      baseLabel =
        job.status === 'pending' ? `Drafts queued${progress}` : `Generating drafts${progress}`;
      break;
    }
    case 'analysis':
      baseLabel =
        job.status === 'pending'
          ? 'Analysis queued'
          : 'Comparing traffic patterns across your pages...';
      break;
    case 'cannibalization':
      baseLabel =
        job.status === 'pending'
          ? 'Cannibalization detection queued'
          : 'Scanning for keyword cannibalization...';
      break;
    case 'topic_clustering':
      baseLabel =
        job.status === 'pending'
          ? 'Topic clustering queued'
          : 'Grouping pages into topic clusters...';
      break;
    case 'freshness_analysis':
      baseLabel =
        job.status === 'pending'
          ? 'Freshness analysis queued'
          : 'Detecting content decay patterns...';
      break;
    case 'batch_ai':
      baseLabel = job.status === 'pending' ? 'Batch AI queued' : 'Writing AI drafts in bulk...';
      break;
    default:
      baseLabel = job.status === 'pending' ? 'Job queued' : 'Processing...';
      break;
  }

  // Add ETA if available and job is processing
  if (job.status === 'processing' && job.estimated_seconds_remaining !== null) {
    return `${baseLabel} • ~${formatTimeRemaining(job.estimated_seconds_remaining)} remaining`;
  }

  return baseLabel;
}

function jobHref(job: ActiveJob): string {
  switch (job.type) {
    case 'ai_draft':
      return route('recommendations.index', job.site_id);
    case 'cannibalization':
      return route('cannibalization.index', job.site_id);
    case 'topic_clustering':
      return route('topic-clusters.index', job.site_id);
    case 'freshness_analysis':
      return route('freshness.index', job.site_id);
    case 'batch_ai':
      return route('batch-ai.index', job.site_id);
    case 'analysis':
    default:
      return route('analyze.index', job.site_id);
  }
}

export default function GlobalJobNotifications({ jobs }: GlobalJobNotificationsProps) {
  if (jobs.length === 0) return null;

  return (
    <div
      className="container pt-3"
      role="status"
      aria-live="polite"
      aria-label="Active background jobs"
    >
      <div className="flex flex-wrap gap-2">
        {jobs.map((job) => (
          <Link
            key={`${job.type}-${job.id}`}
            href={jobHref(job)}
            className="inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs font-medium transition-colors hover:bg-accent"
          >
            <JobIcon type={job.type} status={job.status} />
            <span className="text-muted-foreground">{job.site_name}:</span>
            <span>{jobLabel(job)}</span>
            {(job.type === 'ai_draft' || job.type === 'batch_ai') && job.progress_percent > 0 && (
              <div
                className="w-12 h-1.5 rounded-full bg-muted overflow-hidden"
                role="progressbar"
                aria-valuenow={job.progress_percent}
                aria-valuemin={0}
                aria-valuemax={100}
                aria-label={`${job.progress_percent}% complete`}
              >
                <div
                  className="h-full rounded-full bg-blue-600 dark:bg-blue-500 transition-all"
                  style={{ width: `${job.progress_percent}%` }}
                />
              </div>
            )}
          </Link>
        ))}
      </div>
    </div>
  );
}