import { useJobs, useToggleJob, useTriggerJob } from '../../hooks/useAdmin';
import { SkeletonTable } from '../ui/Skeleton';

function formatNextRun(iso: string | null): string {
  if (!iso) return '—';
  const d = new Date(iso);
  const now = new Date();
  const diffMs = d.getTime() - now.getTime();
  if (diffMs < 0) return 'imminent';
  const mins = Math.round(diffMs / 60_000);
  if (mins < 60) return `in ${mins}m`;
  const hrs = Math.round(mins / 60);
  return `in ${hrs}h`;
}

function formatAgo(iso: string | null | undefined): string {
  if (!iso) return '';
  const mins = Math.floor((Date.now() - new Date(iso).getTime()) / 60_000);
  if (mins < 1) return 'just now';
  if (mins < 60) return `${mins}m ago`;
  const hrs = Math.floor(mins / 60);
  if (hrs < 24) return `${hrs}h ago`;
  return `${Math.floor(hrs / 24)}d ago`;
}

function lastRunColor(status: string | null | undefined): string {
  if (status === 'error') return 'text-red-300';
  if (status === 'rate_limited') return 'text-amber-300';
  return 'text-gray-500';
}

export function JobControls() {
  const { data: jobs, isLoading } = useJobs();
  const toggleJob = useToggleJob();
  const triggerJob = useTriggerJob();
  const anyJobRunning = (jobs ?? []).some((job) => job.running);
  const runningJob = jobs?.find((job) => job.running);
  const pausedJob = jobs?.find((job) => !job.running && job.runtime_status === 'rate_limited');
  const runningJobLabel = runningJob?.label;

  if (isLoading) return <SkeletonTable rows={4} cols={3} />;

  return (
    <div className="space-y-3">
      {runningJob && (
        <div className="rounded-xl border border-blue-400/30 bg-blue-500/10 px-4 py-3">
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div>
              <div className="text-xs font-semibold text-blue-300">
                Active job: {runningJob.label}
              </div>
              <div className="mt-0.5 text-[11px] text-blue-100/80">
                Manual triggers are blocked until this run finishes.
              </div>
            </div>
            <div className="text-[11px] text-blue-200">
              {runningJob.runtime_processed ?? 0}
              {typeof runningJob.runtime_total === 'number'
                ? ` / ${runningJob.runtime_total}`
                : ''}
            </div>
          </div>
          <div className="mt-2 h-1.5 w-full rounded-full bg-slate-700/80 overflow-hidden">
            <div
              className="h-full bg-blue-400 transition-all duration-500"
              style={{
                width: `${
                  typeof runningJob.runtime_progress_pct === 'number'
                    ? Math.max(5, Math.min(100, runningJob.runtime_progress_pct))
                    : 30
                }%`,
              }}
            />
          </div>
          {runningJob.runtime_current_ticker && (
            <div className="mt-1 text-[11px] text-blue-100/80">
              Current: {runningJob.runtime_current_ticker}
            </div>
          )}
          {runningJob.runtime_message && (
            <div className="mt-1 text-[11px] text-blue-100/80">
              {runningJob.runtime_message}
            </div>
          )}
        </div>
      )}

      {!runningJob && pausedJob && (
        <div className="rounded-xl border border-amber-400/30 bg-amber-500/10 px-4 py-3">
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div>
              <div className="text-xs font-semibold text-amber-300">
                Last run paused: {pausedJob.label}
              </div>
              <div className="mt-0.5 text-[11px] text-amber-100/90">
                {pausedJob.runtime_message || 'Rate limit hit. The collector stopped early and will resume from last progress on the next run.'}
              </div>
            </div>
            <div className="text-[11px] text-amber-200">
              {pausedJob.runtime_processed ?? 0}
              {typeof pausedJob.runtime_total === 'number'
                ? ` / ${pausedJob.runtime_total}`
                : ''}
            </div>
          </div>
        </div>
      )}

      {jobs?.map((job) => (
        <div key={job.name} className="glass p-4 glass-hover">
          <div className="flex flex-wrap items-center justify-between gap-4">
            <div className="flex items-center gap-3">
              {/* Status dot */}
              <span
                className={`inline-block h-2.5 w-2.5 rounded-full shrink-0 ${
                  job.running
                    ? 'bg-blue-400 shadow-lg shadow-blue-400/40'
                    : job.enabled
                    ? 'bg-emerald-400 shadow-lg shadow-emerald-400/40'
                    : 'bg-gray-500'
                }`}
              />
              <div>
                <span className="text-sm font-medium text-gray-200">{job.label}</span>
                <div className="flex items-center gap-3 mt-0.5">
                  <span
                    className={`text-[11px] font-medium ${
                      job.running
                        ? 'text-blue-300'
                        : job.runtime_status === 'rate_limited'
                          ? 'text-amber-300'
                          : job.runtime_status === 'error'
                            ? 'text-red-300'
                            : job.enabled
                              ? 'text-emerald-400'
                              : 'text-gray-500'
                    }`}
                  >
                    {job.running
                      ? 'Running'
                      : job.runtime_status === 'rate_limited'
                        ? 'Paused (rate-limited)'
                        : job.runtime_status === 'error'
                          ? 'Last run error'
                          : job.enabled
                            ? 'Active'
                            : 'Inactive'}
                  </span>
                  {job.enabled && job.next_run_at && (
                    <span className="text-[11px] text-gray-500">
                      Next run {formatNextRun(job.next_run_at)}
                    </span>
                  )}
                  {!job.registered && (
                    <span className="text-[11px] text-red-400">Not registered</span>
                  )}
                </div>
                {!job.running && job.runtime_finished_at && (
                  <div className={`mt-1 text-[11px] ${lastRunColor(job.runtime_status)}`}>
                    Last run {formatAgo(job.runtime_finished_at)}
                    {job.runtime_status ? ` · ${job.runtime_status}` : ''}
                    {job.runtime_message ? ` — ${job.runtime_message}` : ''}
                  </div>
                )}
                {job.running && (
                  <div className="mt-2 space-y-1.5">
                    <div className="flex items-center justify-between text-[11px] text-gray-400">
                      <span>
                        {job.runtime_processed ?? 0}
                        {typeof job.runtime_total === 'number' ? ` / ${job.runtime_total}` : ''}
                        {' '}processed
                      </span>
                      {typeof job.runtime_progress_pct === 'number' && (
                        <span>{Math.max(0, Math.min(100, job.runtime_progress_pct)).toFixed(0)}%</span>
                      )}
                    </div>
                    <div className="h-1.5 w-56 rounded-full bg-slate-700/80 overflow-hidden">
                      <div
                        className="h-full bg-blue-400 transition-all duration-500"
                        style={{
                          width: `${
                            typeof job.runtime_progress_pct === 'number'
                              ? Math.max(5, Math.min(100, job.runtime_progress_pct))
                              : 30
                          }%`,
                        }}
                      />
                    </div>
                    {job.runtime_current_ticker && (
                      <div className="text-[11px] text-gray-500">Current: {job.runtime_current_ticker}</div>
                    )}
                  </div>
                )}
              </div>
            </div>

            <div className="flex items-center gap-2">
              <button
                type="button"
                onClick={() => toggleJob.mutate({ jobName: job.name, enabled: !job.enabled })}
                disabled={toggleJob.isPending}
                className={`rounded-lg border px-3 py-1.5 text-xs transition-all duration-200 disabled:opacity-50 ${
                  job.enabled
                    ? 'border-red-500/20 bg-red-500/10 text-red-400 hover:bg-red-500/20'
                    : 'border-emerald-500/20 bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20'
                }`}
              >
                {job.enabled ? 'Disable' : 'Enable'}
              </button>
              <button
                type="button"
                onClick={() => triggerJob.mutate(job.name)}
                disabled={triggerJob.isPending || !job.enabled || anyJobRunning}
                className="btn-primary px-3 py-1.5 text-xs disabled:opacity-50 disabled:cursor-not-allowed"
              >
                <span>
                  {job.running
                    ? 'Running…'
                    : triggerJob.isPending
                      ? 'Triggering…'
                      : anyJobRunning
                        ? 'Blocked'
                        : 'Trigger Now'}
                </span>
              </button>
            </div>
          </div>
          {anyJobRunning && !job.running && (
            <div className="mt-2 text-[11px] text-gray-500">
              Manual trigger blocked while {runningJobLabel ?? 'another job'} is running.
            </div>
          )}
        </div>
      ))}
    </div>
  );
}