"use client";

import { ForecastTailLine, type ForecastCurve, type ForecastPoint } from "./index";

export interface DemoProps {
  accent?: string;
  horizon?: number;
  curveKind?: ForecastCurve;
  dashed?: boolean;
  fadeOut?: boolean;
  showEndMarker?: boolean;
}

const DATA: ForecastPoint[] = [
  { label: "Jan", value: 24.6 },
  { label: "Feb", value: 26.1 },
  { label: "Mar", value: 25.4 },
  { label: "Apr", value: 28.8 },
  { label: "May", value: 31.2 },
  { label: "Jun", value: 33.5 },
  { label: "Jul", value: 35.9 },
  { label: "Aug", value: 37.1 },
  { label: "Sep", value: 40.4 },
];

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accent = "#F5C542", horizon = 6, curveKind = "eased", dashed = true, fadeOut = true, showEndMarker = true }: DemoProps) {
  return (
    <div className="w-full p-5 sm:p-6">
      <ForecastTailLine
        data={DATA}
        title="Monthly recurring revenue"
        accent={accent}
        horizon={horizon}
        curveKind={curveKind}
        dashed={dashed}
        fadeOut={fadeOut}
        showEndMarker={showEndMarker}
        prefix="$"
        suffix="k"
        decimals={1}
      />
    </div>
  );
}

1e:T3cb4, 1f:T35334,

<script setup lang="ts">
import { computed, nextTick, onMounted, ref, watch } from "vue";

interface ForecastPoint {
  label: string;
  value: number;
}
interface Pt {
  x: number;
  y: number;
}

const props = withDefaults(
  defineProps<{
    data?: ForecastPoint[];
    title?: string;
    accent?: string;
    horizon?: number;
    curveKind?: "linear" | "eased";
    dashed?: boolean;
    fadeOut?: boolean;
    showEndMarker?: boolean;
    prefix?: string;
    suffix?: string;
    decimals?: number;
  }>(),
  {
    data: () => [
      { label: "Jan", value: 24.6 },
      { label: "Feb", value: 26.1 },
      { label: "Mar", value: 25.4 },
      { label: "Apr", value: 28.8 },
      { label: "May", value: 31.2 },
      { label: "Jun", value: 33.5 },
      { label: "Jul", value: 35.9 },
      { label: "Aug", value: 37.1 },
      { label: "Sep", value: 40.4 },
    ],
    title: "Monthly recurring revenue",
    accent: "#F5C542",
    horizon: 6,
    curveKind: "eased",
    dashed: true,
    fadeOut: true,
    showEndMarker: true,
    prefix: "$",
    suffix: "k",
    decimals: 1,
  },
);

const VB_W = 820;
const VB_H = 230;
const PAD_L = 18;
const PAD_R = 18;
const PAD_T = 24;
const PAD_B = 20;
const PLOT_W = VB_W - PAD_L - PAD_R;
const PLOT_H = VB_H - PAD_T - PAD_B;

