// Papperskorg för raderade offerter.
//
// Radering har hela tiden varit "mjuk" på servern — innehållet ligger kvar och
// bara ett datum sätts. Men det fanns ingen vy som visade de raderade, och
// klienten kom bara ihåg den senaste raderingen så länge sidan var öppen.
// Laddade man om var offerten i praktiken oåtkomlig, trots att bekräftelserutan
// lovade att raderingen gick att ångra. Nu finns listan.
function Trash({ open, onClose, onRestored }) {
  const [rader, setRader] = React.useState([]);
  const [fel, setFel] = React.useState('');
  const [laddar, setLaddar] = React.useState(false);

  const ladda = React.useCallback(() => {
    setLaddar(true); setFel('');
    api('/api/offers-papperskorg')
      .then(setRader)
      .catch(e => setFel(e.message || 'Kunde inte hämta papperskorgen.'))
      .finally(() => setLaddar(false));
  }, []);

  React.useEffect(() => { if (open) ladda(); }, [open, ladda]);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  if (!open) return null;

  const aterstall = async (id) => {
    try {
      const offert = await api(`/api/offers/${id}/undelete`, { method: 'POST' });
      setRader(r => r.filter(x => x.id !== id));
      onRestored(offert);
    } catch (e) {
      setFel(e.message || 'Kunde inte återställa offerten.');
    }
  };

  return (
    <div onMouseDown={e => { if (e.target === e.currentTarget) onClose(); }} style={{
      position: 'fixed', inset: 0, background: 'rgba(0,54,95,.32)', zIndex: 200,
      display: 'flex', justifyContent: 'center', alignItems: 'flex-start', padding: '8vh 16px 16px',
    }}>
      <div role="dialog" aria-modal="true" aria-label="Papperskorg" style={{
        background: '#fff', borderRadius: 8, width: '100%', maxWidth: 720,
        boxShadow: '0 24px 64px rgba(0,54,95,.3)', fontFamily: 'var(--font-sans)', color: 'var(--ulab-navy)',
      }}>
        <div style={{ padding: '22px 24px 16px', borderBottom: '1px solid var(--border)' }}>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--fg-muted)' }}>Raderade offerter</div>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 22, margin: '6px 0 0' }}>Papperskorg</h2>
          <div style={{ fontSize: 12.5, color: 'var(--fg-muted)', marginTop: 8 }}>
            Ingenting raderas på riktigt när du tar bort en offert — den hamnar här och går att ta tillbaka.
          </div>
        </div>
        <div style={{ padding: '10px 24px 20px', maxHeight: '56vh', overflow: 'auto' }}>
          {fel && <div style={{ color: 'var(--ulab-coral)', fontSize: 13, padding: '10px 0' }}>{fel}</div>}
          {laddar && <div style={{ fontSize: 13, color: 'var(--fg-muted)', padding: '14px 0' }}>Hämtar…</div>}
          {!laddar && !rader.length && !fel && (
            <div style={{ fontSize: 13, color: 'var(--fg-muted)', padding: '14px 0' }}>Papperskorgen är tom.</div>
          )}
          {rader.map(r => (
            <div key={r.id} style={{
              display: 'flex', gap: 12, alignItems: 'center', padding: '11px 0',
              borderBottom: '1px solid var(--border)', flexWrap: 'wrap',
            }}>
              <div style={{ flex: 1, minWidth: 220 }}>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{r.number} · {r.subject || 'Utan ämne'}</div>
                <div style={{ fontSize: 11.5, color: 'var(--fg-muted)', marginTop: 2 }}>
                  {r.customer_name || 'Ingen kund'} · raderad {String(r.deleted_at || '').slice(0, 16).replace('T', ' ')}
                  {r.owner_name ? ` · ${r.owner_name}` : ''}
                </div>
              </div>
              <button onClick={() => aterstall(r.id)} style={{
                fontFamily: 'var(--font-sans)', fontSize: 12.5, fontWeight: 600, padding: '8px 14px',
                borderRadius: 4, border: '1px solid var(--border-strong)', background: '#fff',
                color: 'var(--ulab-navy)', cursor: 'pointer',
              }}>Återställ</button>
            </div>
          ))}
        </div>
        <div style={{ padding: '14px 24px 20px', borderTop: '1px solid var(--border)' }}>
          <button onClick={onClose} style={{
            fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, padding: '10px 16px',
            borderRadius: 4, border: 'none', background: 'var(--ulab-navy)', color: '#fff', cursor: 'pointer',
          }}>Stäng</button>
        </div>
      </div>
    </div>
  );
}

window.Trash = Trash;