// Modal som visar en offerts versionshistorik (en snapshot sparas varje gång
// den sparas) och låter en återställa en tidigare version.
function OfferHistory({ open, offerId, onClose, onRestored }) {
  const [versions, setVersions] = React.useState([]);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');
  const [busyId, setBusyId] = React.useState(null);

  React.useEffect(() => {
    // Listan tömdes tidigare inte vid byte av offert: misslyckades hämtningen
    // visades FÖRRA offertens versioner tillsammans med felmeddelandet, och de
    // såg fullt klickbara ut (återställningen gav sedan 404).
    setVersions([]);
    if (!open || !offerId) return;
    setLoading(true); setError('');
    api(`/api/offers/${offerId}/versions`).then(setVersions).catch(e => setError(e.message || 'Kunde inte hämta historik.')).finally(() => setLoading(false));
  }, [open, offerId]);

  if (!open) return null;

  const restore = async (versionId) => {
    if (!confirm('Återställ offerten till detta tillstånd? Det nuvarande innehållet sparas också, så det går att ångra.')) return;
    setBusyId(versionId);
    try {
      const restored = await api(`/api/offers/${offerId}/versions/${versionId}/restore`, { method: 'POST' });
      onRestored(restored);
      onClose();
    } catch (e) {
      setError(e.message || 'Kunde inte återställa versionen.');
    } finally {
      setBusyId(null);
    }
  };

  const fmt = (iso) => {
    if (!iso) return '';
    // SQLite datetime('now') är UTC utan tidszon — visa i lokal tid.
    const d = new Date(iso.replace(' ', 'T') + 'Z');
    return d.toLocaleString('sv-SE', { dateStyle: 'medium', timeStyle: 'short' });
  };

  return (
    <div onClick={onClose} style={{
      position:'fixed', inset:0, background:'rgba(0,54,95,.32)', zIndex:60,
      display:'flex', alignItems:'center', justifyContent:'center', padding:32,
    }}>
      <div role="dialog" aria-modal="true" aria-label="Versionshistorik" onClick={e => e.stopPropagation()} style={{
        width:'min(520px, 100%)', maxHeight:'80vh', background:'#fff', borderRadius:8,
        boxShadow:'0 16px 48px rgba(0,54,95,.18)', display:'flex', flexDirection:'column',
        overflow:'hidden', fontFamily:'var(--font-sans)',
      }}>
        <div style={{padding:'20px 24px', borderBottom:'1px solid var(--border)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
          <h2 style={{margin:0, fontFamily:'var(--font-serif)', fontWeight:500, fontSize:20, color:'var(--ulab-navy)'}}>Historik</h2>
          <button onClick={onClose} style={{background:'transparent', border:'none', cursor:'pointer', color:'var(--ulab-navy)'}}><Icon name="close" size={20}/></button>
        </div>
        <div style={{padding:20, overflow:'auto'}}>
          {error && <div style={{color:'var(--ulab-coral)', fontSize:13, marginBottom:12}}>{error}</div>}
          {loading ? <div style={{color:'var(--fg-muted)', fontSize:13}}>Laddar…</div> : versions.length === 0 ? (
            <div style={{color:'var(--fg-muted)', fontSize:13}}>Inga sparade versioner ännu — historik börjar samlas nästa gång offerten sparas.</div>
          ) : (
            <div>
              {versions.map((v, i) => (
                <div key={v.id} style={{
                  display:'flex', justifyContent:'space-between', alignItems:'center',
                  padding:'10px 0', borderTop: i > 0 ? '1px solid var(--border)' : 'none',
                }}>
                  <div>
                    <div style={{fontSize:13, color:'var(--ulab-navy)', fontWeight:600}}>{fmt(v.created_at)}</div>
                    <div style={{fontSize:12, color:'var(--fg-muted)'}}>{v.changed_by_name || 'Okänd'}</div>
                  </div>
                  <button onClick={() => restore(v.id)} disabled={busyId === v.id} style={{
                    background:'transparent', border:'1px solid var(--border-strong)', borderRadius:4,
                    padding:'6px 12px', fontSize:12, color:'var(--ulab-navy)', cursor:'pointer',
                  }}>{busyId === v.id ? 'Återställer…' : 'Återställ'}</button>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
window.OfferHistory = OfferHistory;