// ───────────────────────────────────────────────────────────
// Huio Control Panel — Docs Views: Roadmap & Changelog (cp-docs-views.jsx)
// ───────────────────────────────────────────────────────────

if (!window.CP_STYLES) throw new Error('[cp-docs-views] window.CP_STYLES not loaded (check cp-styles.jsx)');

const parseRoadmap = (md) => {
  if (!md) return [];
  const lines = md.split('\n');
  const categories = [];
  let currentCat = null;
  
  lines.forEach(line => {
    if (line.startsWith('### ')) {
      const title = line.replace('### ', '').trim();
      currentCat = {
        title: title,
        tasks: []
      };
      categories.push(currentCat);
    } else if (line.startsWith('## ') && !line.includes('🧭') && !line.includes('📈') && !line.includes('Какая') && !line.includes('Правила') && !line.includes('Настройка') && !line.includes('At A Glance') && !line.includes('Quick Navigation') && !line.includes('Стратегия')) {
      const title = line.replace('## ', '').trim();
      currentCat = {
        title: title,
        tasks: [],
        isMainSection: true
      };
      categories.push(currentCat);
    } else if (currentCat) {
      const taskMatch = line.match(/^\s*-\s*\[(x| )\]\s*(.+)$/i);
      if (taskMatch) {
        currentCat.tasks.push({
          text: taskMatch[2].trim(),
          completed: taskMatch[1].toLowerCase() === 'x'
        });
      }
    }
  });
  return categories.filter(c => c.tasks.length > 0);
};

const parseChangelog = (md) => {
  if (!md) return [];
  const lines = md.split('\n');
  const releases = [];
  let currentRelease = null;
  let currentSection = null;

  lines.forEach(line => {
    const releaseMatch = line.match(/^##\s+\[([^\]]+)\]\s*—\s*(.+)$/);
    if (releaseMatch) {
      currentRelease = {
        version: releaseMatch[1],
        date: releaseMatch[2].trim(),
        sections: []
      };
      releases.push(currentRelease);
      currentSection = null;
    } else if (currentRelease && line.startsWith('### ')) {
      const secTitle = line.replace('### ', '').trim();
      currentSection = {
        title: secTitle,
        items: []
      };
      currentRelease.sections.push(currentSection);
    } else if (currentRelease && line.trim().startsWith('- ')) {
      const itemText = line.trim().substring(2);
      if (currentSection) {
        currentSection.items.push(itemText);
      } else {
        if (currentRelease.sections.length === 0) {
          currentSection = {
            title: 'General',
            items: []
          };
          currentRelease.sections.push(currentSection);
        }
        currentRelease.sections[0].items.push(itemText);
      }
    }
  });
  return releases;
};

const formatTaskText = (text) => {
  const parts = [];
  let lastIndex = 0;
  const regex = /\[\[([^\]|]+)(?:\|([^\]]+))?\]\]/g;
  let match;
  
  while ((match = regex.exec(text)) !== null) {
    if (match.index > lastIndex) {
      parts.push(text.substring(lastIndex, match.index));
    }
    
    const linkPath = match[1];
    const displayName = match[2] || linkPath.split('/').pop();
    
    parts.push(
      <span 
        key={match.index} 
        style={{ 
          color: 'var(--hu-terra)', 
          fontWeight: '600',
          borderBottom: '1px dashed var(--hu-terra)',
          cursor: 'help'
        }}
        title={`Obsidian Path: ${linkPath}`}
      >
        {displayName}
      </span>
    );
    
    lastIndex = regex.lastIndex;
  }
  
  if (lastIndex < text.length) {
    parts.push(text.substring(lastIndex));
  }
  
  return parts.length > 0 ? parts : text;
};

