"use client"

import * as React from "react"

import { ListPageViewFrame } from "../ui/list-page-view-frame"
import { DotPattern } from "../ui/dot-pattern"
import { cn } from "../../lib/utils"

export interface DedicatedSearchLandingTemplateProps {
  /** Page title — string or rich node (e.g. styled heading). */
  title: React.ReactNode
  /** Primary search control (typically {@link DedicatedSearchUrlComposer}). */
  composer: React.ReactNode
  /** Optional block below composer (e.g. {@link DedicatedSearchRecents}). */
  trailing?: React.ReactNode
  /** Forwarded to {@link ListPageViewFrame}. */
  maxWidthClassName?: string
  frameClassName?: string
  gutterClassName?: string
}

const DEFAULT_GUTTER =
  "mx-auto flex min-h-[min(72vh,36rem)] w-full min-w-0 flex-col justify-center gap-0 px-6 py-8 sm:px-8 sm:py-10 md:px-12 md:py-12 lg:px-16"

/** Feather into page white / header so the hero never reads as a hard horizontal slab. */
const HERO_BACKDROP_MASK =
  "[mask-image:linear-gradient(to_bottom,transparent_0%,black_5%,black_95%,transparent_100%)] [-webkit-mask-image:linear-gradient(to_bottom,transparent_0%,black_5%,black_95%,transparent_100%)]"

/**
 * Soft blurred blobs using only Ask Leo surface tints (`--leo-surface-tint-a|b` in `globals.css`).
 */
function DedicatedSearchLandingBackdrop() {
  return (
    <div
      aria-hidden
      className={cn(
        "pointer-events-none absolute inset-0 -z-10 select-none overflow-hidden",
        HERO_BACKDROP_MASK,
      )}
    >
      <div
        className="absolute -left-[20%] -top-[30%] size-[min(54vmin,27rem)] rounded-full blur-[76px]"
        style={{
          background: "radial-gradient(circle at 42% 36%, var(--leo-surface-tint-b) 0%, transparent 68%)",
        }}
      />
      <div
        className="absolute -right-[12%] top-[2%] size-[min(46vmin,23rem)] rounded-full blur-[68px]"
        style={{
          background: "radial-gradient(circle at 48% 48%, var(--leo-surface-tint-a) 0%, transparent 66%)",
        }}
      />
      <div
        className="absolute bottom-[-16%] left-[14%] size-[min(50vmin,25rem)] rounded-full blur-[84px]"
        style={{
          background: "radial-gradient(circle at 44% 40%, var(--leo-surface-tint-b) 0%, transparent 70%)",
        }}
      />
      <div
        className="absolute bottom-[4%] right-[6%] size-[min(40vmin,20rem)] rounded-full blur-[60px]"
        style={{
          background: "radial-gradient(circle at 52% 44%, var(--leo-surface-tint-a) 0%, transparent 72%)",
        }}
      />
      <div
        className="absolute left-[36%] top-[32%] size-[min(38vmin,19rem)] -translate-x-1/2 rounded-full blur-[74px]"
        style={{
          background: "radial-gradient(circle at 50% 50%, var(--leo-surface-tint-b) 0%, transparent 68%)",
        }}
      />

      {/* Static dot field — same primitive as `AiThinkingOverlay` (no motion here). */}
      <DotPattern
        width={15}
        height={15}
        cr={0.65}
        className={cn(
          "absolute inset-0 opacity-[0.34] mix-blend-multiply dark:opacity-[0.22] dark:mix-blend-soft-light",
          "fill-[color-mix(in_oklch,var(--brand-color)_14%,var(--background))]",
        )}
      />
    </div>
  )
}

/**
 * Centered dedicated-search landing — empty `?q=` shell (hero title + composer + optional trailing).
 */
export function DedicatedSearchLandingTemplate({
  title,
  composer,
  trailing,
  maxWidthClassName = "max-w-5xl",
  frameClassName = "min-w-0",
  gutterClassName = DEFAULT_GUTTER,
}: DedicatedSearchLandingTemplateProps) {
  return (
    <div className="relative isolate min-w-0 w-full overflow-hidden">
      <DedicatedSearchLandingBackdrop />
      <ListPageViewFrame
        maxWidthClassName={maxWidthClassName}
        className={cn("relative z-10", frameClassName)}
        gutterClassName={gutterClassName}
      >
        <header className="min-w-0">
          {typeof title === "string" ? (
            <h1
              className="text-balance text-3xl font-semibold tracking-tight text-foreground sm:text-4xl font-heading"
                         >
              {title}
            </h1>
          ) : (
            title
          )}
        </header>

        <div className="min-w-0 mt-6 sm:mt-8">{composer}</div>

        {trailing ? <div className="min-w-0 mt-10 sm:mt-12 md:mt-14 lg:mt-16">{trailing}</div> : null}
      </ListPageViewFrame>
    </div>
  )
}