import {
  FolderOpenLine as FolderOpenIcon,
  MonitorLine as MonitorIcon,
  Refresh1Line as RefreshCwIcon,
} from '@mingcute/react'
import { useRouterState } from '@tanstack/react-router'
import { useSyncExternalStore } from 'react'
import { useTranslation } from 'react-i18next'

import { Switch } from '~/components/ui/switch'
import { BackgroundActivityPopover } from '~/features/devtool/background-activity/background-activity-popover'
import { ResourcesPopover } from '~/features/devtool/resources/resources-popover'
import { UiActivityPopover } from '~/features/devtool/ui-activity/ui-activity-popover'
import { isElectron, nativeIpc } from '~/lib/electron'
import { getReactDiagnosticsApi } from '~/lib/react-diagnostics'

export function DevBottomBar() {
  const { t } = useTranslation('chrome')
  const reactDiagnostics = getReactDiagnosticsApi()
  const reactDiagnosticsEnabled = useSyncExternalStore(
    reactDiagnostics.subscribe,
    reactDiagnostics.readEnabled,
    reactDiagnostics.readEnabled,
  )
  const activeRouteHash = useRouterState({
    select: (state) => {
      const location = state.location as { href?: string, pathname: string }
      return location.href ?? location.pathname
    },
  })

  const openUserData = async () => {
    if (!nativeIpc) {
      return
    }

    const { userDataPath } = await nativeIpc.native.getCradleDataPaths()
    await nativeIpc.native.openPath(userDataPath)
  }

  return (
    <footer className="flex h-7 shrink-0 items-center border-t border-border bg-sidebar px-2 font-mono text-[10px]">
      <span
        className="flex-1 truncate select-all text-muted-foreground"
        title={activeRouteHash}
      >
        {activeRouteHash}
      </span>

      <div className="flex items-center gap-0.5">
        <label
          className="flex h-6 items-center gap-1.5 rounded px-2 text-muted-foreground hover:bg-muted/60 hover:text-foreground"
          title={reactDiagnosticsEnabled
            ? t('dev.action.reactDiagnostics.disableTitle')
            : t('dev.action.reactDiagnostics.enableTitle')}
        >
          <span className="whitespace-nowrap">{t('dev.action.reactDiagnostics')}</span>
          <Switch
            size="sm"
            checked={reactDiagnosticsEnabled}
            onCheckedChange={reactDiagnostics.setEnabled}
            aria-label={t('dev.action.reactDiagnostics')}
          />
        </label>
        <button
          type="button"
          title={t('dev.action.openDevtools.title')}
          aria-label={t('dev.action.openDevtools')}
          onClick={() => {
            if (isElectron) {
              window.cradle?.ipc.invoke('window.openDevtool')
            }
            else {
              window.open('/#/devtool', '_blank')
            }
          }}
          className="flex items-center gap-1 rounded px-2 py-0.5 text-muted-foreground hover:bg-muted/60 hover:text-foreground"
        >
          <MonitorIcon className="inline-block size-3.5" aria-hidden="true" />
          {t('dev.action.openDevtools')}
        </button>
        <button
          type="button"
          title={t('dev.action.hardReload.title')}
          aria-label={t('dev.action.hardReload')}
          onClick={() => {
            window.location.reload()
          }}
          className="flex items-center gap-1 rounded px-2 py-0.5 text-muted-foreground hover:bg-muted/60 hover:text-foreground"
        >
          <RefreshCwIcon className="inline-block size-3.5" aria-hidden="true" />
          {t('dev.action.hardReload')}
        </button>
        <button
          type="button"
          title={t('dev.action.openUserData.title')}
          aria-label={t('dev.action.openUserData')}
          disabled={!nativeIpc}
          onClick={() => void openUserData()}
          className="flex items-center gap-1 rounded px-2 py-0.5 text-muted-foreground hover:bg-muted/60 hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
        >
          <FolderOpenIcon className="inline-block size-3.5" aria-hidden="true" />
          {t('dev.action.openUserData')}
        </button>
        <BackgroundActivityPopover />
        <UiActivityPopover />
        <ResourcesPopover />
      </div>
    </footer>
  )
}
