'use client'

import { useState } from 'react'
import { Link } from '@/i18n/navigation'

const LOGOS = '/nw-themes/nw-ryu/nw-images/nw-logos'
const RANKS = '/nw-themes/nw-ryu/nw-images/nw-ranks'

type TabId = 'Info' | 'Stripe' | 'SumUp'

const RANK_ROWS = [
  ['1_Newbie', 'Nivel 1', 'Desde 0 PD'],
  ['2_Rookie', 'Nivel 2', 'Hasta 100 PD'],
  ['3_Apprentice', 'Nivel 3', 'Hasta 200 PD'],
  ['4_Explorer', 'Nivel 4', 'Hasta 300 PD'],
  ['5_Contributor', 'Nivel 5', 'Hasta 400 PD'],
  ['6_Enthusiast', 'Nivel 6', 'Hasta 500 PD'],
  ['7_Collaborator', 'Nivel 7', 'Hasta 600 PD'],
  ['8_Regular', 'Nivel 8', 'Hasta 700 PD'],
  ['9_RisingStar', 'Nivel 9', 'Hasta 800 PD'],
  ['10_Proficient', 'Nivel 10', 'Hasta 900 PD'],
  ['11_Experienced', 'Nivel 11', 'Hasta 1000 PD'],
  ['12_Mentor', 'Nivel 12', 'Hasta 5000 PD'],
  ['13_Veteran', 'Nivel 13', 'Hasta 10000 PD'],
  ['14_GrandMaster', 'Nivel 14', 'Más de 10000 PD'],
]

