import React from 'react';
import { invoke } from '@tauri-apps/api/core';
import { AudioLines, RotateCcw } from 'lucide-react';
import type { TFunction } from 'i18next';
import CustomSelect from '../../CustomSelect';
import SettingsSubSection from '../../SettingsSubSection';
import { SettingsGroup } from '../SettingsGroup';
import { useAuthStore } from '../../../store/authStore';
import { IS_MACOS } from '../../../utils/platform';
import { buildAudioDeviceSelectOptions } from '../../../utils/audio/audioDeviceLabels';

interface Props {
  audioDevices: string[];
  osDefaultAudioDeviceId: string | null;
  deviceSwitching: boolean;
  devicesLoading: boolean;
  setDeviceSwitching: (v: boolean) => void;
  refreshAudioDevices: (opts?: { silent?: boolean }) => void;
  t: TFunction;
}

/**
 * Audio output device picker. macOS is hard-pinned to the system default,
 * so the picker collapses to a notice on that platform.
 *
 * The device switch is best-effort: if `audio_set_device` rejects (e.g.
 * device disappeared) we leave the previous selection in the store.
 */
export function AudioOutputDeviceSection({
  audioDevices,
  osDefaultAudioDeviceId,
  deviceSwitching,
  devicesLoading,
  setDeviceSwitching,
  refreshAudioDevices,
  t,
}: Props) {
  const audioOutputDevice = useAuthStore(s => s.audioOutputDevice);
  const setAudioOutputDevice = useAuthStore(s => s.setAudioOutputDevice);

  return (
    <SettingsSubSection
      title={t('settings.audioOutputDevice')}
      icon={<AudioLines size={16} />}
    >
      <div className="settings-card">
        <SettingsGroup>
          {IS_MACOS ? (
            <div style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.55 }}>
              {t('settings.audioOutputDeviceMacNotice')}
            </div>
          ) : (
            <>
              <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: '0.75rem' }}>
                {t('settings.audioOutputDeviceDesc')}
              </div>
              <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
                <CustomSelect
                  style={{ flex: 1 }}
                  value={audioOutputDevice ?? ''}
                  disabled={deviceSwitching || devicesLoading}
                  onChange={async (val) => {
                    const device = val || null;
                    setDeviceSwitching(true);
                    try {
                      await invoke('audio_set_device', { deviceName: device });
                      setAudioOutputDevice(device);
                    } catch { /* device open failed — don't persist */ }
                    setDeviceSwitching(false);
                  }}
                  options={buildAudioDeviceSelectOptions(
                    audioDevices,
                    t('settings.audioOutputDeviceDefault'),
                    osDefaultAudioDeviceId,
                    t('settings.audioOutputDeviceOsDefaultNow'),
                    audioOutputDevice,
                    t('settings.audioOutputDeviceNotInCurrentList'),
                  )}
                />
                <button
                  className="icon-btn"
                  onClick={() => refreshAudioDevices()}
                  disabled={devicesLoading || deviceSwitching}
                  data-tooltip={t('settings.audioOutputDeviceRefresh')}
                >
                  <RotateCcw size={15} className={devicesLoading ? 'spin' : ''} />
                </button>
              </div>
            </>
          )}
        </SettingsGroup>
      </div>
    </SettingsSubSection>
  );
}
