import { useEffect, useState } from 'react';
import { Plus } from 'lucide-react';
import { dimensionService } from '@/services/dimensionService';
import RecordForm from '@/components/dimensions/RecordForm';
import { MOVEMENT_FIELDS } from '@/components/dimensions/formConfigs';
import { JOINT_CATEGORIES } from '@/services/dimensionDefinitions';
export default function MovementEnvelopeTab({ component, actor }) {
  const [items, setItems] = useState([]);
  const [adding, setAdding] = useState(false);
  const isJoint = JOINT_CATEGORIES.includes(component.category);
  const load = () => dimensionService.movementPositions(component.uuid).then(setItems);
  useEffect(() => { load(); }, [component.uuid]);
  const save = async (data) => { await dimensionService.saveMovementPosition({ ...data, component_uuid: component.uuid, entered_by: actor }, actor); setAdding(false); load(); };
  const combined = items.length > 0 ? { max_width: Math.max(...items.map(i => i.max_width_mm || 0)), max_depth: Math.max(...items.map(i => i.max_depth_mm || 0)), front: Math.max(...items.map(i => i.front_most_mm || 0)), rear: Math.min(...items.map(i => i.rear_most_mm || 0)), highest: Math.max(...items.map(i => i.highest_point_mm || 0)), lowest: Math.min(...items.map(i => i.lowest_point_mm || 0)) } : null;
  const cols = ['position_name', 'angle_degrees', 'front_most_mm', 'rear_most_mm', 'max_width_mm', 'max_depth_mm', 'required_clearance_mm'];
  const labels = ['Position', 'Angle°', 'Front', 'Rear', 'Width', 'Depth', 'Clearance'];
  return (
    <div className="space-y-5">
      <div className="flex items-center justify-between">
        <p className="text-sm text-slate-400">{isJoint ? 'Dynamic movement envelope across flexion positions.' : 'This component category does not typically require a movement envelope.'}</p>
        <button className="btn-primary" onClick={() => setAdding(true)}><Plus/>Record position</button>
      </div>
      {adding && <div className="panel p-6"><RecordForm title="New movement position" fields={MOVEMENT_FIELDS} onSave={save} onCancel={() => setAdding(false)} submitLabel="Save position" /></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 movement positions recorded yet. A combined dynamic envelope is not generated until real records exist.</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>{items.map(i => <tr key={i.uuid} className="border-t border-white/5">{cols.map(c => <td key={c} className="py-2 text-slate-300">{i[c] ?? '—'}</td>)}</tr>)}</tbody></table></div>
        <div className="rounded-xl border border-violet-400/30 bg-violet-400/10 p-4"><h3 className="text-sm font-semibold text-violet-300">Combined maximum dynamic envelope</h3><div className="mt-2 grid gap-3 text-sm text-slate-300 sm:grid-cols-3"><span>Max width: {combined.max_width} mm</span><span>Max depth: {combined.max_depth} mm</span><span>Front: {combined.front} mm</span><span>Rear: {combined.rear} mm</span><span>Highest: {combined.highest} mm</span><span>Lowest: {combined.lowest} mm</span></div></div>
      </>)}
    </div>
  );
}