'use client'

import { useRef, useState } from 'react'

// Lista de trackers común a todos los magnet (idéntica en el original).
const TRACKERS =
  '&tr=http%3A%2F%2F184.105.151.164%3A6969%2Fannounce&tr=http%3A%2F%2F184.105.151.164%3A6969%2Fannounce&tr=http%3A%2F%2F182.150.53.61%3A8080%2Fannounce&tr=http%3A%2F%2F62.210.202.61%3A80%2Fannounce&tr=http%3A%2F%2F78.30.254.12%3A2710%2Fannounce&tr=http%3A%2F%2F91.207.136.85%3A80%2Fannounce&tr=http%3A%2F%2F176.113.71.19%3A6961%2Fannounce&tr=http%3A%2F%2F34.92.10.197%3A6789%2Fannounce&tr=http%3A%2F%2F80.209.252.132%3A1337%2Fannounce&tr=udp%3A%2F%2F62.138.0.158%3A6969%2Fannounce&tr=udp%3A%2F%2F188.241.58.209%3A6969%2Fannounce&tr=udp%3A%2F%2F93.158.213.92%3A1337%2Fannounce&tr=udp%3A%2F%2F62.210.97.59%3A1337%2Fannounce&tr=udp%3A%2F%2F151.80.120.112%3A2710%2Fannounce&tr=udp%3A%2F%2F80.209.252.132%3A1337%2Fannounce'

// Hash btih por idioma (Windows y Mac OS Catalina comparten el mismo torrent).
const BTIH: Record<string, string> = {
  wotlkeses: 'AIV765TUMAIZSGLSVGN7MRYASNJW6UPD',
  wotlkesmx: 'EL64Q3QUXM42PBGJC4TUHNAH2UUTAJXB',
  wotlkenus: 'XAJ4DBISLXFEV2N74IIUZLA5XXVGVRG7',
  wotlkengb: '7U3ATWR7YN2IR63L53EFPPHZ4SI4RZKX',
}
function magnetFor(lang: string): string {
  return `magnet:?xt=urn:btih:${BTIH[lang]}${TRACKERS}`
}

const LANG_INFO: Record<string, string> = {
  wotlkeses: 'Idioma esES: Español de España.',
  wotlkesmx: 'Idioma esMX: Español de Latinoamérica.',
  wotlkenus: 'Idioma enUS: Inglés de EEUU.',
  wotlkengb: 'Idioma enGB: Inglés británico.',
}