export function DPointsTabs({ realm, currency }: { realm: string; currency: string }) {
  const [active, setActive] = useState<TabId>('Info')
  const [showRanks, setShowRanks] = useState(false)
  const sym = currency === 'usd' ? '$' : '€'

  return (
    <>
      <div className="body-box-content justified">
        <div className="dnt-sidebar">
          <button
            className={`dnt-button-2 tablink${active === 'Info' ? ' dnt-selected' : ''}`}
            onClick={() => setActive('Info')}
          >
            Información
          </button>
          <Link className="back-to-account" href="/my-account">Regresar a mi cuenta</Link>
          <Link className="back-to-account-responsive" href="/my-account">Regresar</Link>
        </div>
        <div className="dnt-sidebar dnt-methods">
          <button className={`dnt-button-2 tablink${active === 'Stripe' ? ' dnt-selected' : ''}`} onClick={() => setActive('Stripe')}>
            <img src={`${LOGOS}/stripe-p-logo.svg`} alt="Stripe" title="Stripe" /> Stripe
          </button>
          <button className={`dnt-button-2 tablink${active === 'SumUp' ? ' dnt-selected' : ''}`} onClick={() => setActive('SumUp')}>
            <img src={`${LOGOS}/sumup-p-logo.svg`} alt="SumUp" title="SumUp" /> SumUp
          </button>
        </div>
      </div>
      <br />

      <div className="dnt-tabs">
        {active === 'Info' && (
          <div className="box-content dnt-tab dnt-animate">
            <div className="body-box-content">
              <span>¿Qué son los PD?</span>
              <p>Ofrecemos a nuestros usuarios la oportunidad de obtener niveles que les brindan beneficios exclusivos dentro de nuestra comunidad en línea. Estos beneficios incluyen acceso a herramientas especiales, contenido exclusivo y mejoras significativas para su experiencia en nuestro sitio web. Al realizar una compra, nuestros usuarios reciben PD, una unidad de reconocimiento interna que refleja su compromiso y progreso en nuestra plataforma. Los PD les permiten alcanzar nuevos niveles y desbloquear recompensas exclusivas. Cabe destacar que estos PD son una forma única de valorar y premiar la participación activa de nuestros usuarios en nuestra comunidad.</p>
              <br />
              <hr />
              <br />
              <span>¿Cuáles son los niveles disponibles?</span>
              {!showRanks ? (
                <p id="rank-div-show" onClick={() => setShowRanks(true)}>Mostrar</p>
              ) : (
                <p id="rank-div-hide" style={{ display: 'block' }} onClick={() => setShowRanks(false)}>Ocultar</p>
              )}
              {showRanks && (
                <div className="rank-div" id="rank-div" style={{ display: 'block' }}>
                  <table className="rank-table">
                    <tbody>
                      {RANK_ROWS.map(([file, nivel, desde]) => (
                        <tr key={file}>
                          <td><img src={`${RANKS}/${file}.svg`} alt={nivel} title={nivel} width="24px" /></td>
                          <td>{nivel}</td>
                          <td className="second-brown">{desde}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
              <br />
              <hr />
              <br />
              <span>¿Cuáles son los métodos de compra de PD?</span>
              <p>Los métodos de compra disponibles actualmente son:</p>
              <p>- <img className="pay-inline-logo" src={`${LOGOS}/stripe-p-logo.svg`} alt="Stripe" /> Stripe (tarjeta de crédito/débito, para todos los países).</p>
              <p>- <img className="pay-inline-logo" src={`${LOGOS}/sumup-p-logo.svg`} alt="SumUp" /> SumUp (tarjeta de crédito/débito).</p>
              <br />
              <hr />
              <br />
              <span>¿Cuántos PD se reciben?</span>
              <p>Por cada {sym}1 recibes 100 PD. La cantidad final se indica antes de confirmar el pago.</p>
              <br />
              <hr />
              <br />
              <span>¿Tienes dudas o problemas con una compra?</span>
              <p>No realices una compra hasta estar completamente seguro de que has leído esta información y sabes cómo es el proceso que vayas a escoger.</p>
              <p>Si a pesar de leer este instructivo aún tienes dudas, el equipo de {realm} podrá asesorarte en cualquier momento. Puedes colocar un ticket en el servidor, o contactarnos mediante nuestra plataforma de Discord.</p>
            </div>
          </div>
        )}

        {active === 'Stripe' && <StripeTab realm={realm} sym={sym} />}
        {active === 'SumUp' && <SumUpTab realm={realm} sym={sym} />}
      </div>
    </>
  )
}

/* --------------------------- Lógica de pago común --------------------------- */
function checkoutError(error?: string): string {
  switch (error) {
    case 'notConfigured':
      return 'Este método de pago aún no está disponible. Por favor, utiliza otro método o inténtalo más tarde.'
    case 'invalidAmount':
      return 'La cantidad debe ser un número entero entre 1 y 200.'
    case 'notAuthenticated':
      return 'Tu sesión ha expirado. Inicia sesión de nuevo.'
    default:
      return 'No se pudo iniciar el pago. Inténtalo de nuevo.'
  }
}

function usePayment(provider: 'stripe' | 'sumup') {
  const [amount, setAmount] = useState('')
  const [accepted, setAccepted] = useState(false)
  const [busy, setBusy] = useState(false)
  const [err, setErr] = useState<string | null>(null)

  async function pay(e: React.FormEvent<HTMLFormElement>, sym: string) {
    e.preventDefault()
    if (!accepted) {
      alert('Debes aceptar los Términos y Condiciones y la Política de Reembolso')
      return
    }
    const n = Number(amount)
    if (!Number.isInteger(n) || n < 1 || n > 200) {
      setErr(checkoutError('invalidAmount'))
      return
    }
    if (!window.confirm(`Vas a adquirir ${n * 100} PD por ${sym}${n}.\n¿Deseas continuar al pago?`)) return
    setBusy(true)
    setErr(null)
    try {
      const res = await fetch('/api/dpoints/checkout', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'same-origin',
        body: JSON.stringify({ provider, amount: n }),
      })
      const d: { success?: boolean; url?: string; error?: string } = await res.json()
      if (d.success && d.url) {
        window.location.href = d.url
        return
      }
      setErr(checkoutError(d.error))
      setBusy(false)
    } catch {
      setErr(checkoutError())
      setBusy(false)
    }
  }

  return { amount, setAmount, accepted, setAccepted, busy, err, pay }
}

/* -------------------------------- Formulario -------------------------------- */
function AmountForm({
  provider,
  sym,
  buttonLabel,
}: {
  provider: 'stripe' | 'sumup'
  sym: string
  buttonLabel: string
}) {
  const st = usePayment(provider)
  const points = Number(st.amount) > 0 ? Number(st.amount) * 100 : 0
  return (
    <>
      <p className="yellow-info centered">{sym}1 = 100 PD</p>
      <p className="centered second-brown">Valor mínimo: {sym}1 · Valor máximo por transacción: {sym}200</p>
      <br />
      <fieldset>
        <div className="separate2">
          <p className="centered red-info2">¡Importante!</p>
          <p className="centered">Introduce sólo valores enteros (sin decimales).</p>
          <p className="centered">Ejemplo: para 200 PD escribe 2.</p>
        </div>
      </fieldset>
      <br />
      <p className="centered">Cantidad en {sym === '$' ? 'USD' : 'EUR'} a adquirir</p>
      <form className="centered" onSubmit={(e) => st.pay(e, sym)}>
        <input
          type="number"
          placeholder={`Cantidad en ${sym === '$' ? 'USD' : 'EUR'}`}
          min="1"
          max="200"
          step="1"
          value={st.amount}
          onChange={(e) => st.setAmount(e.target.value)}
          required
        />{' '}
        {sym === '$' ? 'USD' : 'EUR'}
        {points > 0 && <p className="centered green-info2">Recibirás {points} PD</p>}
        <br /><br />
        <input
          type="checkbox"
          id={`accept-${provider}`}
          className="terms-check"
          checked={st.accepted}
          onChange={(e) => st.setAccepted(e.target.checked)}
          required
        />
        <label htmlFor={`accept-${provider}`}> Acepto los <Link href="/terms-and-conditions" target="_blank">Términos y Condiciones</Link> y la <Link href="/refund-policy" target="_blank">Política de Reembolso</Link></label>
        <br /><br />
        {st.err && <p className="red-form-response">{st.err}</p>}
        <button type="submit" className="dnt-button" disabled={!st.accepted || st.busy}>
          {st.busy ? 'Redirigiendo…' : buttonLabel}
        </button>
      </form>
    </>
  )
}

/* ---------------------------------- Stripe ---------------------------------- */
function StripeTab({ realm, sym }: { realm: string; sym: string }) {
  return (
    <div className="box-content dnt-tab dnt-animate">
      <div className="body-box-content">
        <span>¿Qué es Stripe?</span><img className="pp-icon" src={`${LOGOS}/stripe-logo.svg`} alt="Stripe" />
        <p>Stripe es una plataforma de pagos en línea segura que procesa tarjetas de crédito y débito de todo el mundo. Tus datos de pago se gestionan directamente en Stripe; {realm} nunca los almacena.<br />Más información sobre Stripe <a href="https://stripe.com/es" target="_blank" rel="noopener noreferrer">aquí</a>.</p>
        <br />
        <hr />
        <br />
        <span>¿Cómo adquirir PD a través de Stripe?</span>
        <p>Al ser un sistema auto-gestionado, las adquisiciones son automáticas y en cuestión de minutos tras completar el pago recibirás los PD en tu cuenta.</p>
        <br />
        <hr />
        <br />
        <p>- Introduce en el campo de más abajo la cantidad que deseas adquirir.</p>
        <p>- Al presionar <span>ADQUIRIR PD</span>, serás redirigido a la pasarela segura de Stripe para completar el pago con tu tarjeta.</p>
        <p>- Una vez que Stripe valide tu pago, tendrás los PD en tu cuenta de forma automática.</p>
        <br />
        <p>Recuerda que la cantidad sólo acepta números enteros y el mínimo posible es {sym}1.</p>
        <p>Ejemplos de valor incorrecto: <span className="red-info2">{sym}5,90 | {sym}22,30 | {sym}53,10</span></p>
        <p>Ejemplos de valor correcto: <span className="green-info2">{sym}6 | {sym}22 | {sym}53</span></p>
        <br /><br /><br />
        <AmountForm provider="stripe" sym={sym} buttonLabel="ADQUIRIR PD" />
      </div>
    </div>
  )
}

/* ---------------------------------- SumUp ----------------------------------- */
function SumUpTab({ realm, sym }: { realm: string; sym: string }) {
  return (
    <div className="box-content dnt-tab dnt-animate">
      <div className="body-box-content">
        <span>¿Qué es SumUp?</span><img className="pp-icon" src={`${LOGOS}/sumup-logo.svg`} alt="SumUp" />
        <p>SumUp es una plataforma de pagos europea que permite pagar de forma rápida y segura con tarjeta de crédito o débito. Tus datos de pago se gestionan directamente en SumUp; {realm} nunca los almacena.<br />Más información sobre SumUp <a href="https://sumup.com/es-es/" target="_blank" rel="noopener noreferrer">aquí</a>.</p>
        <br />
        <hr />
        <br />
        <span>¿Cómo adquirir PD a través de SumUp?</span>
        <p>Al ser un sistema auto-gestionado, las adquisiciones son automáticas y tras completar el pago recibirás los PD en tu cuenta.</p>
        <br />
        <hr />
        <br />
        <p>- Introduce en el campo de más abajo la cantidad que deseas adquirir.</p>
        <p>- Al presionar <span>ADQUIRIR PD</span>, serás redirigido a la pasarela segura de SumUp para completar el pago con tu tarjeta.</p>
        <p>- Una vez que SumUp valide tu pago, tendrás los PD en tu cuenta de forma automática.</p>
        <br />
        <p>Recuerda que la cantidad sólo acepta números enteros y el mínimo posible es {sym}1.</p>
        <p>Ejemplos de valor incorrecto: <span className="red-info2">{sym}5,90 | {sym}22,30 | {sym}53,10</span></p>
        <p>Ejemplos de valor correcto: <span className="green-info2">{sym}6 | {sym}22 | {sym}53</span></p>
        <br /><br /><br />
        <AmountForm provider="sumup" sym={sym} buttonLabel="ADQUIRIR PD" />
      </div>
    </div>
  )
}