import { useEffect, useState } from 'react';
import { Plus } from 'lucide-react';
import { dimensionService } from '@/services/dimensionService';
import RecordForm from '@/components/dimensions/RecordForm';
import { ACCESS_POINT_FIELDS } from '@/components/dimensions/formConfigs';
export default function ControlsAccessTab({ component, actor }) {
  const [items, setItems] = useState([]);
  const [adding, setAdding] = useState(false);
  const load = () => dimensionService.accessPoints(component.uuid).then(setItems);
  useEffect(() => { load(); }, [component.uuid]);
  const save = async (data) => { await dimensionService.saveAccessPoint({ ...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">Access zones become mandatory keep-out geometry for CAD generation. Each must remain visible and accessible.</p>
        <button className="btn-primary" onClick={() => setAdding(true)}><Plus/>Add access point</button>
      </div>
      {adding && <div className="panel p-6"><RecordForm title="New access point" fields={ACCESS_POINT_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 access points recorded yet.</p></div>
      ) : items.map(a => (
        <div key={a.uuid} className="panel p-5">
          <div className="flex items-start justify-between"><div><h3 className="font-semibold text-white">{a.name}</h3><p className="text-xs text-slate-500">{a.type} · {a.position || 'Position not set'}</p></div><div className="flex gap-2 text-xs">{a.must_remain_visible && <span className="rounded bg-violet-400/10 px-2 py-1 text-violet-300">Visible</span>}{a.must_remain_accessible && <span className="rounded bg-amber-400/10 px-2 py-1 text-amber-300">Accessible</span>}</div></div>
          <div className="mt-3 grid gap-2 text-sm text-slate-400 sm:grid-cols-4"><span>W: {a.width_mm || '—'} mm</span><span>H: {a.height_mm || '—'} mm</span><span>D: {a.depth_mm || '—'} mm</span><span>Clearance: {a.required_clearance_mm || '—'} mm</span></div>
          {a.notes && <p className="mt-2 text-xs text-slate-500">{a.notes}</p>}
        </div>
      ))}
    </div>
  );
}