'use client'

import { memo, useMemo, useState, useCallback } from 'react'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import ShikiHighlighter, { isInlineCode } from 'react-shiki'
import type { Components } from 'react-markdown'
import type { Element } from 'hast'
import { repairStreamingMarkdown } from '../lib/streamingMarkdown'

// Copy icon component
function CopyIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
    </svg>
  )
}

function CheckIcon({ className }: { className?: string }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
    </svg>
  )
}

// Language aliases for common variations
const langAlias: Record<string, string> = {
  js: 'javascript',
  ts: 'typescript',
  tsx: 'tsx',
  jsx: 'jsx',
  sh: 'bash',
  shell: 'bash',
  zsh: 'bash',
  yml: 'yaml',
  py: 'python',
  rb: 'ruby',
  rs: 'rust',
  go: 'go',
  md: 'markdown',
  mdx: 'mdx',
  vue: 'vue',
  svelte: 'svelte',
  dockerfile: 'docker',
  tf: 'hcl',
  terraform: 'hcl',
  cs: 'csharp',
  'c#': 'csharp',
  'c++': 'cpp',
  kt: 'kotlin',
  objc: 'objective-c',
  'objective-c': 'objc',
  pl: 'perl',
  hs: 'haskell',
  ex: 'elixir',
  erl: 'erlang',
  fs: 'fsharp',
  'f#': 'fsharp',
  ps1: 'powershell',
  psm1: 'powershell',
}

interface CodeBlockProps {
  className?: string
  children?: React.ReactNode
  node?: Element
}

function CodeBlock({ className, children, node, ...props }: CodeBlockProps) {
  const [copied, setCopied] = useState(false)
  const code = String(children).trim()
  const match = className?.match(/language-(\w+)/)
  let language = match ? match[1] : 'text'

  // Apply language aliases
  if (language in langAlias) {
    language = langAlias[language]
  }

  const isInline = node ? isInlineCode(node) : !code.includes('\n')

  const handleCopy = useCallback(async () => {
    await navigator.clipboard.writeText(code)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }, [code])

  if (isInline) {
    return (
      <code
        className="px-1.5 py-0.5 rounded bg-[var(--code-bg)] text-[var(--text-primary)] text-sm font-mono"
        {...props}
      >
        {children}
      </code>
    )
  }

  return (
    <div className="relative group my-4 rounded-lg overflow-hidden bg-[var(--code-bg)]">
      <button
        onClick={handleCopy}
        className="absolute top-2 right-2 px-2 py-1 rounded-md flex items-center gap-1 text-xs text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] transition-all z-10"
        title={copied ? 'Copied!' : 'Copy code'}
      >
        {copied ? (
          <>
            <CheckIcon className="w-3 h-3 text-emerald-500" />
            <span className="text-emerald-500">Copied</span>
          </>
        ) : (
          <>
            <CopyIcon className="w-3 h-3" />
            <span>Copy</span>
          </>
        )}
      </button>
      <ShikiHighlighter
        language={language}
        theme={{
          light: 'github-light',
          dark: 'github-dark',
        }}
        defaultColor="light-dark()"
        langAlias={langAlias}
        showLanguage={false}
        addDefaultStyles={false}
        className="text-sm p-4"
        {...props}
      >
        {code}
      </ShikiHighlighter>
    </div>
  )
}

