import { createContext, useContext } from 'react';

import type { VariantProps } from 'class-variance-authority';

import type { buttonVariants } from '@/components/ui/button';

export type BoardViewSize = 'xs' | 'sm' | 'md' | 'xl';

export const DEFAULT_BOARD_VIEW_SIZE: BoardViewSize = 'md';

export type BoardViewActionsLayout = 'absoluteOverlay' | 'footerFullWidth';

type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>['size']>;

export type BoardViewSizeTokens = {
    columnWidth: string;
    columnsGap: string;
    bodyGap: string;
    cardPadding: string;
    cardFieldsGap: string;
    labelClass: string;
    valueClass: string;
    headerPadding: string;
    headerTitleClass: string;
    actionsLayout: BoardViewActionsLayout;
    actionsPadding: string;
    actionsOverlayOffset: string;
    cardContentActionsInset: string;
    actionButtonSize: ButtonSize;
    actionIconClass: string;
    shortTextMaxLength: number;
    imagePreviewClass: string;
    imagePlaceholderIconSize: number;
    showFieldLabels: boolean;
};

export const BOARD_VIEW_SIZE_TOKENS: Record<BoardViewSize, BoardViewSizeTokens> = {
    xs: {
        columnWidth: 'w-[180px]',
        columnsGap: 'gap-1.5',
        bodyGap: 'gap-1',
        cardPadding: 'px-2 py-1',
        cardFieldsGap: 'gap-1',
        labelClass: 'text-[10px] text-muted-foreground',
        valueClass: 'text-[11px] leading-tight',
        headerPadding: 'px-2 py-1.5',
        headerTitleClass: 'text-xs font-semibold',
        actionsLayout: 'footerFullWidth',
        actionsPadding: 'p-1.5',
        actionsOverlayOffset: '',
        cardContentActionsInset: '',
        actionButtonSize: 'sm',
        actionIconClass: 'size-3',
        shortTextMaxLength: 12,
        imagePreviewClass: 'w-6 h-6',
        imagePlaceholderIconSize: 14,
        showFieldLabels: false,
    },
    sm: {
        columnWidth: 'w-[220px]',
        columnsGap: 'gap-2',
        bodyGap: 'gap-1.5',
        cardPadding: 'px-2.5 py-1.5',
        cardFieldsGap: 'gap-1.5',
        labelClass: 'text-[10px] text-muted-foreground',
        valueClass: 'text-xs leading-snug',
        headerPadding: 'px-2.5 py-2',
        headerTitleClass: 'text-xs font-semibold',
        actionsLayout: 'footerFullWidth',
        actionsPadding: 'p-2',
        actionsOverlayOffset: '',
        cardContentActionsInset: '',
        actionButtonSize: 'sm',
        actionIconClass: 'size-3.5',
        shortTextMaxLength: 20,
        imagePreviewClass: 'w-8 h-8',
        imagePlaceholderIconSize: 18,
        showFieldLabels: true,
    },
    md: {
        columnWidth: 'w-[280px]',
        columnsGap: 'gap-3',
        bodyGap: 'gap-2',
        cardPadding: 'px-3 py-2',
        cardFieldsGap: 'gap-2',
        labelClass: 'text-xs text-muted-foreground',
        valueClass: 'text-sm',
        headerPadding: 'px-3 py-2.5',
        headerTitleClass: 'text-sm font-semibold',
        actionsLayout: 'absoluteOverlay',
        actionsPadding: '',
        actionsOverlayOffset: 'top-1.5 right-1.5',
        cardContentActionsInset: 'pr-8',
        actionButtonSize: 'icon-sm',
        actionIconClass: 'size-4',
        shortTextMaxLength: 30,
        imagePreviewClass: 'w-10 h-10',
        imagePlaceholderIconSize: 24,
        showFieldLabels: true,
    },
    xl: {
        columnWidth: 'w-[340px]',
        columnsGap: 'gap-4',
        bodyGap: 'gap-3',
        cardPadding: 'px-4 py-3',
        cardFieldsGap: 'gap-2.5',
        labelClass: 'text-sm text-muted-foreground',
        valueClass: 'text-base',
        headerPadding: 'px-4 py-3',
        headerTitleClass: 'text-base font-semibold',
        actionsLayout: 'absoluteOverlay',
        actionsPadding: '',
        actionsOverlayOffset: 'top-2 right-2',
        cardContentActionsInset: 'pr-9',
        actionButtonSize: 'icon-sm',
        actionIconClass: 'size-4',
        shortTextMaxLength: 45,
        imagePreviewClass: 'w-12 h-12',
        imagePlaceholderIconSize: 28,
        showFieldLabels: true,
    },
};

export function getBoardViewSizeTokens(size: BoardViewSize = DEFAULT_BOARD_VIEW_SIZE): BoardViewSizeTokens {
    return BOARD_VIEW_SIZE_TOKENS[size];
}

const BoardViewSizeContext = createContext<BoardViewSizeTokens | null>(null);

export const BoardViewSizeProvider = BoardViewSizeContext.Provider;

export function useBoardViewSize(): BoardViewSizeTokens | null {
    return useContext(BoardViewSizeContext);
}

export function useBoardViewSizeTokens(size: BoardViewSize = DEFAULT_BOARD_VIEW_SIZE): BoardViewSizeTokens {
    return getBoardViewSizeTokens(size);
}
