"use client"

import * as React from "react"

import { ElsewhereLinks } from "./components/elsewhere-links"
import { LinkList } from "./components/link-list"
import { MetaBlock } from "./components/meta-block"
import { PixelArtCanvas } from "./components/pixel-art-canvas"
import { TopLink } from "./components/top-link"
import {
  DEFAULT_FOUNDRY_LINKS,
  DEFAULT_LINKS,
  DEFAULT_MOODS,
  DEFAULT_TYPEFACES,
} from "./data/defaults"
import { useClock } from "./hooks/use-clock"
import { useMediaQuery } from "./hooks/use-media-query"
import { useMood } from "./hooks/use-mood"
import { usePixelArt } from "./hooks/use-pixel-art"
import { useTypefacePreview } from "./hooks/use-typeface-preview"
import { classNames } from "./lib/class-names"
import { MOBILE_QUERY, REDUCED_MOTION_QUERY } from "./lib/constants"
import { footerStyles } from "./styles"
import type { PixelFoundryFooterProps } from "./types"

export function PixelFoundryFooter({
  className,
  city = "Jakarta",
  country = ", Indonesia",
  timeZone = "Asia/Jakarta",
  zoneLabel = "WIB",
  statusLabel = "Currently:",
  moods = DEFAULT_MOODS,
  topLabel = "Back to top ↑",
  topHref = "#top",
  topShortLabel = "Top ↑",
  foundryTitle = "Foundry",
  foundryLinks = DEFAULT_FOUNDRY_LINKS,
  typefacesTitle = "Typefaces",
  typefaces = DEFAULT_TYPEFACES,
  linksTitle = "Links",
  links = DEFAULT_LINKS,
  copyright = "© 2026 Jolocky",
  artLabel = "Jolocky wordmark drawn in rounded pixel blocks",
}: PixelFoundryFooterProps) {
  const canvasRef = React.useRef<HTMLCanvasElement>(null)
  const reduceMotion = useMediaQuery(REDUCED_MOTION_QUERY)
  const mobile = useMediaQuery(MOBILE_QUERY)
  const time = useClock(timeZone)
  const mood = useMood(moods, reduceMotion)
  const art = usePixelArt(canvasRef, mobile, reduceMotion)

  const preview = useTypefacePreview(art, typefaces)

  return (
    <footer className={classNames("pf-footer", className)}>
      <style>{footerStyles}</style>
      <div className="pf-top">
        <MetaBlock
          city={city}
          country={country}
          zoneLabel={zoneLabel}
          time={time}
          statusLabel={statusLabel}
          mood={mood}
        />

        <TopLink
          className="pf-totop"
          href={topHref}
          label={topLabel}
          reduceMotion={reduceMotion}
        />

        <LinkList title={foundryTitle} links={foundryLinks} />
        <LinkList
          title={typefacesTitle}
          links={typefaces}
          onActivate={preview.show}
          onLeave={preview.reset}
        />
        <ElsewhereLinks title={linksTitle} links={links} />

        <div className="pf-legal">
          <span>{copyright}</span>
          <TopLink
            href={topHref}
            label={topShortLabel}
            reduceMotion={reduceMotion}
          />
        </div>
      </div>

      <PixelArtCanvas canvasRef={canvasRef} label={artLabel} />
    </footer>
  )
}