import { useState } from 'react';
import { Layers, Sparkles, AlertTriangle, Expand } from 'lucide-react';

export default function CoverBuilder({ params, onParamChange, onExplodeView, exploded = false }) {
  const p = params || {};
  const set = (key, val) => onParamChange?.({ ...p, [key]: val });

  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">Cover Build Workspace</h2>
        <p className="mt-1 text-xs text-slate-500">Design the cosmetic cover shell around the prosthesis.</p>
      </div>
      <div className="flex-1 overflow-y-auto p-4">
        <div className="mb-3 flex items-start gap-2 rounded-xl border border-amber-400/30 bg-amber-400/10 p-3 text-xs text-amber-200">
          <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
          <span><strong>Conceptual preview</strong> — not manufacturing geometry. Print Ready unavailable until CAD geometry is connected.</span>
        </div>

        <div className="mb-4">
          <h3 className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-[0.14em] text-slate-400"><Layers className="h-3.5 w-3.5" />Geometry</h3>
          <div className="space-y-3 rounded-xl border border-white/10 bg-white/[0.02] p-3">
            <Slider label="Global clearance" value={p.clearance ?? 6} min={0} max={20} unit="mm" onChange={v => set('clearance', v)} />
            <Slider label="Sensitive-zone clearance" value={p.sensitiveClearance ?? 10} min={0} max={25} unit="mm" onChange={v => set('sensitiveClearance', v)} />
            <Slider label="Wall thickness" value={p.wallThickness ?? 3} min={1} max={8} unit="mm" onChange={v => set('wallThickness', v)} />
            <Slider label="Edge thickness" value={p.edgeThickness ?? 2} min={0.5} max={5} unit="mm" onChange={v => set('edgeThickness', v)} />
          </div>
        </div>

        <div className="mb-4">
          <h3 className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-[0.14em] text-slate-400"><Sparkles className="h-3.5 w-3.5" />Shell Design</h3>
          <div className="space-y-3 rounded-xl border border-white/10 bg-white/[0.02] p-3">
            <div>
              <label className="text-xs font-medium text-slate-400">Panel count</label>
              <select value={p.panelCount ?? 2} onChange={e => set('panelCount', parseInt(e.target.value))} className="workshop-input">
                <option value={1}>1 (Single shell)</option>
                <option value={2}>2 (Clam shell)</option>
                <option value={3}>3 (Three-panel)</option>
                <option value={4}>4 (Four-panel)</option>
              </select>
            </div>
            <div>
              <label className="text-xs font-medium text-slate-400">Seam orientation</label>
              <select value={p.seamOrientation ?? 'medial-lateral'} onChange={e => set('seamOrientation', e.target.value)} className="workshop-input">
                <option value="medial-lateral">Medial-lateral</option>
                <option value="anterior-posterior">Anterior-posterior</option>
                <option value="spiral">Spiral</option>
              </select>
            </div>
            <div>
              <label className="text-xs font-medium text-slate-400">Shell type</label>
              <select value={p.shellType ?? 'clam'} onChange={e => set('shellType', e.target.value)} className="workshop-input">
                <option value="hinged">Hinged shell</option>
                <option value="clam">Clam shell</option>
                <option value="overlapping">Overlapping wrap</option>
              </select>
            </div>
            <div>
              <label className="text-xs font-medium text-slate-400">Opening direction</label>
              <select value={p.openingDirection ?? 'medial'} onChange={e => set('openingDirection', e.target.value)} className="workshop-input">
                <option value="medial">Medial</option>
                <option value="lateral">Lateral</option>
                <option value="anterior">Anterior</option>
                <option value="posterior">Posterior</option>
              </select>
            </div>
            <div>
              <label className="text-xs font-medium text-slate-400">Attachment type</label>
              <select value={p.attachment ?? 'clip'} onChange={e => set('attachment', e.target.value)} className="workshop-input">
                <option value="clip">Clip</option>
                <option value="magnetic">Magnetic</option>
                <option value="straps">Straps</option>
                <option value="friction">Friction fit</option>
              </select>
            </div>
            <Slider label="Ventilation density" value={p.ventilationDensity ?? 30} min={0} max={100} unit="%" onChange={v => set('ventilationDensity', v)} />
            <Slider label="Edge rounding" value={p.edgeRounding ?? 50} min={0} max={100} unit="%" onChange={v => set('edgeRounding', v)} />
          </div>
        </div>

        <div className="mb-4">
          <h3 className="mb-2 text-xs font-semibold uppercase tracking-[0.14em] text-slate-400">SHiRE Logo</h3>
          <div className="space-y-3 rounded-xl border border-white/10 bg-white/[0.02] p-3">
            <Slider label="Logo size" value={p.logoSize ?? 40} min={15} max={80} unit="mm" onChange={v => set('logoSize', v)} />
            <Slider label="Logo depth" value={p.logoDepth ?? 1.5} min={0} max={5} step={0.5} unit="mm" onChange={v => set('logoDepth', v)} />
            <div>
              <label className="text-xs font-medium text-slate-400">Logo placement</label>
              <select value={p.logoPlacement ?? 'exterior'} onChange={e => set('logoPlacement', e.target.value)} className="workshop-input">
                <option value="exterior">Exterior surface</option>
                <option value="inlay">Inlay</option>
                <option value="recessed">Recessed</option>
                <option value="plate">Logo plate</option>
              </select>
            </div>
          </div>
        </div>

        <button onClick={onExplodeView} className={`btn-secondary w-full ${exploded ? 'border-cyan-400/40 text-cyan-300' : ''}`}>
          <Expand className="h-4 w-4" />{exploded ? 'Collapse exploded view' : 'Exploded view'}
        </button>
      </div>
    </div>
  );
}

function Slider({ label, value, min, max, step = 1, unit, onChange }) {
  return (
    <div>
      <label className="mb-1 flex items-center justify-between text-xs font-medium text-slate-400">
        <span>{label}</span>
        <span className="text-slate-300">{value} {unit}</span>
      </label>
      <input type="range" min={min} max={max} step={step} value={value} onChange={e => onChange(parseFloat(e.target.value))} className="w-full accent-cyan-400" />
    </div>
  );
}