import Link from 'next/link';
import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';
import { fmtInt } from '@/lib/format';

export type BarRow = { key: string; label: ReactNode; value: number; href?: string; color?: string; hint?: ReactNode };

/** Horizontal bars (server-renderable): label · bar · value. Sorted by the caller. */
export function Bars({ rows, className, format = fmtInt, max: maxOverride, dense = false }: { rows: BarRow[]; className?: string; format?: (v: number) => string; max?: number; dense?: boolean }) {
  const max = maxOverride ?? Math.max(1, ...rows.map((r) => Math.abs(r.value)));
  if (!rows.length) return null;
  return (
    <ul className={cn('space-y-1', className)}>
      {rows.map((r) => {
        const pct = Math.min(100, (Math.abs(r.value) / max) * 100);
        const inner = (
          <>
            <span className={cn('min-w-0 truncate', dense ? 'text-xs' : 'text-[13px]')}>{r.label}</span>
            <span className="meter">
              <span style={{ width: `${pct}%`, background: r.color ?? (r.value < 0 ? 'var(--danger)' : 'var(--accent)') }} />
            </span>
            <span className={cn('tnum text-right text-ink', dense ? 'text-xs' : 'text-[13px]')}>{format(r.value)}</span>
            {r.hint !== undefined && <span className="col-span-3 text-[11px] text-ink-3">{r.hint}</span>}
          </>
        );
        const cls = cn('grid grid-cols-[minmax(0,1fr)_minmax(4rem,2fr)_auto] items-center gap-x-3', dense ? 'py-0.5' : 'py-1');
        return (
          <li key={r.key}>
            {r.href ? (
              <Link href={r.href} className={cn(cls, 'text-ink-2 hover:text-accent')}>
                {inner}
              </Link>
            ) : (
              <div className={cn(cls, 'text-ink-2')}>{inner}</div>
            )}
          </li>
        );
      })}
    </ul>
  );
}

/** Tiny vertical column strip (e.g. events per day) — SVG, server-renderable. */
export function Columns({ values, width = 120, height = 28, className, color = 'var(--accent)', ariaLabel }: { values: number[]; width?: number; height?: number; className?: string; color?: string; ariaLabel?: string }) {
  const max = Math.max(1, ...values);
  const n = values.length || 1;
  const gap = 1;
  const bw = Math.max(1, (width - gap * (n - 1)) / n);
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} className={cn('block shrink-0', className)} role={ariaLabel ? 'img' : undefined} aria-label={ariaLabel} aria-hidden={ariaLabel ? undefined : true}>
      {values.map((v, i) => {
        const h = Math.max(v > 0 ? 1.5 : 0, (v / max) * (height - 1));
        return <rect key={i} x={i * (bw + gap)} y={height - h} width={bw} height={h} fill={color} opacity={v > 0 ? 0.85 : 0.2} rx={0.5} />;
      })}
    </svg>
  );
}