import { useEffect, useState } from 'react';
import { Plus } from 'lucide-react';
import { dimensionService } from '@/services/dimensionService';
import StationForm from '@/components/dimensions/StationForm';
export default function MeasurementStationsTab({ component, actor }) {
  const [stations, setStations] = useState([]);
  const [adding, setAdding] = useState(false);
  const load = () => dimensionService.stations(component.uuid).then(setStations);
  useEffect(() => { load(); }, [component.uuid]);
  const save = async (data) => { await dimensionService.saveStation({ ...data, component_uuid: component.uuid, entered_by: actor }, actor); setAdding(false); load(); };
  const cols = ['station_name', 'height_from_origin_mm', 'total_width_mm', 'total_depth_mm', 'circumference_mm', 'shape_classification', 'clearance_requirement_mm'];
  const labels = ['Station', 'Height (mm)', 'Width (mm)', 'Depth (mm)', 'Circumference (mm)', 'Shape', 'Clearance (mm)'];
  return (
    <div className="space-y-5">
      <div className="flex items-center justify-between">
        <p className="text-sm text-slate-400">Vertical measurement stations along the Z axis (proximal to distal). Origin: alignment reference point or pivot centre.</p>
        <button className="btn-primary" onClick={() => setAdding(true)}><Plus/>Add station</button>
      </div>
      {adding && <div className="panel p-6"><StationForm onSave={save} onCancel={() => setAdding(false)} /></div>}
      {stations.length === 0 ? (
        <div className="rounded-xl border border-dashed border-white/10 p-8 text-center text-slate-500"><p className="text-sm">No measurement stations recorded yet.</p></div>
      ) : (
        <div className="overflow-x-auto"><table className="w-full text-sm">
          <thead><tr className="text-left text-xs uppercase text-slate-500">{labels.map(l => <th key={l} className="pb-2">{l}</th>)}</tr></thead>
          <tbody>{stations.map(s => <tr key={s.uuid} className="border-t border-white/5">{cols.map(c => <td key={c} className="py-2 text-slate-300">{s[c] ?? '—'}</td>)}</tr>)}</tbody>
        </table></div>
      )}
    </div>
  );
}