import { Star, Eye, EyeOff, Lock, Unlock, MoreHorizontal, Trash2, Copy, ArrowUp, ArrowDown } from 'lucide-react';
import { BEHAVIOURS, EFFECTS, INTENSITY, MATERIALS, PLACEMENTS, regionForPiece } from '@/lib/canvasDemo';
import { useExperienceMode } from '@/lib/ExperienceMode';

export default function DesignPiecesPanel({ pieces, selectedId, focalId, onSelect, onUpdate, onDelete, onDuplicate, onSetFocal, onRename, onOrder }) {
  const { mode } = useExperienceMode();
  const guided = mode === 'guided';
  const list = [...(Array.isArray(pieces) ? pieces : [])].sort((a, b) => (b.order ?? 0) - (a.order ?? 0));
  const selected = pieces.find(p => p.id === selectedId);

  return (
    <aside className="panel flex w-full flex-col gap-3 p-4 lg:w-[320px] lg:shrink-0">
      <h2 className="section-title">Design pieces</h2>

      {list.length === 0 ? (
        <p className="empty">Add your first design piece.</p>
      ) : (
        <div className="space-y-1.5">
          {list.map(p => (
            <div key={p.id} className={`flex items-center gap-2 rounded-lg border p-2 transition ${selectedId === p.id ? 'border-cyan-400/50 bg-cyan-400/[0.06]' : 'border-white/[0.06] bg-black/20 hover:border-white/15'}`}>
              <button onClick={() => onSelect(p.id)} className="flex min-w-0 flex-1 items-center gap-2 text-left">
                <span className="h-9 w-9 shrink-0 overflow-hidden rounded-md border border-white/10 bg-[#0a0e13]"><img src={p.src} alt="" className="h-full w-full object-contain" /></span>
                <span className="min-w-0">
                  <input value={p.name} onChange={e => onRename(p.id, e.target.value)} onClick={e => e.stopPropagation()} className="w-full bg-transparent text-xs font-semibold text-white focus:outline-none" />
                  <span className="text-[9px] text-slate-500">{regionForPiece(p).replace('_', ' ')}</span>
                </span>
              </button>
              <div className="flex items-center gap-0.5">
                <button onClick={() => onUpdate(p.id, { visible: p.visible === false ? true : false })} className="icon-button !h-7 !w-7" title={p.visible === false ? 'Show' : 'Hide'}>{p.visible === false ? <EyeOff size={12} /> : <Eye size={12} />}</button>
                <button onClick={() => onUpdate(p.id, { locked: !p.locked })} className="icon-button !h-7 !w-7" title="Lock">{p.locked ? <Lock size={12} className="text-amber-300" /> : <Unlock size={12} />}</button>
                <button onClick={() => onSetFocal(p.id)} className="icon-button !h-7 !w-7" title="Most important part">{p.id === focalId ? <Star size={12} className="text-cyan-300" fill="currentColor" /> : <Star size={12} />}</button>
              </div>
            </div>
          ))}
        </div>
      )}

      {selected && (
        <div className="space-y-3 border-t border-white/10 pt-3">
          <div>
            <p className="mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-cyan-300">Most important part</p>
            <div className="flex gap-1.5">
              <button onClick={() => onSetFocal(selected.id)} className={`tool-button flex-1 justify-center ${selected.id === focalId ? 'active-tool' : ''}`}><Star size={12} /> {selected.id === focalId ? 'Focal point selected' : 'Mark as focal'}</button>
              {selected.id === focalId && <button onClick={() => onSetFocal(null)} className="tool-button">Clear</button>}
            </div>
            <p className="mt-1 text-[10px] text-slate-500">Select the part that should stay most visible when CoverCanvas fits this design to different covers.</p>
          </div>

          <div>
            <p className="mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-slate-400">How should this piece adapt?</p>
            <div className="grid grid-cols-1 gap-1">
              {BEHAVIOURS.map(([k, label]) => (
                <button key={k} onClick={() => onUpdate(selected.id, { behaviour: k })} className={`rounded-md border px-2 py-1.5 text-left text-[11px] transition ${selected.behaviour === k ? 'border-cyan-400/50 bg-cyan-400/10 text-cyan-100' : 'border-white/[0.06] text-slate-300 hover:border-white/15'}`}>{label}</button>
              ))}
            </div>
          </div>

          <div>
            <p className="mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-slate-400">Where should it appear?</p>
            <select value={selected.placement} onChange={e => onUpdate(selected.id, { placement: e.target.value })} className="field !min-h-9 !py-1.5 text-xs">
              {PLACEMENTS.map(([k, label]) => <option key={k} value={k}>{label}</option>)}
            </select>
          </div>

          <div>
            <p className="mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-slate-400">Effect intent <span className="ml-1 rounded border border-amber-400/30 bg-amber-400/10 px-1 text-[8px] text-amber-200">Preview only</span></p>
            <select value={selected.effect} onChange={e => onUpdate(selected.id, { effect: e.target.value })} className="field !min-h-9 !py-1.5 text-xs">
              {EFFECTS.map(([k, label]) => <option key={k} value={k}>{label}</option>)}
            </select>
            {guided && (
              <div className="mt-2">
                <p className="mb-1 text-[10px] text-slate-500">Intensity</p>
                <div className="flex gap-1">
                  {INTENSITY.map(([k, label]) => <button key={k} onClick={() => onUpdate(selected.id, { intensity: k })} className={`flex-1 rounded-md border px-2 py-1 text-[10px] ${selected.intensity === k ? 'border-cyan-400/50 bg-cyan-400/10 text-cyan-100' : 'border-white/10 text-slate-400'}`}>{label}</button>)}
                </div>
              </div>
            )}
          </div>

          <div>
            <p className="mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-slate-400">Colour intent</p>
            <div className="grid grid-cols-3 gap-1.5">
              {[['mainColour', 'Main'], ['accentColour', 'Accent'], ['backgroundColour', 'Background']].map(([k, label]) => (
                <label key={k} className="block">
                  <span className="mb-1 block text-[9px] text-slate-500">{label}</span>
                  <input type="color" value={selected[k] || '#22d3ee'} onChange={e => onUpdate(selected.id, { [k]: e.target.value })} className="h-8 w-full cursor-pointer rounded border border-white/10 bg-transparent" />
                </label>
              ))}
            </div>
          </div>

          {!guided && (
            <div>
              <p className="mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-slate-400">Material appearance (preview only)</p>
              <select value={selected.material} onChange={e => onUpdate(selected.id, { material: e.target.value })} className="field !min-h-9 !py-1.5 text-xs">
                {MATERIALS.map(m => <option key={m} value={m}>{m}</option>)}
              </select>
            </div>
          )}

          <div className="flex flex-wrap gap-1.5 border-t border-white/10 pt-2">
            <button onClick={() => onDuplicate(selected.id)} className="tool-button"><Copy size={12} /> Duplicate</button>
            <button onClick={() => onOrder(selected.id, 1)} className="tool-button"><ArrowUp size={12} /> Forward</button>
            <button onClick={() => onOrder(selected.id, -1)} className="tool-button"><ArrowDown size={12} /> Backward</button>
            <button onClick={() => onDelete(selected.id)} className="tool-button text-red-300 hover:border-red-500/40"><Trash2 size={12} /> Delete</button>
          </div>
        </div>
      )}
    </aside>
  );
}