import { Flex, Grid, Spacer, View, VStack } from "../wp";
import type { CSSProperties, ReactNode } from "react";

export type LoadingVariant = "default" | "inverse";

type SkeletonWidth = NonNullable<CSSProperties["width"]>;
type SkeletonHeight = NonNullable<CSSProperties["height"]>;
type SkeletonRadius = NonNullable<CSSProperties["borderRadius"]>;

interface LoadingSkeletonItem {
  height?: SkeletonHeight;
  radius?: SkeletonRadius;
  width: SkeletonWidth;
}

interface ResolvedLoadingSkeletonItem {
  height: SkeletonHeight;
  radius: SkeletonRadius;
  width: SkeletonWidth;
}

type LoadingSkeletonItemInput = SkeletonWidth | LoadingSkeletonItem;

interface LoadingSkeletonActions {
  direction?: "column" | "row";
  gap?: CSSProperties["gap"];
  items: LoadingSkeletonItemInput[];
}

interface LoadingSkeletonLeading {
  radius?: SkeletonRadius;
  size: SkeletonWidth;
}

export interface LoadingSkeletonProps {
  actions?: LoadingSkeletonItemInput[] | LoadingSkeletonActions;
  align?: "center" | "start";
  badge?: LoadingSkeletonItemInput;
  children?: ReactNode;
  header?: "control";
  leading?: SkeletonWidth | LoadingSkeletonLeading;
  lines?: LoadingSkeletonItemInput[];
  rowPadding?: CSSProperties["width"];
  rows?: number;
  showLoadingBar?: boolean;
  spacing?: CSSProperties["width"];
  style?: CSSProperties;
  variant?: LoadingVariant;
}

const styles = {
  skeleton: {
    animation: "market-sync-skeleton 1.4s ease-in-out infinite",
    backgroundSize: "220% 100%",
    borderRadius: 6,
    display: "block",
  },
  loadingBar: {
    background: "#edf2f7",
    borderRadius: 999,
    display: "block",
    height: 3,
    margin: "10px 0 0",
    overflow: "hidden",
    position: "relative",
  },
  loadingBarInner: {
    animation: "market-sync-loader 1.2s ease-in-out infinite",
    background: "linear-gradient(90deg, transparent, #008f72, transparent)",
    display: "block",
    height: "100%",
    left: "-45%",
    position: "absolute",
    top: 0,
    width: "45%",
  },
} satisfies Record<string, CSSProperties>;

const LoadingStyles = () => {
  return (
    <style>
      {`
        @keyframes market-sync-skeleton {
          0% { background-position: 120% 0; }
          100% { background-position: -120% 0; }
        }

        @keyframes market-sync-loader {
          0% { left: -45%; }
          100% { left: 100%; }
        }
      `}
    </style>
  );
};

function skeletonBackground(variant: LoadingVariant): string {
  if (variant === "inverse") {
    return "linear-gradient(90deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.26) 45%, rgba(255,255,255,.14) 90%)";
  }

  return "linear-gradient(90deg, #eef2f6 0%, #f8fafc 45%, #eef2f6 90%)";
}

const resolveItem = (
  item: LoadingSkeletonItemInput,
  fallbackHeight: SkeletonHeight,
  fallbackRadius: SkeletonRadius,
): ResolvedLoadingSkeletonItem => {
  if (typeof item === "object") {
    return {
      height: item.height ?? fallbackHeight,
      radius: item.radius ?? fallbackRadius,
      width: item.width,
    };
  }

  return {
    height: fallbackHeight,
    radius: fallbackRadius,
    width: item,
  };
};

export const SkeletonLine = ({
  height = 12,
  style,
  variant = "default",
  width = "100%",
}: {
  height?: CSSProperties["height"];
  style?: CSSProperties;
  variant?: LoadingVariant;
  width?: CSSProperties["width"];
}) => {
  return (
    <View
      aria-hidden="true"
      as="span"
      style={{
        ...styles.skeleton,
        background: skeletonBackground(variant),
        height,
        width,
        ...style,
      }}
    />
  );
};

export const SubtleLoadingBar = ({
  style,
  variant = "default",
}: {
  style?: CSSProperties;
  variant?: LoadingVariant;
}) => {
  return (
    <>
      <LoadingStyles />
      <View
        aria-hidden="true"
        as="span"
        style={{
          ...styles.loadingBar,
          background:
            variant === "inverse" ? "rgba(255,255,255,.14)" : styles.loadingBar.background,
          ...style,
        }}
      >
        <View as="span" style={styles.loadingBarInner} />
      </View>
    </>
  );
};

