'use client';
import { type ReactNode, useState } from 'react';
import { cn } from '@/lib/cn';

/**
 * Linear / log axis switch for a server-rendered chart: both variants are rendered by the server (SEO, no client
 * fetch); this only toggles which one is visible and mirrors the choice into `?scale=` with `replaceState`
 * (no navigation, no re-render of the page).
 */
export function ScaleToggle({ linear, log, initial = 'linear', className }: { linear: ReactNode; log: ReactNode; initial?: 'linear' | 'log'; className?: string }) {
  const [scale, setScale] = useState<'linear' | 'log'>(initial);
  const set = (s: 'linear' | 'log') => {
    setScale(s);
    try {
      const url = new URL(window.location.href);
      if (s === 'log') url.searchParams.set('scale', 'log');
      else url.searchParams.delete('scale');
      window.history.replaceState(null, '', url.toString());
    } catch {
      /* ignore */
    }
  };
  const btn = (s: 'linear' | 'log', label: string) => (
    <button type="button" onClick={() => set(s)} aria-pressed={scale === s} className={cn('h-9 border px-3 text-xs font-medium transition-colors', scale === s ? 'border-ink bg-ink text-canvas' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink')}>
      {label}
    </button>
  );
  return (
    <div className={className}>
      <div className="mb-2 flex items-center gap-1" role="group" aria-label="Y axis scale">
        {btn('linear', 'Linear')}
        {btn('log', 'Log scale')}
      </div>
      <div hidden={scale !== 'linear'}>{linear}</div>
      <div hidden={scale !== 'log'}>{log}</div>
    </div>
  );
}