import Link from "next/link";
import type { ButtonHTMLAttributes, ReactNode } from "react";
import { cn } from "./cn";

type Variant = "primary" | "secondary" | "ghost" | "accent" | "danger";
type Size = "xs" | "sm" | "md" | "lg";

const base = "inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-sm border font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 select-none";
const variants: Record<Variant, string> = {
  primary: "border-ink bg-ink text-paper hover:bg-ink-2 hover:border-ink-2",
  secondary: "border-hair-2 bg-surface text-ink hover:bg-surface-2",
  ghost: "border-transparent bg-transparent text-ink-2 hover:bg-surface-2 hover:text-ink",
  accent: "border-accent bg-accent text-white hover:bg-accent-ink hover:border-accent-ink",
  danger: "border-danger/40 bg-transparent text-danger hover:bg-danger/10",
};
// Touch first: every size is ≥ 40 px tall under 640 px, the compact heights apply from `sm`.
const sizes: Record<Size, string> = {
  xs: "h-10 px-2 text-[12px] sm:h-7",
  sm: "h-10 px-2.5 text-[13px] sm:h-8",
  md: "h-10 px-3 text-[13.5px] sm:h-9",
  lg: "h-11 px-4 text-[14px]",
};

export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: Variant;
  size?: Size;
  href?: string;
  external?: boolean;
  children?: ReactNode;
}

export function Button({ variant = "secondary", size = "md", href, external, className, children, type = "button", ...rest }: ButtonProps) {
  const cls = cn(base, variants[variant], sizes[size], className);
  if (href) {
    if (external) {
      return (
        <a href={href} className={cls} target="_blank" rel="noopener noreferrer">
          {children}
        </a>
      );
    }
    return (
      <Link href={href} className={cls}>
        {children}
      </Link>
    );
  }
  return (
    <button type={type} className={cls} {...rest}>
      {children}
    </button>
  );
}

export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  label: string;
  size?: "sm" | "md" | "lg";
  variant?: "secondary" | "ghost";
  active?: boolean;
}

/** ≥ 40 px hit area under 640 px (touch); compact 32–36 px from `sm`, 44 px for `lg`. */
export function IconButton({ label, size = "md", variant = "ghost", active, className, children, type = "button", ...rest }: IconButtonProps) {
  const dims = size === "sm" ? "size-10 sm:size-8" : size === "lg" ? "size-11" : "size-10 sm:size-9";
  return (
    <button
      type={type}
      aria-label={label}
      title={label}
      aria-pressed={active}
      className={cn(
        "inline-flex shrink-0 items-center justify-center rounded-sm border transition-colors disabled:opacity-50",
        dims,
        variant === "secondary" ? "border-hair-2 bg-surface text-ink-2 hover:text-ink hover:bg-surface-2" : "border-transparent text-ink-2 hover:bg-surface-2 hover:text-ink",
        active && "bg-surface-3 text-ink",
        className,
      )}
      {...rest}
    >
      {children}
    </button>
  );
}

/** "View all →" style inline link. */
export function MoreLink({ href, children = "View all", className }: { href: string; children?: ReactNode; className?: string }) {
  return (
    <Link href={href} className={cn("inline-flex min-h-10 items-center gap-1 whitespace-nowrap text-[12.5px] font-medium text-ink-2 hover:text-accent sm:min-h-0", className)}>
      {children}
      <span aria-hidden>→</span>
    </Link>
  );
}