"use client";

import React from "react";

import styles from "./MarkdownText.module.scss";

interface MarkdownTextProps {
  content: string;
  className?: string;
}

export default function MarkdownText({
  content,
  className,
}: MarkdownTextProps) {
  // Simple markdown parser for basic formatting
  const parseMarkdown = (text: string): React.ReactNode[] => {
    const lines = text.split("\n");
    const elements: React.ReactNode[] = [];
    let key = 0;

    for (let i = 0; i < lines.length; i++) {
      const line = lines[i];

      // Skip empty lines
      if (line.trim() === "") {
        elements.push(<br key={`br-${key++}`} />);
        continue;
      }

      // Headers (# ## ###)
      const headerMatch = line.match(/^(#{1,6})\s+(.+)$/);
      if (headerMatch) {
        const level = headerMatch[1].length;
        const text = headerMatch[2];
        const HeaderTag = `h${level}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
        elements.push(
          React.createElement(
            HeaderTag,
            { key: `h${level}-${key++}`, className: styles[`h${level}`] },
            parseInlineMarkdown(text)
          )
        );
        continue;
      }

      // Unordered lists (- or *)
      const listMatch = line.match(/^[\*\-]\s+(.+)$/);
      if (listMatch) {
        elements.push(
          <li key={`li-${key++}`} className={styles.listItem}>
            {parseInlineMarkdown(listMatch[1])}
          </li>
        );
        continue;
      }

      // Ordered lists (1. 2. etc)
      const orderedListMatch = line.match(/^\d+\.\s+(.+)$/);
      if (orderedListMatch) {
        elements.push(
          <li key={`oli-${key++}`} className={styles.listItem}>
            {parseInlineMarkdown(orderedListMatch[1])}
          </li>
        );
        continue;
      }

      // Regular paragraph
      elements.push(
        <p key={`p-${key++}`} className={styles.paragraph}>
          {parseInlineMarkdown(line)}
        </p>
      );
    }

    return elements;
  };

  // Parse inline markdown (bold, italic, links)
  const parseInlineMarkdown = (text: string): React.ReactNode[] => {
    const parts: React.ReactNode[] = [];
    let remaining = text;
    let key = 0;

    while (remaining.length > 0) {
      // Bold (**text** or __text__)
      const boldMatch = remaining.match(/^(.*?)(\*\*|__)(.*?)\2/);
      if (boldMatch) {
        if (boldMatch[1]) parts.push(boldMatch[1]);
        parts.push(
          <strong key={`bold-${key++}`} className={styles.bold}>
            {boldMatch[3]}
          </strong>
        );
        remaining = remaining.substring(boldMatch[0].length);
        continue;
      }

      // Italic (*text* or _text_)
      const italicMatch = remaining.match(/^(.*?)(\*|_)(.*?)\2/);
      if (italicMatch) {
        if (italicMatch[1]) parts.push(italicMatch[1]);
        parts.push(
          <em key={`italic-${key++}`} className={styles.italic}>
            {italicMatch[3]}
          </em>
        );
        remaining = remaining.substring(italicMatch[0].length);
        continue;
      }

      // No more markdown, add remaining text
      parts.push(remaining);
      break;
    }

    return parts;
  };

  return (
    <div className={`${styles.markdown} ${className || ""}`}>
      {parseMarkdown(content)}
    </div>
  );
}
