'use client'

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

import {
  DEFAULT_FOOTER_PERSONVERN_URL,
  DEFAULT_FOOTER_TILGJENGELIGHET_URL,
  type IPktFooterColumn,
  type IPktFooterLink,
  type IPktFooterProps,
} 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 './FooterGlobal'

export interface IPktFooter
  extends IPktFooterProps<string>, TFooterConsentConfig, Omit<HTMLAttributes<HTMLElement>, 'children'> {
  /** Kalles når henting fra endepunktet feiler (den globale footeren skjules stille). */
  onDataError?: (error: Error) => void
}

const CustomLink: 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 (
    <li>
      <a href={link.href} target={newTab ? '_blank' : '_self'} rel={newTab ? 'noopener noreferrer' : undefined}>
        {link.text}
        {domain && <span className="pkt-footer__link-domain"> ({domain})</span>}
      </a>
    </li>
  )
}

const Column: FC<{ column: IPktFooterColumn; openLinksInNewTab: boolean }> = ({ column, openLinksInNewTab }) => (
  <section>
    <h2>{column.title}</h2>
    {column.text && <p>{column.text}</p>}
    {!!column.links?.length && (
      <ul className="pkt-footer__link-list">
        {column.links.map((link) => (
          <CustomLink key={`${link.href}|${link.text}`} link={link} openLinksInNewTab={openLinksInNewTab} />
        ))}
      </ul>
    )}
  </section>
)

/**
 * PktFooter — footer med valgfritt custom innhold (grått sekundær-bånd)
 * stablet oppå den globale (blå) footeren. Uten custom innhold rendres kun
 * den globale. Den globale henter innhold fra Oslo kommunes felles
 * header/footer-endepunkt (samme som PktHeader type="global").
 */
export const PktFooter: FC<IPktFooter> = ({
  columns,
  columnOne,
  columnTwo,
  personvernOgInfoLink,
  tilgjengelighetLink,
  socialLinks,
  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 (columnOne || columnTwo) {
      // eslint-disable-next-line no-console
      console.warn(
        'PktFooter: The "columnOne"/"columnTwo" props are deprecated and will be removed in a future version. Please use "columns" instead.',
      )
    }
  }, [columnOne, columnTwo])

  useEffect(() => {
    if (personvernOgInfoLink || tilgjengelighetLink) {
      // eslint-disable-next-line no-console
      console.warn(
        'PktFooter: The "personvernOgInfoLink"/"tilgjengelighetLink" props are deprecated — the links now come from the global footer. Overridden values are rendered in the secondary footer.',
      )
    }
  }, [personvernOgInfoLink, tilgjengelighetLink])

  useEffect(() => {
    if (socialLinks) {
      // eslint-disable-next-line no-console
      console.warn(
        'PktFooter: The "socialLinks" prop is deprecated and will be removed in a future version — the social media links now come from the global footer.',
      )
    }
  }, [socialLinks])

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

  // Deprecated «Om nettstedet»-lenker rendres kun når de er eksplisitt
  // overstyrt til noe annet enn default — ellers dekkes de av den globale
  // footeren.
  const effectiveColumns = useMemo(() => {
    const base = columns?.length ? columns : ([columnOne, columnTwo].filter(Boolean) as IPktFooterColumn[])
    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 })
    }
    if (!legacyLinks.length) return base
    return [...base, { title: 'Om nettstedet', links: legacyLinks }]
  }, [columns, columnOne, columnTwo, 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 languageLinks = socialLinks?.filter((link) => link.language) ?? []
  const iconLinks = socialLinks?.filter((link) => link.iconName) ?? []
  const hasSecondary = effectiveColumns.length > 0 || consentInSecondary || !!socialLinks?.length

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

  return (
    <footer className={classNames} {...rest}>
      {hasSecondary && (
        <div className="pkt-footer__band pkt-footer__band--secondary">
          <div className="pkt-footer__inner">
            {effectiveColumns.length > 0 && (
              <div className="pkt-footer__sections">
                {effectiveColumns.map((column) => (
                  <Column key={column.title} column={column} openLinksInNewTab={openLinksInNewTab} />
                ))}
              </div>
            )}
            {consentInSecondary && (
              <div className="pkt-footer__consent">
                <PktConsent triggerType="footerlink" {...consent} />
              </div>
            )}
            {!!socialLinks?.length && (
              <div className="pkt-footer__bottom">
                <ul className="pkt-footer__bottom-links">
                  {languageLinks.map((link) => (
                    <li key={`${link.href}|${link.language}`}>
                      <a
                        href={link.href}
                        aria-label={`til ${link.language} versjon av nettsiden`}
                        target={link.openInNewTab || openLinksInNewTab ? '_blank' : '_self'}
                        rel={link.openInNewTab || openLinksInNewTab ? 'noopener noreferrer' : undefined}
                      >
                        {link.language}
                      </a>
                    </li>
                  ))}
                </ul>
                <ul className="pkt-footer__some">
                  {iconLinks.map((link) => (
                    <li key={`${link.href}|${link.iconName}`}>
                      <a
                        className="pkt-footer__some-link"
                        href={link.href}
                        aria-label={`til ${link.iconName}`}
                        target={link.openInNewTab || openLinksInNewTab ? '_blank' : '_self'}
                        rel={link.openInNewTab || openLinksInNewTab ? 'noopener noreferrer' : undefined}
                      >
                        <PktIcon className="pkt-footer__some-icon" name={link.iconName} />
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            )}
          </div>
        </div>
      )}
      {globalFooter && <FooterGlobal footer={globalFooter} includeConsent={includeConsent} consent={consent} />}
    </footer>
  )
}