// budsjett-avd-sidepanel.jsx
// Sidepanel for redigering, underposter og kommentar i avdelingsbudsjettet

const BAI_SP_MND = ['Jan','Feb','Mar','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Des'];
const baiSpKr = n => n == null || n === 0 ? '—' : Math.round(n).toLocaleString('nb-NO');

const BAI_MODUL_MAP = {
  lonn:             { label:'Lønnsbudsjett',     fane:'lonn' },
  bonuslonn:        { label:'Bonuslønn',          fane:'bonuslonn' },
  hjemmelfordeling: { label:'Hjemmelfordeling',   fane:'hjemler' },
  eiendom:          { label:'Eiendommer',          fane:'eiendommer' },
  finans:           { label:'Finansinntekter',     fane:'finans' },
  fordeling:        { label:'Fordelinger',         fane:'viderefakt' },
  viderefakt:       { label:'Fordelinger',         fane:'viderefakt' },
  avtale:           { label:'Avtaler',             fane:'avtaler' },
};

// ── Send kommentar til modulansvarlig ────────────────────────
async function baiSendKommentar(versjonId, avdelingId, konto, tekst, mottaker_id) {
  const { data: { user } } = await window._sb.auth.getUser();
  const { error } = await window._sb.from('bud_kommentarer').insert({
    versjon_id:   versjonId,
    avdeling_id:  avdelingId,
    konto,
    tekst,
    sender_id:    user?.id,
    mottaker_id:  mottaker_id || null,
    created_at:   new Date().toISOString(),
  });
  if (error) throw error;
}

async function baiHentKommentarer(versjonId, avdelingId, konto) {
  const { data, error } = await window._sb.from('bud_kommentarer')
    .select('*, sender:profiles!sender_id(navn), mottaker:profiles!mottaker_id(navn)')
    .eq('versjon_id', versjonId)
    .eq('avdeling_id', avdelingId)
    .eq('konto', konto)
    .order('created_at');
  if (error) return [];
  return data || [];
}

