'use client'

import { useState } from 'react'
import { useTranslations } from 'next-intl'
import { WowheadLink } from '@/components/WowheadLink'
import { wowheadIcon } from '@/lib/wowhead'

interface NewsEntry {
  itemId?: number // si falta, es texto plano (un set sin enlace)
  name: string
  icon?: string
  q?: number // calidad (color): 2 raro, 3 épico(sup), 4 legendario...
  path: string[] // ruta de categorías donde se añadió
}

// Changelog de la tienda (Noviembre 2024), tal cual el diseño original.
const ENTRIES: NewsEntry[] = [
  { name: 'Equipo de Batalla del Iluminado de la Fuente del Sol', path: ['Sets de transfiguración PvE', 'Varios (Placas)'] },
  { itemId: 12636, name: 'Yelmo del gran jefe', icon: 'inv_helmet_24', q: 3, path: ['Sets de transfiguración PvE', 'Varios (Malla)', 'Miscelánea'] },
  { itemId: 19854, name: "Zin'rokh, Destructora de Mundos", icon: 'inv_sword_55', q: 4, path: ['Armas de transfiguración PvE', 'Espadas', 'Dos manos'] },
  { itemId: 40400, name: 'Muralla de terror', icon: 'inv_shield_32', q: 4, path: ['Armas de transfiguración PvE', 'Escudos'] },
  { itemId: 43988, name: 'Capa a prueba de vendavales', icon: 'inv_misc_cape_20', q: 4, path: ['Accesorios de transfiguración PvE', 'Capas'] },
  { itemId: 40205, name: 'Cinturón de piel de acechador', icon: 'inv_belt_15', q: 4, path: ['Accesorios de transfiguración PvE', 'Cinturones de cuero'] },
  { itemId: 8312, name: 'Coraza de alabastro', icon: 'inv_chest_chain_05', q: 2, path: ['Sets de transfiguración PvE', 'Varios (Placas)', 'Miscelánea'] },
  { itemId: 28782, name: 'Bastón de pulso de corazón de diamante', icon: 'inv_staff_53', q: 4, path: ['Armas de transfiguración PvE', 'Bastones'] },
  { itemId: 45117, name: 'Manijas de constructor', icon: 'inv_gauntlets_64', q: 4, path: ['Sets de transfiguración PvE', 'Varios (Tela)', 'Miscelánea'] },
  { itemId: 32323, name: 'Mantón de destructor de Sombraluna', icon: 'inv_misc_cape_naxxramas_02', q: 4, path: ['Accesorios de transfiguración PvE', 'Capas'] },
  { itemId: 32331, name: 'Capa del Consejo Illidari', icon: 'inv_misc_cape_20', q: 4, path: ['Accesorios de transfiguración PvE', 'Capas'] },
  { itemId: 34012, name: 'Embozo de la batalla final', icon: 'inv_misc_cape_16', q: 4, path: ['Accesorios de transfiguración PvE', 'Capas'] },
  { itemId: 32505, name: 'Locura de El Traidor', icon: 'spell_shadow_charm', q: 4, path: ['Accesorios PvE', 'Abalorios', 'Nivel de objeto < 200'] },
]

/** Sección plegable «Novedades» de la tienda (changelog), con enlaces a wowhead. */
export function StoreNews() {
  const t = useTranslations('Store')
  const [open, setOpen] = useState(false)

  return (
    <fieldset className="separate2">
      <div id="store-news" role="button" tabIndex={0} onClick={() => setOpen((o) => !o)}>
        <p className="blue-info">
          {t('newsTitle')} <i className={`fas fa-angle-down green-info ${open ? 'rotate' : 'rotate2'}`} />
        </p>
      </div>
      {open && (
        <div id="store-news-content">
          <p>{t('newsIntro')}</p>
          <p><span className="second-brown">{t('newsDate')}</span></p>
          <ul>
            {ENTRIES.map((e, i) => (
              <li key={i}>
                {e.itemId ? (
                  <WowheadLink
                    id={e.itemId}
                    className={`icontinyl${e.q ? ` q${e.q}` : ''}`}
                    style={{ paddingLeft: '18px', background: `url("${wowheadIcon(e.icon || 'inv_misc_questionmark', 'tiny')}") left center no-repeat` }}
                  >
                    {e.name}
                  </WowheadLink>
                ) : (
                  <span>{e.name}</span>
                )}
                {e.path.map((p, j) => (
                  <span key={j}> <i className="fas fa-angle-right green-info" /> {p}</span>
                ))}
              </li>
            ))}
          </ul>
        </div>
      )}
    </fieldset>
  )
}