function alpha(hex: string, a: number): string {
  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
  if (!m) return hex;
  const n = parseInt(m[1], 16);
  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`;
}
function fmt(v: number, decimals: number): string {
  const fixed = Math.abs(v).toFixed(decimals);
  const dot = fixed.indexOf(".");
  const whole = dot === -1 ? fixed : fixed.slice(0, dot);
  const rest = dot === -1 ? "" : fixed.slice(dot);
  return `${v < 0 ? "-" : ""}${whole.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}${rest}`;
}
function linePath(pts: Pt[]): string {
  if (pts.length < 2) return "";
  const r = (n: number) => Math.round(n * 100) / 100;
  return pts.slice(1).reduce((d, p) => `${d} L ${r(p.x)} ${r(p.y)}`, `M ${r(pts[0].x)} ${r(pts[0].y)}`);
}
function monotonePath(pts: Pt[]): string {
  const n = pts.length;
  if (n < 2) return "";
  if (n === 2) return linePath(pts);
  const r = (v: number) => Math.round(v * 100) / 100;
  const h: number[] = [];
  const s: number[] = [];
  for (let i = 0; i < n - 1; i++) {
    h.push(pts[i + 1].x - pts[i].x);
    s.push((pts[i + 1].y - pts[i].y) / (pts[i + 1].x - pts[i].x || 1));
  }
  const m: number[] = new Array(n);
  m[0] = s[0];
  m[n - 1] = s[n - 2];
  for (let i = 1; i < n - 1; i++) {
    if (s[i - 1] * s[i] <= 0) m[i] = 0;
    else {
      const w1 = 2 * h[i] + h[i - 1];
      const w2 = h[i] + 2 * h[i - 1];
      m[i] = (w1 + w2) / (w1 / s[i - 1] + w2 / s[i]);
    }
  }
  let d = `M ${r(pts[0].x)} ${r(pts[0].y)}`;
  for (let i = 0; i < n - 1; i++) {
    d +=
      ` C ${r(pts[i].x + h[i] / 3)} ${r(pts[i].y + (m[i] * h[i]) / 3)}` +
      ` ${r(pts[i + 1].x - h[i] / 3)} ${r(pts[i + 1].y - (m[i + 1] * h[i]) / 3)}` +
      ` ${r(pts[i + 1].x)} ${r(pts[i + 1].y)}`;
  }
  return d;
}
function buildForecast(data: ForecastPoint[], steps: number, curveKind: "linear" | "eased"): number[] {
  const n = data.length;
  if (n === 0) return [];
  const last = data[n - 1].value;
  const prev = n > 1 ? data[n - 2].value : last;
  const slope = last - prev;
  const out: number[] = [];
  let cur = last;
  for (let j = 1; j <= steps; j++) {
    const decay = curveKind === "eased" ? 1 - (j - 1) / steps : 1;
    cur += slope * decay;
    out.push(cur);
  }
  return out;
}
function buildScale(values: number[]): { lo: number; hi: number } {
  const min = Math.min(...values);
  const max = Math.max(...values);
  const span = max - min || Math.abs(max) || 1;
  return { lo: min - span * 0.2, hi: max + span * 0.2 };
}

const uid = `tfl${Math.random().toString(36).slice(2, 9)}`;

const n = computed(() => props.data.length);
const steps = computed(() => Math.max(2, Math.min(12, Math.round(props.horizon))));
const total = computed(() => Math.max(n.value - 1 + steps.value, 1));
const forecastValues = computed(() => buildForecast(props.data, steps.value, props.curveKind));
const scale = computed(() => buildScale([...props.data.map((d) => d.value), ...forecastValues.value]));
const span = computed(() => scale.value.hi - scale.value.lo || 1);

function xAt(i: number): number {
  return PAD_L + (i / total.value) * PLOT_W;
}
function yAt(v: number): number {
  return PAD_T + (1 - (v - scale.value.lo) / span.value) * PLOT_H;
}

const realPts = computed<Pt[]>(() => props.data.map((d, i) => ({ x: xAt(i), y: yAt(d.value) })));
const anchor = computed<Pt>(() => realPts.value[n.value - 1] ?? { x: PAD_L, y: PAD_T + PLOT_H / 2 });
const tailPts = computed<Pt[]>(() => [anchor.value, ...forecastValues.value.map((v, j) => ({ x: xAt(n.value - 1 + j + 1), y: yAt(v) }))]);
const realLine = computed(() => monotonePath(realPts.value));
const tailLine = computed(() => (props.curveKind === "linear" ? linePath(tailPts.value) : monotonePath(tailPts.value)));
const endPt = computed<Pt>(() => tailPts.value[tailPts.value.length - 1] ?? anchor.value);
const realClipWidth = computed(() => anchor.value.x - PAD_L + 6);
const tailClipWidth = computed(() => Math.max(endPt.value.x - anchor.value.x + 20, 1));

const allPts = computed<Pt[]>(() => [...realPts.value, ...tailPts.value.slice(1)]);
const allValues = computed(() => [...props.data.map((d) => d.value), ...forecastValues.value]);
const allLabels = computed(() => [...props.data.map((d) => d.label), ...forecastValues.value.map((_, j) => `+${j + 1}`)]);

const active = ref<number | null>(null);
const drawn = ref(false);
const armed = ref(false);
const hostEl = ref<HTMLDivElement | null>(null);

const isProjected = computed(() => active.value !== null && active.value >= n.value);
const cursor = computed<Pt | null>(() => (active.value === null ? null : (allPts.value[active.value] ?? null)));
const latest = computed(() => props.data[n.value - 1]?.value ?? 0);
const shownValue = computed(() => (active.value === null ? latest.value : allValues.value[active.value]));

function reduceMotion(): boolean {
  return typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
}

let armTimer: number | undefined;
function replay() {
  if (reduceMotion()) {
    drawn.value = true;
    armed.value = true;
    return;
  }
  drawn.value = false;
  armed.value = false;
  window.clearTimeout(armTimer);
  requestAnimationFrame(() => requestAnimationFrame(() => (drawn.value = true)));
  armTimer = window.setTimeout(() => (armed.value = true), 1260);
}

onMounted(() => nextTick(replay));
watch(() => [props.horizon, props.curveKind, props.data], replay);

function pick(clientX: number) {
  const el = hostEl.value;
  if (!el || allPts.value.length < 2) return;
  const rect = el.getBoundingClientRect();
  const t = ((clientX - rect.left) / Math.max(rect.width, 1)) * VB_W;
  let best = 0;
  let bestD = Infinity;
  allPts.value.forEach((p, i) => {
    const dd = Math.abs(p.x - t);
    if (dd < bestD) {
      bestD = dd;
      best = i;
    }
  });
  active.value = best;
}
function nudge(dir: number) {
  const cur = active.value === null ? allPts.value.length - 1 : active.value;
  active.value = Math.max(0, Math.min(cur + dir, allPts.value.length - 1));
}

const ariaLabel = computed(
  () =>
    `${props.title}, ${n.value} recorded samples ending at ${props.prefix}${fmt(latest.value, props.decimals)}${props.suffix}, projected ${steps.value} steps ahead to ${props.prefix}${fmt(forecastValues.value[forecastValues.value.length - 1] ?? latest.value, props.decimals)}${props.suffix}`,
);
</script>

<template>
  <div class="tfl">
    <div class="tfl__head">
      <div class="tfl__min0">
        <div class="tfl__title">{{ title }}</div>
        <div class="tfl__value-row">
          <span class="tfl__value" :style="{ color: active === null ? undefined : accent }">{{ prefix }}{{ fmt(shownValue, decimals) }}{{ suffix }}</span>
          <span class="tfl__caption">{{ active === null ? `${data[0]?.label ?? ""} → +${steps}` : allLabels[active] }}</span>
        </div>
      </div>
      <span class="tfl__badge" :class="{ 'tfl__badge--active': active !== null }" :style="active === null ? undefined : { color: accent, borderColor: alpha(accent, 0.35), background: alpha(accent, 0.12) }">
        {{ active === null ? `+${steps} projected` : isProjected ? "Projected" : "Recorded" }}
      </span>
    </div>

    <div
      ref="hostEl"
      class="tfl__stage"
      role="img"
      tabindex="0"
      :aria-label="ariaLabel"
      @pointermove="(e) => pick(e.clientX)"
      @pointerleave="active = null"
      @blur="active = null"
      @keydown="
        (e) => {
          if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
            e.preventDefault();
            nudge(e.key === 'ArrowRight' ? 1 : -1);
          } else if (e.key === 'Escape') active = null;
        }
      "
    >
      <svg :viewBox="`0 0 ${VB_W} ${VB_H}`" class="tfl__svg" aria-hidden="true">
        <defs>
          <clipPath :id="`${uid}-real`">
            <rect :x="PAD_L - 3" y="0" :width="drawn ? realClipWidth : 0" :height="VB_H" class="tfl__wipe tfl__wipe--real" />
          </clipPath>
          <clipPath :id="`${uid}-tail`">
            <rect :x="anchor.x - 3" y="0" :width="drawn ? tailClipWidth : 0" :height="VB_H" class="tfl__wipe tfl__wipe--tail" />
          </clipPath>
          <linearGradient v-if="fadeOut" :id="`${uid}-fade`" gradientUnits="userSpaceOnUse" :x1="anchor.x" y1="0" :x2="endPt.x" y2="0">
            <stop offset="0%" :stop-color="accent" stop-opacity="0.85" />
            <stop offset="100%" :stop-color="accent" stop-opacity="0.04" />
          </linearGradient>
        </defs>

        <line :x1="anchor.x" :x2="anchor.x" :y1="PAD_T - 8" :y2="PAD_T + PLOT_H + 6" class="tfl__now" />
        <text :x="anchor.x + 7" :y="PAD_T - 10" class="tfl__label">PROJECTED</text>

        <g :clip-path="`url(#${uid}-real)`">
          <path :d="realLine" fill="none" :stroke="accent" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
        </g>
        <g :clip-path="`url(#${uid}-tail)`">
          <path
            :d="tailLine"
            fill="none"
            :stroke="fadeOut ? `url(#${uid}-fade)` : alpha(accent, 0.78)"
            stroke-width="2.5"
            stroke-linecap="round"
            stroke-linejoin="round"
            :stroke-dasharray="dashed ? '6 4' : undefined"
          />
        </g>

        <circle
          v-if="showEndMarker"
          :cx="endPt.x"
          :cy="endPt.y"
          class="tfl__marker"
          :class="{ 'tfl__marker--bright': isProjected }"
          :stroke="accent"
          :r="armed ? (isProjected ? 6.5 : 5.5) : 0"
        />

        <g v-if="cursor">
          <line :x1="cursor.x" :x2="cursor.x" :y1="PAD_T - 6" :y2="PAD_T + PLOT_H + 6" :stroke="alpha(accent, 0.4)" stroke-width="1" stroke-dasharray="3 4" />
          <circle :cx="cursor.x" :cy="cursor.y" r="6" :fill="alpha(accent, 0.18)" />
          <circle :cx="cursor.x" :cy="cursor.y" r="3.2" class="tfl__dot" :stroke="accent" stroke-width="2" />
        </g>
      </svg>

      <div
        v-if="cursor && active !== null"
        class="tfl__tooltip"
        :style="{
          left: `${Math.min(Math.max((cursor.x / VB_W) * 100, 9), 91)}%`,
          top: `${(cursor.y / VB_H) * 100}%`,
          transform: cursor.y < VB_H * 0.4 ? 'translate(-50%, 14px)' : 'translate(-50%, calc(-100% - 14px))',
          borderColor: alpha(accent, 0.35),
        }"
      >
        <div class="tfl__tooltip-kind" :style="isProjected ? { color: accent } : undefined">{{ isProjected ? "Projected" : "Recorded" }}</div>
        <div class="tfl__tooltip-value">{{ prefix }}{{ fmt(allValues[active], decimals) }}{{ suffix }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.tfl {
  --tfl-panel: rgba(255, 255, 255, 0.03);
  --tfl-panel-border: rgba(255, 255, 255, 0.1);
  --tfl-text: #fff;
  --tfl-muted: rgba(255, 255, 255, 0.4);
  --tfl-badge-border: rgba(255, 255, 255, 0.15);
  --tfl-badge-text: rgba(255, 255, 255, 0.45);
  --tfl-now: rgba(255, 255, 255, 0.14);
  --tfl-label: rgba(255, 255, 255, 0.35);
  --tfl-marker-fill: #0b0d10;
  --tfl-tooltip-bg: #12151a;
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--tfl-panel-border);
  background: var(--tfl-panel);
  padding: 20px;
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
}
@media (prefers-color-scheme: light) {
  .tfl {
    --tfl-panel: #fff;
    --tfl-panel-border: rgba(0, 0, 0, 0.1);
    --tfl-text: #171717;
    --tfl-muted: rgba(23, 23, 23, 0.5);
    --tfl-badge-border: rgba(0, 0, 0, 0.1);
    --tfl-badge-text: rgba(23, 23, 23, 0.55);
    --tfl-now: rgba(0, 0, 0, 0.14);
    --tfl-label: rgba(0, 0, 0, 0.32);
    --tfl-marker-fill: #fff;
    --tfl-tooltip-bg: #fff;
  }
}
.tfl__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.tfl__min0 {
  min-width: 0;
}
.tfl__title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tfl-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tfl__value-row {
  margin-top: 0.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}
.tfl__value {
  font-size: 26px;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tfl-text);
}
.tfl__caption {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--tfl-muted);
}
.tfl__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  border: 1px solid var(--tfl-badge-border);
  color: var(--tfl-badge-text);
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tfl__badge--active {
  border-color: transparent;
}
.tfl__stage {
  position: relative;
  margin-top: 1rem;
  width: 100%;
  cursor: crosshair;
  border-radius: 8px;
  outline: none;
}
.tfl__stage:focus-visible {
  box-shadow: 0 0 0 2px rgba(150, 150, 150, 0.4);
}
.tfl__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.tfl__now {
  stroke: var(--tfl-now);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.tfl__label {
  fill: var(--tfl-label);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
}
.tfl__wipe {
  transition: width 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tfl__wipe--tail {
  transition-duration: 800ms;
  transition-delay: 420ms;
}
.tfl__marker {
  fill: var(--tfl-marker-fill);
  stroke-width: 2.25;
  transition:
    r 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
    stroke-width 420ms ease;
}
.tfl__marker--bright {
  stroke-width: 2.75;
}
.tfl__dot {
  fill: var(--tfl-marker-fill);
}
.tfl__tooltip {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--tfl-tooltip-bg);
  padding: 6px 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}
.tfl__tooltip-kind {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tfl-muted);
}
.tfl__tooltip-value {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tfl-text);
}
@media (prefers-reduced-motion: reduce) {
  .tfl__wipe,
  .tfl__marker {
    transition-duration: 1ms;
  }
}
</style>

Nearby