import React, { useMemo } from 'react';
import { Box, Button, Icon, Icons, Text, color } from 'folds';
import { useClientConfig } from '../../hooks/useClientConfig';
import { isTauri } from '../../hooks/useTauri';
import { webRTCSupported } from '../../utils/rtc';
import { getCallInBrowserUrl, resolveWebAppUrl } from '../../utils/callInBrowser';

/**
 * [cinny-desktop: Linux calls] The desktop app on Linux runs on WebKitGTK,
 * which ships without WebRTC (disabled in 2.54; a libwebrtc backend is due
 * around 2.56). Where calls can't work here, send the user to the room in the
 * web app instead of a dead end. Only in the desktop app, and only when
 * config.json sets `webAppUrl`.
 */
export const useCallInBrowserUrl = (roomId: string): string | undefined => {
  const { webAppUrl } = useClientConfig();
  return useMemo(
    () =>
      isTauri() && !webRTCSupported()
        ? getCallInBrowserUrl(resolveWebAppUrl(webAppUrl), roomId)
        : undefined,
    [webAppUrl, roomId],
  );
};

/** Opens through the desktop's new-window handler → the system browser. */
export const openCallInBrowser = (url: string): void => {
  window.open(url, '_blank', 'noopener,noreferrer');
};

const desktopUnavailableText = (): string =>
  typeof navigator !== 'undefined' && /Linux/i.test(navigator.userAgent)
    ? 'Calls aren’t available in the desktop app on Linux yet: its web engine has no WebRTC.'
    : 'Calls aren’t available in this desktop app: its web engine has no WebRTC.';

type CallsUnavailableMessageProps = {
  roomId: string;
  /** Button label, e.g. "Answer in browser" for an incoming call. */
  actionLabel?: string;
};

export function CallsUnavailableMessage({
  roomId,
  actionLabel = 'Open in browser',
}: CallsUnavailableMessageProps) {
  const url = useCallInBrowserUrl(roomId);

  if (!isTauri()) {
    return (
      <Text style={{ margin: 'auto', color: color.Critical.Main }} size="L400" align="Center">
        Your browser does not support WebRTC, which is required for calling.
      </Text>
    );
  }

  return (
    <Box direction="Column" alignItems="Center" gap="200" style={{ margin: 'auto' }}>
      <Text style={{ color: color.Warning.Main }} size="L400" align="Center">
        {desktopUnavailableText()}
        {url ? ' You can join from the web app in your browser.' : ''}
      </Text>
      {url && (
        <Button
          size="300"
          variant="Secondary"
          fill="Soft"
          radii="300"
          before={<Icon size="100" src={Icons.External} />}
          onClick={() => openCallInBrowser(url)}
        >
          <Text size="B300">{actionLabel}</Text>
        </Button>
      )}
    </Box>
  );
}