"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Badge } from "@/components/ui/badge";

type BadgeVariant = "default" | "secondary" | "destructive" | "outline" | "ghost" | "link";

interface Stage {
  id: string;
  name: string;
  prob?: number | null;
  sortOrder?: number | null;
}

interface Pipeline {
  id: string;
  name: string;
}

interface StagesViewerDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  pipeline: Pipeline | null;
  stages: Stage[];
}

function stageBadgeVariant(stage: Stage): BadgeVariant {
  if (stage.prob === null || stage.prob === undefined) return "secondary";
  if (stage.prob >= 80) return "default";
  if (stage.prob >= 50) return "secondary";
  return "outline";
}

export function StagesViewerDialog({
  open,
  onOpenChange,
  pipeline,
  stages,
}: StagesViewerDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[480px] rounded-2xl">
        <DialogHeader>
          <DialogTitle className="font-['Lexend'] pr-8">
            {pipeline?.name ?? "Pipeline stages"}
          </DialogTitle>
          <DialogDescription>
            {pipeline
              ? `${stages.length} stage${stages.length === 1 ? "" : "s"} in this pipeline.`
              : ""}
          </DialogDescription>
        </DialogHeader>
        <div className="flex flex-wrap gap-2 py-2 max-h-[min(60vh,420px)] overflow-y-auto scrollbar-themed">
          {stages?.map((stage) => (
            <Badge
              key={`${pipeline?.id}-${stage.id}`}
              variant={'ghost'}
              className="max-w-full rounded-full text-[11px] font-semibold font-['Lexend_Deca'] whitespace-normal text-left h-auto min-h-7 py-1 leading-tight border-border/80"
            >
              {stage.name}
            </Badge>
          ))}
          
        </div>
        <DialogFooter>
          <Button
            type="button"
            variant="outline"
            className="rounded-xl"
            onClick={() => onOpenChange(false)}
          >
            Close
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}