// ── Sidepanel ────────────────────────────────────────────────
function BaiSidepanel({
  rad, versjonId, versjon, avdeling, data, laast,
  fjoraarKart, onLukk, onEndret, gåTilFane,
}) {
  const { konto, type, linje, kontoNavn, mnd } = rad;
  const erRedigerbar = type === 'grunnbudsjett' || type === 'manuell';
  const erBeregnet   = !erRedigerbar;

  const [aktivFane,   setAktivFane]   = React.useState(erRedigerbar ? 'rediger' : 'info');
  const [belop,       setBelop]       = React.useState(linje ? String(Math.abs(linje.belop_ar||0)) : '');
  const [erInntekt,   setErInntekt]   = React.useState(linje ? (linje.belop_ar||0) < 0 : false);
  const [mndModus,    setMndModus]    = React.useState(linje?.fordeling_jan_des ? 'egendefinert' : 'jevnt');
  const [mndVerdier,  setMndVerdier]  = React.useState(() => {
    if (linje?.fordeling_jan_des?.length===12)
      return linje.fordeling_jan_des.map(a=>Math.round(a*Math.abs(linje.belop_ar||0)));
    const b = Math.abs(linje?.belop_ar||0);
    return Array(12).fill(Math.round(b/12));
  });
  const [lagrer,      setLagrer]      = React.useState(false);
  const [kommentar,   setKommentar]   = React.useState('');
  const [mottakerId,  setMottakerId]  = React.useState('');
  const [kommentarer, setKommentarer] = React.useState([]);
  const [senderKom,   setSenderKom]   = React.useState(false);
  const [komSendt,    setKomSendt]    = React.useState(false);

  // Hent kommentarer
  React.useEffect(() => {
    if (!versjonId || !avdeling?.id) return;
    baiHentKommentarer(versjonId, avdeling.id, konto)
      .then(setKommentarer).catch(console.warn);
  }, [versjonId, avdeling?.id, konto]);

  // Fjorår-data for denne kontoen
  const fk = fjoraarKart?.[konto+'_'+(avdeling?.id||'')];
  const fjMnd = fk?.linjer?.[0]?.fordeling_jan_des?.length===12
    ? fk.linjer[0].fordeling_jan_des.map(a=>Math.round(a*fk.belop_ar))
    : fk ? Array(12).fill(Math.round(fk.belop_ar/12)) : null;

  // Beregn beløp fra månedsverdier
  const sumMnd = mndVerdier.reduce((s,v)=>s+(Number(v)||0),0);

  const lagreEndring = async () => {
    if (!linje?.id) return;
    setLagrer(true);
    try {
      const belopAr = mndModus === 'egendefinert' ? sumMnd : (Number(belop)||0);
      const fordeling = mndModus === 'egendefinert'
        ? mndVerdier.map(v => belopAr > 0 ? (Number(v)||0)/belopAr : 1/12)
        : null;
      await window.budDB.oppdater('bud_linjer', linje.id, {
        belop_ar: Math.round(belopAr) * (erInntekt ? -1 : 1),
        fordeling_jan_des: fordeling,
      });
      onEndret();
    } catch(e) { alert('Feil: '+e.message); }
    setLagrer(false);
  };

  const sendKommentar = async () => {
    if (!kommentar.trim()) return;
    setSenderKom(true);
    try {
      await baiSendKommentar(versjonId, avdeling?.id, konto, kommentar, mottakerId||null);
      setKommentar(''); setKomSendt(true);
      const k = await baiHentKommentarer(versjonId, avdeling?.id, konto);
      setKommentarer(k);
      setTimeout(()=>setKomSendt(false), 2500);
    } catch(e) { alert('Feil: '+e.message); }
    setSenderKom(false);
  };

  // Relevante profiler som kan motta kommentar
  const profiler = data.profiler || [];

  const FANER = [
    { id:'rediger', label:'Rediger',       vis: erRedigerbar },
    { id:'info',    label:'Info',          vis: erBeregnet },
    { id:'detalj',  label:'Grunnlag',      vis: true },
    { id:'fjoraar', label:'Fjorår',        vis: !!fk },
    { id:'komm',    label:`Kommentar${kommentarer.length>0?' ('+kommentarer.length+')':''}`, vis: true },
  ].filter(f=>f.vis);

  return (
    <>
      {/* Overlay */}
      <div onClick={onLukk}
        style={{ position:'fixed', inset:0, zIndex:290, background:'transparent' }} />

      {/* Panelet */}
      <div style={{
        position:'fixed', top:0, right:0, bottom:0, width:380, zIndex:300,
        background:'#fff', boxShadow:'-8px 0 40px rgba(17,24,61,.18)',
        display:'flex', flexDirection:'column', overflowY:'auto',
      }}>
        {/* Header */}
        <div style={{ padding:'16px 20px 12px', borderBottom:'1px solid rgba(17,24,61,.08)',
          position:'sticky', top:0, background:'#fff', zIndex:1 }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
            <div>
              <div style={{ fontSize:14, fontWeight:700, color:SK.ink }}>{kontoNavn}</div>
              <div style={{ fontSize:11.5, color:SK.soft, marginTop:2 }}>
                Konto {konto} · {avdeling?.navn}
                {erBeregnet && (() => {
                  const modul = BAI_MODUL_MAP[type];
                  return (
                    <span style={{ marginLeft:8, padding:'1px 7px', borderRadius:4, fontSize:10.5,
                      background:'rgba(186,117,23,.1)', color:'#BA7517', fontWeight:600 }}>
                      {modul?.label || (type==='import'?'Import':type==='fjoraar'?'Kopiert fra fjorår':'Beregnet')}
                      {modul && gåTilFane && (
                        <button onClick={()=>gåTilFane(modul.fane)} style={{ marginLeft:5, background:'none',
                          border:'none', color:'#BA7517', cursor:'pointer', fontSize:10.5, padding:0,
                          fontFamily:'inherit', textDecoration:'underline' }}>
                          → Gå til modul
                        </button>
                      )}
                    </span>
                  );
                })()}
              </div>
            </div>
            <button onClick={onLukk}
              style={{ border:'none', background:'none', fontSize:20, cursor:'pointer',
                color:SK.soft, padding:'0 4px', lineHeight:1 }}>×</button>
          </div>

          {/* KPI */}
          <div style={{ display:'flex', gap:12, marginTop:10 }}>
            <div style={{ flex:1, padding:'8px 10px', borderRadius:8, background:SK.iceBlueLight }}>
              <div style={{ fontSize:10, color:SK.soft, textTransform:'uppercase', fontWeight:700 }}>Årsbudsjett</div>
              <div style={{ fontSize:16, fontWeight:700, color:SK.ink, marginTop:2 }}>
                {baiSpKr(linje?.belop_ar || mnd?.reduce((s,v)=>s+v,0))} kr
              </div>
            </div>
            {fk && (
              <div style={{ flex:1, padding:'8px 10px', borderRadius:8, background:'rgba(88,107,164,.06)',
                border:'1px solid rgba(88,107,164,.12)' }}>
                <div style={{ fontSize:10, color:'#586ba4', textTransform:'uppercase', fontWeight:700 }}>Fjorår</div>
                <div style={{ fontSize:16, fontWeight:700, color:'#586ba4', marginTop:2 }}>
                  {baiSpKr(fk.belop_ar)} kr
                </div>
                {fk.belop_ar !== 0 && linje?.belop_ar != null && (
                  <div style={{ fontSize:10.5, color: (linje.belop_ar-fk.belop_ar)>0?'#c0392b':'#1b6a2e', marginTop:2 }}>
                    {((linje.belop_ar-fk.belop_ar)/Math.abs(fk.belop_ar)*100).toFixed(1)}% vs fjorår
                  </div>
                )}
              </div>
            )}
          </div>

          {/* Fane-tabs */}
          <div style={{ display:'flex', gap:0, marginTop:12, borderBottom:'1px solid rgba(17,24,61,.08)' }}>
            {FANER.map(f=>(
              <button key={f.id} onClick={()=>setAktivFane(f.id)}
                style={{ padding:'6px 12px', border:'none', cursor:'pointer', fontFamily:'inherit',
                  fontSize:12.5, fontWeight: aktivFane===f.id?700:400,
                  color: aktivFane===f.id?SK.ink:SK.soft,
                  borderBottom: aktivFane===f.id?`2px solid ${SK.ink}`:'2px solid transparent',
                  background:'transparent', marginBottom:-1 }}>
                {f.label}
              </button>
            ))}
          </div>
        </div>

        {/* Innhold */}
        <div style={{ flex:1, padding:'16px 20px' }}>

          {/* REDIGER-FANE */}
          {aktivFane==='rediger' && erRedigerbar && (
            <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
              {laast ? (
                <div style={{ padding:'12px', borderRadius:8, background:'rgba(17,24,61,.04)',
                  fontSize:13, color:SK.soft, textAlign:'center' }}>
                  Budsjettet er låst for redigering.
                </div>
              ) : (
                <>
                  {/* Modus-velger */}
                  <div>
                    <label style={{ fontSize:10.5, fontWeight:700, color:SK.soft, textTransform:'uppercase',
                      letterSpacing:0.04, display:'block', marginBottom:6 }}>Fordeling</label>
                    <div style={{ display:'flex', gap:6 }}>
                      {[['jevnt','Jevnt (1/12)'],['egendefinert','Per måned']].map(([v,l])=>(
                        <button key={v} onClick={()=>setMndModus(v)}
                          style={{ flex:1, padding:'7px', borderRadius:7, cursor:'pointer', fontFamily:'inherit',
                            fontSize:12.5, fontWeight:600, border:'none',
                            background: mndModus===v?SK.ink:'rgba(17,24,61,.07)',
                            color: mndModus===v?'#fff':SK.soft }}>
                          {l}
                        </button>
                      ))}
                    </div>
                  </div>

                  {mndModus === 'jevnt' ? (
                    <div>
                      <label style={{ fontSize:10.5, fontWeight:700, color:SK.soft, textTransform:'uppercase',
                        letterSpacing:0.04, display:'block', marginBottom:6 }}>Årsbeløp (kr)</label>
                      <input type="number" value={belop} onChange={e=>setBelop(e.target.value)}
                        style={{ width:'100%', fontSize:22, fontWeight:700, padding:'12px 16px',
                          borderRadius:8, border:'1px solid rgba(17,24,61,.2)', background:'#fff',
                          fontFamily:"'Poppins',sans-serif", color:SK.ink, boxSizing:'border-box',
                          outline:'none', display:'block' }}
                        placeholder="0"
                        onFocus={e=>e.target.style.borderColor=SK.ink}
                        onBlur={e=>e.target.style.borderColor='rgba(17,24,61,.2)'} />
                      <div style={{ display:'flex', gap:6, marginTop:8 }}>
                        {['kostnad','inntekt'].map(v=>(
                          <button key={v} onClick={()=>setErInntekt(v==='inntekt')}
                            style={{ flex:1, padding:'6px', borderRadius:6, cursor:'pointer', fontFamily:'inherit',
                              fontSize:12.5, fontWeight:600, border:'none',
                              background: (v==='inntekt')===erInntekt?SK.ink:'rgba(17,24,61,.07)',
                              color: (v==='inntekt')===erInntekt?'#fff':SK.soft }}>
                            {v==='kostnad'?'Kostnad (+)':'Inntekt (−)'}
                          </button>
                        ))}
                      </div>
                      {belop && (
                        <div style={{ fontSize:11.5, color:SK.soft, marginTop:6 }}>
                          = {Math.round(Number(belop)/12).toLocaleString('nb-NO')} kr/mnd
                        </div>
                      )}
                    </div>
                  ) : (
                    <div>
                      <label style={{ fontSize:10.5, fontWeight:700, color:SK.soft, textTransform:'uppercase',
                        letterSpacing:0.04, display:'block', marginBottom:8 }}>Beløp per måned (kr)</label>
                      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'6px 8px' }}>
                        {BAI_SP_MND.map((mnd,i)=>(
                          <div key={i}>
                            <div style={{ fontSize:10, color:SK.soft, marginBottom:2 }}>{mnd}</div>
                            <input type="number"
                              value={mndVerdier[i]===0?'':Math.round(mndVerdier[i])}
                              onChange={e=>{
                                const v = Number(e.target.value)||0;
                                setMndVerdier(m=>m.map((x,j)=>j===i?v:x));
                              }}
                              style={{ width:'100%', padding:'5px 8px', borderRadius:6, boxSizing:'border-box',
                                border:'1px solid rgba(17,24,61,.15)', fontFamily:'inherit', fontSize:12.5,
                                textAlign:'right' }}
                              placeholder="0" />
                          </div>
                        ))}
                      </div>
                      <div style={{ marginTop:8, padding:'8px 10px', borderRadius:7,
                        background: 'rgba(17,24,61,.04)', fontSize:12.5, display:'flex', justifyContent:'space-between' }}>
                        <span style={{ color:SK.soft }}>Sum</span>
                        <span style={{ fontWeight:700 }}>{sumMnd.toLocaleString('nb-NO')} kr</span>
                      </div>
                    </div>
                  )}

                  <button onClick={lagreEndring} disabled={lagrer}
                    style={{ padding:'10px', borderRadius:8, border:'none', background:SK.ink,
                      color:'#fff', fontWeight:700, fontSize:13.5, cursor:'pointer', fontFamily:'inherit' }}>
                    {lagrer?'Lagrer…':'Lagre endringer'}
                  </button>
                </>
              )}
            </div>
          )}

          {/* INFO-FANE (beregningede linjer) */}
          {(aktivFane==='info' || (aktivFane==='rediger' && erBeregnet)) && (
            <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
              <div style={{ padding:'10px 14px', borderRadius:8, background:'rgba(186,117,23,.06)',
                border:'1px solid rgba(186,117,23,.15)', fontSize:12.5, color:'#854F0B', lineHeight:1.6 }}>
                {(() => {
                  const modul = BAI_MODUL_MAP[type];
                  return modul ? (
                    <>
                      Dette beløpet beregnes automatisk av <b>{modul.label}</b>-modulen
                      og kan ikke redigeres her.
                      Bruk kommentar-fanen for å sende melding til modulansvarlig.
                      {gåTilFane && (
                        <button onClick={()=>gåTilFane(modul.fane)}
                          style={{ display:'block', marginTop:6, padding:'4px 10px', borderRadius:5,
                            border:'1px solid rgba(186,117,23,.3)', background:'rgba(186,117,23,.1)',
                            color:'#633806', fontSize:12, cursor:'pointer', fontFamily:'inherit' }}>
                          Gå til {modul.label} →
                        </button>
                      )}
                    </>
                  ) : (
                    <>
                      Dette beløpet kan ikke redigeres her.
                      {type === 'import' && ' Linja ble importert fra ekstern kilde.'}
                      {type === 'fjoraar' && ' Linja ble kopiert fra fjorårets budsjett.'}
                    </>
                  );
                })()}
              </div>
              <div>
                <div style={{ fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase',
                  marginBottom:8 }}>Månedlig fordeling</div>
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'4px 8px' }}>
                  {BAI_SP_MND.map((m,i)=>(
                    <div key={i} style={{ display:'flex', justifyContent:'space-between', padding:'4px 8px',
                      borderRadius:5, background:'rgba(17,24,61,.03)', fontSize:12 }}>
                      <span style={{ color:SK.soft }}>{m}</span>
                      <span style={{ fontWeight:500 }}>{baiSpKr(Math.round(mnd[i]||0))}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}

          {/* GRUNNLAG/DETALJ-FANE */}
          {aktivFane==='detalj' && window.BudLinjeDetaljPanel && linje?.id && (
            <window.BudLinjeDetaljPanel
              linjeId={linje.id}
              belopAr={linje.belop_ar||0}
              laast={laast || erBeregnet} />
          )}
          {aktivFane==='detalj' && !linje?.id && (
            <div style={{ fontSize:12.5, color:SK.soft, textAlign:'center', padding:'20px 0' }}>
              Lagre linjen først for å legge til underposter.
            </div>
          )}

          {/* FJORÅR-FANE */}
          {aktivFane==='fjoraar' && fk && (
            <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
              <div style={{ fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase', marginBottom:4 }}>
                Fjorår per måned
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'4px 8px' }}>
                {BAI_SP_MND.map((m,i)=>{
                  const fjVal = fjMnd?.[i]||0;
                  const nyVal = mnd?.[i]||0;
                  const avvik = nyVal - fjVal;
                  return (
                    <div key={i} style={{ padding:'6px 10px', borderRadius:7,
                      background: Math.abs(avvik) > Math.abs(fjVal)*0.1 ? 'rgba(242,84,92,.04)' : 'rgba(17,24,61,.02)',
                      border:'1px solid rgba(17,24,61,.05)' }}>
                      <div style={{ display:'flex', justifyContent:'space-between', fontSize:11 }}>
                        <span style={{ color:SK.soft }}>{m}</span>
                        <span style={{ fontWeight:500 }}>{baiSpKr(Math.round(fjVal))}</span>
                      </div>
                      {nyVal !== 0 && fjVal !== 0 && (
                        <div style={{ fontSize:10, color: avvik>0?'#c0392b':'#1b6a2e', textAlign:'right', marginTop:1 }}>
                          {avvik>0?'+':''}{Math.round(avvik).toLocaleString('nb-NO')}
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
              <div style={{ padding:'8px 10px', borderRadius:8, background:'rgba(88,107,164,.06)',
                border:'1px solid rgba(88,107,164,.12)', fontSize:12.5 }}>
                <div style={{ display:'flex', justifyContent:'space-between' }}>
                  <span style={{ color:'#586ba4', fontWeight:600 }}>Sum fjorår</span>
                  <span style={{ fontWeight:700, color:'#586ba4' }}>{baiSpKr(fk.belop_ar)} kr</span>
                </div>
                {linje?.belop_ar != null && (
                  <div style={{ display:'flex', justifyContent:'space-between', marginTop:4, fontSize:12 }}>
                    <span style={{ color:SK.soft }}>Endring vs fjorår</span>
                    <span style={{ fontWeight:600,
                      color: (linje.belop_ar-fk.belop_ar)>0?'#c0392b':'#1b6a2e' }}>
                      {linje.belop_ar>fk.belop_ar?'+':''}{Math.round(linje.belop_ar-fk.belop_ar).toLocaleString('nb-NO')} kr
                    </span>
                  </div>
                )}
              </div>
            </div>
          )}

          {/* KOMMENTAR-FANE */}
          {aktivFane==='komm' && (
            <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
              {/* Tidligere kommentarer */}
              {kommentarer.length > 0 && (
                <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
                  {kommentarer.map(k=>(
                    <div key={k.id} style={{ padding:'8px 12px', borderRadius:8,
                      background:'rgba(17,24,61,.03)', border:'1px solid rgba(17,24,61,.06)' }}>
                      <div style={{ display:'flex', justifyContent:'space-between', marginBottom:4 }}>
                        <span style={{ fontSize:11.5, fontWeight:600 }}>{k.sender?.navn||'Ukjent'}</span>
                        <span style={{ fontSize:10.5, color:SK.soft }}>
                          {new Date(k.created_at).toLocaleDateString('nb-NO',{day:'2-digit',month:'short'})}
                          {k.mottaker && <> → {k.mottaker.navn}</>}
                        </span>
                      </div>
                      <div style={{ fontSize:12.5, color:SK.ink, lineHeight:1.5 }}>{k.tekst}</div>
                    </div>
                  ))}
                </div>
              )}

              {/* Ny kommentar */}
              <div>
                <label style={{ fontSize:10.5, fontWeight:700, color:SK.soft, textTransform:'uppercase',
                  letterSpacing:0.04, display:'block', marginBottom:6 }}>
                  {erBeregnet ? 'Send melding til modulansvarlig' : 'Legg til kommentar'}
                </label>
                <textarea value={kommentar} onChange={e=>setKommentar(e.target.value)}
                  rows={3} style={{ width:'100%', padding:'8px 10px', borderRadius:8, boxSizing:'border-box',
                    border:'1px solid rgba(17,24,61,.15)', fontFamily:'inherit', fontSize:13,
                    resize:'vertical', color:SK.ink }}
                  placeholder={erBeregnet
                    ? `F.eks. "Lønnen til ansatt X bør justeres til 600 000 fra april"`
                    : 'Notat eller spørsmål til dette budsjettet…'} />
                {erBeregnet && (
                  <div style={{ marginTop:8 }}>
                    <label style={{ fontSize:10.5, fontWeight:700, color:SK.soft, textTransform:'uppercase',
                      letterSpacing:0.04, display:'block', marginBottom:5 }}>Send til</label>
                    <select value={mottakerId} onChange={e=>setMottakerId(e.target.value)}
                      style={{ width:'100%', padding:'7px 10px', borderRadius:7, boxSizing:'border-box',
                        border:'1px solid rgba(17,24,61,.15)', fontFamily:'inherit', fontSize:13 }}>
                      <option value="">— Økonomiansvarlig (standard) —</option>
                      {profiler.map(p=>(
                        <option key={p.id} value={p.id}>{p.navn||p.epost}</option>
                      ))}
                    </select>
                  </div>
                )}
                {komSendt && (
                  <div style={{ marginTop:6, padding:'6px 10px', borderRadius:6,
                    background:'rgba(27,106,46,.08)', color:'#1b6a2e', fontSize:12.5 }}>
                    ✓ Kommentar sendt
                  </div>
                )}
                <button onClick={sendKommentar} disabled={!kommentar.trim()||senderKom}
                  style={{ marginTop:8, width:'100%', padding:'9px', borderRadius:8, border:'none',
                    background: kommentar.trim()?SK.ink:'rgba(17,24,61,.1)',
                    color: kommentar.trim()?'#fff':SK.soft,
                    fontWeight:700, fontSize:13, cursor: kommentar.trim()?'pointer':'default',
                    fontFamily:'inherit' }}>
                  {senderKom ? 'Sender…' : erBeregnet ? 'Send melding' : 'Lagre kommentar'}
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </>
  );
}

Object.assign(window, { BaiSidepanel });