Target Slider

"use client";

import { useId, useState } from "react";
import { cn } from "@/lib/utils";

export interface TargetSliderProps {
  label?: string;
  /** Baseline emissions (tCO₂e). */
  baseline?: number;
  defaultValue?: number;
  /** Recommended reduction %. */
  recommended?: number;
  onValueChange?: (percent: number) => void;
  className?: string;
}

/** Reduction target picker: a thick rounded sage range (0–60%) with tick labels and a “science-aligned” marker, showing the resulting tonnes and a gentle verdict. */
export function TargetSlider({
  label = "Reduction target for 2030",
  baseline = 284,
  defaultValue = 30,
  recommended = 42,
  onValueChange,
  className,
}: TargetSliderProps) {
  const id = useId();
  const [v, setV] = useState(defaultValue);
  const verdict =
    v >= recommended
      ? "Science-aligned — lovely."
      : v >= recommended * 0.6
        ? "A solid start. Science suggests a little more."
        : "Gentle, but probably not enough.";
  return (
    <div className={cn("max-w-lg rounded-da-lg bg-da-surface p-6 text-da-surface-fg shadow-da-sm", className)}>
      <label htmlFor={id} className="font-da-display text-xl">
        {label}
      </label>
      <p className="mt-3" aria-live="polite">
        <span className="font-da-display text-5xl text-da-primary">−{v}%</span>{" "}
        <span className="font-da-mono text-sm text-da-muted-fg">→ {Math.round(baseline * (1 - v / 100))} tCO₂e</span>
      </p>
      <div className="relative mt-6">
        <input
          id={id}
          type="range"
          min={0}
          max={60}
          step={1}
          value={v}
          onChange={(e) => {
            setV(Number(e.target.value));
            onValueChange?.(Number(e.target.value));
          }}
          aria-valuetext={`${v}% reduction, ${verdict}`}
          className="da-focus h-3 w-full cursor-pointer appearance-none rounded-full bg-da-surface-2 accent-(--da-primary) [&::-webkit-slider-thumb]:size-6 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-4 [&::-webkit-slider-thumb]:border-da-surface [&::-webkit-slider-thumb]:bg-da-primary [&::-webkit-slider-thumb]:shadow-da-md"
          style={{ background: `linear-gradient(to right, var(--da-primary) ${(v / 60) * 100}%, var(--da-surface-2) ${(v / 60) * 100}%)` }}
        />
        <span aria-hidden className="absolute -top-2 h-7 w-0.5 rounded-full bg-da-secondary-fg" style={{ left: `${(recommended / 60) * 100}%` }} />
      </div>
      <div aria-hidden className="mt-2 flex justify-between font-da-mono text-xs text-da-muted-fg">
        {[0, 15, 30, 45, 60].map((t) => (
          <span key={t}>{t}%</span>
        ))}
      </div>
      <p
        className={cn(
          "mt-4 rounded-da-md px-4 py-2.5 text-sm",
          v >= recommended ? "bg-da-accent text-da-accent-fg" : "bg-da-secondary/60 text-da-secondary-fg",
        )}
      >
        {verdict}
      </p>
    </div>
  );
}

export default TargetSlider;