import { render, screen, waitFor } from '@testing-library/react'
import { afterEach, describe, expect, test, vi } from 'vitest'

import { EXAMPLE_HEADER_FOOTER_DATA } from 'shared-utils/header-footer'
import type { IPktFooterColumn } from 'shared-types'
import { PktFooter } from './Footer'

const COLUMNS: IPktFooterColumn[] = [
  {
    title: 'Overskrift 1',
    text: 'Her kan du skrive en lengre tekst som beskriver løsningen.',
    links: [{ text: 'Lenke 1', href: 'https://example.test/lenke-1' }],
  },
  {
    title: 'Overskrift 2',
    links: [
      { text: 'Lenke 2', href: 'https://example.test/lenke-2', external: true },
      { text: 'Lenke 3', href: 'https://example.test/lenke-3', openInNewTab: true },
    ],
  },
]

afterEach(() => {
  vi.restoreAllMocks()
})

describe('PktFooter global footer', () => {
  test('rendrer kun global footer uten custom innhold', () => {
    const { container } = render(<PktFooter data={EXAMPLE_HEADER_FOOTER_DATA} />)
    expect(container.querySelector('.pkt-footer__band--secondary')).toBeNull()
    expect(container.querySelector('.pkt-footer__band--global')).not.toBeNull()
    const titles = [...container.querySelectorAll('.pkt-footer__band--global h2')].map(
      (t) => t.textContent,
    )
    expect(titles).toEqual(['Kontakt', 'Jobb i Oslo kommune', 'Om nettstedet'])
  })

  test('rendrer bunnrad med språklenke og some-ikoner', () => {
    const { container } = render(<PktFooter data={EXAMPLE_HEADER_FOOTER_DATA} />)
    const bottom = container.querySelector('.pkt-footer__band--global .pkt-footer__bottom')
    expect(bottom?.textContent).toContain('English')
    const someLinks = [...container.querySelectorAll('.pkt-footer__band--global .pkt-footer__some-link')]
    expect(someLinks).toHaveLength(3)
    expect(someLinks[0].getAttribute('aria-label')).toBe('Facebook')
  })

  test('merker eksterne lenker med toppdomene i parentes', () => {
    render(<PktFooter data={EXAMPLE_HEADER_FOOTER_DATA} />)
    const jobLink = screen.getByRole('link', { name: /Ledige stillinger/ })
    expect(jobLink.querySelector('.pkt-footer__link-domain')?.textContent?.trim()).toBe('(webcruiter.com)')
    const internalLink = screen.getByRole('link', { name: 'Tilgjengelighet' })
    expect(internalLink.querySelector('.pkt-footer__link-domain')).toBeNull()
  })

  test('skjuler #cb-trigger-lenken uten includeConsent', () => {
    const { container } = render(<PktFooter data={EXAMPLE_HEADER_FOOTER_DATA} />)
    expect(container.textContent).not.toContain('Innstillinger for informasjonskapsler')
  })

  test('erstatter #cb-trigger med consent-lenke når includeConsent er satt', () => {
    const { container } = render(<PktFooter data={EXAMPLE_HEADER_FOOTER_DATA} includeConsent />)
    const consentLink = [...container.querySelectorAll('a.pkt-footer__link')].find((link) =>
      link.textContent?.includes('Innstillinger for informasjonskapsler'),
    )
    expect(consentLink).toBeDefined()
    expect(consentLink?.closest('.pkt-footer__band--global')).not.toBeNull()
  })

  test('bruker valgt locale', () => {
    const { container } = render(<PktFooter data={EXAMPLE_HEADER_FOOTER_DATA} locale="en-GB" />)
    const titles = [...container.querySelectorAll('.pkt-footer__band--global h2')].map(
      (t) => t.textContent,
    )
    expect(titles).toContain('Contact us')
  })

  test('skipGlobal dropper global footer og henter ikke data', () => {
    const fetchSpy = vi.spyOn(globalThis, 'fetch').mockRejectedValue(new Error('should not run'))
    const { container } = render(<PktFooter skipGlobal columns={COLUMNS} />)
    expect(container.querySelector('.pkt-footer__band--global')).toBeNull()
    expect(container.querySelector('.pkt-footer__band--secondary')).not.toBeNull()
    expect(fetchSpy).not.toHaveBeenCalled()
  })
})

describe('PktFooter henting av data', () => {
  test('henter data fra endepunkt når data ikke er satt', async () => {
    vi.spyOn(globalThis, 'fetch').mockResolvedValue(
      new Response(JSON.stringify(EXAMPLE_HEADER_FOOTER_DATA), {
        status: 200,
        headers: { 'Content-Type': 'application/json' },
      }),
    )
    const { container } = render(<PktFooter />)
    await waitFor(() => expect(container.querySelector('.pkt-footer__band--global')).not.toBeNull())
    expect(globalThis.fetch).toHaveBeenCalledWith('https://cdn.web.oslo.kommune.no/header-footer/header-footer.json')
  })

  test('rendrer ingenting og kaller onDataError når hentingen feiler', async () => {
    vi.spyOn(globalThis, 'fetch').mockResolvedValue(new Response('boom', { status: 500 }) as unknown as Response)
    const onDataError = vi.fn()
    const { container } = render(<PktFooter onDataError={onDataError} />)
    await waitFor(() => expect(onDataError).toHaveBeenCalled())
    expect(container.querySelector('.pkt-footer__band--global')).toBeNull()
    expect(container.querySelector('footer')?.textContent?.trim()).toBe('')
  })
})