export function ClientDownload() {
  const [lang, setLang] = useState('')
  const [os, setOs] = useState('')
  const [error, setError] = useState(false)
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    if (!lang || !os) {
      setError(true)
      if (timer.current) clearTimeout(timer.current)
      timer.current = setTimeout(() => setError(false), 5000)
      return
    }
    window.location.href = magnetFor(lang)
  }

  return (
    <>
      <div className="box-content">
        <div className="title-box-content" id="torrent">
          <h2>Descarga por Torrent</h2>
        </div>
        <div className="body-box-content justified">
          <p><span>Información</span></p>
          <p>- No requiere instalación.</p>
          <p>- El realmlist ya está configurado.</p>
          <p>- La descarga se gestiona a través de magnet link. Si ya conoces cómo realizar descargas de este tipo, los pasos a seguir son opcionales.</p>
          <br />
          <p><span>Requisitos para la descarga</span></p>
          <p>Se necesitará un programa que gestione descargas por Torrent y un programa que gestione archivos .rar.</p>
          <ul>
            <li><a href="https://www.qbittorrent.org/download.php" target="_blank" rel="noopener noreferrer">qBittorrent</a></li>
            <li><a href="https://www.winrar.es/descargas" target="_blank" rel="noopener noreferrer">WinRAR</a></li>
          </ul>
          <p>Adicionalmente, necesitarás que esta página pueda abrir ventanas emergentes.</p>
          <br />
          <p><span>Paso a paso:</span></p>
          <p>Opcional: Si no tienes Winrar, haz clic en <a href="https://www.winrar.es/descargas" target="_blank" rel="noopener noreferrer">WinRAR</a> e instala el programa.</p>
          <p>1) Haz clic en <a href="https://www.qbittorrent.org/download.php" target="_blank" rel="noopener noreferrer">qBittorrent</a>.</p>
          <p>2) Descarga la versión adecuada para tu sistema operativo.</p>
          <p>3) Ejecuta el archivo descargado y realiza la instalacion del programa.</p>
          <p>4) Ejecuta qBitTorrent.</p>
          <p>5) Ve a la parte final de esta página y escoge el idioma de tu preferencia.</p>
          <p>6) Debajo del idioma, escoge el sistema operativo.</p>
          <p>7) Haz clic en Descargar.</p>
          <p>8) En la ventana emergente, acepta Abrir qBitTorrent.</p>
          <p>9) Espera a que qBitTorrent cargue el archivo correspondiente en la ventana de Enlace magnet.</p>
          <p>10) Haz clic en Aceptar.</p>
          <p>11) En la ventana de qBitTorrent espera a que la descarga se haya completado.</p>
          <p>12) Ingresa en la carpeta de descargas de qBitTorrent (Por defecto Descargas).</p>
          <p>13) Haz clic derecho en el archivo .rar y usa la opción Extraer aquí.</p>
          <p>14) Ingresa en la carpeta extraída y allí encontrarás el ejecutable para comenzar a jugar.</p>
          <p>15) Conecta usando tu cuenta de la web, en el campo email no pongas tu email sino tu nombre de cuenta.</p>
          <br />
          <hr />
          <br />
          <div className="centered">
            <form name="uw-client-dowload" id="uw-client-download" autoComplete="off" onSubmit={handleSubmit}>
              <p><span>Idioma</span></p>
              <br />
              <select
                name="game-language"
                id="game-language"
                className="game-download-select"
                value={lang}
                onChange={(e) => { setLang(e.target.value); setOs(''); }}
              >
                <option value="" disabled>Elegir idioma</option>
                <option value="wotlkeses">Cliente esES</option>
                <option value="wotlkesmx">Cliente esMX</option>
                <option value="wotlkenus">Cliente enUS</option>
                <option value="wotlkengb">Cliente enGB</option>
              </select>

              {lang && (
                <div id="select-op">
                  <br />
                  <p id="game-info">{LANG_INFO[lang] ?? ' '}</p>
                  <br />
                  <p><span>Sistema operativo</span></p>
                  <br />
                  <select
                    name="operating-system"
                    id="operating-system"
                    className="game-download-select"
                    value={os}
                    onChange={(e) => setOs(e.target.value)}
                  >
                    <option value="" disabled>Elegir sistema operativo</option>
                    <option value="windows">Windows</option>
                    <option value="macosc">Mac OS Catalina</option>
                  </select>
                  <br />
                  <button type="submit" className="g-download-button" id="download-c-button">DESCARGAR</button>
                </div>
              )}
            </form>
            <br />
            <hr />
            <div id="error-message" className="red-form-response">
              {error ? 'Debes escoger un cliente y un sistema operativo.' : ''}
            </div>
            <br />
          </div>
        </div>

        {os === 'macosc' && (
          <div id="op-info" className="box-content">
            <div className="title-box-content">
              <h2>Guía para ejecutar el cliente en mac OS Catalina</h2>
            </div>
            <div className="body-box-content">
              <p>macOS Catalina ya no soporta aplicaciones que trabajan en 32bits, y el cliente se ejecuta en 32bits.</p>
              <p>Siguiendo los pasos a continuación podrás disfrutar UltimoWoW sin problemas en macOS Catalina.</p>
              <br />
              <span>Instrucciones</span>
              <p>1 - Descarga e instala <a href="https://insmac.org/macosx/3728-crossover-19.html" target="_blank" rel="noopener noreferrer">CrossOver</a>.</p>
              <p>2 - Una vez que tengas descargado el cliente, ejecuta CrossOver y haz clic en &quot;Instalar una aplicación para Windows&quot;.</p>
              <p>3 - En el campo &quot;Seleccionar una aplicación para instalar&quot;, busca la descarga, selecciónalo y haz clic en continuar. (No hagas clic en instalar aún).</p>
              <p>4 - Ve a la pestaña donde dice &quot;Seleccionar instalador&quot;, haz clic en &quot;Elegir archivo de instalador&quot;, y ahora busca WoW.exe y selecciónalo.</p>
              <p>5 - En la pestaña Botella, puedes seleccionar Windows 7 64bits.</p>
              <p>6 - Ve a la pestaña &quot;Instalar y finalizar&quot;, haz clic en Instalar, se instalarán todas las fuentes, archivos y Visual Redistributables necesarios que WoW usa en un sistema operativo Windows estándar.</p>
              <p>7 - Te pedirá instalar y aceptar los FONTS, Microsoft Visual C ++, haz clic en Sí para cada solicitud que aparezca.</p>
              <p>8 - El cliente se iniciará automáticamente.</p>
              <p>9 - Una vez que termines y salgas del cliente, haz clic en &quot;Listo&quot; en la aplicación CrossOver.</p>
              <p>10 - La próxima vez que desees volver, abre la aplicación CrossOver, mira el panel izquierdo y selecciona en Botella el WoW que se creó anteriormente, y haz clic en RUN COMMAND, selecciona WoW.exe y haz clic en ¨Guardar comando como iniciador¨, luego haz clic en Abrir.</p>
              <p>11 - Finalmente, verás el ícono de WoW debajo de la pestaña Botella de WoW, ahora puedes arrastrar el lanzador de WoW al Dock, de esta manera, la próxima vez que quieras entrar, simplemente ejecuta WoW desde el Dock.</p>
            </div>
          </div>
        )}
      </div>
    </>
  )
}
