'use client'

import { useEffect, useState } from 'react'
import '../Installs.css'
import { invoke } from '@tauri-apps/api/core'
import { useGlobal } from '../GlobalProvider'
import { useSearchParams } from 'next/navigation'
import { platform } from '@tauri-apps/plugin-os'
import { faWarning } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export default function Installs () {
  const {
    showPopup,
    setShowPopup,
    setPopupMode,
    setFadeOut,
    setSelectedVersionList,
    downloadedVersionsConfig,
    normalConfig,
    setManagingVersion,
    getVersionInfo,
    getGameInfo,
    setSelectedGame,
    serverVersionList
  } = useGlobal()

  const params = useSearchParams()

  const id = Number(params.get('id') || 0)
  const game = serverVersionList?.games.find(g => g.id === id)

  const [category, setCategory] = useState<number>(-1)
  const [lastId, setLastId] = useState(id)

  useEffect(() => {
    if (!showPopup) return
    setSelectedVersionList([])
  }, [normalConfig, setSelectedVersionList, showPopup])

  if (!id || !game) return <p>Invalid game</p>

  if (lastId !== id) {
    setLastId(id)
    setCategory(-1)
  }

  return (
    <div className='mx-4 mt-4'>
      <div className='flex justify-between items-center mb-4'>
        <p className='text-3xl'>Installs</p>
        <div className='flex gap-2'>
          <button
            className='button btntheme1'
            onClick={() => {
              setCategory(-1)
            }}
            title='Click to go up a level.'
            hidden={category == -1}
          >
            Back
          </button>
          <button
            className='button btntheme1'
            onClick={() => {
              setSelectedGame(id)
              setPopupMode(0)
              setShowPopup(true)
              setFadeOut(false)
            }}
            title='Click to download more versions of this game.'
          >
            Download versions
          </button>
        </div>
      </div>
      <div className='downloads-container'>
        <div
          className={`downloads-scroll ${
            platform() === 'windows'
              ? 'h-[calc(100vh-116px)]'
              : 'h-[calc(100vh-84px)]'
          }`}
        >
          {category == -1 &&
            Object.entries(game.categoryNames)
              .sort(([a], [b]) => Number(b) - Number(a))
              .filter(([key]) => {
                const count = Object.keys(
                  downloadedVersionsConfig?.list ?? {}
                ).filter(v => {
                  const info = getVersionInfo(v)
                  if (!info) return false

                  if (
                    platform() === 'linux' &&
                    info.wine &&
                    !normalConfig?.settings.useWineOnUnixWhenNeeded
                  )
                    return false

                  return info.game === id && info.category === Number(key)
                }).length

                return count >= 1
              })
              .map(([key, value]) => {
                return (
                  <div
                    key={key}
                    className={`downloads-entry ${
                      normalConfig?.settings.useLegacyInteractButtons
                        ? ''
                        : 'cursor-pointer'
                    }`}
                    title={
                      normalConfig?.settings.useLegacyInteractButtons
                        ? ''
                        : 'Click to view category'
                    }
                    onClick={() => {
                      if (normalConfig?.settings.useLegacyInteractButtons)
                        return
                      setCategory(Number(key))
                    }}
                  >
                    <div className='h-18 w-screen relative'>
                      <p className='text-2xl'>{value}</p>

                      <div
                        className='entry-info-item flex absolute left-0 bottom-0'
                        title='The amount of versions installed of this game in installed/installable format.'
                        onClick={e => e.stopPropagation()}
                      >
                        <p>
                          {(() => {
                            const count =
                              Object.keys(
                                downloadedVersionsConfig?.list ?? []
                              ).filter(v => {
                                const info = getVersionInfo(v)
                                if (!info) return false
                                if (
                                  platform() === 'linux' &&
                                  info.wine &&
                                  !normalConfig?.settings
                                    .useWineOnUnixWhenNeeded
                                )
                                  return false
                                return (
                                  info.game === id &&
                                  info.category == Number(key)
                                )
                              }).length ?? 0
                            return `${count} install${count === 1 ? '' : 's'}`
                          })()}
                        </p>
                      </div>

                      <button
                        className='button absolute right-0 bottom-0'
                        hidden={
                          !normalConfig?.settings.useLegacyInteractButtons
                        }
                        title='Click to view category'
                        onClick={() => setCategory(Number(key))}
                      >
                        Installs
                      </button>
                    </div>
                  </div>
                )
              })}
          {Object.keys(downloadedVersionsConfig?.list ?? []).filter(v => {
            const info = getVersionInfo(v)
            if (!info) return false
            return info.game === id
          }).length != 0 ? (
            Object.keys(downloadedVersionsConfig?.list ?? [])
              .sort((a, b) => {
                const infoA = getVersionInfo(a)
                const infoB = getVersionInfo(b)
                if (!infoA || !infoB) return -1
                return infoB.place - infoA.place
              })
              .filter(v => {
                const info = getVersionInfo(v)
                if (!info) return false
                if (
                  platform() === 'linux' &&
                  info.wine &&
                  !normalConfig?.settings.useWineOnUnixWhenNeeded
                )
                  return false
                return (
                  info.game === id &&
                  (category == -1
                    ? info.category == -1
                    : info.category == category)
                )
              })
              .map(entry => (
                <div
                  key={entry}
                  className={`downloads-entry ${
                    normalConfig?.settings.useLegacyInteractButtons
                      ? ''
                      : 'cursor-pointer'
                  }`}
                  title={
                    normalConfig?.settings.useLegacyInteractButtons
                      ? ''
                      : 'Click to launch game. Right-click to manage this version install'
                  }
                  onClick={async () => {
                    if (normalConfig?.settings.useLegacyInteractButtons) return
                    const verInfo = getVersionInfo(entry)
                    if (verInfo == undefined) return
                    const gameInfo = getGameInfo(verInfo.game)
                    if (gameInfo == undefined) return
                    invoke('launch_game', {
                      name: verInfo.id,
                      executable: verInfo.executable,
                      displayName: verInfo.displayName,
                      useWine: !!(
                        platform() === 'linux' &&
                        verInfo.wine &&
                        normalConfig?.settings.useWineOnUnixWhenNeeded
                      ),
                      wineCommand: normalConfig?.settings.wineOnUnixCommand
                    })
                  }}
                  onContextMenu={e => {
                    e.preventDefault()
                    if (normalConfig?.settings.useLegacyInteractButtons) return

                    setManagingVersion(entry)
                    setPopupMode(2)
                    setShowPopup(true)
                    setFadeOut(false)
                  }}
                >
                  <div className='h-18 w-screen relative'>
                    <p className='text-2xl'>
                      {getVersionInfo(entry)?.displayName}
                    </p>

                    <div className='flex gap-2 absolute left-0 bottom-0'>
                      <div
                        className='entry-info-item'
                        title='The date the game was installed.'
                        onClick={e => e.stopPropagation()}
                      >
                        <p>
                          Installed{' '}
                          {new Intl.DateTimeFormat(undefined).format(
                            downloadedVersionsConfig?.list[entry]
                          )}
                        </p>
                      </div>
                      <div
                        className='entry-info-item'
                        title='This version is using wine. It cannot be guarenteed to work fully and might not work at all.'
                        hidden={
                          !(
                            platform() === 'linux' &&
                            getVersionInfo(entry)?.wine
                          )
                        }
                        onClick={e => e.stopPropagation()}
                      >
                        <FontAwesomeIcon icon={faWarning} color='#ffc800' />
                        <p>Uses wine</p>
                      </div>
                    </div>

                    <div className='flex gap-2 absolute right-0 bottom-0'>
                      <button
                        className='button'
                        onClick={e => {
                          e.stopPropagation()
                          setManagingVersion(entry)
                          setPopupMode(3)
                          setShowPopup(true)
                          setFadeOut(false)
                        }}
                        title='Click to view version info'
                      >
                        View Info
                      </button>
                      <button
                        className='button'
                        hidden={
                          !normalConfig?.settings.useLegacyInteractButtons
                        }
                        onClick={e => {
                          e.stopPropagation()
                          setManagingVersion(entry)
                          setPopupMode(2)
                          setShowPopup(true)
                          setFadeOut(false)
                        }}
                        title='Click to manage this version install'
                      >
                        Manage
                      </button>
                      <button
                        className='button'
                        onClick={e => {
                          e.stopPropagation()
                          const verInfo = getVersionInfo(entry)
                          if (verInfo == undefined) return
                          const gameInfo = getGameInfo(verInfo.game)
                          if (gameInfo == undefined) return
                          invoke('launch_game', {
                            name: verInfo.id,
                            executable: verInfo.executable,
                            displayName: verInfo.displayName,
                            useWine: !!(
                              platform() === 'linux' &&
                              verInfo.wine &&
                              normalConfig?.settings.useWineOnUnixWhenNeeded
                            ),
                            wineCommand:
                              normalConfig?.settings.wineOnUnixCommand
                          })
                        }}
                        hidden={
                          !normalConfig?.settings.useLegacyInteractButtons
                        }
                        title='Click to launch game'
                      >
                        Launch
                      </button>
                    </div>
                  </div>
                </div>
              ))
          ) : (
            <div className='flex justify-center items-center h-full'>
              <p className='text-3xl'>No versions installed</p>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}