import { isToken, tokens } from '@preply/ds-core';
import type { ButtonVariant } from '@preply/ds-core';
import type { Token } from '@preply/ds-core-types';
import { getTokenVar } from '@preply/ds-web-core';
import { Button } from '@preply/ds-web-lib';
import React, { CSSProperties, FC, ReactNode, useState } from 'react';

/**
 * Small inline previews used by the "Design tokens/Overview" page.
 *
 * Every component receives the token as a dot-separated path string
 * (eg. "color.text.primary") so the MDX source stays readable as plain
 * text — the page is also published as static markdown for LLMs.
 */

function resolveToken(path: string): Token {
    const node = path
        .split('.')
        .reduce<unknown>((acc, key) => (acc as Record<string, unknown> | undefined)?.[key], tokens);

    if (!isToken(node)) {
        throw new Error(`Unknown token path: ${path}`);
    }

    return node;
}

const tokenVar = (path: string): string => getTokenVar(resolveToken(path));

// Checkerboard shows through semi-transparent tokens (overlay, *-opacity)
const CHECKERBOARD = 'repeating-conic-gradient(#DCDCE5 0% 25%, #FFFFFF 0% 50%) 0% 0% / 12px 12px';

const chipBase: CSSProperties = {
    display: 'inline-block',
    verticalAlign: 'middle',
    width: 72,
    height: 28,
    borderRadius: 6,
};

/** A color swatch. Works for solid colors, rgba values, and gradients. */
export const ColorChip: FC<{ token: string }> = ({ token }) => (
    <span
        className="sb-unstyled"
        style={{ ...chipBase, background: CHECKERBOARD, overflow: 'hidden' }}
    >
        <span
            style={{
                display: 'block',
                width: '100%',
                height: '100%',
                borderRadius: 6,
                background: tokenVar(token),
                boxShadow: 'inset 0 0 0 1px rgba(18, 17, 23, 0.15)',
            }}
        />
    </span>
);

/** A transparent box with a 2px border in the token color (or gradient). */
export const BorderChip: FC<{ token: string }> = ({ token }) => {
    const isGradient = token.includes('linearGradient');

    return (
        <span
            className="sb-unstyled"
            style={{
                ...chipBase,
                ...(isGradient
                    ? {
                          border: '2px solid transparent',
                          background: `linear-gradient(#fff, #fff) padding-box, ${tokenVar(token)} border-box`,
                      }
                    : { border: `2px solid ${tokenVar(token)}` }),
            }}
        />
    );
};

/** A neutral box with the token applied as border-radius. */
export const RadiusChip: FC<{ token: string }> = ({ token }) => (
    <span
        className="sb-unstyled"
        style={{
            ...chipBase,
            height: 36,
            background: tokenVar('color.background.tertiary'),
            border: `2px solid ${tokenVar('color.border.secondary')}`,
            borderRadius: tokenVar(token),
        }}
    />
);

/** A white card with the token applied as box-shadow. */
export const ShadowChip: FC<{ token: string }> = ({ token }) => (
    <span
        className="sb-unstyled"
        style={{
            ...chipBase,
            height: 40,
            margin: '12px 4px',
            borderRadius: 8,
            background: tokenVar('color.background.primary'),
            boxShadow: tokenVar(token),
        }}
    />
);

/** Sample text rendered with a `text.variant.*` or `heading.variant.*` token. */
export const TypeSample: FC<{ token: string; children?: ReactNode }> = ({
    token,
    children = 'Aa Bb Cc',
}) => {
    const isHeading = token.startsWith('heading.');

    return (
        <span
            className="sb-unstyled"
            style={{
                fontFamily: tokenVar(isHeading ? 'text.heading.fontFamily' : 'text.fontFamily'),
                fontSize: tokenVar(`${token}.fontSize`),
                fontWeight: tokenVar(`${token}.fontWeight`) as CSSProperties['fontWeight'],
                lineHeight: tokenVar(`${token}.lineHeight`),
                letterSpacing: tokenVar(`${token}.letterSpacing`),
                // heading.variant.* tokens have no fontStyle sub-token
                fontStyle: isHeading ? undefined : tokenVar(`${token}.fontStyle`),
                color: tokenVar('color.text.primary'),
                whiteSpace: 'nowrap',
            }}
        >
            {children}
        </span>
    );
};

// Variants designed for colored or dark surfaces need a matching backdrop
const ACTION_BACKDROP: Partial<Record<ButtonVariant, string>> = {
    inverted: 'color.background.primaryInverted',
    onColor: 'color.background.brand',
};

/** A real Button rendered with the given `action.variant.*` family. */
export const ActionChip: FC<{ variant: ButtonVariant; disabled?: boolean }> = ({
    variant,
    disabled = false,
}) => {
    const backdrop = ACTION_BACKDROP[variant];

    return (
        <span
            className="sb-unstyled"
            style={{
                display: 'inline-flex',
                verticalAlign: 'middle',
                padding: backdrop ? 8 : 0,
                borderRadius: 8,
                background: backdrop ? tokenVar(backdrop) : undefined,
            }}
        >
            <Button variant={variant} size="small" disabled={disabled}>
                {variant}
            </Button>
        </span>
    );
};

/** Two small boxes separated by the token's distance — spacing is a gap between elements. */
export const SpacingGap: FC<{ token: string }> = ({ token }) => {
    const box: CSSProperties = {
        display: 'inline-block',
        width: 14,
        height: 14,
        flexShrink: 0,
        borderRadius: 4,
        background: tokenVar('color.background.brand'),
    };

    return (
        <span
            className="sb-unstyled"
            style={{ display: 'inline-flex', alignItems: 'center', gap: tokenVar(token) }}
        >
            <span style={box} />
            <span style={box} />
        </span>
    );
};

/** A bar as wide as the token's value — sizing is an element dimension. */
export const SizingBar: FC<{ token: string }> = ({ token }) => (
    <span
        className="sb-unstyled"
        style={{
            display: 'inline-block',
            verticalAlign: 'middle',
            width: tokenVar(token),
            height: 14,
            borderRadius: 3,
            background: tokenVar('color.background.brand'),
        }}
    />
);

/** Hover demo: the dot moves using the `motion.components.interaction` token. */
export const MotionDemo: FC = () => {
    const [hovered, setHovered] = useState(false);

    return (
        <div
            className="sb-unstyled"
            onMouseEnter={() => setHovered(true)}
            onMouseLeave={() => setHovered(false)}
            style={{
                display: 'flex',
                alignItems: 'center',
                gap: 16,
                width: 320,
                padding: 12,
                margin: '16px 0',
                borderRadius: 8,
                background: tokenVar('color.background.secondary'),
                cursor: 'pointer',
            }}
        >
            <span
                style={{
                    display: 'block',
                    width: 24,
                    height: 24,
                    borderRadius: '50%',
                    background: tokenVar('color.background.brand'),
                    transform: hovered ? 'translateX(180px)' : 'none',
                    transition: `transform ${tokenVar('motion.components.interaction')}`,
                }}
            />
            <span
                style={{
                    fontFamily: tokenVar('text.fontFamily'),
                    fontSize: 13,
                    color: tokenVar('color.text.tertiary'),
                    marginLeft: 'auto',
                }}
            >
                hover me
            </span>
        </div>
    );
};