const renderRoadmap = ({
  lang,
  appStyles = window.CP_STYLES,
  isRoadmapLoading,
  roadmapContent,
  roadmapSearch,
  setRoadmapSearch,
  roadmapFilter,
  setRoadmapFilter,
}) => {
  if (isRoadmapLoading) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '300px' }}>
        <span style={{ width: '30px', height: '30px', border: '2px solid var(--hu-terra)', borderRightColor: 'transparent', borderRadius: '50%', display: 'inline-block', animation: 'hu-spin 0.7s linear infinite' }}></span>
      </div>
    );
  }

  const categories = parseRoadmap(roadmapContent);
  
  let total = 0;
  let completed = 0;
  categories.forEach(c => {
    c.tasks.forEach(t => {
      total++;
      if (t.completed) completed++;
    });
  });
  const percent = total > 0 ? Math.round((completed / total) * 100) : 95;

  const filteredCategories = categories.map(cat => {
    const filteredTasks = cat.tasks.filter(task => {
      if (roadmapSearch.trim() && !task.text.toLowerCase().includes(roadmapSearch.toLowerCase())) {
        return false;
      }
      if (roadmapFilter === 'completed' && !task.completed) return false;
      if (roadmapFilter === 'pending' && task.completed) return false;
      return true;
    });
    return { ...cat, tasks: filteredTasks };
  }).filter(cat => cat.tasks.length > 0);

  const activeTheme = document.documentElement.getAttribute('data-theme') || 'candy';

  const btnActiveStyle = (theme) => ({
    background: 'var(--hu-bg-inverse)',
    color: 'var(--hu-fg-inverse)',
    border: 'none',
    borderRadius: 'var(--hu-r-pill)',
    fontSize: '10px',
    fontWeight: '700',
    padding: '4px 10px',
    cursor: 'pointer'
  });

  const btnInactiveStyle = {
    background: 'transparent',
    color: 'var(--hu-fg-3)',
    border: 'none',
    borderRadius: 'var(--hu-r-pill)',
    fontSize: '10px',
    fontWeight: '600',
    padding: '4px 10px',
    cursor: 'pointer'
  };

  return (
    <div style={appStyles.viewWrapper}>
      <div style={appStyles.welcomeBanner}>
        <h1 className="hu-h1 hu-display" style={{ margin: '0 0 6px 0' }}>
          {lang === 'vi' ? 'Lộ trình phát triển' : 'Product Roadmap'}
        </h1>
        <p style={{ margin: 0, color: 'var(--hu-fg-2)' }}>
          {lang === 'vi' 
            ? 'Theo dõi tiến trình phát triển và hoàn thiện các chức năng hệ thống.' 
            : 'Track the implementation progress of system features and release phases.'}
        </p>
      </div>

      <div className="hu-card hu-card-3d" style={{ marginBottom: '24px', display: 'flex', flexDirection: 'column', gap: '16px', padding: '24px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '12px' }}>
          <div>
            <span className="hu-eyebrow-star-lead hu-eyebrow">
              {lang === 'vi' ? 'Tiến độ tổng thể' : 'Overall Progress'}
            </span>
            <h2 className="hu-h2 hu-display" style={{ margin: '8px 0 0 0' }}>
              {lang === 'vi' ? 'Hoàn thành' : 'Completion Rate'}: {percent}%
            </h2>
          </div>
          <div style={{ fontSize: '24px', fontWeight: 'bold', color: 'var(--hu-forest)' }} className="hu-mono">
            {completed} / {total} {lang === 'vi' ? 'nhiệm vụ' : 'tasks'}
          </div>
        </div>
        <div className="hu-progress" style={{ height: '8px', background: 'var(--hu-border)' }}>
          <span style={{ width: `${percent}%`, background: 'var(--hu-forest)' }} />
        </div>
      </div>

      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', marginBottom: '20px', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', background: 'var(--hu-bg-elev)', border: '1px solid var(--hu-border)', borderRadius: 'var(--hu-r-pill)', padding: '3px', gap: '2px' }}>
          <button 
            onClick={() => setRoadmapFilter('all')} 
            style={roadmapFilter === 'all' ? btnActiveStyle(activeTheme) : btnInactiveStyle}
          >
            {lang === 'vi' ? 'Tất cả' : 'All'}
          </button>
          <button 
            onClick={() => setRoadmapFilter('completed')} 
            style={roadmapFilter === 'completed' ? btnActiveStyle(activeTheme) : btnInactiveStyle}
          >
            {lang === 'vi' ? 'Đã xong' : 'Completed'}
          </button>
          <button 
            onClick={() => setRoadmapFilter('pending')} 
            style={roadmapFilter === 'pending' ? btnActiveStyle(activeTheme) : btnInactiveStyle}
          >
            {lang === 'vi' ? 'Chưa xong' : 'Pending'}
          </button>
        </div>
        
        <input 
          type="text" 
          placeholder={lang === 'vi' ? 'Tìm kiếm tính năng...' : 'Search features...'}
          value={roadmapSearch}
          onChange={(e) => setRoadmapSearch(e.target.value)}
          style={{
            padding: '8px 16px',
            borderRadius: 'var(--hu-r-pill)',
            border: '1.5px solid var(--hu-border)',
            background: 'var(--hu-bg-card)',
            color: 'var(--hu-fg)',
            outline: 'none',
            fontSize: '13px',
            width: '100%',
            maxWidth: '300px',
            fontFamily: 'inherit'
          }}
        />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '20px' }}>
        {filteredCategories.map((cat, idx) => {
          const catTotal = cat.tasks.length;
          const catCompleted = cat.tasks.filter(t => t.completed).length;
          const catPercent = catTotal > 0 ? Math.round((catCompleted / catTotal) * 100) : 0;
          
          return (
            <div 
              key={idx} 
              className="hu-card hu-card-3d-sm" 
              style={{ 
                display: 'flex', 
                flexDirection: 'column', 
                gap: '16px', 
                background: 'var(--hu-bg-card)',
                borderColor: catPercent === 100 ? 'var(--hu-forest)' : 'var(--hu-border)'
              }}
            >
              <div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '8px' }}>
                  <h3 className="hu-h3 hu-display" style={{ margin: 0 }}>{cat.title}</h3>
                  <span style={{ fontSize: '11px', fontWeight: 'bold', color: catPercent === 100 ? 'var(--hu-forest)' : 'var(--hu-fg-2)' }} className="hu-mono">
                    {catPercent}%
                  </span>
                </div>
                <div className="hu-progress" style={{ height: '4px' }}>
                  <span style={{ width: `${catPercent}%`, background: catPercent === 100 ? 'var(--hu-forest)' : 'var(--hu-terra)' }} />
                </div>
              </div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', flexGrow: 1 }}>
                {cat.tasks.map((task, tIdx) => (
                  <div key={tIdx} style={{ display: 'flex', alignItems: 'flex-start', gap: '10px', fontSize: '13px' }}>
                    <span style={{ 
                      display: 'inline-flex', 
                      alignItems: 'center', 
                      justifyContent: 'center',
                      marginTop: '2px', 
                      width: '16px', 
                      height: '16px', 
                      borderRadius: '50%',
                      background: task.completed ? 'var(--hu-forest)' : 'transparent',
                      border: task.completed ? 'none' : '1.5px dashed var(--hu-border-strong)',
                      color: '#FFF',
                      fontSize: '9px',
                      fontWeight: 'bold',
                      flexShrink: 0
                    }}>
                      {task.completed && '✓'}
                    </span>
                    <span style={{ 
                      color: task.completed ? 'var(--hu-fg-2)' : 'var(--hu-fg)',
                      textDecoration: task.completed ? 'line-through' : 'none',
                      opacity: task.completed ? 0.7 : 1
                    }}>
                      {formatTaskText(task.text)}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          );
        })}

        {filteredCategories.length === 0 && (
          <div className="hu-card" style={{ gridColumn: '1 / -1', padding: '40px', textAlign: 'center', color: 'var(--hu-fg-2)' }}>
            {lang === 'vi' ? 'Không tìm thấy tính năng nào khớp.' : 'No matching features found.'}
          </div>
        )}
      </div>
    </div>
  );
};

