import { useState } from 'react';
import { MEASUREMENT_SOURCES } from '@/services/dimensionDefinitions';
export default function DimensionEntryForm({ dimensions, onSave }) {
  const [f, setF] = useState({ dimension_key: '', value: '', entered_unit: 'mm', source: 'Workshop Physical Measurement', confidence: 'High' });
  const set = (k, v) => setF({ ...f, [k]: v });
  const selected = dimensions.find(d => d[0] === f.dimension_key);
  return (
    <form onSubmit={e => { e.preventDefault(); onSave({ ...f, original_value: Number(f.value), value_mm: f.entered_unit === 'cm' ? Number(f.value) * 10 : Number(f.value) }); }} className="space-y-3 rounded-xl border border-white/10 bg-white/5 p-4">
      <label className="text-sm text-slate-300">Dimension
        <select className="workshop-input" value={f.dimension_key} onChange={e => set('dimension_key', e.target.value)}>
          <option value="">Select a dimension…</option>
          {dimensions.map(([key, label, unit]) => <option key={key} value={key}>{label}</option>)}
        </select>
      </label>
      <div className="grid gap-3 sm:grid-cols-2">
        <label className="text-sm text-slate-300">Value<input type="number" step="any" className="workshop-input" value={f.value} onChange={e => set('value', e.target.value)} disabled={!selected} /></label>
        <label className="text-sm text-slate-300">Unit
          <select className="workshop-input" value={f.entered_unit} onChange={e => set('entered_unit', e.target.value)} disabled={selected?.[2] === 'text'}>
            {selected?.[2] === 'text' ? <option>text</option> : <><option>mm</option><option>cm</option></>}
          </select>
        </label>
        <label className="text-sm text-slate-300">Measurement source
          <select className="workshop-input" value={f.source} onChange={e => set('source', e.target.value)}>
            {MEASUREMENT_SOURCES.map(s => <option key={s}>{s}</option>)}
          </select>
        </label>
        <label className="text-sm text-slate-300">Confidence
          <select className="workshop-input" value={f.confidence} onChange={e => set('confidence', e.target.value)}>
            {['High', 'Medium', 'Low'].map(c => <option key={c}>{c}</option>)}
          </select>
        </label>
      </div>
      <label className="text-sm text-slate-300">Notes<input className="workshop-input" value={f.notes || ''} onChange={e => set('notes', e.target.value)} /></label>
      <button className="btn-primary" disabled={!f.dimension_key || !f.value}>Save dimension</button>
    </form>
  );
}