import type { ReactNode } from "react";

import { ArrowDown } from "lucide-react";

import { Container } from "@/components/layout/container";
import { HeroMotionBackdrop } from "@/components/layout/hero-motion-backdrop";
import { cn } from "@/lib/utils";

type HeroTone = "default" | "accent" | "soft";
type HeroLineAlign = "start" | "center" | "end";

type HeroTitleLine = {
  text: string;
  tone?: HeroTone;
  align?: HeroLineAlign;
};

type HeroShellProps = {
  children: ReactNode;
  className?: string;
  compactBackdrop?: boolean;
  containerClassName?: string;
  contentClassName?: string;
  showBridges?: boolean;
  size?: "default" | "narrow" | "wide";
  variant?: "home" | "page";
};

type HeroTitleProps = {
  lines: HeroTitleLine[];
  locale?: string;
  variant?: "home" | "page";
  className?: string;
};

type HeroScrollLinkProps = {
  href: string;
  label: string;
  className?: string;
};

const toneClasses: Record<HeroTone, string> = {
  default: "",
  accent: "hero-title-accent",
  soft: "hero-title-accent-soft",
};

const lineAlignClasses: Record<HeroLineAlign, string> = {
  start: "self-start text-start",
  center: "self-center text-center",
  end: "self-end text-end",
};

export function HeroShell({
  children,
  className,
  compactBackdrop = false,
  containerClassName,
  contentClassName,
  showBridges = false,
  size = "default",
  variant = "home",
}: HeroShellProps) {
  return (
    <section
      className={cn(
        "hero-surface relative isolate overflow-hidden",
        variant === "home"
          ? "hero-home flex min-h-[92svh] items-center justify-center"
          : "hero-page flex min-h-[44svh] items-end sm:min-h-[48svh]",
        className,
      )}
    >
      <HeroMotionBackdrop compact={compactBackdrop} />
      {showBridges ? <div className="hero-header-bridge" /> : null}
      {showBridges ? <div className="hero-content-bridge" /> : null}

      <Container
        size={size}
        className={cn(
          "relative z-10 w-full",
          variant === "home"
            ? "pb-12 pt-24 sm:pb-14 sm:pt-28 lg:pb-16 lg:pt-32"
            : "pb-10 pt-24 sm:pb-12 sm:pt-28 lg:pb-14 lg:pt-32",
          containerClassName,
        )}
      >
        <div
          className={cn(
            "mx-auto flex w-full flex-col items-center text-center",
            variant === "home" ? "max-w-[58rem]" : "max-w-[46rem]",
            contentClassName,
          )}
        >
          {children}
        </div>
      </Container>
    </section>
  );
}

export function HeroTitle({
  lines,
  locale = "en",
  variant = "home",
  className,
}: HeroTitleProps) {
  const isArabic = locale === "ar";

  return (
    <h1
      className={cn(
        "text-balance font-semibold text-[hsl(var(--hero-ink))]",
        variant === "home"
          ? isArabic
            ? "mt-6 flex w-full max-w-[42rem] flex-col gap-y-1 text-[clamp(3rem,11vw,5.9rem)] leading-[1.06] tracking-[-0.03em] sm:max-w-[48rem]"
            : "mt-6 flex w-full max-w-[40rem] flex-col gap-y-1 text-[clamp(3.1rem,11vw,6.3rem)] leading-[0.94] tracking-[-0.06em] sm:max-w-[46rem]"
          : "mt-4 flex w-full max-w-[34rem] flex-col gap-y-1 text-[clamp(2.8rem,10vw,4.9rem)] leading-[0.96] tracking-[-0.06em] sm:max-w-[40rem]",
        className,
      )}
    >
      {lines.map((line, index) => (
        <span
          key={`${index}-${line.text}`}
          className={cn(
            "hero-title-line",
            toneClasses[line.tone ?? "default"],
            lineAlignClasses[line.align ?? "center"],
          )}
        >
          {line.text}
        </span>
      ))}
    </h1>
  );
}

export function HeroScrollLink({
  href,
  label,
  className,
}: HeroScrollLinkProps) {
  return (
    <a href={href} aria-label={label} className={cn("hero-scroll-link", className)}>
      <ArrowDown className="h-5 w-5" />
    </a>
  );
}