import { useEffect, useState } from 'react';
import { dimensionService } from '@/services/dimensionService';
import StatusPill from '@/components/workshop/StatusPill';
export default function SourcesTab({ component }) {
  const [specs, setSpecs] = useState([]);
  useEffect(() => { dimensionService.specs(component.uuid).then(setSpecs); }, [component.uuid]);
  return (
    <div className="space-y-5">
      <p className="text-sm text-slate-400">Source documents for manufacturer specifications. Only official manufacturer documents or websites may be marked Verified.</p>
      {specs.length === 0 ? (
        <div className="rounded-xl border border-dashed border-white/10 p-8 text-center text-slate-500"><p className="text-sm">No source documents recorded yet.</p></div>
      ) : specs.map(s => (
        <div key={s.uuid} className="panel p-5">
          <div className="flex items-start justify-between">
            <div><h3 className="font-semibold text-white">{s.document_title || 'Untitled document'}</h3><p className="text-xs text-slate-500">{s.manufacturer} {s.model} {s.variant || ''} · Article {s.article_number || '—'}</p></div>
            <StatusPill tone={s.is_official_source && s.verified_by ? 'green' : 'amber'}>{s.is_official_source && s.verified_by ? 'Verified official' : 'Unverified'}</StatusPill>
          </div>
          <div className="mt-3 grid gap-2 text-sm text-slate-400 sm:grid-cols-2">
            <p>Document ID: {s.document_identifier || '—'}</p><p>Version: {s.document_version || '—'}</p>
            <p>Publication date: {s.publication_date || '—'}</p><p>Page: {s.source_page_number || '—'}</p>
            {s.source_url && <p className="truncate">URL: {s.source_url}</p>}
            {s.source_file_url && <p className="truncate">File: {s.source_file_url}</p>}
            {s.source_checksum && <p>Checksum: {s.source_checksum}</p>}
          </div>
          <p className="mt-3 text-xs text-slate-500">Imported {s.date_imported} by {s.imported_by}{s.date_verified ? ` · Verified ${s.date_verified} by ${s.verified_by}` : ''}</p>
        </div>
      ))}
    </div>
  );
}