import { useState } from 'react';
import { Plus, Trash2, Eye, EyeOff, Lock, ChevronUp, ChevronDown, GripVertical } from 'lucide-react';

const COMPONENT_TYPES = ['Socket', 'Knee', 'Adapter', 'Rotation adapter', 'Pylon', 'Ankle', 'Foot', 'Osseointegration connector', 'Custom component'];

export default function ProsthesisMapper({ assembly = [], onAdd, onRemove, onUpdate, onReorder, components = [] }) {
  const [selectedComp, setSelectedComp] = useState(null);
  const [showAdd, setShowAdd] = useState(false);

  const handleAdd = (type) => {
    onAdd?.({ component_label: type, position_in_assembly: assembly.length + 1, offset_mm: '0', orientation: 'Normal' });
    setShowAdd(false);
  };

  const comp = selectedComp != null ? assembly[selectedComp] : null;

  return (
    <div className="flex h-full flex-col">
      <div className="border-b border-white/10 px-4 py-3">
        <h2 className="text-xs font-semibold uppercase tracking-[0.14em] text-cyan-400">Prosthesis Mapper</h2>
        <p className="mt-1 text-xs text-slate-500">Assembly workspace — position components in a shared coordinate system.</p>
      </div>
      <div className="flex-1 overflow-y-auto p-4">
        <button onClick={() => setShowAdd(!showAdd)} className="btn-primary mb-3 w-full"><Plus className="h-4 w-4" />Add Component</button>
        {showAdd && (
          <div className="mb-3 grid grid-cols-2 gap-1.5 rounded-xl border border-white/10 bg-white/5 p-2">
            {COMPONENT_TYPES.map(t => (
              <button key={t} onClick={() => handleAdd(t)} className="rounded-lg border border-white/10 px-2.5 py-2 text-xs text-slate-300 hover:border-cyan-400/30 hover:text-cyan-300">{t}</button>
            ))}
          </div>
        )}
        <div className="mb-4 space-y-1.5">
          {assembly.map((a, i) => (
            <div key={i} className={`flex items-center gap-2 rounded-lg border px-2.5 py-2 text-xs transition ${selectedComp === i ? 'border-cyan-400/40 bg-cyan-400/10' : 'border-white/10 hover:bg-white/5'}`}>
              <GripVertical className="h-3.5 w-3.5 shrink-0 text-slate-600" />
              <button onClick={() => setSelectedComp(selectedComp === i ? null : i)} className="flex-1 text-left text-slate-200">{a.component_label || `Component ${i + 1}`}</button>
              <button onClick={() => onReorder?.(i, -1)} className="text-slate-500 hover:text-cyan-300"><ChevronUp className="h-3.5 w-3.5" /></button>
              <button onClick={() => onReorder?.(i, 1)} className="text-slate-500 hover:text-cyan-300"><ChevronDown className="h-3.5 w-3.5" /></button>
              <button onClick={() => onRemove?.(i)} className="text-slate-500 hover:text-red-400"><Trash2 className="h-3.5 w-3.5" /></button>
            </div>
          ))}
          {assembly.length === 0 && <p className="py-4 text-center text-xs text-slate-500">No components in assembly. Add components to begin.</p>}
        </div>
        {comp && (
          <div className="space-y-3 rounded-xl border border-cyan-400/20 bg-cyan-400/5 p-3">
            <h3 className="text-xs font-semibold uppercase tracking-[0.14em] text-cyan-300">{comp.component_label}</h3>
            <div>
              <label className="text-xs font-medium text-slate-400">Vertical offset</label>
              <input type="number" value={comp.offset_mm || 0} onChange={e => onUpdate?.(selectedComp, { offset_mm: e.target.value })} className="workshop-input" />
            </div>
            <div>
              <label className="text-xs font-medium text-slate-400">Rotation (degrees)</label>
              <input type="number" value={comp.rotation_degrees || 0} onChange={e => onUpdate?.(selectedComp, { rotation_degrees: parseFloat(e.target.value) })} className="workshop-input" />
            </div>
            <div>
              <label className="text-xs font-medium text-slate-400">Visual scale (alignment only)</label>
              <input type="range" min="0.5" max="1.5" step="0.05" defaultValue={1} className="w-full accent-cyan-400" />
              <p className="mt-1 text-[10px] text-amber-300">⚠ Visual scaling does not overwrite verified physical dimensions.</p>
            </div>
            <div>
              <label className="text-xs font-medium text-slate-400">Connection above</label>
              <input value={comp.connection_above || ''} onChange={e => onUpdate?.(selectedComp, { connection_above: e.target.value })} placeholder="Component above" className="workshop-input" />
            </div>
            <div>
              <label className="text-xs font-medium text-slate-400">Connection below</label>
              <input value={comp.connection_below || ''} onChange={e => onUpdate?.(selectedComp, { connection_below: e.target.value })} placeholder="Component below" className="workshop-input" />
            </div>
            <div>
              <label className="text-xs font-medium text-slate-400">Installed visible length (mm)</label>
              <input type="number" value={comp.installed_visible_length_mm || ''} onChange={e => onUpdate?.(selectedComp, { installed_visible_length_mm: parseFloat(e.target.value) })} className="workshop-input" />
            </div>
            <div className="flex gap-1.5">
              <button className="btn-secondary flex-1 !text-xs"><Eye className="h-3.5 w-3.5" />Hide</button>
              <button className="btn-secondary flex-1 !text-xs"><Lock className="h-3.5 w-3.5" />Lock</button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}