import { useEffect, useState } from 'react';
import { auditService } from '@/services/auditService';
import StatusPill from '@/components/workshop/StatusPill';
export default function RevisionHistoryTab({ component }) {
  const [events, setEvents] = useState([]);
  useEffect(() => { auditService.list().then(all => setEvents(all.filter(e => e.record_uuid === component.uuid).sort((a, b) => (b.created_date || '').localeCompare(a.created_date || '')))); }, [component.uuid]);
  if (events.length === 0) return <div className="rounded-xl border border-dashed border-white/10 p-8 text-center text-slate-500"><p className="text-sm">No revision history recorded yet.</p></div>;
  return (
    <div className="space-y-3">
      <p className="text-sm text-slate-400">Every dimension change is preserved. Old measurements are never overwritten — re-measurements create new records.</p>
      {events.map(e => (
        <div key={e.uuid} className="flex items-start gap-3 rounded-xl border border-white/10 bg-white/5 p-3">
          <StatusPill tone="slate">{e.event_type}</StatusPill>
          <div className="flex-1"><p className="text-sm text-slate-200">{e.summary}</p>{e.details && <p className="text-xs text-slate-500">{e.details}</p>}<p className="mt-1 text-xs text-slate-600">{e.actor_name} · {new Date(e.created_date).toLocaleString()}</p></div>
        </div>
      ))}
    </div>
  );
}