/* Master bus editor */

function AudioDevicePopup({ onClose, onDeviceSelected }){
  const [devices, setDevices] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [switchingTo, setSwitchingTo] = React.useState(null);

  const fetchDevices = React.useCallback(function(){
    setLoading(true);
    setError(null);
    if(TauriAPI.available){
      TauriAPI.listAudioDevices().then(function(list){
        setDevices(Array.isArray(list) ? list : []);
        setLoading(false);
      }).catch(function(){
        setDevices([]);
        setLoading(false);
      });
    } else {
      setDevices([]);
      setLoading(false);
    }
  }, []);

  React.useEffect(function(){ fetchDevices(); }, []);

  const handleSelect = function(deviceName){
    if(switchingTo) return;  // ignore clicks while a switch is in flight
    if(TauriAPI.available){
      setError(null);
      setSwitchingTo(deviceName);
      TauriAPI.selectAudioDevice(deviceName).then(function(info){
        setSwitchingTo(null);
        onDeviceSelected({
          device: info.name, sample_rate: info.sample_rate, buffer_size: info.buffer_size,
          sample_format: info.sample_format, channels: info.channels,
        });
        onClose();
      }).catch(function(err){
        setSwitchingTo(null);
        setError('Switch failed: ' + (err || 'unknown error'));
      });
    }
  };

  return (
    <>
      <div onClick={onClose} style={{position:'absolute',inset:0,background:'rgba(0,0,0,0.45)',zIndex:40}}/>
      <div style={{position:'absolute',bottom:80,right:20,width:320,maxHeight:400,background:'var(--bg-1)',border:'1px solid var(--line)',borderRadius:10,padding:12,zIndex:41,boxShadow:'0 20px 60px rgba(0,0,0,0.7)',display:'flex',flexDirection:'column',gap:10}}>
        <div className="row gap-8" style={{justifyContent:'space-between',alignItems:'center'}}>
          <div style={{fontFamily:'Rajdhani',fontWeight:700,fontSize:12,letterSpacing:'.2em',textTransform:'uppercase',color:'var(--ink)'}}>AUDIO OUTPUT DEVICE</div>
          <div className="row gap-6">
            <button onClick={fetchDevices} style={{background:'none',border:'1px solid var(--line)',color:'var(--ink-mute)',cursor:'pointer',fontSize:10,borderRadius:4,padding:'3px 7px',fontFamily:'JetBrains Mono',letterSpacing:'.06em'}}>REFRESH</button>
            <button onClick={onClose} style={{background:'none',border:'none',color:'var(--ink-mute)',cursor:'pointer',fontSize:14}}>✕</button>
          </div>
        </div>

        {error && (
          <div style={{fontFamily:'JetBrains Mono',fontSize:9,color:'var(--accent-danger)',padding:'4px 0'}}>{error}</div>
        )}

        <div style={{overflowY:'auto',display:'flex',flexDirection:'column',gap:4,flex:1}}>
          {loading && (
            <div style={{textAlign:'center',color:'var(--ink-mute)',fontSize:10,padding:'18px 0',fontFamily:'JetBrains Mono'}}>
              scanning devices…
            </div>
          )}
          {!loading && (!devices || devices.length===0) && (
            <div style={{textAlign:'center',color:'var(--ink-mute)',fontSize:10,padding:'18px 0',fontFamily:'JetBrains Mono'}}>
              No audio devices found
            </div>
          )}
          {!loading && devices && devices.map(function(dev, i){
            const isSwitching = switchingTo === dev.name;
            const disabled = dev.is_active || (switchingTo !== null);
            return (
              <div key={i}
                   className={"device-popup-row"+(dev.is_active?' is-active':'')}
                   onClick={function(){ if(!disabled) handleSelect(dev.name); }}
                   style={disabled && !dev.is_active ? {opacity:0.5, cursor:'wait'} : null}>
                <span>{dev.name}{isSwitching && ' — switching…'}</span>
                {dev.is_default && !isSwitching && <span className="device-badge">DEFAULT</span>}
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
}

function MasterScreen({ state, setState, onBack, dspLoad }){
  const [audioInfo, setAudioInfo] = React.useState(null);
  const [audioPopupOpen, setAudioPopupOpen] = React.useState(false);

  React.useEffect(function(){
    if(TauriAPI.available){
      TauriAPI.getAudioInfo().then(function(info){
        setAudioInfo({
          device: info.device, sample_rate: info.sample_rate, buffer_size: info.buffer_size,
          sample_format: info.sample_format, channels: info.channels,
        });
      }).catch(function(){});
    }
  }, []);

  const latencyMs = audioInfo ? (audioInfo.buffer_size / audioInfo.sample_rate * 1000).toFixed(1) : null;

  const m = state.master;
  const update = (patch)=>{
    setState(s=>({...s, master:{...s.master, ...patch}}));
    if (patch.volume !== undefined) TauriAPI.setMasterVolume(patch.volume);
    if (patch.pan !== undefined) TauriAPI.setMasterPan(patch.pan);
  };
  const updateEq = (band, k, v)=>{
    const newBand = {...m.eq[band], [k]:v};
    update({eq:{...m.eq, [band]:newBand}});
    TauriAPI.setMasterEq(band, newBand.gain, newBand.freq);
  };
  const updateFx = (id, patch)=>{
    update({fx: m.fx.map(f=> f.id===id ? {...f, ...patch} : f)});
    if (patch.enabled !== undefined) TauriAPI.toggleMasterEffect(id, patch.enabled);
  };
  const updateFxParam = (id, k, v)=>{
    update({fx: m.fx.map(f=> f.id===id ? {...f, params: f.params.map(p=> p.k===k ? {...p, v} : p)} : f)});
    TauriAPI.setMasterFxParam(id, k, v);
  };

  const comp = m.fx.find(f=>f.id==='mcomp');
  const lim = m.fx.find(f=>f.id==='mlim');

  const handleDeviceSelected = function(info){
    setAudioInfo(info);
    // The backend rebuilds the audio engine on device swap, resetting every channel
    // and the master bus to their native defaults. Re-push the UI's state so what
    // the user sees stays audible.
    if (TauriAPI.available) {
      TauriAPI.syncStateToEngine(state);
    }
  };

  return (
    <div className="master-screen" style={{position:'relative'}}>
      <div className="master-col">
        <div className="panel" style={{flexShrink:0}}>
          <div className="row gap-10" style={{justifyContent:'space-between'}}>
            <div className="row gap-8">
              <button className="tb-btn ghost" onClick={onBack}>← MIXER</button>
              <div style={{fontFamily:'Manrope',fontWeight:800,fontSize:16,background:'var(--grad)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent'}}>MASTER BUS</div>
              <span className="channel-pill">STEREO OUT · 48kHz</span>
            </div>
            <div className="row gap-6">
              <button className="tb-btn">SNAPSHOT</button>
              <button className="tb-btn">A/B</button>
            </div>
          </div>
        </div>

        <div className="panel">
          <div className="panel-title">Master EQ · 3 Band</div>
          <div className="eq-graph" style={{height:180,flexShrink:0}}>
            <EqCurve eq={m.eq}/>
          </div>
          <div className="knob-grid" style={{gridTemplateColumns:'repeat(5,1fr)'}}>
            <Knob value={m.eq.low.gain} min={-18} max={18} unit=' dB' label="LO GAIN" onChange={v=>updateEq('low','gain', Math.round(v*10)/10)}/>
            <Knob value={m.eq.mid.gain} min={-18} max={18} unit=' dB' label="MID GAIN" onChange={v=>updateEq('mid','gain', Math.round(v*10)/10)}/>
            <Knob value={m.eq.mid.freq} min={200} max={5000} unit=' Hz' label="MID FREQ" onChange={v=>updateEq('mid','freq', Math.round(v))}/>
            <Knob value={m.eq.high.gain} min={-18} max={18} unit=' dB' label="HI GAIN" onChange={v=>updateEq('high','gain', Math.round(v*10)/10)}/>
            <Knob value={m.volume} min={-30} max={10} unit=' dB' label="MASTER" onChange={v=>update({volume:v})}/>
          </div>
        </div>
      </div>

      <div className="master-col">
        <div className="panel">
          <div className="row gap-10" style={{justifyContent:'space-between'}}>
            <div className="panel-title">Bus Compressor</div>
            <button className={"tb-btn "+(comp.enabled?'is-active':'')} onClick={()=>updateFx('mcomp',{enabled:!comp.enabled})}>{comp.enabled?'ENABLED':'BYPASS'}</button>
          </div>
          <div className="knob-grid" style={{gridTemplateColumns:'repeat(5,1fr)'}}>
            {comp.params.map(p=>(
              <Knob key={p.k} value={p.v} min={p.min} max={p.max} unit={' '+p.unit} label={p.k}
                    onChange={v=>updateFxParam('mcomp', p.k, Math.round(v*100)/100)}/>
            ))}
          </div>
        </div>

        <div className="panel">
          <div className="row gap-10" style={{justifyContent:'space-between'}}>
            <div className="panel-title">Peak Limiter · TRUE-PEAK</div>
            <button className={"tb-btn "+(lim.enabled?'is-active':'')} onClick={()=>updateFx('mlim',{enabled:!lim.enabled})}>{lim.enabled?'ENABLED':'BYPASS'}</button>
          </div>
          <div className="knob-grid" style={{gridTemplateColumns:'repeat(3,1fr)'}}>
            {lim.params.map(p=>(
              <Knob key={p.k} value={p.v} min={p.min} max={p.max} unit={' '+p.unit} label={p.k}
                    onChange={v=>updateFxParam('mlim', p.k, Math.round(v*100)/100)}/>
            ))}
          </div>
        </div>

        <div className="panel">
          <div className="panel-title">Output</div>
          <div className="row gap-10">
            <div style={{flex:1,fontFamily:'JetBrains Mono',fontSize:10,color:'var(--ink-dim)',lineHeight:1.7}}>
              DEVICE: <span className="device-name-link" onClick={function(){ setAudioPopupOpen(true); }} style={{color:'var(--ink)',cursor:'pointer'}}>{audioInfo ? audioInfo.device : '—'}</span><br/>
              SAMPLE RATE: <span style={{color:'var(--ink)'}}>{audioInfo ? audioInfo.sample_rate + ' Hz' : '—'}</span><br/>
              FORMAT: <span style={{color:'var(--ink)'}}>{audioInfo && audioInfo.sample_format ? audioInfo.sample_format + ' · ' + (audioInfo.channels||'?') + 'ch' : '—'}</span><br/>
              BUFFER: <span style={{color:'var(--ink)'}}>{audioInfo ? audioInfo.buffer_size + ' smp · ' + latencyMs + 'ms' : '—'}</span><br/>
              ENGINE: <span style={{color:'var(--accent-a)'}}>Rust SIMD · NEON</span>
            </div>
            <div className="col gap-6">
              <div style={{fontFamily:'JetBrains Mono',fontSize:9,color:'var(--ink-mute)',letterSpacing:'.1em'}}>CPU / DSP</div>
              <div style={{fontFamily:'Rajdhani',fontWeight:700,fontSize:22,color:'var(--accent-b)'}}>{dspLoad != null ? dspLoad+'%' : '—'}</div>
            </div>
          </div>
        </div>
      </div>

      {audioPopupOpen && (
        <AudioDevicePopup onClose={function(){ setAudioPopupOpen(false); }} onDeviceSelected={handleDeviceSelected}/>
      )}
    </div>
  );
}

Object.assign(window, { MasterScreen });