"use client";

interface Props {
  rangeLow: number;
  rangeHigh: number;
  median: number;
}

function fmtRub(value: number): string {
  return value.toLocaleString("ru-RU", {
    style: "currency",
    currency: "RUB",
    maximumFractionDigits: 0,
  });
}

export function PriceRangeBar({ rangeLow, rangeHigh, median }: Props) {
  const span = rangeHigh - rangeLow;
  // Guard against degenerate case
  const medianPct =
    span > 0
      ? Math.max(0, Math.min(100, ((median - rangeLow) / span) * 100))
      : 50;

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      {/* Bar */}
      <div
        style={{
          position: "relative",
          height: 10,
          borderRadius: 999,
          background: "linear-gradient(to right, #bfdbfe, #1d4ed8)",
        }}
      >
        {/* Median marker */}
        <div
          title={`Медиана: ${fmtRub(median)}`}
          style={{
            position: "absolute",
            top: "50%",
            left: `${medianPct}%`,
            transform: "translate(-50%, -50%)",
            width: 14,
            height: 14,
            borderRadius: "50%",
            background: "#1d4ed8",
            border: "2px solid #fff",
            boxShadow: "0 1px 4px rgba(0,0,0,0.25)",
          }}
        />
      </div>

      {/* Labels */}
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          fontSize: 12,
          color: "#5b6066",
          fontVariantNumeric: "tabular-nums",
        }}
      >
        <span>{fmtRub(rangeLow)}</span>
        <span
          style={{
            fontWeight: 700,
            color: "#1d4ed8",
            fontSize: 13,
          }}
        >
          {fmtRub(median)}
        </span>
        <span>{fmtRub(rangeHigh)}</span>
      </div>
    </div>
  );
}