"use client";

import { CheckCircle2, CircleAlert, Loader2, PauseCircle } from "lucide-react";

import { Progress } from "@/components/ui/progress";

export type ProcessingState = "idle" | "queued" | "processing" | "success" | "error";

interface ProcessingStatusProps {
  state: ProcessingState;
  label?: string;
  details?: string;
  progress?: number;
}

export function ProcessingStatus({
  state,
  label,
  details,
  progress = 0
}: ProcessingStatusProps) {
  if (state === "idle") {
    return (
      <div className="rounded-xl border border-white/10 bg-white/5 p-3 text-sm text-slate-400" role="status" aria-live="polite">
        <div className="flex items-center gap-2">
          <PauseCircle className="size-4" />
          {label ?? "No active processing job"}
        </div>
      </div>
    );
  }

  if (state === "success") {
    return (
      <div className="rounded-xl border border-emerald-300/30 bg-emerald-500/10 p-3 text-sm text-emerald-100" role="status" aria-live="polite">
        <div className="flex items-center gap-2">
          <CheckCircle2 className="size-4" />
          {label ?? "Processing complete"}
        </div>
        {details ? <p className="mt-1 text-xs text-emerald-100/90">{details}</p> : null}
      </div>
    );
  }

  if (state === "error") {
    return (
      <div className="rounded-xl border border-red-300/35 bg-red-500/15 p-3 text-sm text-red-100" role="alert" aria-live="assertive">
        <div className="flex items-center gap-2">
          <CircleAlert className="size-4" />
          {label ?? "Processing failed"}
        </div>
        {details ? <p className="mt-1 text-xs text-red-100/90">{details}</p> : null}
      </div>
    );
  }

  const isQueued = state === "queued";
  const boundedProgress = Math.min(100, Math.max(0, progress));

  return (
    <div className="rounded-xl border border-white/10 bg-white/5 p-3" role="status" aria-live="polite">
      <div className="flex items-center gap-2 text-sm text-slate-200">
        <Loader2 className="size-4 animate-spin" />
        {label ?? (isQueued ? "Queued..." : "Processing...")}
      </div>
      <Progress className="mt-2 h-1.5 bg-slate-800" value={isQueued ? 8 : boundedProgress} />
      {details ? <p className="mt-2 text-xs text-slate-400">{details}</p> : null}
    </div>
  );
}
