import { useEffect } from 'react';
import { InteractionManager } from 'react-native';
import { useRouter } from 'expo-router';
import {
  SettingsCard,
  SettingsNavRow,
  SettingsSectionLabel,
  SettingsSectionScreen,
  SettingsToggleRow,
} from '@/components/settings/SettingsSectionScaffold';
import { formatRelativeTime } from '@/lib/format';
import { useColors } from '@/theme/themed';
import { useDesktopRemoteStore } from '@/stores/desktopRemoteStore';
import { useDesktopSyncStore } from '@/stores/desktopSyncStore';
import { useSettingsStore } from '@/stores/settingsStore';

export default function ExperimentalSettingsScreen() {
  const colors = useColors();
  const router = useRouter();
  const desktopRemoteConnection = useDesktopRemoteStore((s) => s.connection);
  const desktopRemoteState = useDesktopRemoteStore((s) => s.connectionState);
  const initDesktopRemote = useDesktopRemoteStore((s) => s.init);
  const desktopSyncStatus = useDesktopSyncStore((s) => s.status);
  const desktopLastSyncAt = useDesktopSyncStore((s) => s.lastSyncAt);
  const desktopSyncConflictCount = useDesktopSyncStore((s) => s.conflicts.length);
  const nativeQueueEnabled = useSettingsStore((s) => s.nativeQueueEnabled);
  const setNativeQueueEnabled = useSettingsStore((s) => s.setNativeQueueEnabled);

  useEffect(() => {
    const task = InteractionManager.runAfterInteractions(() => {
      void initDesktopRemote();
    });
    return () => task.cancel();
  }, [initDesktopRemote]);

  const desktopRemoteSubtitle = desktopRemoteConnection
    ? `${desktopRemoteConnection.desktopName ?? 'Astra Desktop'}: ${desktopRemoteState === 'connected' ? 'connected' : desktopRemoteState}`
    : 'Pair with Astra Desktop to control playback from this phone.';

  const desktopSyncSubtitle = !desktopRemoteConnection
    ? 'Sync favorites and playlists with Astra Desktop.'
    : desktopSyncConflictCount > 0
      ? `${desktopSyncConflictCount} conflict${desktopSyncConflictCount === 1 ? '' : 's'} to resolve.`
      : desktopSyncStatus === 'syncing'
        ? 'Syncing.'
        : desktopLastSyncAt !== null
          ? `Synced ${formatRelativeTime(desktopLastSyncAt)}.`
          : `${desktopRemoteConnection.desktopName ?? 'Astra Desktop'}: not synced yet.`;

  return (
    <SettingsSectionScreen title="Experimental">
      <SettingsSectionLabel>PLAYBACK</SettingsSectionLabel>
      <SettingsCard>
        <SettingsToggleRow
          title="Native queue"
          description="Use the Kotlin queue sheet and RecyclerView. Disable to compare with the legacy React Native queue."
          value={nativeQueueEnabled}
          onValueChange={(enabled) => void setNativeQueueEnabled(enabled)}
        />
      </SettingsCard>

      <SettingsSectionLabel spaced>DESKTOP</SettingsSectionLabel>
      <SettingsNavRow
        icon="phone-portrait-outline"
        title="Desktop Remote"
        subtitle={desktopRemoteSubtitle}
        onPress={() => router.push('/desktop-remote' as never)}
      />
      <SettingsNavRow
        icon="sync-outline"
        title="Desktop Sync"
        subtitle={desktopSyncSubtitle}
        subtitleColor={desktopSyncConflictCount > 0 ? colors.warning : undefined}
        onPress={() => router.push('/desktop-sync' as never)}
      />
    </SettingsSectionScreen>
  );
}