const renderChangelog = ({
  lang,
  appStyles = window.CP_STYLES,
  isChangelogLoading,
  changelogContent,
  changelogSearch,
  setChangelogSearch,
  changelogLimit,
  setChangelogLimit,
}) => {
  if (isChangelogLoading) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '300px' }}>
        <span style={{ width: '30px', height: '30px', border: '2px solid var(--hu-terra)', borderRightColor: 'transparent', borderRadius: '50%', display: 'inline-block', animation: 'hu-spin 0.7s linear infinite' }}></span>
      </div>
    );
  }

  const releases = parseChangelog(changelogContent);

  const filteredReleases = releases.map(rel => {
    const filteredSections = rel.sections.map(sec => {
      const filteredItems = sec.items.filter(item => {
        if (changelogSearch.trim()) {
          return item.toLowerCase().includes(changelogSearch.toLowerCase());
        }
        return true;
      });
      return { ...sec, items: filteredItems };
    }).filter(sec => sec.items.length > 0);

    return { ...rel, sections: filteredSections };
  }).filter(rel => rel.sections.length > 0);

  const isSearching = Boolean(changelogSearch.trim());
  const visibleReleases = isSearching ? filteredReleases : filteredReleases.slice(0, changelogLimit);
  const hasMoreReleases = !isSearching && filteredReleases.length > changelogLimit;

  const parseChangelogItem = (itemText) => {
    const match = itemText.match(/^\*\*([^*:]+)\*\*\s*:\s*(.+)$/);
    if (match) {
      return {
        tag: match[1].trim(),
        content: match[2].trim()
      };
    }
    return { tag: null, content: itemText };
  };

  const getTagColorClass = (tag) => {
    if (!tag) return '';
    const t = tag.toLowerCase();
    if (t.includes('bug') || t.includes('fix') || t.includes('ошиб')) return 'hu-chip-coral';
    if (t.includes('perf') || t.includes('оптими')) return 'hu-chip-green';
    if (t.includes('legal') || t.includes('юрид')) return 'hu-chip-ochre';
    if (t.includes('design') || t.includes('дизайн') || t.includes('ui')) return 'hu-chip-gold';
    if (t.includes('push') || t.includes('увед') || t.includes('notif')) return 'hu-chip-teal';
    return '';
  };

  return (
    <div style={appStyles.viewWrapper}>
      <div style={appStyles.welcomeBanner}>
        <h1 className="hu-h1 hu-display" style={{ margin: '0 0 6px 0' }}>
          {lang === 'vi' ? 'Lịch sử thay đổi' : 'System Changelog'}
        </h1>
        <p style={{ margin: 0, color: 'var(--hu-fg-2)' }}>
          {lang === 'vi' 
            ? 'Nhật ký các bản cập nhật, sửa lỗi và cải tiến hệ thống.' 
            : 'Chronological timeline of product releases, system bug fixes, and feature enhancements.'}
        </p>
      </div>

      <div style={{ display: 'flex', gap: '16px', marginBottom: '24px', justifyContent: 'flex-end' }}>
        <input 
          type="text" 
          placeholder={lang === 'vi' ? 'Tìm kiếm lịch sử cập nhật...' : 'Search release logs...'}
          value={changelogSearch}
          onChange={(e) => setChangelogSearch(e.target.value)}
          style={{
            padding: '8px 16px',
            borderRadius: 'var(--hu-r-pill)',
            border: '1.5px solid var(--hu-border)',
            background: 'var(--hu-bg-card)',
            color: 'var(--hu-fg)',
            outline: 'none',
            fontSize: '13px',
            width: '100%',
            maxWidth: '300px',
            fontFamily: 'inherit'
          }}
        />
      </div>

      <div style={{ position: 'relative', paddingLeft: '32px' }}>
        <div style={{
          position: 'absolute',
          left: '11px',
          top: '8px',
          bottom: '8px',
          width: '2px',
          background: 'var(--hu-border-strong)'
        }} />

        {visibleReleases.length === 0 && (
          <div className="hu-card" style={{ padding: '40px 20px', textAlign: 'center', color: 'var(--hu-fg-2)' }}>
            <Icons.Info />
            <p style={{ margin: '8px 0 0 0', fontWeight: '500' }}>
              {lang === 'vi' ? 'Không tìm thấy nhật ký phiên bản nào phù hợp.' : 'No matching release logs found.'}
            </p>
          </div>
        )}

        {visibleReleases.map((rel, idx) => (
          <div key={idx} style={{ position: 'relative', marginBottom: '32px' }}>
            <div style={{
              position: 'absolute',
              left: '-28px',
              top: '6px',
              width: '14px',
              height: '14px',
              borderRadius: '50%',
              background: 'var(--hu-bg-card)',
              border: '3px solid var(--hu-terra)',
              zIndex: 2
            }} />

            <div style={{ display: 'flex', alignItems: 'baseline', gap: '12px', marginBottom: '16px', flexWrap: 'wrap' }}>
              <span className="hu-display" style={{ fontSize: '20px', fontWeight: 'bold', color: 'var(--hu-fg)' }}>
                v{rel.version}
              </span>
              <span className="hu-mono" style={{ fontSize: '11px', color: 'var(--hu-fg-3)', fontWeight: '500' }}>
                📅 {rel.date}
              </span>
            </div>

            <div className="hu-card hu-card-3d-sm" style={{ padding: '20px', background: 'var(--hu-bg-card)' }}>
              {rel.sections.map((sec, sIdx) => (
                <div key={sIdx} style={{ marginBottom: sIdx < rel.sections.length - 1 ? '16px' : 0 }}>
                  {sec.title && sec.title !== 'General' && (
                    <h4 className="hu-eyebrow-star-lead hu-eyebrow" style={{ fontSize: '11px', marginBottom: '10px' }}>
                      {sec.title}
                    </h4>
                  )}
                  
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
                    {sec.items.map((itemText, iIdx) => {
                      const parsed = parseChangelogItem(itemText);
                      return (
                        <div key={iIdx} style={{ display: 'flex', alignItems: 'flex-start', gap: '10px', fontSize: '13px', lineHeight: '1.5' }}>
                          <span style={{ color: 'var(--hu-terra)', marginTop: '2px' }}>✦</span>
                          <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'baseline', gap: '6px' }}>
                            {parsed.tag && (
                              <span className={`hu-chip ${getTagColorClass(parsed.tag)}`} style={{ fontSize: '9px', height: '18px', padding: '0px 6px', fontWeight: '600', textTransform: 'none', letterSpacing: '0' }}>
                                {parsed.tag}
                              </span>
                            )}
                            <span style={{ color: 'var(--hu-fg)' }}>
                              {formatTaskText(parsed.content)}
                            </span>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}

        {hasMoreReleases && (
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: '24px', marginBottom: '16px' }}>
            <button
              className="hu-btn hu-btn-ghost hu-card-hover"
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: '8px',
                padding: '10px 24px',
                borderRadius: 'var(--hu-r-pill)',
                border: '1.5px solid var(--hu-border-strong)',
                background: 'var(--hu-bg-elev)',
                color: 'var(--hu-fg)',
                fontWeight: '600',
                fontSize: '13px',
                cursor: 'pointer'
              }}
              onClick={() => setChangelogLimit(prev => prev + 10)}
            >
              <span>{lang === 'vi' ? `Tải thêm phiên bản (+10) — Còn lại ${filteredReleases.length - changelogLimit}` : `Load more releases (+10) — ${filteredReleases.length - changelogLimit} remaining`}</span>
            </button>
          </div>
        )}

        {filteredReleases.length === 0 && (
          <div className="hu-card" style={{ padding: '40px', textAlign: 'center', color: 'var(--hu-fg-2)', border: '1px solid var(--hu-border)' }}>
            {lang === 'vi' ? 'Không tìm thấy bản cập nhật nào.' : 'No update logs found.'}
          </div>
        )}
      </div>
    </div>
  );
};

window.CpDocsViews = {
  parseRoadmap,
  parseChangelog,
  formatTaskText,
  renderRoadmap,
  renderChangelog
};