'use client';

import { chakra } from '@chakra-ui/react';

const TRAILING_PSEUDO_REGEX = /(::?[\w-]+(?:\([^)]*\))?)+$/;
const EXCLUDE_CLASSNAME = '.not-prose';
function inWhere<T extends string>(selector: T): T {
  const rebuiltSelector = selector.startsWith('& ') ? selector.slice(2) : selector;
  const match = selector.match(TRAILING_PSEUDO_REGEX);
  const pseudo = match ? match[0] : '';
  const base = match ? selector.slice(0, -match[0].length) : rebuiltSelector;
  return `& :where(${base}):not(${EXCLUDE_CLASSNAME}, ${EXCLUDE_CLASSNAME} *)${pseudo}` as T;
}

export const Prose = chakra('div', {
  base: {
    color: 'fg.muted',
    maxWidth: '65ch',
    fontSize: 'sm',
    lineHeight: '1.7em',
    [inWhere('& p')]: {
      marginTop: '1em',
      marginBottom: '1em',
    },
    [inWhere('& blockquote')]: {
      marginTop: '1.285em',
      marginBottom: '1.285em',
      paddingInline: '1.285em',
      borderInlineStartWidth: '0.25em',
      color: 'fg',
    },
    [inWhere('& a')]: {
      color: 'fg',
      textDecoration: 'underline',
      textUnderlineOffset: '3px',
      textDecorationThickness: '2px',
      textDecorationColor: 'border.muted',
      fontWeight: '500',
    },
    [inWhere('& strong')]: {
      fontWeight: '600',
    },
    [inWhere('& a strong')]: {
      color: 'inherit',
    },
    [inWhere('& h1')]: {
      fontSize: '2.15em',
      letterSpacing: '-0.02em',
      marginTop: '0',
      marginBottom: '0.8em',
      lineHeight: '1.2em',
    },
    [inWhere('& h2')]: {
      fontSize: '1.4em',
      letterSpacing: '-0.02em',
      marginTop: '1.6em',
      marginBottom: '0.8em',
      lineHeight: '1.4em',
    },
    [inWhere('& h3')]: {
      fontSize: '1.285em',
      letterSpacing: '-0.01em',
      marginTop: '1.5em',
      marginBottom: '0.4em',
      lineHeight: '1.5em',
    },
    [inWhere('& h4')]: {
      marginTop: '1.4em',
      marginBottom: '0.5em',
      letterSpacing: '-0.01em',
      lineHeight: '1.5em',
    },
    [inWhere('& img')]: {
      marginTop: '1.7em',
      marginBottom: '1.7em',
      borderRadius: 'lg',
      boxShadow: 'inset',
    },
    [inWhere('& picture')]: {
      marginTop: '1.7em',
      marginBottom: '1.7em',
    },
    [inWhere('& picture > img')]: {
      marginTop: '0',
      marginBottom: '0',
    },
    [inWhere('& video')]: {
      marginTop: '1.7em',
      marginBottom: '1.7em',
    },
    [inWhere('& kbd')]: {
      fontSize: '0.85em',
      borderRadius: 'xs',
      paddingTop: '0.15em',
      paddingBottom: '0.15em',
      paddingInlineEnd: '0.35em',
      paddingInlineStart: '0.35em',
      fontFamily: 'inherit',
      color: 'fg.muted',
      '--shadow': 'colors.border',
      boxShadow: '0 0 0 1px var(--shadow),0 1px 0 1px var(--shadow)',
    },
    [inWhere('& code')]: {
      fontSize: '0.925em',
      letterSpacing: '-0.01em',
      borderRadius: 'md',
      borderWidth: '1px',
      padding: '0.25em',
    },
    [inWhere('& pre code')]: {
      fontSize: 'inherit',
      letterSpacing: 'inherit',
      borderWidth: 'inherit',
      padding: '0',
    },
    [inWhere('& h2 code')]: {
      fontSize: '0.9em',
    },
    [inWhere('& h3 code')]: {
      fontSize: '0.8em',
    },
    [inWhere('& pre')]: {
      backgroundColor: 'bg.subtle',
      marginTop: '1.6em',
      marginBottom: '1.6em',
      borderRadius: 'md',
      fontSize: '0.9em',
      paddingTop: '0.65em',
      paddingBottom: '0.65em',
      paddingInlineEnd: '1em',
      paddingInlineStart: '1em',
      overflowX: 'auto',
      fontWeight: '400',
    },
    [inWhere('& ol')]: {
      marginTop: '1em',
      marginBottom: '1em',
      paddingInlineStart: '1.5em',
    },
    [inWhere('& ul')]: {
      marginTop: '1em',
      marginBottom: '1em',
      paddingInlineStart: '1.5em',
    },
    [inWhere('& li')]: {
      marginTop: '0.285em',
      marginBottom: '0.285em',
    },
    [inWhere('& ol > li')]: {
      paddingInlineStart: '0.4em',
      listStyleType: 'decimal',
      '&::marker': {
        color: 'fg.muted',
      },
    },
    [inWhere('& ul > li')]: {
      paddingInlineStart: '0.4em',
      listStyleType: 'disc',
      '&::marker': {
        color: 'fg.muted',
      },
    },
    [inWhere('& > ul > li p')]: {
      marginTop: '0.5em',
      marginBottom: '0.5em',
    },
    [inWhere('& > ul > li > p:first-of-type')]: {
      marginTop: '1em',
    },
    [inWhere('& > ul > li > p:last-of-type')]: {
      marginBottom: '1em',
    },
    [inWhere('& > ol > li > p:first-of-type')]: {
      marginTop: '1em',
    },
    [inWhere('& > ol > li > p:last-of-type')]: {
      marginBottom: '1em',
    },
    [inWhere('& ul ul, ul ol, ol ul, ol ol')]: {
      marginTop: '0.5em',
      marginBottom: '0.5em',
    },
    [inWhere('& dl')]: {
      marginTop: '1em',
      marginBottom: '1em',
    },
    [inWhere('& dt')]: {
      fontWeight: '600',
      marginTop: '1em',
    },
    [inWhere('& dd')]: {
      marginTop: '0.285em',
      paddingInlineStart: '1.5em',
    },
    [inWhere('& hr')]: {
      marginTop: '2.25em',
      marginBottom: '2.25em',
    },
    [inWhere('& :is(h1,h2,h3,h4,h5,hr) + *')]: {
      marginTop: '0',
    },
    [inWhere('& table')]: {
      width: '100%',
      tableLayout: 'auto',
      textAlign: 'start',
      lineHeight: '1.5em',
      marginTop: '2em',
      marginBottom: '2em',
    },
    [inWhere('& thead')]: {
      borderBottomWidth: '1px',
      color: 'fg',
    },
    [inWhere('& tbody tr')]: {
      borderBottomWidth: '1px',
      borderBottomColor: 'border',
    },
    [inWhere('& thead th')]: {
      paddingInlineEnd: '1em',
      paddingBottom: '0.65em',
      paddingInlineStart: '1em',
      fontWeight: 'medium',
      textAlign: 'start',
    },
    [inWhere('& thead th:first-of-type')]: {
      paddingInlineStart: '0',
    },
    [inWhere('& thead th:last-of-type')]: {
      paddingInlineEnd: '0',
    },
    [inWhere('& tbody td, tfoot td')]: {
      paddingTop: '0.65em',
      paddingInlineEnd: '1em',
      paddingBottom: '0.65em',
      paddingInlineStart: '1em',
    },
    [inWhere('& tbody td:first-of-type, tfoot td:first-of-type')]: {
      paddingInlineStart: '0',
    },
    [inWhere('& tbody td:last-of-type, tfoot td:last-of-type')]: {
      paddingInlineEnd: '0',
    },
    [inWhere('& figure')]: {
      marginTop: '1.625em',
      marginBottom: '1.625em',
    },
    [inWhere('& figure > *')]: {
      marginTop: '0',
      marginBottom: '0',
    },
    [inWhere('& figcaption')]: {
      fontSize: '0.85em',
      lineHeight: '1.25em',
      marginTop: '0.85em',
      color: 'fg.muted',
    },
    [inWhere('& h1, h2, h3, h4')]: {
      color: 'fg',
      fontWeight: '600',
    },
  },
  variants: {
    size: {
      md: {
        fontSize: 'sm',
      },
      lg: {
        fontSize: 'md',
      },
    },
  },
  defaultVariants: {
    size: 'md',
  },
});