"use client"

import { DesktopLayout } from "./components/desktop-layout"
import { MobileLayout } from "./components/mobile-layout"
import { TabletLayout } from "./components/tablet-layout"
import {
  DEFAULT_EMAIL,
  DEFAULT_INSTAGRAM,
  DEFAULT_NAV_LINKS,
  DEFAULT_PHONE,
  DEFAULT_SOCIAL_LINKS,
} from "./data/defaults"
import { DEFAULT_WORDMARK } from "./data/wordmark"
import { useBreakpoint } from "./hooks/use-breakpoint"
import { useSignupForm } from "./hooks/use-signup-form"
import { classNames } from "./lib/class-names"
import { footerStyles } from "./styles"
import type { StencilStretchFooterProps } from "./types"

export function StencilStretchFooter({
  className,
  stretch = "Medium",
  stencil = true,
  wordmark = DEFAULT_WORDMARK,
  wordmarkLabel = "Halden Works",
  email = DEFAULT_EMAIL,
  instagram = DEFAULT_INSTAGRAM,
  phone = DEFAULT_PHONE,
  address = "12 Example Lane",
  city = "Fitzroy VIC 3065",
  navLinks = DEFAULT_NAV_LINKS,
  socialLinks = DEFAULT_SOCIAL_LINKS,
  designCredit = "Studio Name",
  developmentCredit = "Developer Name",
  copyright = "Halden Works © 2026",
  signupLabel = "Subscribe for occasional updates:",
  emailPlaceholder = "Email Address",
  subscribeLabel = "Subscribe",
  successMessage = "Thanks — you're on the list.",
  errorMessage = "Something went wrong. Please try again.",
  onSubscribe,
  resetAfterMs = 7000,
}: StencilStretchFooterProps) {
  const breakpoint = useBreakpoint()
  // One form state per layout, kept while the window is resized (like the source).
  const desktopForm = useSignupForm({
    successMessage,
    onSubscribe,
    resetAfterMs,
  })
  const tabletForm = useSignupForm({
    successMessage,
    onSubscribe,
    resetAfterMs,
  })
  const mobileForm = useSignupForm({
    successMessage,
    onSubscribe,
    resetAfterMs,
  })

  const shared = {
    content: {
      email,
      instagram,
      phone,
      address,
      city,
      navLinks,
      socialLinks,
      designCredit,
      developmentCredit,
      copyright,
    },
    signup: {
      label: signupLabel,
      emailPlaceholder,
      subscribeLabel,
      errorMessage,
    },
    wordmark,
    wordmarkLabel,
    stencil,
    stretch,
  }

  return (
    <footer className={classNames("hw-footer", className)}>
      <style>{footerStyles}</style>
      {breakpoint === "desktop" && (
        <DesktopLayout {...shared} form={desktopForm} />
      )}
      {breakpoint === "tablet" && (
        <TabletLayout {...shared} form={tabletForm} />
      )}
      {breakpoint === "mobile" && (
        <MobileLayout {...shared} form={mobileForm} />
      )}
    </footer>
  )
}