// Custom components for react-markdown
const components: Components = {
  code: CodeBlock as Components['code'],
  // Style other markdown elements
  p: ({ children }) => (
    <p className="mb-4 last:mb-0">{children}</p>
  ),
  // Outside markers with padding keep wrapped list text aligned; task lists
  // (GFM `- [ ]`) drop the bullet in favor of their checkbox.
  ul: ({ children, className }) => (
    <ul className={`${className === 'contains-task-list' ? 'list-none pl-1' : 'list-disc pl-6'} mb-4 space-y-1.5 [&_ul]:mt-1.5 [&_ul]:mb-0 [&_ol]:mt-1.5 [&_ol]:mb-0`}>{children}</ul>
  ),
  ol: ({ children, start }) => (
    <ol start={start} className="list-decimal pl-6 mb-4 space-y-1.5 [&_ul]:mt-1.5 [&_ul]:mb-0 [&_ol]:mt-1.5 [&_ol]:mb-0">{children}</ol>
  ),
  li: ({ children }) => (
    <li className="text-[var(--text-primary)] pl-1 marker:text-[var(--text-tertiary)] [&>p]:mb-2 [&>p:last-child]:mb-0">{children}</li>
  ),
  input: ({ checked, type }) => type === 'checkbox' ? (
    <input type="checkbox" checked={!!checked} readOnly className="mr-2 align-middle accent-[var(--text-primary)]" />
  ) : null,
  del: ({ children }) => (
    <del className="text-[var(--text-tertiary)]">{children}</del>
  ),
  sup: ({ children }) => (
    <sup className="text-[0.75em] [&_a]:no-underline">{children}</sup>
  ),
  section: ({ children, className }) => (
    <section className={className === 'footnotes' ? 'mt-6 pt-4 border-t border-[var(--border-primary)] text-sm text-[var(--text-secondary)] [&_h2]:sr-only' : undefined}>{children}</section>
  ),
  h1: ({ children }) => (
    <h1 className="text-2xl font-bold mb-4 mt-6 first:mt-0 text-[var(--text-primary)]">{children}</h1>
  ),
  h2: ({ children }) => (
    <h2 className="text-xl font-bold mb-3 mt-5 first:mt-0 text-[var(--text-primary)]">{children}</h2>
  ),
  h3: ({ children }) => (
    <h3 className="text-lg font-bold mb-2 mt-4 first:mt-0 text-[var(--text-primary)]">{children}</h3>
  ),
  h4: ({ children }) => (
    <h4 className="text-base font-bold mb-2 mt-3 first:mt-0 text-[var(--text-primary)]">{children}</h4>
  ),
  blockquote: ({ children }) => (
    <blockquote className="border-l-4 border-[var(--border-secondary)] pl-4 my-4 text-[var(--text-secondary)] italic">
      {children}
    </blockquote>
  ),
  // External links open in a new tab; in-page anchors (GFM footnotes) don't.
  a: ({ href, children }) => {
    const external = !!href && !href.startsWith('#')
    return (
      <a
        href={href}
        {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
        className="text-blue-500 hover:text-blue-400 underline underline-offset-2 break-words"
      >
        {children}
      </a>
    )
  },
  strong: ({ children }) => (
    <strong className="font-semibold text-[var(--text-primary)]">{children}</strong>
  ),
  em: ({ children }) => (
    <em className="italic">{children}</em>
  ),
  hr: () => (
    <hr className="my-6 border-[var(--border-primary)]" />
  ),
  table: ({ children }) => (
    <div className="overflow-x-auto my-4 rounded-lg border border-[var(--border-primary)]">
      <table className="min-w-full border-collapse text-sm">
        {children}
      </table>
    </div>
  ),
  th: ({ children, style }) => (
    <th style={style} className="border-b border-[var(--border-primary)] px-3 py-2 bg-[var(--bg-tertiary)] text-left font-semibold align-bottom">
      {children}
    </th>
  ),
  td: ({ children, style }) => (
    <td style={style} className="border-t border-[var(--border-primary)] px-3 py-2 align-top">
      {children}
    </td>
  ),
}

const remarkPlugins = [remarkGfm]

interface MarkdownProps {
  children: string
  className?: string
  /** True while the message is still streaming; repairs partial syntax. */
  streaming?: boolean
}

export const Markdown = memo(function Markdown({ children, className, streaming = false }: MarkdownProps) {
  const source = useMemo(
    () => (streaming ? repairStreamingMarkdown(children) : children),
    [children, streaming],
  )
  return (
    <div className={className}>
      <ReactMarkdown remarkPlugins={remarkPlugins} components={components}>
        {source}
      </ReactMarkdown>
    </div>
  )
})