"use client"

import { SyntaxHighlighter } from "@/lib/syntax-highlighter"
import { memo } from "react"

export const zincDarkTheme = {
  'code[class*="language-"]': {
    color: "rgb(250, 250, 250)",
    background: "none",
    fontFamily: "var(--font-mono)",
    fontSize: "1em",
    textAlign: "left",
    whiteSpace: "pre",
    wordSpacing: "normal",
    wordBreak: "normal",
    wordWrap: "normal",
    lineHeight: "1.5",
    tabSize: 4,
    hyphens: "none",
  },
  'pre[class*="language-"]': {
    color: "rgb(250, 250, 250)",
    background: "rgb(24, 24, 27)",
    fontFamily: "var(--font-mono)",
    fontSize: "1em",
    textAlign: "left",
    whiteSpace: "pre",
    wordSpacing: "normal",
    wordBreak: "normal",
    wordWrap: "normal",
    lineHeight: "1.5",
    tabSize: 4,
    hyphens: "none",
    padding: "1em",
    margin: "0",
    overflow: "auto",
  },
  comment: {
    color: "rgb(113, 113, 122)",
    fontStyle: "italic",
  },
  prolog: { color: "rgb(113, 113, 122)" },
  doctype: { color: "rgb(113, 113, 122)" },
  cdata: { color: "rgb(113, 113, 122)" },
  keyword: { color: "rgb(96, 165, 250)" },
  "control-flow": { color: "rgb(96, 165, 250)" },
  string: { color: "rgb(134, 239, 172)" },
  "attr-value": { color: "rgb(134, 239, 172)" },
  function: { color: "rgb(253, 224, 71)" },
  "class-name": { color: "rgb(253, 224, 71)" },
  number: { color: "rgb(251, 146, 60)" },
  boolean: { color: "rgb(251, 146, 60)" },
  operator: { color: "rgb(161, 161, 170)" },
  punctuation: { color: "rgb(161, 161, 170)" },
  variable: { color: "rgb(250, 250, 250)" },
  property: { color: "rgb(250, 250, 250)" },
  tag: { color: "rgb(96, 165, 250)" },
  "attr-name": { color: "rgb(250, 250, 250)" },
  namespace: { opacity: 0.7 },
  selector: { color: "rgb(253, 224, 71)" },
  important: {
    color: "rgb(251, 146, 60)",
    fontWeight: "bold",
  },
  atrule: { color: "rgb(96, 165, 250)" },
  builtin: { color: "rgb(253, 224, 71)" },
  entity: {
    color: "rgb(250, 250, 250)",
    cursor: "help",
  },
  url: {
    color: "rgb(96, 165, 250)",
    textDecoration: "underline",
  },
  inserted: {
    color: "rgb(134, 239, 172)",
    background: "rgba(134, 239, 172, 0.1)",
  },
  deleted: {
    color: "rgb(248, 113, 113)",
    background: "rgba(248, 113, 113, 0.1)",
  },
} as const

export const CODE_STYLE = {
  margin: 0,
  padding: "1rem",
  fontSize: "0.875rem",
  lineHeight: 1.5,
  background: "rgb(24, 24, 27)",
} as const

export const CODE_STYLE_RELAXED = {
  margin: 0,
  padding: "1rem",
  fontSize: "0.875rem",
  lineHeight: 1.6,
  background: "rgb(24, 24, 27)",
} as const

export const CODE_STYLE_SMALL = {
  margin: 0,
  padding: "1rem",
  fontSize: "0.8125rem",
  lineHeight: 1.5,
  background: "rgb(24, 24, 27)",
} as const

interface CodeHighlighterProps {
  code: string
  language: string
  showLineNumbers?: boolean
  customStyle?: React.CSSProperties
  highlightLines?: number[]
}

const highlightStyle = {
  backgroundColor: "rgba(250, 204, 21, 0.15)",
  display: "block",
  marginLeft: "-1rem",
  marginRight: "-1rem",
  paddingLeft: "1rem",
  paddingRight: "1rem",
  borderLeft: "3px solid rgb(250, 204, 21)",
}

export const CodeHighlighter = memo(function CodeHighlighter({
  code,
  language,
  showLineNumbers = true,
  customStyle = CODE_STYLE,
  highlightLines,
}: CodeHighlighterProps) {
  function getLineProps() {
    if (!highlightLines || highlightLines.length === 0) return undefined

    const highlightSet = new Set(highlightLines)
    return (lineNumber: number) => {
      const isHighlighted = highlightSet.has(lineNumber)
      return {
        style: isHighlighted ? highlightStyle : { display: "block" },
        "data-highlighted": isHighlighted ? "true" : undefined,
      }
    }
  }
  const lineProps = getLineProps()

  const shouldWrapLines = !!(highlightLines && highlightLines.length > 0)

  return (
    <SyntaxHighlighter
      language={language}
      style={zincDarkTheme}
      customStyle={customStyle}
      showLineNumbers={showLineNumbers}
      wrapLines={shouldWrapLines}
      lineProps={shouldWrapLines ? lineProps : undefined}
    >
      {code}
    </SyntaxHighlighter>
  )
})
