import * as stylex from "@stylexjs/stylex";
import { type ComponentPropsWithoutRef, createElement, type HTMLAttributes, type Ref } from "react";
import {
  type Color,
  colors,
  fonts,
  motion,
  type Radius,
  radius,
  type Space,
  space,
} from "./tokens.stylex";

type Container =
  | "div"
  | "main"
  | "section"
  | "article"
  | "aside"
  | "header"
  | "footer"
  | "nav"
  | "ul"
  | "ol"
  | "li";
type Native<T extends Container> = Omit<
  ComponentPropsWithoutRef<T>,
  "className" | "style" | "color"
>;
export type BoxProps<T extends Container = "div"> = Native<T> & {
  as?: T;
  direction?: "row" | "column";
  gap?: Space;
  padding?: Space;
  align?: "start" | "center" | "end" | "stretch";
  justify?: "start" | "center" | "end" | "between";
  wrap?: boolean;
  background?: Color;
  border?: boolean;
  radius?: Radius;
};

export function Box<T extends Container = "div">({
  as,
  direction = "column",
  gap = "none",
  padding = "none",
  align = "stretch",
  justify = "start",
  wrap = false,
  background,
  border = false,
  radius: rounding = "none",
  ...native
}: BoxProps<T>) {
  return createElement(as ?? "div", {
    ...native,
    ...stylex.props(
      styles.box,
      directions[direction],
      gaps[gap],
      paddings[padding],
      aligns[align],
      justifies[justify],
      wrap && styles.wrap,
      background && backgrounds[background],
      border && styles.border,
      roundings[rounding],
    ),
  });
}

type TextTag = "span" | "p" | "h1" | "h2" | "h3" | "strong" | "small";
export type TextProps = Omit<HTMLAttributes<HTMLElement>, "className" | "style" | "color"> & {
  as?: TextTag;
  variant?: "body" | "caption" | "label" | "heading" | "title";
  color?: "text" | "textMuted" | "brand" | "onBrand" | "danger";
};
export function Text({ as = "span", variant = "body", color = "text", ...native }: TextProps) {
  return createElement(as, {
    ...native,
    ...stylex.props(styles.text, typography[variant], foregrounds[color]),
  });
}

export type ButtonProps = Omit<ComponentPropsWithoutRef<"button">, "className" | "style"> & {
  variant?: "primary" | "secondary" | "quiet" | "suggestion";
  size?: "small" | "medium";
  ref?: Ref<HTMLButtonElement>;
};
export function Button({
  variant = "primary",
  size = "medium",
  type = "button",
  ...native
}: ButtonProps) {
  return (
    <button
      {...native}
      type={type}
      {...stylex.props(styles.button, variant !== "suggestion" && sizes[size], buttons[variant])}
    />
  );
}

export type CardProps = Omit<ComponentPropsWithoutRef<"section">, "className" | "style"> & {
  padding?: Space;
};
export function Card({ padding = "xl", ...native }: CardProps) {
  return <section {...native} {...stylex.props(styles.card, paddings[padding])} />;
}
export type BadgeProps = Omit<ComponentPropsWithoutRef<"span">, "className" | "style"> & {
  tone?: "neutral" | "brand" | "danger";
};
export function Badge({ tone = "neutral", ...native }: BadgeProps) {
  return <span {...native} {...stylex.props(styles.badge, badges[tone])} />;
}