describe('PktFooter sekundær footer (custom innhold)', () => {
  test('rendrer kolonner med tittel, tekst og lenker', () => {
    const { container } = render(<PktFooter columns={COLUMNS} data={EXAMPLE_HEADER_FOOTER_DATA} />)
    const columns = [...container.querySelectorAll('.pkt-footer__band--secondary section')]
    expect(columns).toHaveLength(2)
    expect(columns[0].querySelector('h2')?.textContent).toBe('Overskrift 1')
    expect(columns[0].querySelector('p')?.textContent).toContain('lengre tekst')
    expect(columns[1].querySelector('p')).toBeNull()
  })

  test('eksterne og nye-fane-lenker får riktige attributter', () => {
    render(<PktFooter columns={COLUMNS} data={EXAMPLE_HEADER_FOOTER_DATA} />)
    // external-flagget viser toppdomenet i parentes bak lenketeksten
    const external = screen.getByRole('link', { name: /Lenke 2/ })
    expect(external.querySelector('.pkt-footer__link-domain')?.textContent?.trim()).toBe('(example.test)')
    const newTab = screen.getByRole('link', { name: 'Lenke 3' })
    expect(newTab.querySelector('.pkt-footer__link-domain')).toBeNull()
    expect(newTab).toHaveAttribute('target', '_blank')
    expect(newTab).toHaveAttribute('rel', 'noopener noreferrer')
  })

  test('openLinksInNewTab åpner alle custom lenker i ny fane', () => {
    const { container } = render(<PktFooter columns={COLUMNS} data={EXAMPLE_HEADER_FOOTER_DATA} openLinksInNewTab />)
    const links = [...container.querySelectorAll<HTMLAnchorElement>('.pkt-footer__band--secondary a')]
    expect(links.length).toBeGreaterThan(0)
    expect(links.every((l) => l.getAttribute('target') === '_blank')).toBe(true)
  })

  test('global footer rendres under sekundær footer', () => {
    const { container } = render(<PktFooter columns={COLUMNS} data={EXAMPLE_HEADER_FOOTER_DATA} />)
    const footer = container.querySelector('footer.pkt-footer')
    const children = [...(footer?.children ?? [])].map((c) => c.className)
    expect(children[0]).toContain('pkt-footer__band--secondary')
    expect(children[1]).toContain('pkt-footer__band--global')
  })

  test('consent rendres i sekundær footer ved skipGlobal + includeConsent', () => {
    const { container } = render(<PktFooter columns={COLUMNS} skipGlobal includeConsent />)
    const consent = container.querySelector('.pkt-footer__consent a.pkt-footer__link')
    expect(consent).not.toBeNull()
  })
})

describe('PktFooter deprecated props', () => {
  test('columnOne/columnTwo mappes til kolonner og gir console.warn', () => {
    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
    const { container } = render(
      <PktFooter
        columnOne={{ title: 'Gammel 1', links: [{ text: 'Lenke', href: '#' }] }}
        columnTwo={{ title: 'Gammel 2' }}
        data={EXAMPLE_HEADER_FOOTER_DATA}
      />,
    )
    const titles = [...container.querySelectorAll('.pkt-footer__band--secondary h2')].map(
      (t) => t.textContent,
    )
    expect(titles).toEqual(['Gammel 1', 'Gammel 2'])
    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('columnOne'))
  })

  test('personvern/tilgjengelighet rendres kun ved eksplisitt overstyring', () => {
    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
    const { container } = render(
      <PktFooter
        columns={COLUMNS}
        personvernOgInfoLink="https://example.test/personvern"
        data={EXAMPLE_HEADER_FOOTER_DATA}
      />,
    )
    const legacyColumn = [...container.querySelectorAll('.pkt-footer__band--secondary section')].find(
      (column) => column.querySelector('h2')?.textContent?.includes('Om nettstedet'),
    )
    expect(legacyColumn?.textContent).toContain('Personvern og informasjonskapsler')
    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('personvernOgInfoLink'))
  })

  test('default-verdi på personvernOgInfoLink rendres ikke', () => {
    vi.spyOn(console, 'warn').mockImplementation(() => {})
    const { container } = render(
      <PktFooter
        columns={COLUMNS}
        personvernOgInfoLink="https://www.oslo.kommune.no/personvern-og-informasjonskapsler/"
        data={EXAMPLE_HEADER_FOOTER_DATA}
      />,
    )
    const titles = [...container.querySelectorAll('.pkt-footer__band--secondary h2')].map(
      (t) => t.textContent,
    )
    expect(titles).not.toContain('Om nettstedet')
  })

  test('socialLinks rendres i sekundær footer med console.warn', () => {
    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
    const { container } = render(
      <PktFooter
        columns={COLUMNS}
        socialLinks={[
          { href: 'https://example.test/en', language: 'English' },
          { href: 'https://www.facebook.com/Oslo/', iconName: 'facebook' },
        ]}
        data={EXAMPLE_HEADER_FOOTER_DATA}
      />,
    )
    const social = container.querySelector('.pkt-footer__band--secondary .pkt-footer__bottom')
    expect(social?.textContent).toContain('English')
    expect(social?.querySelector('.pkt-footer__some-link')).not.toBeNull()
    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('socialLinks'))
  })
})