import { useEffect, useState } from 'react';
import { Plus } from 'lucide-react';
import { dimensionService } from '@/services/dimensionService';
import RecordForm from '@/components/dimensions/RecordForm';
import { KEEP_OUT_FIELDS } from '@/components/dimensions/formConfigs';
import StatusPill from '@/components/workshop/StatusPill';
export default function KeepOutZonesTab({ component, actor }) {
  const [items, setItems] = useState([]);
  const [adding, setAdding] = useState(false);
  const load = () => dimensionService.keepOutZones(component.uuid).then(setItems);
  useEffect(() => { load(); }, [component.uuid]);
  const save = async (data) => { await dimensionService.saveKeepOutZone({ ...data, component_uuid: component.uuid, entered_by: actor }, actor); setAdding(false); load(); };
  return (
    <div className="space-y-5">
      <div className="flex items-center justify-between">
        <p className="text-sm text-slate-400">Static keep-out zones: no-contact, no-attachment, ventilation, heat, service, moving parts and more.</p>
        <button className="btn-primary" onClick={() => setAdding(true)}><Plus/>Add keep-out zone</button>
      </div>
      {adding && <div className="panel p-6"><RecordForm title="New keep-out zone" fields={KEEP_OUT_FIELDS} onSave={save} onCancel={() => setAdding(false)} /></div>}
      {items.length === 0 ? (
        <div className="rounded-xl border border-dashed border-white/10 p-8 text-center text-slate-500"><p className="text-sm">No keep-out zones recorded yet.</p></div>
      ) : items.map(z => (
        <div key={z.uuid} className="panel p-5">
          <div className="flex items-start justify-between"><div><h3 className="font-semibold text-white">{z.name}</h3><p className="text-xs text-slate-500">{z.position || 'Position not set'}</p></div><StatusPill tone="red">{z.type}</StatusPill></div>
          <div className="mt-3 grid gap-2 text-sm text-slate-400 sm:grid-cols-4"><span>W: {z.width_mm || '—'} mm</span><span>H: {z.height_mm || '—'} mm</span><span>D: {z.depth_mm || '—'} mm</span><span>Clearance: {z.clearance_mm || '—'} mm</span></div>
          {z.reason && <p className="mt-2 text-xs text-slate-500">Reason: {z.reason}</p>}
        </div>
      ))}
    </div>
  );
}