const styles = stylex.create({
  box: { display: "flex", minWidth: 0, margin: 0, listStyle: "none" },
  wrap: { flexWrap: "wrap" },
  border: { borderWidth: 1, borderStyle: "solid", borderColor: colors.border },
  text: { margin: 0, fontFamily: fonts.body, letterSpacing: "normal", textAlign: "start" },
  button: {
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    gap: space.s,
    fontFamily: fonts.body,
    fontWeight: 700,
    lineHeight: 1.25,
    borderRadius: radius.pill,
    borderWidth: 1,
    borderStyle: "solid",
    borderColor: "transparent",
    textDecoration: "none",
    cursor: { default: "pointer", ":disabled": "default" },
    opacity: { default: 1, ":disabled": 0.45 },
    outline: { default: "none", ":focus-visible": `2px solid ${colors.focus}` },
    outlineOffset: 3,
    transitionProperty: "background-color, border-color",
    transitionDuration: motion.fast,
  },
  card: {
    minWidth: 0,
    backgroundColor: colors.surface,
    borderWidth: 1,
    borderStyle: "solid",
    borderColor: colors.border,
    borderRadius: radius.l,
  },
  badge: {
    display: "inline-flex",
    paddingBlock: space.xs,
    paddingInline: space.s,
    borderRadius: radius.pill,
    fontFamily: fonts.body,
    fontSize: 12,
    lineHeight: 1.2,
    fontWeight: 700,
  },
});
const directions = stylex.create({
  row: { flexDirection: "row" },
  column: { flexDirection: "column" },
});
const aligns = stylex.create({
  start: { alignItems: "flex-start" },
  center: { alignItems: "center" },
  end: { alignItems: "flex-end" },
  stretch: { alignItems: "stretch" },
});
const justifies = stylex.create({
  start: { justifyContent: "flex-start" },
  center: { justifyContent: "center" },
  end: { justifyContent: "flex-end" },
  between: { justifyContent: "space-between" },
});
const typography = stylex.create({
  body: { fontSize: 16, lineHeight: 1.5, fontWeight: 400 },
  caption: { fontSize: 13, lineHeight: 1.5, fontWeight: 400 },
  label: {
    fontSize: 12,
    lineHeight: 1.3,
    fontWeight: 700,
    letterSpacing: ".08em",
    textTransform: "uppercase",
  },
  heading: {
    fontFamily: fonts.display,
    fontSize: 28,
    lineHeight: 1.1,
    letterSpacing: "-.035em",
    fontWeight: 700,
  },
  title: {
    fontFamily: fonts.display,
    fontSize: { default: 64, "@media (max-width: 600px)": 42 },
    lineHeight: 0.95,
    letterSpacing: "-.06em",
    fontWeight: 700,
  },
});
const sizes = stylex.create({
  small: { fontSize: 13, paddingBlock: 8, paddingInline: 14, minHeight: 36 },
  medium: { fontSize: 16, paddingBlock: 12, paddingInline: 22, minHeight: 44 },
});
const buttons = stylex.create({
  primary: {
    backgroundColor: { default: colors.brand, ":hover:not(:disabled)": "#251cff" },
    color: colors.surface,
  },
  secondary: {
    backgroundColor: { default: "transparent", ":hover:not(:disabled)": colors.selected },
    color: colors.brand,
    borderColor: colors.brand,
  },
  quiet: {
    backgroundColor: { default: "transparent", ":hover:not(:disabled)": colors.selected },
    color: colors.brand,
  },
  suggestion: {
    borderColor: {
      default: "rgba(13, 1, 255, .28)",
      ":hover": colors.brand,
      ":focus-visible": colors.brand,
    },
    paddingBlock: ".75rem",
    paddingInline: "1.15rem",
    minHeight: 0,
    backgroundColor: "rgba(255, 255, 255, .92)",
    color: colors.brand,
    fontFamily: fonts.display,
    fontSize: "1.5rem",
    lineHeight: 1.2,
    fontWeight: 600,
    pointerEvents: "auto",
  },
});
const badges = stylex.create({
  neutral: { backgroundColor: colors.canvas, color: colors.textMuted },
  brand: { backgroundColor: colors.selected, color: colors.brand },
  danger: { backgroundColor: "#fce8e6", color: colors.danger },
});
const gaps = stylex.create({
  none: { gap: space.none },
  xs: { gap: space.xs },
  s: { gap: space.s },
  m: { gap: space.m },
  l: { gap: space.l },
  xl: { gap: space.xl },
  xxl: { gap: space.xxl },
});
const paddings = stylex.create({
  none: { padding: space.none },
  xs: { padding: space.xs },
  s: { padding: space.s },
  m: { padding: space.m },
  l: { padding: space.l },
  xl: { padding: space.xl },
  xxl: { padding: space.xxl },
});
const roundings = stylex.create({
  none: { borderRadius: radius.none },
  s: { borderRadius: radius.s },
  m: { borderRadius: radius.m },
  l: { borderRadius: radius.l },
  pill: { borderRadius: radius.pill },
});
const backgrounds = stylex.create({
  canvas: { backgroundColor: colors.canvas },
  brand: { backgroundColor: colors.brand },
  onBrand: { backgroundColor: colors.onBrand },
  text: { backgroundColor: colors.text },
  textMuted: { backgroundColor: colors.textMuted },
  surface: { backgroundColor: colors.surface },
  border: { backgroundColor: colors.border },
  danger: { backgroundColor: colors.danger },
  focus: { backgroundColor: colors.focus },
  selected: { backgroundColor: colors.selected },
});
const foregrounds = stylex.create({
  text: { color: colors.text },
  textMuted: { color: colors.textMuted },
  brand: { color: colors.brand },
  onBrand: { color: colors.onBrand },
  danger: { color: colors.danger },
});