"use client";

import { Flame, ThermometerSun, Snowflake } from "lucide-react";

export interface LeadScoreProps {
  score: number;
  showLabel?: boolean;
  showBreakdown?: boolean;
  breakdown?: {
    dataQuality: number;
    topicRelevance: number;
    engagement: number;
    conversionSignal: number;
  };
  size?: "sm" | "md" | "lg";
}

// Get tier info from score
function getTierInfo(score: number) {
  if (score > 80) {
    return {
      tier: "hot" as const,
      label: "Hot",
      color: "text-red-600",
      bgColor: "bg-red-100",
      borderColor: "border-red-200",
      Icon: Flame,
    };
  } else if (score >= 50) {
    return {
      tier: "warm" as const,
      label: "Warm",
      color: "text-orange-600",
      bgColor: "bg-orange-100",
      borderColor: "border-orange-200",
      Icon: ThermometerSun,
    };
  } else {
    return {
      tier: "cold" as const,
      label: "Cold",
      color: "text-blue-600",
      bgColor: "bg-blue-100",
      borderColor: "border-blue-200",
      Icon: Snowflake,
    };
  }
}

// Size configurations
const sizes = {
  sm: {
    badge: "px-1.5 py-0.5 text-xs",
    icon: "h-3 w-3",
    score: "text-xs",
  },
  md: {
    badge: "px-2 py-1 text-sm",
    icon: "h-4 w-4",
    score: "text-sm",
  },
  lg: {
    badge: "px-3 py-1.5 text-base",
    icon: "h-5 w-5",
    score: "text-base",
  },
};

export function LeadScoreBadge({
  score,
  showLabel = false,
  showBreakdown = false,
  breakdown,
  size = "md",
}: LeadScoreProps) {
  const { label, color, bgColor, borderColor, Icon } = getTierInfo(score);
  const sizeConfig = sizes[size];

  return (
    <div className="inline-flex flex-col items-start gap-1">
      {/* Badge */}
      <div
        className={`inline-flex items-center gap-1 rounded-full border ${bgColor} ${borderColor} ${sizeConfig.badge}`}
        title={`Lead Score: ${score}/100 (${label})`}
      >
        <Icon className={`${sizeConfig.icon} ${color}`} />
        <span className={`font-semibold ${color} ${sizeConfig.score}`}>
          {score}
        </span>
        {showLabel && (
          <span className={`font-medium ${color} ${sizeConfig.score}`}>
            {label}
          </span>
        )}
      </div>

      {/* Breakdown Tooltip (Optional) */}
      {showBreakdown && breakdown && (
        <div className="text-xs text-gray-500 space-y-0.5 p-2 bg-gray-50 rounded border border-gray-200">
          <div className="flex justify-between gap-4">
            <span>Data Quality:</span>
            <span className="font-medium">{breakdown.dataQuality}/25</span>
          </div>
          <div className="flex justify-between gap-4">
            <span>Topic Relevance:</span>
            <span className="font-medium">{breakdown.topicRelevance}/25</span>
          </div>
          <div className="flex justify-between gap-4">
            <span>Engagement:</span>
            <span className="font-medium">{breakdown.engagement}/25</span>
          </div>
          <div className="flex justify-between gap-4">
            <span>Conversion Signal:</span>
            <span className="font-medium">{breakdown.conversionSignal}/25</span>
          </div>
        </div>
      )}
    </div>
  );
}

// Mini version for list items
export function LeadScoreMini({ score }: { score: number }) {
  const { color, Icon } = getTierInfo(score);

  return (
    <div
      className={`inline-flex items-center gap-0.5 ${color}`}
      title={`Lead Score: ${score}`}
    >
      <Icon className="h-3 w-3" />
      <span className="text-xs font-semibold">{score}</span>
    </div>
  );
}

// Score progress bar
export function LeadScoreProgress({ score }: { score: number }) {
  const { bgColor, color } = getTierInfo(score);

  return (
    <div className="flex items-center gap-2">
      <div className="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
        <div
          className={`h-full ${bgColor.replace("100", "500")} rounded-full transition-all`}
          style={{ width: `${score}%` }}
        />
      </div>
      <span className={`text-xs font-semibold ${color}`}>{score}</span>
    </div>
  );
}

export default LeadScoreBadge;