import { useState } from 'react';
import { STATION_SUGGESTIONS } from '@/services/dimensionDefinitions';
export default function StationForm({ onSave, onCancel }) {
  const [f, setF] = useState({ station_name: '', shape_classification: 'Round' });
  const set = (k, v) => setF({ ...f, [k]: v });
  const num = (k, l) => <label className="text-sm text-slate-300">{l}<input type="number" step="any" className="workshop-input" value={f[k] ?? ''} onChange={e => set(k, e.target.value === '' ? '' : Number(e.target.value))} /></label>;
  return (
    <form onSubmit={e => { e.preventDefault(); onSave(f); }} className="space-y-4">
      <label className="text-sm text-slate-300">Station name
        <select className="workshop-input" value={f.station_name} onChange={e => set('station_name', e.target.value)}>
          <option value="">Select a station…</option>
          {STATION_SUGGESTIONS.map(s => <option key={s}>{s}</option>)}
        </select>
      </label>
      <div className="grid gap-3 sm:grid-cols-3">
        {num('height_from_origin_mm', 'Height from origin (mm)')}
        {num('max_medial_mm', 'Max medial (mm)')}{num('max_lateral_mm', 'Max lateral (mm)')}
        {num('total_width_mm', 'Total width (mm)')}{num('max_anterior_mm', 'Max anterior (mm)')}
        {num('max_posterior_mm', 'Max posterior (mm)')}{num('total_depth_mm', 'Total depth (mm)')}
        {num('circumference_mm', 'Circumference (mm, optional)')}{num('clearance_requirement_mm', 'Clearance (mm)')}
      </div>
      <label className="text-sm text-slate-300">Shape classification
        <select className="workshop-input" value={f.shape_classification} onChange={e => set('shape_classification', e.target.value)}>
          {['Round','Oval','Rectangular','Irregular'].map(s => <option key={s}>{s}</option>)}
        </select>
      </label>
      <label className="text-sm text-slate-300">Notes<input className="workshop-input" value={f.notes || ''} onChange={e => set('notes', e.target.value)} /></label>
      <label className="text-sm text-slate-300">Photograph URL (optional)<input className="workshop-input" value={f.photograph_url || ''} onChange={e => set('photograph_url', e.target.value)} /></label>
      <div className="flex gap-2"><button className="btn-primary" disabled={!f.station_name}>Save station</button><button type="button" className="btn-secondary" onClick={onCancel}>Cancel</button></div>
    </form>
  );
}