import { useState, useEffect } from 'react';
import { Undo2, Redo2, Trash2, Brush, Eye } from 'lucide-react';

const ZONE_TOOLS = [
  { type: 'No contact', color: '#ef4444', label: 'No contact' },
  { type: 'Extra clearance', color: '#f97316', label: 'Extra clearance' },
  { type: 'Raised scar', color: '#eab308', label: 'Raised scar' },
  { type: 'Pinch spot', color: '#c026d3', label: 'Pinch spot' },
  { type: 'Painful area', color: '#eab308', label: 'Painful area' },
  { type: 'Moving skin', color: '#a855f7', label: 'Moving skin' },
  { type: 'Skin fold', color: '#a855f7', label: 'Skin fold' },
  { type: 'Heat-sensitive area', color: '#ef4444', label: 'Heat sensitive' },
  { type: 'Mechanical keep-out', color: '#6b7280', label: 'Mechanical keep-out' },
  { type: 'Safe attachment zone', color: '#3b82f6', label: 'Safe attachment' },
  { type: 'Custom', color: '#22d3ee', label: 'Custom' },
];

export default function SensitiveZoneMapper({ zones = [], onSettingsChange, onRemoveZone, onUndo, onRedo, canUndo, canRedo }) {
  const [activeTool, setActiveTool] = useState(ZONE_TOOLS[0]);
  const [brushSize, setBrushSize] = useState(15);
  const [clearanceDepth, setClearanceDepth] = useState(3);
  const [zoneLabel, setZoneLabel] = useState('');
  const [sensitivity, setSensitivity] = useState('Medium');
  const [contactPermission, setContactPermission] = useState('No contact');
  const [notes, setNotes] = useState('');

  useEffect(() => {
    onSettingsChange?.({
      type: activeTool.type,
      color: activeTool.color,
      brushSize,
      clearanceDepth,
      label: zoneLabel || activeTool.label,
      sensitivity,
      contactPermission,
      notes,
    });
  }, [activeTool, brushSize, clearanceDepth, zoneLabel, sensitivity, contactPermission, notes]);

  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">Sensitive Zone Mapper</h2>
        <p className="mt-1 text-xs text-slate-500">Click on the 3D model to paint zones on the surface.</p>
      </div>
      <div className="flex-1 overflow-y-auto p-4">
        <div className="mb-4">
          <h3 className="mb-2 text-xs font-semibold uppercase tracking-[0.14em] text-slate-400">Zone Tools</h3>
          <div className="grid grid-cols-2 gap-1.5">
            {ZONE_TOOLS.map(tool => (
              <button
                key={tool.type}
                onClick={() => setActiveTool(tool)}
                className={`flex items-center gap-2 rounded-lg border px-2.5 py-2 text-xs font-medium transition ${
                  activeTool.type === tool.type ? 'border-cyan-400/40 bg-cyan-400/10 text-cyan-300' : 'border-white/10 text-slate-400 hover:text-slate-200'
                }`}
              >
                <span className="h-3 w-3 shrink-0 rounded-full" style={{ backgroundColor: tool.color }} />
                <span className="truncate">{tool.label}</span>
              </button>
            ))}
          </div>
        </div>
        <div className="mb-4 space-y-3">
          <div>
            <label className="mb-1 flex items-center justify-between text-xs font-medium text-slate-400"><span className="flex items-center gap-1"><Brush className="h-3 w-3" />Brush size</span><span className="text-slate-300">{brushSize} mm</span></label>
            <input type="range" min={5} max={40} value={brushSize} onChange={e => setBrushSize(parseInt(e.target.value))} className="w-full accent-cyan-400" />
          </div>
          <div>
            <label className="mb-1 flex items-center justify-between text-xs font-medium text-slate-400"><span>Clearance depth</span><span className="text-slate-300">{clearanceDepth} mm</span></label>
            <input type="range" min={0} max={15} value={clearanceDepth} onChange={e => setClearanceDepth(parseInt(e.target.value))} className="w-full accent-cyan-400" />
          </div>
          <div>
            <label className="text-xs font-medium text-slate-400">Zone label</label>
            <input value={zoneLabel} onChange={e => setZoneLabel(e.target.value)} placeholder="Optional label" className="workshop-input" />
          </div>
          <div className="grid grid-cols-2 gap-2">
            <div>
              <label className="text-xs font-medium text-slate-400">Sensitivity</label>
              <select value={sensitivity} onChange={e => setSensitivity(e.target.value)} className="workshop-input">
                <option>Low</option><option>Medium</option><option>High</option><option>Critical</option>
              </select>
            </div>
            <div>
              <label className="text-xs font-medium text-slate-400">Contact</label>
              <select value={contactPermission} onChange={e => setContactPermission(e.target.value)} className="workshop-input">
                <option>No contact</option><option>Light contact</option><option>Full contact</option>
              </select>
            </div>
          </div>
          <div>
            <label className="text-xs font-medium text-slate-400">Notes</label>
            <textarea value={notes} onChange={e => setNotes(e.target.value)} placeholder="Zone notes..." className="workshop-input min-h-12" />
          </div>
        </div>
        <div className="mb-4 flex items-center gap-1.5">
          <button onClick={onUndo} disabled={!canUndo} className="btn-secondary !px-3 !py-2 !text-xs"><Undo2 className="h-3.5 w-3.5" />Undo</button>
          <button onClick={onRedo} disabled={!canRedo} className="btn-secondary !px-3 !py-2 !text-xs"><Redo2 className="h-3.5 w-3.5" />Redo</button>
          <button onClick={() => zones.forEach((_, i) => onRemoveZone?.(0))} className="btn-secondary !px-3 !py-2 !text-xs"><Trash2 className="h-3.5 w-3.5" />Clear</button>
        </div>
        <div>
          <h3 className="mb-2 text-xs font-semibold uppercase tracking-[0.14em] text-slate-400">Painted Zones ({zones.length})</h3>
          <div className="space-y-1.5">
            {zones.map((z, i) => (
              <div key={i} className="flex items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-2.5 py-2 text-xs">
                <span className="h-3 w-3 shrink-0 rounded-full" style={{ backgroundColor: z.color }} />
                <span className="flex-1 truncate text-slate-300">{z.label}</span>
                <button onClick={() => onRemoveZone?.(i)} className="text-slate-500 hover:text-red-400"><Trash2 className="h-3.5 w-3.5" /></button>
              </div>
            ))}
            {zones.length === 0 && <p className="py-4 text-center text-xs text-slate-500">No zones painted yet. Click on the 3D model to begin.</p>}
          </div>
        </div>
      </div>
    </div>
  );
}