import { Plus, Copy, Trash2, Layers } from 'lucide-react';

export default function StationTable({ stations, selectedId, onSelect, onAdd, onDuplicate, onDelete, onSetSpacing, spacing = 25 }) {
  const rows = stations || [];

  return (
    <div className="flex flex-col">
      <div className="flex items-center justify-between border-b border-white/10 px-4 py-2.5">
        <h3 className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.14em] text-slate-400">
          <Layers className="h-3.5 w-3.5" /> Measurement Stations ({rows.length})
        </h3>
        <div className="flex items-center gap-1.5">
          <select value={spacing} onChange={e => onSetSpacing?.(parseInt(e.target.value))} className="rounded-lg border border-white/10 bg-black/20 px-2 py-1 text-xs text-slate-200">
            <option value={20}>20 mm</option>
            <option value={25}>25 mm</option>
            <option value={50}>50 mm</option>
          </select>
          <button onClick={onAdd} className="btn-primary !px-2.5 !py-1.5 !text-xs"><Plus className="h-3.5 w-3.5" />Add</button>
        </div>
      </div>
      <div className="max-h-48 overflow-y-auto">
        <table className="w-full text-sm">
          <thead className="sticky top-0 bg-[#0d1318] text-xs text-slate-500">
            <tr>
              <th className="px-3 py-2 text-left font-medium">Name</th>
              <th className="px-3 py-2 text-right font-medium">Height</th>
              <th className="px-3 py-2 text-right font-medium">Width</th>
              <th className="px-3 py-2 text-right font-medium">Depth</th>
              <th className="px-3 py-2"></th>
            </tr>
          </thead>
          <tbody>
            {rows.map((s, i) => {
              const id = `station-${i}`;
              const isSelected = selectedId === id;
              return (
                <tr
                  key={i}
                  onClick={() => onSelect?.('station', i, s)}
                  className={`cursor-pointer border-b border-white/5 transition ${isSelected ? 'bg-cyan-400/15' : 'hover:bg-white/5'}`}
                >
                  <td className="px-3 py-2 text-slate-200">{s.station_name || s.name || `Station ${String(i + 1).padStart(2, '0')}`}</td>
                  <td className="px-3 py-2 text-right text-slate-300">{(s.height_from_origin_mm ?? s.height ?? 0).toFixed(0)}</td>
                  <td className="px-3 py-2 text-right text-slate-300">{(s.total_width_mm ?? s.width ?? 0).toFixed(0)}</td>
                  <td className="px-3 py-2 text-right text-slate-300">{(s.total_depth_mm ?? s.depth ?? 0).toFixed(0)}</td>
                  <td className="px-2 py-2">
                    <div className="flex items-center gap-1">
                      <button onClick={(e) => { e.stopPropagation(); onDuplicate?.(i); }} className="text-slate-500 hover:text-cyan-300"><Copy className="h-3.5 w-3.5" /></button>
                      <button onClick={(e) => { e.stopPropagation(); onDelete?.(i); }} className="text-slate-500 hover:text-red-400"><Trash2 className="h-3.5 w-3.5" /></button>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}