'use client'

import { FC, useEffect, useMemo, type HTMLAttributes } from 'react'

import {
  DEFAULT_FOOTER_PERSONVERN_URL,
  DEFAULT_FOOTER_TILGJENGELIGHET_URL,
  type IPktFooterLink,
  type IPktFooterSimpleProps,
} from 'shared-types'
import { getLinkDomainLabel } from 'shared-utils/header-footer'
import { PktConsent } from '../consent/Consent'
import { PktIcon } from '../icon/Icon'
import { FooterGlobal, useGlobalFooterData, type TFooterConsentConfig } from '../footer/FooterGlobal'

export interface IPktFooterSimple
  extends IPktFooterSimpleProps<string>, TFooterConsentConfig, Omit<HTMLAttributes<HTMLElement>, 'children'> {
  onDataError?: (error: Error) => void
  /**
   * @deprecated The privacy link now comes from the global footer's payload.
   * Only rendered (in the secondary footer) when explicitly set to a
   * non-default value.
   */
  personvernOgInfoLink?: string
  /**
   * @deprecated The accessibility link now comes from the global footer's
   * payload. Only rendered (in the secondary footer) when explicitly set
   * to a non-default value.
   */
  tilgjengelighetLink?: string
}

const SimpleLink: FC<{ link: IPktFooterLink; openLinksInNewTab: boolean }> = ({ link, openLinksInNewTab }) => {
  const newTab = link.openInNewTab || openLinksInNewTab
  // external = vis toppdomenet i parentes bak lenketeksten
  const domain = link.external ? getLinkDomainLabel(link.href) : undefined
  return (
    <a
      className="pkt-footer-simple__link"
      href={link.href}
      target={newTab ? '_blank' : '_self'}
      rel={newTab ? 'noopener noreferrer' : undefined}
    >
      <PktIcon className="pkt-footer-simple__link-icon" name="arrow-link" />
      <span>
        {link.text}
        {domain && <span className="pkt-footer-simple__link-domain"> ({domain})</span>}
      </span>
    </a>
  )
}

/**
 * PktFooterSimple — kompakt footer: en sentrert rad med pil-lenker i det
 * grå sekundær-båndet, stablet oppå den globale (blå) footeren. Uten
 * `links` rendres kun den globale footeren.
 */
export const PktFooterSimple: FC<IPktFooterSimple> = ({
  links,
  personvernOgInfoLink,
  tilgjengelighetLink,
  skipGlobal = false,
  data,
  dataUrl,
  locale = 'nb-NO',
  openLinksInNewTab = false,
  includeConsent = false,
  hotjarId = null,
  googleAnalyticsId = null,
  devMode = false,
  cookieDomain = null,
  cookieSecure = null,
  cookieExpiryDays = null,
  onToggleConsent,
  onDataError,
  className,
  ...rest
}) => {
  useEffect(() => {
    if (personvernOgInfoLink || tilgjengelighetLink) {
      // eslint-disable-next-line no-console
      console.warn(
        'PktFooterSimple: The "personvernOgInfoLink"/"tilgjengelighetLink" props are deprecated — the links now come from the global footer. Overridden values are rendered in the secondary footer.',
      )
    }
  }, [personvernOgInfoLink, tilgjengelighetLink])

  const globalFooter = useGlobalFooterData({ data, dataUrl, locale, skipGlobal, onDataError })

  // Deprecated lenker rendres kun når de er eksplisitt overstyrt til noe
  // annet enn default — ellers dekkes de av den globale footeren.
  const effectiveLinks = useMemo(() => {
    const legacyLinks: IPktFooterLink[] = []
    if (personvernOgInfoLink && personvernOgInfoLink !== DEFAULT_FOOTER_PERSONVERN_URL) {
      legacyLinks.push({ text: 'Personvern og informasjonskapsler', href: personvernOgInfoLink })
    }
    if (tilgjengelighetLink && tilgjengelighetLink !== DEFAULT_FOOTER_TILGJENGELIGHET_URL) {
      legacyLinks.push({ text: 'Tilgjengelighet', href: tilgjengelighetLink })
    }
    return [...(links ?? []), ...legacyLinks]
  }, [links, personvernOgInfoLink, tilgjengelighetLink])

  const consent: TFooterConsentConfig = {
    hotjarId,
    googleAnalyticsId,
    devMode,
    cookieDomain,
    cookieSecure,
    cookieExpiryDays,
    onToggleConsent,
  }

  // Med skipGlobal rendres consent-lenken i sekundær-båndet i stedet for i
  // den globale footeren.
  const consentInSecondary = skipGlobal && includeConsent
  const hasSecondary = effectiveLinks.length > 0 || consentInSecondary

  const classNames = [className, 'pkt-footer-simple'].filter(Boolean).join(' ')

  return (
    <footer className={classNames} {...rest}>
      {hasSecondary && (
        <div className="pkt-footer__band pkt-footer__band--secondary">
          <div className="pkt-footer__inner pkt-footer__inner--compact">
            <ul className="pkt-footer-simple__list">
              {effectiveLinks.map((link) => (
                <li key={`${link.href}|${link.text}`}>
                  <SimpleLink link={link} openLinksInNewTab={openLinksInNewTab} />
                </li>
              ))}
              {consentInSecondary && (
                <li>
                  <PktConsent triggerType="footerlink" {...consent} />
                </li>
              )}
            </ul>
          </div>
        </div>
      )}
      {globalFooter && <FooterGlobal footer={globalFooter} includeConsent={includeConsent} consent={consent} />}
    </footer>
  )
}