import { useState } from 'react';
import { MANUFACTURER_SPEC_FIELDS } from '@/services/dimensionDefinitions';
const specKeys = MANUFACTURER_SPEC_FIELDS.map(f => f[0]);
export default function SpecImportForm({ component, onSave, onCancel }) {
  const [f, setF] = useState({ is_official_source: true, source_page_number: '' });
  const set = (k, v) => setF({ ...f, [k]: v });
  const meta = (k, l) => <label className="text-sm text-slate-300">{l}<input className="workshop-input" value={f[k] || ''} onChange={e => set(k, e.target.value)} /></label>;
  return (
    <form onSubmit={e => { e.preventDefault(); onSave(f); }} className="space-y-5">
      <div className="grid gap-3 sm:grid-cols-2">
        {meta('document_title', 'Document title')}{meta('document_identifier', 'Document identifier')}
        {meta('document_version', 'Document version')}{meta('publication_date', 'Publication / revision date')}
        {meta('source_url', 'Official product / technical-data URL')}{meta('source_file_url', 'Uploaded PDF / spec sheet URL')}
        {meta('source_page_number', 'Source page number')}{meta('verified_by', 'Verified by')}
      </div>
      <label className="choice-card"><input type="checkbox" checked={!!f.is_official_source} onChange={e => set('is_official_source', e.target.checked)} /><span>Source is an official manufacturer document or website</span></label>
      <p className="text-xs text-amber-300">Only official manufacturer sources may be marked Verified. Enter values exactly as published; leave missing values blank — they will be stored as Unknown.</p>
      <div className="grid gap-3 sm:grid-cols-2">
        {MANUFACTURER_SPEC_FIELDS.map(([key, label, type]) => (
          <label key={key} className="text-sm text-slate-300">{label}
            {type === 'number' ? <input type="number" step="any" className="workshop-input" value={f[key] ?? ''} onChange={e => set(key, e.target.value === '' ? '' : Number(e.target.value))} />
            : <input className="workshop-input" value={f[key] ?? ''} onChange={e => set(key, e.target.value)} />}
          </label>
        ))}
      </div>
      <div className="flex gap-2"><button className="btn-primary">Import specifications</button><button type="button" className="btn-secondary" onClick={onCancel}>Cancel</button></div>
    </form>
  );
}