"use client";

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
import { getLengthIndicatorColor } from "@/lib/analysis";

interface LengthIndicatorProps {
  length: number;
  type: "title" | "description";
}

const TITLE_THRESHOLDS = {
  good: { min: 30, max: 60 },
  ok: { min: 15, max: 70 },
};

const DESCRIPTION_THRESHOLDS = {
  good: { min: 120, max: 158 },
  ok: { min: 50, max: 170 },
};

export function LengthIndicator({ length, type }: LengthIndicatorProps) {
  const color = getLengthIndicatorColor(length, type);

  const colorClassMap = {
    green: "bg-green-500",
    yellow: "bg-yellow-500",
    red: "bg-red-500",
    gray: "bg-gray-400",
  };

  const thresholds =
    type === "title" ? TITLE_THRESHOLDS : DESCRIPTION_THRESHOLDS;
  let tooltipText = "Length is not optimal";

  if (length === 0) {
    tooltipText = "Not found";
  } else if (length >= thresholds.good.min && length <= thresholds.good.max) {
    tooltipText = "Optimal length";
  } else if (length >= thresholds.ok.min && length <= thresholds.ok.max) {
    tooltipText = "Length could be improved";
  } else if (length < thresholds.ok.min) {
    tooltipText = "Too short";
  } else if (length > thresholds.ok.max) {
    tooltipText = "Too long";
  }

  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <div className={cn("h-3 w-3 rounded-full", colorClassMap[color])} />
        </TooltipTrigger>
        <TooltipContent>
          <p>
            {tooltipText} ({length} characters)
          </p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}