BillTracker/client/components/data/ImportHistorySection.jsx

import React from 'react';
import { RefreshCw, Clock } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { SectionCard, fmt } from './dataShared';

export default function ImportHistorySection({ history, loading, onRefresh }) {
  if (loading) {
    return (
      <SectionCard title="Import History">
        <div className="px-6 py-6 text-sm text-muted-foreground">Loading…</div>
      </SectionCard>
    );
  }

  const rows = history ?? [];

  return (
    <SectionCard title="Import History">
      <div className="px-6 py-4 flex items-center justify-between">
        <p className="text-xs text-muted-foreground">
          {rows.length === 0 ? 'No imports yet.' : `${rows.length} import${rows.length === 1 ? '' : 's'}`}
        </p>
        <Button size="sm" variant="ghost" onClick={onRefresh} className="h-7 text-xs gap-1.5">
          <RefreshCw className="h-3 w-3" />Refresh
        </Button>
      </div>
      {rows.length > 0 && (
        <div className="overflow-x-auto">
          <table className="w-full text-xs">
            <thead>
              <tr className="border-b border-border/50 text-muted-foreground">
                {['Date','File','Sheet','Parsed','Created','Updated','Skipped','Errors'].map(h => (
                  <th key={h} className="px-4 py-2 text-left font-medium whitespace-nowrap">{h}</th>
                ))}
              </tr>
            </thead>
            <tbody className="divide-y divide-border/30">
              {rows.map(r => (
                <tr key={r.id} className="hover:bg-muted/20 transition-colors">
                  <td className="px-4 py-2 whitespace-nowrap text-muted-foreground">
                    <span className="flex items-center gap-1"><Clock className="h-3 w-3" />{fmt(r.imported_at)}</span>
                  </td>
                  <td className="px-4 py-2 text-muted-foreground">{r.source_filename || '—'}</td>
                  <td className="px-4 py-2 text-muted-foreground">{r.sheet_name || '—'}</td>
                  <td className="px-4 py-2 tabular-nums">{r.rows_parsed}</td>
                  <td className="px-4 py-2 tabular-nums text-emerald-600">{r.rows_created}</td>
                  <td className="px-4 py-2 tabular-nums text-blue-600">{r.rows_updated}</td>
                  <td className="px-4 py-2 tabular-nums text-muted-foreground">{r.rows_skipped}</td>
                  <td className="px-4 py-2 tabular-nums text-red-500">{r.rows_errored}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </SectionCard>
  );
}