---
export interface Props {
  title?: string;
  subtitle?: string;
  level?: 1 | 2 | 3 | 4;
  divider?: boolean;
  reveal?: boolean;
  revealDirection?: 'up' | 'down' | 'left' | 'right' | 'fade' | 'none';
  revealDistance?: string;
  revealDelay?: string;
  revealBlur?: string;
  revealScale?: string;
  revealOnce?: boolean;
}

const { 
  title, 
  subtitle, 
  level = 1,
  divider = true,
  reveal = true,
  revealDirection,
  revealDistance,
  revealDelay,
  revealBlur,
  revealScale,
  revealOnce
} = Astro.props;

const Tag = `h${level}` as any;
const sizeClasses = {
  1: 'text-3xl md:text-4xl',
  2: 'text-2xl md:text-3xl',
  3: 'text-xl md:text-2xl',
  4: 'text-lg md:text-xl'
};

let emojiPart: string | null = null;
let titleBody = title;

if (typeof title === 'string') {
  const trimmedTitle = title.trimStart();
  const emojiMatch = trimmedTitle.match(/^([\p{Extended_Pictographic}\u2600-\u27BF][\p{Extended_Pictographic}\u2600-\u27BF\uFE0F\u200D]*)/u);

  if (emojiMatch && emojiMatch[1]) {
    emojiPart = emojiMatch[1];
    titleBody = trimmedTitle.slice(emojiMatch[0].length).trimStart();
  } else {
    titleBody = trimmedTitle;
  }
}

const revealAttributes = reveal
  ? {
      'data-reveal': revealDirection ?? '',
      ...(revealDistance ? { 'data-reveal-distance': revealDistance } : { 'data-reveal-distance': '40px' }),
      ...(revealDelay ? { 'data-reveal-delay': revealDelay } : { 'data-reveal-delay': 'var(--section-delay, 0s)' }),
      ...(revealBlur ? { 'data-reveal-blur': revealBlur } : {}),
      ...(revealScale ? { 'data-reveal-scale': revealScale } : {}),
      ...(revealOnce === false ? { 'data-reveal-once': 'false' } : {})
    }
  : {};
---

<section class="report-section-container" {...revealAttributes}>
  <div class="section-header">
    {title && (
      <Tag class={`section-title ${sizeClasses[level]} ${emojiPart ? 'section-title--with-emoji' : ''}`}>
        {emojiPart && <span class="section-title__emoji">{emojiPart}</span>}
        <span class="section-title__text">{typeof titleBody === 'string' ? titleBody : title}</span>
      </Tag>
    )}
    
    {subtitle && (
      <p class="section-subtitle">{subtitle}</p>
    )}
    
    {divider && <div class="section-divider"></div>}
  </div>
  
  <div class="section-content">
    <slot />
  </div>
</section>

<style>
  .report-section-container {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 1.5rem;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }
  
  .report-section-container:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  }
  
  .section-header {
    margin-bottom: 1.5rem;
  }
  
  .section-title {
    font-weight: 700;
    color: #011a2d;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .section-title.section-title--with-emoji {
    gap: 0.65rem;
  }

  .section-title__emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35em;
    line-height: 1;
    filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.18));
  }

  .section-title__text {
    display: inline-block;
    background: linear-gradient(135deg, #011a2d, #2c4a6b, #5b778e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .section-subtitle {
    font-size: 1rem;
    color: #011a2d;
    margin: 0 0 1rem 0;
    line-height: 1.5;
    opacity: 0.9;
  }
  
  .section-divider {
    height: 2px;
    background: linear-gradient(90deg, 
      transparent 0%, 
      rgba(91, 119, 142, 0.3) 20%, 
      rgba(91, 119, 142, 0.6) 50%, 
      rgba(91, 119, 142, 0.3) 80%, 
      transparent 100%
    );
    border-radius: 1px;
  }
  
  .section-content {
    color: #011a2d;
    line-height: 1.6;
  }
  
  /* 主题配色下的内容样式 */
  .section-content :global(p) {
    margin-bottom: 1rem;
    color: #011a2d;
  }
  
  .section-content :global(ul),
  .section-content :global(ol) {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
  }
  
  .section-content :global(li) {
    margin-bottom: 0.5rem;
    color: #011a2d;
  }
  
  .section-content :global(strong) {
    color: #011a2d;
    font-weight: 600;
  }
  
  .section-content :global(code) {
    background: rgba(91, 119, 142, 0.15);
    color: #011a2d;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-family: 'Courier New', monospace;
    font-size: 0.875em;
  }
  
  .section-content :global(pre) {
    background: rgba(91, 119, 142, 0.1);
    border: 1px solid rgba(91, 119, 142, 0.3);
    border-radius: 0.75rem;
    padding: 1rem;
    margin: 1rem 0;
    overflow-x: auto;
  }
  
  .section-content :global(blockquote) {
    border-left: 4px solid #5b778e;
    padding-left: 1rem;
    margin: 1rem 0;
    font-style: italic;
    color: #011a2d;
  }
  
  @media (max-width: 768px) {
    .report-section-container {
      padding: 1.5rem;
    }
    
    .section-title {
      font-size: 1.5rem !important;
    }
    
    .section-subtitle {
      font-size: 0.9rem;
    }
  }
</style>