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

export interface ImportHistoryRow {
  id: number | string;
  imported_at?: string | null;
  source_filename?: string | null;
  sheet_name?: string | null;
  rows_parsed?: number;
  rows_created?: number;
  rows_updated?: number;
  rows_skipped?: number;
  rows_errored?: number;
}

interface ImportHistorySectionProps {
  history?: ImportHistoryRow[] | null;
  loading?: boolean;
  onRefresh?: () => void;
  cardProps?: Partial<SectionCardProps>;
}

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

  const rows = history ?? [];

  return (
    <SectionCard title="Import History" {...cardProps}>
      <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>
  );
}
