'use client';
import { Rows3, Rows4 } from 'lucide-react';
import { useEffect, useState } from 'react';
import { cn } from '@/lib/cn';
import { DENSITY_KEY } from '@/lib/prepaint';

export type Density = 'comfortable' | 'compact';

export function readDensity(): Density {
  try {
    return localStorage.getItem(DENSITY_KEY) === 'compact' ? 'compact' : 'comfortable';
  } catch {
    return 'comfortable';
  }
}
export function setDensity(d: Density) {
  try {
    if (d === 'compact') localStorage.setItem(DENSITY_KEY, d);
    else localStorage.removeItem(DENSITY_KEY);
  } catch {
    /* ignore */
  }
  if (d === 'compact') document.documentElement.setAttribute('data-density', d);
  else document.documentElement.removeAttribute('data-density');
  window.dispatchEvent(new CustomEvent('ca-density-change'));
}

export function DensityToggle({ className }: { className?: string }) {
  const [d, setD] = useState<Density>('comfortable');
  useEffect(() => {
    const read = () => setD(readDensity());
    read();
    window.addEventListener('ca-density-change', read);
    return () => window.removeEventListener('ca-density-change', read);
  }, []);
  const next: Density = d === 'compact' ? 'comfortable' : 'compact';
  const Icon = d === 'compact' ? Rows4 : Rows3;
  return (
    <button type="button" onClick={() => setDensity(next)} className={cn('hidden size-10 items-center justify-center rounded-sm text-ink-2 hover:bg-surface-2 hover:text-ink md:flex', className)} aria-label={`Density: ${d} — switch to ${next}`} title={`Density: ${d}`}>
      <Icon className="size-[18px]" aria-hidden />
    </button>
  );
}