'use client';

import * as React from 'react';
import Link from 'next/link';
import { ArrowLeft, Calendar, Check, Copy, FileText } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { motion, useScroll, useSpring } from 'motion/react';
import type { PolicySection } from './types';

interface LegalPageLayoutProps {
  title: string;
  lastUpdated: string;
  sections: PolicySection[];
  description?: React.ReactNode;
}

export function LegalPageLayout({
  title,
  lastUpdated,
  sections,
  description,
}: LegalPageLayoutProps) {
  const [activeSection, setActiveSection] = React.useState<string>(
    sections[0]?.value || '',
  );
  const [hasCopied, setHasCopied] = React.useState(false);
  const { scrollYProgress } = useScroll();
  const contentRef = React.useRef<HTMLDivElement | null>(null);
  const scaleX = useSpring(scrollYProgress, {
    stiffness: 100,
    damping: 30,
    restDelta: 0.001,
  });

  const allSectionIds = React.useMemo(() => {
    return sections.flatMap((section) => [
      section.value,
      ...(section.children?.map((child) => child.value) || []),
    ]);
  }, [sections]);

  React.useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setActiveSection(entry.target.id);
          }
        });
      },
      { rootMargin: '-20% 0px -35% 0px' },
    );

    allSectionIds.forEach((id) => {
      const element = document.getElementById(id);
      if (element) observer.observe(element);
    });

    return () => observer.disconnect();
  }, [sections, allSectionIds]);

  const convertInlineNodes = (nodes: ChildNode[]): string => {
    return nodes
      .map((node) => {
        if (node.nodeType === Node.TEXT_NODE) {
          return node.textContent || '';
        }
        if (node.nodeType !== Node.ELEMENT_NODE) {
          return '';
        }
        const element = node as HTMLElement;
        const tagName = element.tagName.toLowerCase();
        if (tagName === 'code') {
          return `\`${element.textContent?.trim() || ''}\``;
        }
        if (tagName === 'strong' || tagName === 'b') {
          return `**${convertInlineNodes(Array.from(element.childNodes))}**`;
        }
        if (tagName === 'em' || tagName === 'i') {
          return `*${convertInlineNodes(Array.from(element.childNodes))}*`;
        }
        if (tagName === 'a') {
          const text =
            convertInlineNodes(Array.from(element.childNodes)) ||
            element.textContent ||
            '';
          const href = element.getAttribute('href') || '';
          return href ? `[${text}](${href})` : text;
        }
        if (tagName === 'br') {
          return '\n';
        }
        return convertInlineNodes(Array.from(element.childNodes));
      })
      .join('');
  };

  const convertList = (
    list: HTMLOListElement | HTMLUListElement,
    indentLevel: number,
  ): string => {
    const isOrdered = list.tagName.toLowerCase() === 'ol';
    const items = Array.from(list.children).filter(
      (child) => child.tagName.toLowerCase() === 'li',
    );
    return items
      .map((item, index) => {
        const prefix = isOrdered ? `${index + 1}. ` : '- ';
        const indent = '  '.repeat(indentLevel);
        const parts: string[] = [];
        const itemElement = item as HTMLElement;
        const childNodes = Array.from(itemElement.childNodes);
        const nestedLists: HTMLElement[] = [];

        childNodes.forEach((child) => {
          if (child.nodeType === Node.ELEMENT_NODE) {
            const childElement = child as HTMLElement;
            if (
              childElement.tagName.toLowerCase() === 'ul' ||
              childElement.tagName.toLowerCase() === 'ol'
            ) {
              nestedLists.push(childElement);
              return;
            }
          }
          parts.push(convertInlineNodes([child]).trim());
        });

        const baseLine = `${indent}${prefix}${parts.join('').trim()}`;
        const nestedMarkdown = nestedLists.map((nested) =>
          convertList(
            nested as HTMLOListElement | HTMLUListElement,
            indentLevel + 1,
          ),
        );
        return [baseLine, ...nestedMarkdown].filter(Boolean).join('\n');
      })
      .join('\n');
  };

  const convertTable = (table: HTMLTableElement): string => {
    const rows = Array.from(table.querySelectorAll('tr')).map((row) =>
      Array.from(row.querySelectorAll('th,td')).map((cell) =>
        (cell.textContent || '').trim(),
      ),
    );
    if (!rows.length) return '';
    const header = rows[0];
    const body = rows.slice(1);
    const headerLine = `| ${header.join(' | ')} |`;
    const separatorLine = `| ${header.map(() => '---').join(' | ')} |`;
    const bodyLines = body.map((row) => `| ${row.join(' | ')} |`);
    return [headerLine, separatorLine, ...bodyLines].join('\n');
  };

  const convertBlockNode = (node: HTMLElement, indentLevel: number): string => {
    const tagName = node.tagName.toLowerCase();
    if (tagName === 'h3') return `### ${node.textContent?.trim() || ''}`;
    if (tagName === 'h4') return `#### ${node.textContent?.trim() || ''}`;
    if (tagName === 'p')
      return convertInlineNodes(Array.from(node.childNodes)).trim();
    if (tagName === 'ul' || tagName === 'ol')
      return convertList(
        node as HTMLOListElement | HTMLUListElement,
        indentLevel,
      );
    if (tagName === 'pre') {
      const code = node.textContent || '';
      return `\`\`\`\n${code.trim()}\n\`\`\``;
    }
    if (tagName === 'table') return convertTable(node as HTMLTableElement);
    if (tagName === 'div') {
      const hasTable = node.querySelector('table');
      const hasList = node.querySelector('ul,ol');
      const hasPre = node.querySelector('pre');
      if (hasTable || hasList || hasPre) {
        return Array.from(node.children)
          .map((child) => convertBlockNode(child as HTMLElement, indentLevel))
          .filter(Boolean)
          .join('\n\n');
      }
      const text = convertInlineNodes(Array.from(node.childNodes)).trim();
      return text;
    }
    return convertInlineNodes(Array.from(node.childNodes)).trim();
  };

  const buildMarkdown = (): string => {
    const contentRoot = contentRef.current;
    if (!contentRoot) return '';
    const lines: string[] = [];
    lines.push(`# ${title}`);
    lines.push('');
    lines.push(`最后更新：${lastUpdated}`);
    if (description) {
      const descriptionElement = contentRoot.querySelector(
        '[data-docs-description]',
      );
      if (descriptionElement) {
        const descriptionText = convertInlineNodes(
          Array.from(descriptionElement.childNodes),
        ).trim();
        if (descriptionText) {
          lines.push('');
          lines.push(descriptionText);
        }
      }
    }
    lines.push('');

    const sectionNodes = Array.from(
      contentRoot.querySelectorAll('[data-docs-section]'),
    ) as HTMLElement[];
    sectionNodes.forEach((section) => {
      const heading = section.querySelector('h2');
      if (heading?.textContent) {
        lines.push(`## ${heading.textContent.trim()}`);
        lines.push('');
      }
      const prose = section.querySelector('[data-docs-content]');
      if (prose) {
        const blocks = Array.from(prose.children)
          .map((child) => convertBlockNode(child as HTMLElement, 0))
          .filter(Boolean);
        if (blocks.length) {
          lines.push(blocks.join('\n\n'));
          lines.push('');
        }
      }
    });

    return (
      lines
        .join('\n')
        .replace(/\n{3,}/g, '\n\n')
        .trim() + '\n'
    );
  };

  const handleCopyMarkdown = async () => {
    const markdown = buildMarkdown();
    if (!markdown) return;
    try {
      await navigator.clipboard.writeText(markdown);
      setHasCopied(true);
      setTimeout(() => setHasCopied(false), 2000);
    } catch {
      const textArea = document.createElement('textarea');
      textArea.value = markdown;
      textArea.style.position = 'fixed';
      textArea.style.opacity = '0';
      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();
      document.execCommand('copy');
      document.body.removeChild(textArea);
      setHasCopied(true);
      setTimeout(() => setHasCopied(false), 2000);
    }
  };

  const scrollToSection = (
    e: React.MouseEvent<HTMLAnchorElement>,
    id: string,
  ) => {
    e.preventDefault();
    const element = document.getElementById(id);
    if (element) {
      const offset = 80;
      const bodyRect = document.body.getBoundingClientRect().top;
      const elementRect = element.getBoundingClientRect().top;
      const elementPosition = elementRect - bodyRect;
      const offsetPosition = elementPosition - offset;

      window.scrollTo({
        top: offsetPosition,
        behavior: 'smooth',
      });
    }
  };

  return (
    <div className='min-h-screen bg-background relative selection:bg-primary/20'>
      <motion.div
        className='fixed top-0 left-0 right-0 h-1 bg-primary origin-left z-50'
        style={{ scaleX }}
      />

      <div className='fixed inset-0 pointer-events-none'>
        <div className='absolute top-0 left-1/4 w-[500px] h-[500px] bg-primary/5 rounded-full blur-[120px] -translate-y-1/2' />
        <div className='absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-blue-500/5 rounded-full blur-[120px] translate-y-1/2' />
      </div>

      <div
        ref={contentRef}
        className='container relative z-10 max-w-7xl mx-auto px-4 md:px-6 py-8 lg:py-16'
      >
        <header className='mb-8 md:mb-12'>
          <Link href='/' className='inline-block mb-8'>
            <Button
              variant='ghost'
              className='gap-2 pl-0 text-muted-foreground hover:text-foreground hover:bg-transparent -ml-2'
            >
              <ArrowLeft className='w-4 h-4' />
              返回首页
            </Button>
          </Link>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
          >
            <h1 className='text-2xl md:text-3xl lg:text-5xl font-bold tracking-tight text-foreground mb-6'>
              {title}
            </h1>
            <div className='flex flex-wrap items-center gap-4 text-xs text-muted-foreground mb-8'>
              <span className='flex items-center gap-1.5 bg-muted/50 px-3 py-1 rounded-full border border-border/50'>
                <FileText className='w-3.5 h-3.5' />
                {sections.length} 个内容
              </span>
              <span className='flex items-center gap-1.5 bg-muted/50 px-3 py-1 rounded-full border border-border/50'>
                <Calendar className='w-3.5 h-3.5' />
                最后更新：{lastUpdated}
              </span>
              <Button
                type='button'
                variant='outline'
                size='sm'
                onClick={handleCopyMarkdown}
                className='h-8 gap-2 text-xs'
              >
                {hasCopied ? (
                  <Check className='w-3.5 h-3.5' />
                ) : (
                  <Copy className='w-3.5 h-3.5' />
                )}
                {hasCopied ? '已复制' : '复制 Markdown'}
              </Button>
            </div>
            {description && (
              <div className='w-full p-4 md:p-6 rounded-2xl bg-muted/30 border border-border/50 backdrop-blur-sm overflow-hidden'>
                <div
                  data-docs-description
                  className='text-sm md:text-base text-muted-foreground leading-relaxed m-0 break-all'
                >
                  {description}
                </div>
              </div>
            )}
          </motion.div>
        </header>

        <div className='grid lg:grid-cols-12 gap-8 lg:gap-12 relative'>
          <aside className='hidden lg:block lg:col-span-3'>
            <div className='sticky top-24'>
              <div className='space-y-2 max-h-[calc(100vh-8rem)] overflow-y-auto pr-4 scrollbar-thin'>
                <div className='text-sm font-semibold text-foreground mb-4 pl-3'>
                  目录
                </div>
                <nav className='space-y-1'>
                  {sections.map((section) => (
                    <div key={section.value} className='space-y-1'>
                      <a
                        href={`#${section.value}`}
                        onClick={(e) => scrollToSection(e, section.value)}
                        className={cn(
                          'group flex items-center justify-between py-2 px-3 text-sm rounded-lg transition-all duration-200',
                          activeSection === section.value
                            ? 'bg-primary/10 text-primary font-medium'
                            : 'text-muted-foreground hover:text-foreground hover:bg-muted/50',
                        )}
                      >
                        <span className='truncate'>{section.title}</span>
                        {activeSection === section.value && (
                          <motion.div
                            layoutId='active-dot'
                            className='w-1.5 h-1.5 rounded-full bg-primary'
                          />
                        )}
                      </a>
                      {section.children && (
                        <div className='pl-4 space-y-1'>
                          {section.children.map((child) => (
                            <a
                              key={child.value}
                              href={`#${child.value}`}
                              onClick={(e) => scrollToSection(e, child.value)}
                              className={cn(
                                'block py-1.5 px-3 text-xs rounded-lg transition-all duration-200 truncate',
                                activeSection === child.value
                                  ? 'text-primary font-medium bg-primary/5'
                                  : 'text-muted-foreground/80 hover:text-foreground hover:bg-muted/30',
                              )}
                            >
                              {child.title}
                            </a>
                          ))}
                        </div>
                      )}
                    </div>
                  ))}
                </nav>
              </div>
            </div>
          </aside>

          <main className='lg:col-span-9 lg:col-start-4 space-y-8 md:space-y-16 pb-20'>
            {sections.map((section, index) => (
              <motion.section
                key={section.value}
                id={section.value}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: '100px' }}
                transition={{ duration: 0.3 }}
                className='scroll-mt-24 group'
                data-docs-section
              >
                <div className='sticky top-0 z-20 flex items-center gap-4 py-6 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 mb-2 -mx-4 px-4 md:-mx-0 md:px-0'>
                  <span className='flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm font-bold opacity-50 group-hover:opacity-100 transition-opacity flex-shrink-0'>
                    {index + 1}
                  </span>
                  <h2 className='text-xl md:text-2xl font-semibold tracking-tight text-foreground group-hover:text-primary transition-colors duration-300'>
                    {section.title.replace(/^\d+\.\s*/, '')}
                  </h2>
                </div>

                <div
                  data-docs-content
                  className={cn(
                    'prose prose-sm md:prose-base prose-neutral dark:prose-invert max-w-none',
                    'prose-p:text-muted-foreground prose-p:leading-7',
                    'prose-li:text-muted-foreground',
                    'prose-strong:text-foreground',
                    'pl-4 md:pl-12 border-l border-border/30 group-hover:border-primary/20 transition-colors duration-500',
                  )}
                >
                  {section.content}
                </div>
              </motion.section>
            ))}

            <div className='pt-16 border-t border-border mt-20'>
              <div className='bg-muted/30 rounded-2xl p-8 text-center'>
                <p className='text-muted-foreground text-sm mb-4'>
                  对这些内容有疑问？
                </p>
                <div className='flex justify-center gap-4'>
                  <Link
                    href='https://github.com/Rain-kl/OpenFlare/issues'
                    target='_blank'
                  >
                    <Button variant='outline' className='h-9 text-xs'>
                      联系支持
                    </Button>
                  </Link>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
    </div>
  );
}