'use client'

import { useState } from 'react'
import { WowheadRefresh } from './WowheadRefresh'
import { ArmoryTalents, type TalentGroupView } from './ArmoryTalents'

/**
 * Pestaña de talentos con conmutador Primaria/Secundaria (doble especialización).
 * Cada grupo trae su propio árbol y sus propios glifos, así que al conmutar cambian
 * ambos. Marca cuál es la spec activa del personaje.
 */
export function ArmoryTalentTab({
  groups,
  activeIndex,
  spellIcons,
  locale,
  labels,
}: {
  groups: TalentGroupView[]
  activeIndex: number
  spellIcons: Record<number, string>
  locale: string
  labels: {
    distribution: string
    glyphs: string
    majorGlyphs: string
    minorGlyphs: string
    primary: string
    secondary: string
    activeSpec: string
  }
}) {
  const [active, setActive] = useState(activeIndex)
  const groupLabel = (i: number) => (i === 0 ? labels.primary : labels.secondary)
  const g = groups[active] ?? groups[0]
  if (!g) return null

  return (
    <div className="armory-panel armory-talents-panel">
      <WowheadRefresh dep={`talents-${active}`} />

      {groups.length > 1 && (
        <div className="armory-spec-toggle">
          {groups.map((_, i) => (
            <button key={i} type="button" className={i === active ? 'active' : ''} onClick={() => setActive(i)}>
              {groupLabel(i)}
              {i === activeIndex ? <span className="armory-spec-toggle-dot"> • {labels.activeSpec}</span> : null}
            </button>
          ))}
        </div>
      )}

      <ArmoryTalents
        group={g}
        spellIcons={spellIcons}
        locale={locale}
        labels={{
          distribution: labels.distribution,
          groupLabel: groupLabel(active),
          glyphs: labels.glyphs,
          majorGlyphs: labels.majorGlyphs,
          minorGlyphs: labels.minorGlyphs,
        }}
      />
    </div>
  )
}