import { useTranslation } from 'react-i18next'
import { AmountInput } from '../../components/AmountInput/AmountInput.js'
import { AmountInputCardPair } from '../../components/AmountInputCard/AmountInputCardPair.js'
import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'
import { GasRefuelMessage } from '../../components/Messages/GasRefuelMessage.js'
import { PageContainer } from '../../components/PageContainer.js'
import { Routes } from '../../components/Routes/Routes.js'
import { SelectChainAndToken } from '../../components/SelectChainAndToken.js'
import { SendToWalletButton } from '../../components/SendToWallet/SendToWalletButton.js'
import { SettingsPanel } from '../../components/SettingsPanel/SettingsPanel.js'
import { advancedNavigationTabKeys } from '../../components/SettingsPanel/utils.js'
import { useHeader } from '../../hooks/useHeader.js'
import { useWideVariant } from '../../hooks/useWideVariant.js'
import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
import { useNavigationTabsStore } from '../../stores/navigationTabs/useNavigationTabsStore.js'
import { LimitPageContent } from './LimitPageContent.js'
import { MainPageActions } from './MainPageActions.js'

const marginSx = { marginBottom: 2 }

export const MainPage: React.FC = () => {
  const { t } = useTranslation()
  const wideVariant = useWideVariant()
  const { mode, modeOptions, contractComponent, hiddenUI, defaultUI } =
    useWidgetConfig()
  const activeTab = useNavigationTabsStore((state) => state.activeTab)

  const custom = mode === 'custom'
  // Surface the settings panel on the main page for advanced navigation tabs.
  const advancedMode =
    !!activeTab && advancedNavigationTabKeys.includes(activeTab)
  const showSendReceiveCards = defaultUI?.layout === 'cards'
  // Custom non-deposit contract flows have no amount entry — they keep the
  // chain/token selectors only, in both layouts.
  const showAmountEntry = !custom || modeOptions?.custom?.type === 'deposit'
  const showGasRefuelMessage = !hiddenUI?.gasRefuelMessage

  const splitTitle =
    modeOptions?.split === 'bridge'
      ? t('header.bridge')
      : modeOptions?.split === 'swap'
        ? t('header.swap')
        : undefined
  const title =
    mode === 'limit'
      ? t('header.limit')
      : mode === 'custom'
        ? t(`header.${modeOptions?.custom?.type ?? 'checkout'}`)
        : mode === 'refuel'
          ? t('header.gas')
          : mode === 'split' && splitTitle
            ? splitTitle
            : t('header.exchange')

  useHeader(title)

  if (mode === 'limit') {
    return <LimitPageContent />
  }

  return (
    <PageContainer topGutters>
      {custom ? (
        <ContractComponent sx={marginSx}>{contractComponent}</ContractComponent>
      ) : null}
      {showSendReceiveCards && showAmountEntry ? (
        <AmountInputCardPair sx={marginSx} />
      ) : (
        <>
          <SelectChainAndToken sx={marginSx} />
          {!showSendReceiveCards && showAmountEntry ? (
            <AmountInput formType="from" sx={marginSx} />
          ) : null}
        </>
      )}
      {advancedMode ? <SettingsPanel sx={marginSx} /> : null}
      {!wideVariant ? <Routes sx={marginSx} /> : null}
      <SendToWalletButton sx={marginSx} />
      {showGasRefuelMessage ? <GasRefuelMessage sx={marginSx} /> : null}
      <MainPageActions showSendToWalletExpand />
    </PageContainer>
  )
}