/* istanbul ignore file */

/**
 * MarkdownContent Component
 * Renders markdown content with syntax highlighting and design system styling
 * This file is excluded from coverage as it's a documentation component
 */

import Image from 'next/image';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeHighlight from 'rehype-highlight';
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import { CodeBlock } from './CodeBlock';
import { cn } from '@/lib/utils';
import 'highlight.js/styles/atom-one-dark.css';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Separator } from '@/components/ui/separator';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Badge } from '@/components/ui/badge';
import { Info } from 'lucide-react';

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

export function MarkdownContent({ content, className }: MarkdownContentProps) {
  return (
    <div className={cn('max-w-none text-foreground', className)}>
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        rehypePlugins={[
          rehypeHighlight,
          rehypeSlug,
          [
            rehypeAutolinkHeadings,
            {
              behavior: 'append',
              properties: {
                className: ['subtle-anchor'],
                ariaHidden: true,
                tabIndex: -1,
              },
              content: {
                type: 'element',
                tagName: 'span',
                properties: { className: ['icon', 'icon-link'] },
                children: [{ type: 'text', value: '#' }],
              },
            },
          ],
        ]}
        components={{
          // Headings - improved spacing and visual hierarchy
          h1: ({ children, ...props }) => (
            <h1
              className="group scroll-mt-20 text-4xl font-bold tracking-tight mb-8 mt-12 first:mt-0 border-b-2 border-primary/20 pb-4 text-foreground flex items-center gap-2"
              {...props}
            >
              {children}
            </h1>
          ),
          h2: ({ children, ...props }) => (
            <h2
              className="group scroll-mt-20 text-3xl font-semibold tracking-tight mb-6 mt-12 first:mt-0 border-b border-border pb-3 text-foreground flex items-center gap-2"
              {...props}
            >
              {children}
            </h2>
          ),
          h3: ({ children, ...props }) => (
            <h3
              className="group scroll-mt-20 text-2xl font-semibold tracking-tight mb-4 mt-10 first:mt-0 text-foreground flex items-center gap-2"
              {...props}
            >
              {children}
            </h3>
          ),
          h4: ({ children, ...props }) => (
            <h4
              className="group scroll-mt-20 text-xl font-semibold tracking-tight mb-3 mt-8 first:mt-0 text-foreground flex items-center gap-2"
              {...props}
            >
              {children}
            </h4>
          ),
          h5: ({ children, ...props }) => (
            <h5
              className="group scroll-mt-20 text-lg font-semibold tracking-tight mb-3 mt-8 first:mt-0 text-foreground flex items-center gap-2"
              {...props}
            >
              {children}
            </h5>
          ),
          h6: ({ children, ...props }) => (
            <h6
              className="group scroll-mt-20 text-base font-semibold tracking-tight mb-3 mt-8 first:mt-0 text-foreground flex items-center gap-2"
              {...props}
            >
              {children}
            </h6>
          ),

          // Paragraphs and text - improved readability
          p: ({ children, ...props }) => (
            <p className="leading-relaxed mb-6 text-foreground/90 text-base" {...props}>
              {children}
            </p>
          ),
          strong: ({ children, ...props }) => (
            <strong className="font-semibold text-foreground" {...props}>
              {children}
            </strong>
          ),
          em: ({ children, ...props }) => (
            <em className="italic text-foreground/80" {...props}>
              {children}
            </em>
          ),

          // Links - more prominent with better hover state
          a: ({ children, href, className, ...props }) => {
            // Check if this is an anchor link generated by rehype-autolink-headings
            const isAnchor = className?.includes('subtle-anchor');

            if (isAnchor) {
              return (
                <a
                  href={href}
                  className={cn(
                    'opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-primary ml-2 no-underline',
                    className
                  )}
                  {...props}
                >
                  {children}
                </a>
              );
            }

            return (
              <a
                href={href}
                className={cn(
                  'font-medium text-primary underline decoration-primary/30 underline-offset-4 hover:decoration-primary/60 hover:text-primary/90 transition-all',
                  className
                )}
                {...props}
              >
                {children}
              </a>
            );
          },

          // Lists - improved spacing and hierarchy
          ul: ({ children, ...props }) => (
            <ul className="my-6 ml-6 list-disc space-y-3 marker:text-primary/60" {...props}>
              {children}
            </ul>
          ),
          ol: ({ children, ...props }) => (
            <ol
              className="my-6 ml-6 list-decimal space-y-3 marker:text-primary/60 marker:font-semibold"
              {...props}
            >
              {children}
            </ol>
          ),
          li: ({ children, ...props }) => (
            <li className="leading-relaxed text-foreground/90 pl-2" {...props}>
              {children}
            </li>
          ),

          // Code blocks - enhanced with copy button and better styling
          code: ({
            inline,
            className,
            children,
            ...props
          }: {
            inline?: boolean;
            className?: string;
            children?: React.ReactNode;
          }) => {
            if (inline) {
              return (
                <Badge
                  variant="secondary"
                  className="font-mono text-sm font-medium px-1.5 py-0.5 h-auto rounded-md"
                >
                  {children}
                </Badge>
              );
            }
            return (
              <code className={cn('block font-mono text-sm leading-relaxed', className)} {...props}>
                {children}
              </code>
            );
          },
          pre: ({ children, ...props }) => <CodeBlock {...props}>{children}</CodeBlock>,

          // Blockquotes - enhanced callout styling using Alert
          blockquote: ({ children }) => (
            <Alert className="my-8 border-l-4 border-l-primary/50 bg-primary/5">
              <Info className="h-4 w-4" />
              <AlertDescription className="italic text-foreground/80 ml-2">
                {children}
              </AlertDescription>
            </Alert>
          ),

          // Tables - improved styling with better borders and hover states
          table: ({ children, ...props }) => (
            <div className="my-8 w-full overflow-x-auto rounded-lg border">
              <Table {...props}>{children}</Table>
            </div>
          ),
          thead: ({ children, ...props }) => (
            <TableHeader className="bg-muted/80" {...props}>
              {children}
            </TableHeader>
          ),
          tbody: ({ children, ...props }) => <TableBody {...props}>{children}</TableBody>,
          tr: ({ children, ...props }) => <TableRow {...props}>{children}</TableRow>,
          th: ({ children, ...props }) => (
            <TableHead className="font-semibold text-foreground" {...props}>
              {children}
            </TableHead>
          ),
          td: ({ children, ...props }) => (
            <TableCell className="text-foreground/80" {...props}>
              {children}
            </TableCell>
          ),

          // Horizontal rule - more prominent
          hr: ({ ...props }) => <Separator className="my-12" {...props} />,

          // Images - optimized with Next.js Image component
          img: ({ src, alt }) => {
            if (!src || typeof src !== 'string') return null;

            return (
              <div className="my-8 relative w-full overflow-hidden rounded-lg border shadow-md">
                <Image
                  src={src}
                  alt={alt || ''}
                  width={1200}
                  height={675}
                  className="w-full h-auto"
                  style={{ objectFit: 'contain' }}
                />
              </div>
            );
          },
        }}
      >
        {content}
      </ReactMarkdown>
    </div>
  );
}
