import { createThemedStyles } from '../../theme';

/**
 * Styles for the `react-native-markdown-display` renderer used by MarkdownText.
 *
 * Keys map to the library's render-rule names (body, heading1..6, fence, table,
 * etc.) and are passed with `mergeStyle` so these only override the visual
 * properties (color / spacing / font) on top of the library's layout defaults.
 *
 * Base text color/size live on `body`: the library passes body styles down as
 * inherited styles, so plain text picks them up while `strong` / `em` / `link`
 * keep their own colors (do NOT set color on `text` — it would win over those).
 *
 * Authored in the dark palette; `createThemedStyles` derives light mode. A few
 * non-library keys (`bodyWide`, `fenceText`, `thText`, `fenceScroll`,
 * `tableScroll`) are consumed by the custom rules in MarkdownText.
 */
export const markdownStyles = createThemedStyles({
  body: { color: '#F4F4F5', fontSize: 17, lineHeight: 25 },
  // Same as body but full-width — used for messages with code/tables/images.
  bodyWide: { color: '#F4F4F5', fontSize: 17, lineHeight: 25, width: '100%' },

  heading1: { color: '#FFFFFF', fontSize: 22, fontWeight: '800', lineHeight: 29, marginBottom: 6, marginTop: 8 },
  heading2: { color: '#FFFFFF', fontSize: 20, fontWeight: '800', lineHeight: 27, marginBottom: 5, marginTop: 7 },
  heading3: { color: '#FFFFFF', fontSize: 18, fontWeight: '800', lineHeight: 25, marginBottom: 4, marginTop: 6 },
  heading4: { color: '#FFFFFF', fontSize: 17, fontWeight: '800', lineHeight: 24, marginBottom: 4, marginTop: 6 },
  heading5: { color: '#FFFFFF', fontSize: 16, fontWeight: '800', lineHeight: 22, marginBottom: 3, marginTop: 5 },
  heading6: { color: '#FFFFFF', fontSize: 15, fontWeight: '800', lineHeight: 21, marginBottom: 3, marginTop: 5 },

  paragraph: { marginBottom: 3, marginTop: 3 },

  strong: { color: '#FFFFFF', fontWeight: '800' },
  em: { fontStyle: 'italic' },
  s: { textDecorationLine: 'line-through' },
  link: { color: '#8AB4F8', textDecorationLine: 'underline' },

  hr: { backgroundColor: '#2A2A2A', height: 1, marginVertical: 10 },

  blockquote: {
    backgroundColor: '#111111',
    borderLeftColor: '#3F3F46',
    borderLeftWidth: 2,
    borderRadius: 10,
    marginVertical: 6,
    paddingHorizontal: 11,
    paddingVertical: 8,
  },

  bullet_list: { marginVertical: 4 },
  ordered_list: { marginVertical: 4 },
  list_item: { marginVertical: 3 },

  code_inline: {
    backgroundColor: '#171717',
    borderRadius: 5,
    color: '#A1A1AA',
    fontFamily: 'Menlo',
    fontSize: 15,
  },

  // Fenced + indented code: the View wrapper (rendered by the custom rule).
  fence: {
    backgroundColor: '#101010',
    borderColor: '#27272A',
    borderRadius: 12,
    borderWidth: 1,
    minWidth: '100%',
    paddingHorizontal: 12,
    paddingVertical: 10,
  },
  // The monospaced text inside the code block.
  fenceText: { color: '#A1A1AA', fontFamily: 'Menlo', fontSize: 14, lineHeight: 21 },
  fenceScroll: { marginVertical: 8, width: '100%' },

  table: {
    backgroundColor: '#0B0B0C',
    borderColor: '#27272A',
    borderRadius: 12,
    borderWidth: 1,
    overflow: 'hidden',
  },
  tableScroll: { marginVertical: 8, width: '100%' },
  // Rows + cells get an explicit per-column width from the custom table rule, so
  // these only carry borders / padding / colors (no flex or minWidth here).
  tr: { borderTopColor: '#242429', borderTopWidth: 1, flexDirection: 'row' },
  tableHeaderRow: { backgroundColor: '#151515', borderTopWidth: 0 },
  th: { borderLeftColor: '#242429', borderLeftWidth: 1, paddingHorizontal: 10, paddingVertical: 8 },
  thText: { color: '#F4F4F5', fontSize: 14, fontWeight: '800', lineHeight: 20 },
  td: { borderLeftColor: '#242429', borderLeftWidth: 1, paddingHorizontal: 10, paddingVertical: 8 },
  tdText: { color: '#E4E4E7', fontSize: 14, lineHeight: 20 },

  image: { backgroundColor: '#111111', borderRadius: 14, marginVertical: 8, maxHeight: 360, width: '100%' },
});