// Drafts.jsx — saved drafts overlay (left-side sheet)

function Drafts({ open, onClose, drafts, onLoad, onSaveCurrent, onDelete, currentItems }) {
  if (!open) return null;
  const hasCurrent = Object.values(currentItems || {}).some(it =>
    Object.values(it.qtys || {}).some(q => q > 0)
  );

  return (
    <div className="drafts-overlay" onClick={onClose}>
      <div className="drafts-sheet" onClick={e => e.stopPropagation()}>
        <button className="btn btn-ghost" onClick={onClose} style={{marginBottom: 16, padding: 0}}>← close</button>
        <h2>saved drafts.</h2>
        <div className="sub">orders held in this room  ·  this device only</div>

        {drafts.length === 0 ? (
          <div className="drafts-empty">
            <img className="glyph" src="assets/icons/cluster.png" alt="" />
            <div className="lede">no drafts saved.</div>
            <div className="meta">save the current order below to come back later.</div>
          </div>
        ) : (
          <div className="drafts-list">
            {drafts.map(d => (
              <div key={d.id} className="draft-item" onClick={() => onLoad(d)}>
                <div className="nm">{d.name}</div>
                <div className="meta">
                  <span>{new Date(d.savedAt).toLocaleDateString("en-GB", {day:"2-digit", month:"short", year:"2-digit"}).toUpperCase()}</span>
                  <span className="qty">{d.units} units</span>
                  <span>€{d.value.toLocaleString()}</span>
                  <span style={{marginLeft: "auto", color: "var(--fg-3)"}}
                    onClick={(e) => { e.stopPropagation(); onDelete(d.id); }}>×</span>
                </div>
              </div>
            ))}
          </div>
        )}

        <div className="drafts-cta">
          {hasCurrent ? (
            <button className="btn btn-primary" onClick={onSaveCurrent} style={{width: "100%", justifyContent: "center"}}>
              save current order as draft
            </button>
          ) : (
            <button className="btn btn-outline" disabled style={{width: "100%", justifyContent: "center", opacity: 0.4}}>
              add items first to save a draft
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

window.Drafts = Drafts;