import React, { FC } from 'react';

interface TokenPreviewProps {
    name: string;
    value: string;
}

function looksLikeColor(value: string): boolean {
    return (
        value.startsWith('#') ||
        value.startsWith('rgb') ||
        value.startsWith('hsl') ||
        value.startsWith('oklch')
    );
}

const SKIP_VALUES = new Set(['underline', 'unset', 'transparent', 'none', 'normal', 'inherit']);

export const TokenPreview: FC<TokenPreviewProps> = ({ name, value }) => {
    if (SKIP_VALUES.has(value.toLowerCase())) {
        return null;
    }

    const nameLower = name.toLowerCase();

    if (value.startsWith('linear-gradient') || value.startsWith('radial-gradient')) {
        return (
            <div
                style={{
                    width: 96,
                    height: 48,
                    background: value,
                    border: '1px solid #ccc',
                }}
            />
        );
    }

    if (looksLikeColor(value)) {
        return (
            <div
                style={{
                    width: 48,
                    height: 48,
                    backgroundColor: value,
                    border: '1px solid #ccc',
                }}
            />
        );
    }

    if (nameLower.includes('fontfamily') || nameLower.includes('typeface')) {
        return <span style={{ fontFamily: value }}>Aa Bb Cc</span>;
    }

    if (nameLower.includes('fontweight') || nameLower.includes('weight')) {
        return (
            <span style={{ fontWeight: value as React.CSSProperties['fontWeight'] }}>Aa Bb Cc</span>
        );
    }

    if (nameLower.includes('fontsize')) {
        return <span style={{ fontSize: value }}>Aa</span>;
    }

    if (nameLower.includes('lineheight')) {
        return <span style={{ lineHeight: value, fontSize: 14 }}>Aa Bb</span>;
    }

    if (nameLower.includes('letterspacing')) {
        return <span style={{ letterSpacing: value }}>Aa Bb Cc</span>;
    }

    if (nameLower.includes('radius')) {
        return (
            <div
                style={{
                    width: 48,
                    height: 48,
                    backgroundColor: '#e0e0e0',
                    borderRadius: value,
                    border: '1px solid #ccc',
                }}
            />
        );
    }

    if (
        nameLower.includes('shadowoffset') ||
        nameLower.includes('shadowopacity') ||
        nameLower.includes('elevation')
    ) {
        return null;
    }

    if (nameLower.includes('shadow') && nameLower.includes('shorthand')) {
        return (
            <div
                style={{
                    width: 48,
                    height: 48,
                    backgroundColor: '#fff',
                    boxShadow: value,
                }}
            />
        );
    }

    if (
        nameLower.includes('spacing') ||
        nameLower.includes('gap') ||
        nameLower.includes('padding') ||
        nameLower.includes('margin')
    ) {
        return (
            <div style={{ display: 'inline-flex', alignItems: 'stretch' }}>
                <div
                    style={{
                        width: value,
                        height: 24,
                        backgroundColor: '#a0c4ff',
                        minWidth: 1,
                    }}
                />
            </div>
        );
    }

    if (nameLower.includes('sizing') || nameLower.includes('size')) {
        return (
            <div
                style={{
                    width: value,
                    height: value,
                    backgroundColor: '#e0e0e0',
                    border: '1px solid #ccc',
                    minWidth: 1,
                    minHeight: 1,
                }}
            />
        );
    }

    if (nameLower.includes('border') && nameLower.includes('width')) {
        return (
            <div
                style={{
                    width: 48,
                    height: 48,
                    borderWidth: value,
                    borderStyle: 'solid',
                    borderColor: '#666',
                }}
            />
        );
    }

    if (nameLower.includes('border') && nameLower.includes('color')) {
        return (
            <div
                style={{
                    width: 48,
                    height: 48,
                    borderWidth: 2,
                    borderStyle: 'solid',
                    borderColor: value,
                }}
            />
        );
    }

    if (nameLower.includes('transition') || nameLower.includes('motion')) {
        return <code>{value}</code>;
    }

    return <code>{value}</code>;
};