/* view_devices.jsx — auto-detect available audio devices */

function DeviceMeter({ seed, active }) {
  const s = useAudioEngine(14);
  const level = active ? s.activity : 0;
  const bars = 22;
  return (
    <div className="dev-meter">
      {Array.from({ length: bars }).map((_, i) => {
        const on = (i / bars) * 100 < level;
        const c = i / bars < 0.6 ? "var(--grade-good)" : i / bars < 0.82 ? "var(--c-treble)" : "var(--c-clip)";
        return <span key={i} style={{ background: on ? c : "var(--bg-3)", opacity: on ? 1 : 0.5 }} />;
      })}
    </div>
  );
}

function DeviceRow({ d, selected, onSelect }) {
  return (
    <button className={"device-row" + (selected ? " selected" : "")} onClick={onSelect}>
      <span className="dev-radio">{selected && <span className="dev-radio-dot" />}</span>
      <span className="device-ico">
        <Icon name={d.kind === "audioinput" ? "mic" : "speaker"} size={18} color={selected ? "var(--accent)" : "var(--fg-3)"} />
      </span>
      <div className="device-main">
        <div className="row gap-sm" style={{ flexWrap: "wrap" }}>
          <span className="device-name">{d.label}</span>
          {d.recommended && <span className="tag eq">Recommended</span>}
          {selected && <span className="chip good"><span className="dot" />{d.kind === "audioinput" ? "Analysis input" : "Playback output"}</span>}
        </div>
        <div className="device-sub mono">{[d.driver, d.kind === "audiooutput" ? "speaker/output" : "capture/input"].filter(Boolean).join("  ·  ")}</div>
      </div>
      <DeviceMeter seed={d.id} active={selected} />
      <span className="device-sig" style={{ color: selected ? "var(--grade-good)" : "var(--fg-3)" }}>
        <span className="sig-dot" style={{ background: selected ? "var(--grade-good)" : "var(--fg-3)" }} />{selected ? "Signal" : "Idle"}
      </span>
    </button>
  );
}

function DevicesView() {
  const {
    analysisInputLabel, playbackOutputLabel,
    inputDeviceId, outputDeviceId,
    setAnalysisInputId, setPlaybackOutputId,
    audioDevices, scanDevices, deviceAccess, deviceNote,
  } = useQA();

  const outputs = audioDevices.filter(d => d.kind === "audiooutput");
  const inputs = audioDevices.filter(d => d.kind === "audioinput");
  const scanning = deviceAccess === "scanning" || deviceAccess === "requesting";

  return (
    <div className="page fade-up">
      <div className="page-head">
        <div>
          <div className="eyebrow">Real browser audio</div>
          <h2>Audio Devices</h2>
          <p>Real analysis uses microphone/input devices. Browser security does not expose speaker output as a recording source unless you use a loopback input.</p>
        </div>
        <div className="row gap-sm wrap">
          <button className="btn ghost" onClick={() => scanDevices(false)}><Icon name="refresh" size={15} />Re-scan</button>
          <button className="btn primary" onClick={() => scanDevices(true)}><Icon name="mic" size={15} />Allow access</button>
        </div>
      </div>

      <div className="check-summary" style={{ gridTemplateColumns: "1fr 1fr 1.6fr" }}>
        <div className="sum-cell">
          <div className="sum-num mono">{scanning ? "..." : audioDevices.length}</div>
          <div className="sum-lab">Devices detected</div>
        </div>
        <div className="sum-cell">
          <div className="sum-num mono" style={{ color: "var(--accent)" }}>{outputs.length}</div>
          <div className="sum-lab">Output / speakers</div>
        </div>
        <div className="sum-cell">
          <div className="rm-label">Selected analysis input</div>
          <div className="rm-val" style={{ color: analysisInputLabel ? "var(--grade-good)" : "var(--fg-3)", display: "flex", alignItems: "center", gap: 8 }}>
            <span className="sig-dot" style={{ background: analysisInputLabel ? "var(--grade-good)" : "var(--fg-3)" }} />{analysisInputLabel || "No input selected"}
          </div>
        </div>
      </div>

      {scanning && (
        <Panel style={{ textAlign: "center", padding: "44px 20px" }}>
          <div className="scan-radar"><Icon name="signal" size={32} color="var(--accent)" /></div>
          <h3 style={{ margin: "16px 0 4px" }}>Scanning audio devices...</h3>
          <p className="dim" style={{ margin: 0 }}>Waiting for the browser and operating system device list</p>
        </Panel>
      )}

      {deviceNote && !scanning && (
        <div className="device-note"><Icon name="info" size={16} color="var(--c-treble)" /><span>{deviceNote}</span></div>
      )}

      {!scanning && audioDevices.length === 0 && (
        <Panel style={{ textAlign: "center", padding: "52px 20px" }}>
          <div style={{ color: "var(--fg-3)", marginBottom: 12 }}><Icon name="speaker" size={40} /></div>
          <h3 style={{ margin: "0 0 6px" }}>No available devices yet</h3>
          <p className="dim" style={{ maxWidth: 460, margin: "0 auto 18px" }}>Click Allow access and accept the browser permission prompt to start real microphone/input analysis.</p>
          <button className="btn primary" onClick={() => scanDevices(true)}><Icon name="mic" size={15} />Allow access</button>
        </Panel>
      )}

      {!scanning && audioDevices.length > 0 && (
        <React.Fragment>
          <div className="grp">
            <div className="grp-head">
              <div className="row gap-sm"><Icon name="mic" size={18} color="var(--accent)" /><h3 className="grp-title">Capture inputs</h3></div>
              <span className="dim">Select the input used for real-time analysis</span>
            </div>
            <div className="device-list">
              {inputs.length === 0
                ? <p className="dim" style={{ padding: 12 }}>No input devices reported by this browser.</p>
                : inputs.map(d => <DeviceRow key={d.id} d={d} selected={inputDeviceId === d.id} onSelect={() => setAnalysisInputId(d.id)} />)}
            </div>
          </div>

          {outputs.length > 0 && (
            <div className="grp">
              <div className="grp-head">
                <div className="row gap-sm"><Icon name="speaker" size={18} color="var(--accent)" /><h3 className="grp-title">Output / Speaker devices</h3></div>
                <span className="dim">Available playback devices; not browser capture sources</span>
              </div>
              <div className="device-list">
                {outputs.map(d => <DeviceRow key={d.id} d={d} selected={outputDeviceId === d.id} onSelect={() => setPlaybackOutputId(d.id)} />)}
              </div>
            </div>
          )}
        </React.Fragment>
      )}
    </div>
  );
}

Object.assign(window, { DevicesView });