'use client';

import { JOB_PROGRESS_STEPS, jobProgressStepIndex, type JobStatus } from '@ehandyhire/shared';
import { Check } from 'lucide-react';
import { cn } from '@/lib/utils';

interface JobStatusTimelineProps {
  status: JobStatus;
  workerMarkedCompleteAt?: string | null;
  className?: string;
}

export function JobStatusTimeline({
  status,
  workerMarkedCompleteAt,
  className,
}: JobStatusTimelineProps) {
  const current = jobProgressStepIndex(status);
  if (current < 0) return null;

  return (
    <section className={cn('rounded-xl border border-border bg-surface p-4 md:p-5', className)}>
      <h2 className="font-bold text-slate-900 mb-4">Job progress</h2>
      <ol className="flex items-center w-full">
        {JOB_PROGRESS_STEPS.map((step, index) => {
          const done = index < current;
          const active = index === current;
          const isLast = index === JOB_PROGRESS_STEPS.length - 1;

          return (
            <li
              key={step.status}
              className={cn('flex items-center', !isLast && 'flex-1')}
            >
              <div className="flex flex-col items-center gap-1.5 min-w-0">
                <div
                  className={cn(
                    'flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold transition-colors',
                    done && 'border-emerald-500 bg-emerald-500 text-white',
                    active && !done && 'border-primary bg-primary/10 text-primary',
                    !done && !active && 'border-slate-200 bg-white text-slate-400'
                  )}
                >
                  {done ? <Check className="h-4 w-4" /> : index + 1}
                </div>
                <span
                  className={cn(
                    'text-xs font-medium text-center max-w-[5.5rem]',
                    active ? 'text-slate-900' : 'text-muted'
                  )}
                >
                  {step.label}
                </span>
              </div>
              {!isLast && (
                <div
                  className={cn(
                    'h-0.5 flex-1 mx-2 mb-5',
                    index < current ? 'bg-emerald-500' : 'bg-slate-200'
                  )}
                />
              )}
            </li>
          );
        })}
      </ol>
      {status === 'IN_PROGRESS' && workerMarkedCompleteAt && (
        <p className="mt-3 text-sm text-amber-800 bg-amber-50 border border-amber-200 rounded-lg px-3 py-2">
          Worker marked this job as finished. Please confirm when you&apos;re satisfied with the work.
        </p>
      )}
      {status === 'COMPLETED' && (
        <p className="mt-3 text-sm text-emerald-800 bg-emerald-50 border border-emerald-200 rounded-lg px-3 py-2">
          This job is complete. You can leave a review for your worker below.
        </p>
      )}
    </section>
  );
}