import React from 'react';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { RefreshCw } from 'lucide-react';

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, children, className }) {
  return (
    <div className={cn('table-surface mb-6', className)}>
      <div className="px-6 py-4 border-b border-border/50">
        <h2 className="text-xs font-bold uppercase tracking-widest text-muted-foreground">{title}</h2>
        {subtitle && <p className="text-sm text-muted-foreground mt-1">{subtitle}</p>}
      </div>
      <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>
  );
}