BillTracker/client/components/data/dataShared.jsx

import React, { useEffect, useState } from 'react';
import { cn } from '@/lib/utils';
import { ChevronDown } from 'lucide-react';

// At-a-glance health tones for the optional SectionCard status dot.
const DOT_TONES = {
  green: 'bg-emerald-500',
  amber: 'bg-amber-500',
  red: 'bg-rose-500',
  gray: 'bg-muted-foreground/40',
};

export function fmt(isoStr) {
  if (!isoStr) return '—';
  const d = new Date(isoStr);
  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
    + ' ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
}

export function importErrorState(err, fallback) {
  const data = err?.data || {};
  return {
    message: err?.message || data.message || data.error || fallback,
    error: data.error || fallback,
    code: data.code || err?.code || null,
    details: Array.isArray(data.details) ? data.details : (Array.isArray(err?.details) ? err.details : []),
    error_id: data.error_id || null,
  };
}

export function SectionCard({
  title,
  subtitle,
  icon: Icon,        // optional lucide icon component, shown in a soft chip
  statusDot,         // optional 'green' | 'amber' | 'red' | 'gray' health dot
  badge,             // optional node rendered next to the title (e.g. a count pill)
  children,
  className,
  collapsible = false,
  defaultOpen = true,
  storageKey,
  summary,
  actions,
}) {
  const [open, setOpen] = useState(() => {
    if (!collapsible || !storageKey || typeof window === 'undefined') return defaultOpen;
    const stored = window.localStorage.getItem(storageKey);
    return stored === null ? defaultOpen : stored === 'true';
  });

  useEffect(() => {
    if (!collapsible || !storageKey || typeof window === 'undefined') return;
    window.localStorage.setItem(storageKey, String(open));
  }, [collapsible, open, storageKey]);

  const headerContent = (
    <>
      {Icon && (
        <span className="grid h-9 w-9 shrink-0 place-items-center rounded-lg border border-border/60 bg-muted/40 text-muted-foreground">
          <Icon className="h-5 w-5" />
        </span>
      )}
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-2">
          {statusDot && <span className={cn('h-2 w-2 shrink-0 rounded-full', DOT_TONES[statusDot] || DOT_TONES.gray)} />}
          <h2 className="truncate text-base font-semibold text-foreground">{title}</h2>
          {badge}
        </div>
        {subtitle && <p className="mt-0.5 text-sm text-muted-foreground">{subtitle}</p>}
        {collapsible && !open && summary && (
          <p className="mt-1 truncate text-xs font-medium text-muted-foreground/80">{summary}</p>
        )}
      </div>
      {actions && <div className="shrink-0">{actions}</div>}
      {collapsible && (
        <ChevronDown
          className={cn('mt-1 h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200', open && 'rotate-180')}
        />
      )}
    </>
  );

  return (
    <div className={cn('table-surface mb-5', className)}>
      {collapsible ? (
        <button
          type="button"
          onClick={() => setOpen(value => !value)}
          className="flex w-full items-start gap-3 border-b border-border/50 px-5 py-4 text-left transition-colors hover:bg-muted/20"
          aria-expanded={open}
        >
          {headerContent}
        </button>
      ) : (
        <div className="flex items-start gap-3 border-b border-border/50 px-5 py-4">
          {headerContent}
        </div>
      )}
      {open && <div className="divide-y divide-border/50">{children}</div>}
    </div>
  );
}

export function CountPill({ label, value }) {
  return (
    <div className="rounded-lg border border-border/60 bg-muted/25 px-3 py-2">
      <p className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">{label}</p>
      <p className="mt-1 text-sm font-semibold tabular-nums">{value ?? 0}</p>
    </div>
  );
}