const { useState, useEffect } = React;

function App() {
  const [currentDate, setCurrentDate] = useState('2026-10-09');
  const [expandedCards, setExpandedCards] = useState({});
  const [activeChartId, setActiveChartId] = useState(1);
  const [sidebarOpen, setSidebarOpen] = useState(false);

  const report = window.reportsData[currentDate];
  const projects = report.projects;
  const excluded = report.excluded;
  const funnel = report.funnel;

  // 切换日期时重置状态
  const handleSelectDate = (date) => {
    setCurrentDate(date);
    setExpandedCards({});
    setActiveChartId(window.reportsData[date].projects[0].id);
    setSidebarOpen(false);
    // 滚动到顶部
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const toggleCard = (id) => {
    setExpandedCards((prev) => ({
      ...prev,
      [id]: !prev[id],
    }));
  };

  const handleBarClick = (id) => {
    setActiveChartId(id);
    const cardEl = document.querySelector(`[data-comment-anchor="project-${id}"]`);
    if (cardEl) {
      cardEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
      setExpandedCards((prev) => ({ ...prev, [id]: true }));
    }
  };

  // 格式化日期显示
  const formatDate = (dateStr) => {
    const d = new Date(dateStr);
    const year = d.getFullYear();
    const month = d.getMonth() + 1;
    const day = d.getDate();
    return `${year}年${month}月${day}日`;
  };

  const legendItems = [
    { color: 'c0', label: '受欢迎程度' },
    { color: 'c1', label: '维护活跃度' },
    { color: 'c2', label: '易用性' },
    { color: 'c3', label: '内容传播性' },
  ];

  return (
    <div className="app-container">
      {/* 归档侧边栏 */}
      <ArchiveSidebar
        archiveItems={window.archiveList}
        currentDate={currentDate}
        onSelectDate={handleSelectDate}
        isOpen={sidebarOpen}
        onToggle={() => setSidebarOpen(!sidebarOpen)}
      />

      {/* 顶部标题区 */}
      <header className="header-section wobbly-border" style={{ background: 'var(--cream)' }}>
        <div className="tape-1"></div>
        <div className="tape-2"></div>

        <h1 className="main-title">
          <span className="title-star">✨</span>
          <span className="crayon-underline">GitHub Trending</span>
          <br />
          优质项目冒险手册
          <span className="title-star">⭐</span>
        </h1>

        <p className="sub-title">
          📅 {formatDate(currentDate)} · {report.weekday} · 全语言榜 + 中文榜双榜筛选
        </p>

        <FunnelBar funnel={funnel} />
      </header>

      {/* 四维评分对比区 */}
      <section className="radar-section" data-screen-label="四维评分">
        <h2 className="section-title">
          <span className="section-num">1</span>
          四维评分对比
          <span style={{ fontSize: '0.9rem', marginLeft: '8px', fontFamily: 'var(--font-hand)', color: 'var(--ink-soft)', fontWeight: 'normal' }}>
            （点击柱子跳转到对应项目卡片）
          </span>
        </h2>

        <CrayonBarChart
          projects={projects}
          activeId={activeChartId}
          onBarClick={handleBarClick}
          dimensions={window.scoreDimensions}
        />

        <div className="chart-legend">
          {legendItems.map((item, i) => (
            <div key={i} className="legend-item">
              <span className={`legend-swatch ${item.color}`}></span>
              {item.label}
            </div>
          ))}
        </div>
      </section>

      {/* 推荐清单区 */}
      <section className="cards-section" data-screen-label="推荐清单">
        <h2 className="section-title">
          <span className="section-num">2</span>
          精选项目冒险清单
          <span style={{ fontSize: '0.9rem', marginLeft: '8px', fontFamily: 'var(--font-hand)', color: 'var(--ink-soft)', fontWeight: 'normal' }}>
            （按综合分从高到低排列）
          </span>
        </h2>

        <div className="cards-grid">
          {projects.map((p) => (
            <ProjectCard
              key={p.id}
              project={p}
              isExpanded={expandedCards[p.id] || false}
              onToggle={() => toggleCard(p.id)}
            />
          ))}
        </div>
      </section>

      {/* 被排除项目区 */}
      <ExcludedSection projects={excluded} />

      {/* 页脚 */}
      <footer className="footer">
        📖 数据来源 github.com/trending · {currentDate} 抓取 · 手工制作冒险手册 📖
      </footer>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);