export const LoadingSkeleton = ({
  actions,
  align = "center",
  badge,
  children,
  header,
  leading,
  lines,
  rowPadding = 3,
  rows,
  showLoadingBar = true,
  spacing = 3,
  style,
  variant = "default",
}: LoadingSkeletonProps) => {
  const actionConfig = actions ? (Array.isArray(actions) ? { items: actions } : actions) : null;
  const resolvedActions = actionConfig
    ? {
        direction: actionConfig.direction ?? "row",
        gap: actionConfig.gap ?? 2,
        items: actionConfig.items,
      }
    : null;
  const resolvedBadge = badge === undefined ? null : resolveItem(badge, 24, 999);
  const resolvedLeading =
    leading === undefined
      ? null
      : typeof leading === "object"
        ? { radius: leading.radius ?? 8, size: leading.size }
        : { radius: 8, size: leading };
  const resolvedLines = (lines ?? (rows === undefined ? [] : ["48%", "68%"])).map((line, index) =>
    resolveItem(line, index === 0 ? 14 : 12, 6),
  );
  const leadingColumn =
    typeof resolvedLeading?.size === "number" ? `${resolvedLeading.size}px` : resolvedLeading?.size;
  const templateColumns = [
    leadingColumn,
    "minmax(0, 1fr)",
    resolvedActions?.items.length ? "auto" : undefined,
  ]
    .filter(Boolean)
    .join(" ");

  const generatedRows =
    rows !== undefined ? (
      <VStack alignment="stretch" spacing={2}>
        {Array.from({ length: rows }, (_, rowIndex) => (
          <Spacer key={rowIndex} marginBottom={0} paddingY={rowPadding}>
            <Grid align={align} columnGap={12} templateColumns={templateColumns}>
              {resolvedLeading && (
                <SkeletonLine
                  height={resolvedLeading.size}
                  variant={variant}
                  width={resolvedLeading.size}
                  style={{ borderRadius: resolvedLeading.radius }}
                />
              )}
              <VStack alignment="stretch" spacing={2}>
                {resolvedLines.map((lineItem, lineIndex) => {
                  const line = (
                    <SkeletonLine
                      height={lineItem.height}
                      variant={variant}
                      width={lineItem.width}
                      style={{ borderRadius: lineItem.radius }}
                    />
                  );

                  if (lineIndex !== 0 || !resolvedBadge) {
                    return <View key={lineIndex}>{line}</View>;
                  }

                  return (
                    <Flex key={lineIndex} align="center" gap={2} justify="flex-start" wrap>
                      {line}
                      <SkeletonLine
                        height={resolvedBadge.height}
                        variant={variant}
                        width={resolvedBadge.width}
                        style={{ borderRadius: resolvedBadge.radius }}
                      />
                    </Flex>
                  );
                })}
              </VStack>
              {resolvedActions && resolvedActions.items.length > 0 && (
                <Flex
                  align={resolvedActions.direction === "column" ? "flex-end" : "center"}
                  direction={resolvedActions.direction}
                  gap={resolvedActions.gap}
                  justify={resolvedActions.direction === "column" ? "flex-start" : "flex-end"}
                >
                  {resolvedActions.items.map((action, actionIndex) => {
                    const actionItem = resolveItem(action, 40, 2);

                    return (
                      <SkeletonLine
                        key={actionIndex}
                        height={actionItem.height}
                        variant={variant}
                        width={actionItem.width}
                        style={{ borderRadius: actionItem.radius }}
                      />
                    );
                  })}
                </Flex>
              )}
            </Grid>
          </Spacer>
        ))}
      </VStack>
    ) : (
      resolvedLines.map((line, index) => (
        <SkeletonLine
          key={index}
          height={line.height}
          variant={variant}
          width={line.width}
          style={{ borderRadius: line.radius }}
        />
      ))
    );

  return (
    <>
      {!showLoadingBar && <LoadingStyles />}
      <VStack alignment="stretch" spacing={spacing} style={{ flex: 1, ...style }}>
        {showLoadingBar && <SubtleLoadingBar variant={variant} style={{ marginTop: 0 }} />}
        {header === "control" && (
          <SkeletonLine height={40} variant={variant} width="100%" style={{ borderRadius: 2 }} />
        )}
        {children}
        {generatedRows}
      </VStack>
    </>
  );
};