import { X, Box, Loader2 } from 'lucide-react';
import { analyseCoverCompatibility } from '@/lib/adaptation';

export default function CoverDrawer({ open, onClose, covers, loading, onPick, onLoadDemo }) {
  if (!open) return null;
  const list = Array.isArray(covers) ? covers : [];
  return (
    <div className="fixed inset-0 z-50">
      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
      <aside className="absolute right-0 top-0 flex h-full w-full max-w-md flex-col border-l border-white/10 bg-[#0a0e13] p-4 shadow-2xl">
        <header className="mb-4 flex items-center justify-between">
          <div>
            <h2 className="font-heading text-lg font-semibold text-white">Choose where this design will go</h2>
            <p className="text-xs text-slate-400">Pick a demonstration cover to preview the fit. Your master design stays unchanged.</p>
          </div>
          <button onClick={onClose} className="icon-button"><X size={16} /></button>
        </header>

        {loading ? (
          <div className="empty"><Loader2 className="mx-auto mb-2 animate-spin text-cyan-300" />Loading covers…</div>
        ) : list.length === 0 ? (
          <div className="panel empty">
            <p>No compatible covers are available yet.</p>
            <button onClick={onLoadDemo} className="btn-secondary mx-auto mt-3"><Box size={14} /> Load demonstration covers</button>
          </div>
        ) : (
          <div className="flex-1 space-y-3 overflow-y-auto pr-1">
            {list.map(c => {
              const comp = analyseCoverCompatibility({ design: {}, cover: c });
              const tone = comp.level === 'good' ? 'emerald' : comp.level === 'adaptable' ? 'cyan' : comp.level === 'limited' ? 'amber' : 'slate';
              return (
                <article key={c.id} className="panel flex gap-3 p-3">
                  <div className="h-28 w-20 shrink-0 overflow-hidden rounded-lg border border-white/10 bg-[#0a0e13]">
                    {c.previewImageUrl ? <img src={c.previewImageUrl} alt={c.name} className="h-full w-full object-cover" /> : <div className="grid h-full place-items-center text-slate-600"><Box size={22} /></div>}
                  </div>
                  <div className="flex min-w-0 flex-1 flex-col">
                    <p className="text-sm font-semibold text-white">{c.name}</p>
                    <p className="mt-0.5 text-[10px] text-slate-500">{c.limbType || '—'} · {c.side || '—'} · v{c.version || 1}</p>
                    <p className="mt-1 text-[10px] text-slate-400">Decoration area: {c.decorationZones?.length ? 'mapped' : 'estimated'}</p>
                    <span className={`mt-1 inline-flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-[9px] font-semibold ${tone === 'emerald' ? 'border-emerald-400/30 bg-emerald-400/10 text-emerald-300' : tone === 'cyan' ? 'border-cyan-400/30 bg-cyan-400/10 text-cyan-200' : tone === 'amber' ? 'border-amber-400/30 bg-amber-400/10 text-amber-200' : 'border-slate-600 bg-slate-800/60 text-slate-400'}`}>
                      {comp.level === 'good' ? 'Good fit' : comp.level === 'adaptable' ? 'Adaptable' : comp.level === 'limited' ? 'Limited space' : 'Needs adjustment'}
                    </span>
                    <span className="mt-1 inline-flex w-fit rounded border border-violet-400/30 bg-violet-400/10 px-1.5 py-0.5 text-[8px] font-semibold text-violet-200">Demonstration cover</span>
                    <button onClick={() => onPick(c)} className="btn-primary mt-2 text-xs">Preview fit</button>
                  </div>
                </article>
              );
            })}
            <button onClick={onLoadDemo} className="btn-ghost w-full text-xs"><Box size={13} /> Use a different cover later</button>
          </div>
        )}
      </aside>
    </div>
  );
}