const { useState, useEffect, useRef } = React;

// ===== 金色星星 SVG =====
function StarIcon({ size = 20, filled = true, half = false, color = '#E8B923', stroke = '#3D2914' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" className="star-sticker">
      <defs>
        <linearGradient id={`star-grad-${filled ? 'f' : 'e'}-${half ? 'h' : 'n'}`} x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor={filled ? '#FFE58A' : '#F0E6D0'} />
          <stop offset="50%" stopColor={color} />
          <stop offset="100%" stopColor={filled ? '#C99A15' : '#D4C9B0'} />
        </linearGradient>
        {half && (
          <clipPath id="half-clip">
            <rect x="0" y="0" width="12" height="24" />
          </clipPath>
        )}
      </defs>
      <path
        d="M12 2 L14.5 9 L22 9.5 L16 14.5 L18 22 L12 18 L6 22 L8 14.5 L2 9.5 L9.5 9 Z"
        fill={`url(#star-grad-${filled ? 'f' : 'e'}-${half ? 'h' : 'n'})`}
        stroke={stroke}
        strokeWidth="1.5"
        strokeLinejoin="round"
      />
      {half && (
        <path
          d="M12 2 L14.5 9 L22 9.5 L16 14.5 L18 22 L12 18 L6 22 L8 14.5 L2 9.5 L9.5 9 Z"
          fill="#F0E6D0"
          stroke={stroke}
          strokeWidth="1.5"
          strokeLinejoin="round"
          clipPath="url(#half-clip)"
          opacity="0"
        />
      )}
      {/* 高光 */}
      {filled && (
        <circle cx="9" cy="8" r="2" fill="#FFF8E0" opacity="0.7" />
      )}
    </svg>
  );
}

// ===== 星星评分条 =====
function StarRating({ score, size = 18, showNum = true }) {
  // 10分制 → 5颗星，每颗2分
  const fullStars = Math.floor(score / 2);
  const hasHalf = score % 2 >= 1;
  const emptyStars = 5 - fullStars - (hasHalf ? 1 : 0);
  const stars = [];

  for (let i = 0; i < fullStars; i++) {
    stars.push(<StarIcon key={`f${i}`} size={size} filled={true} />);
  }
  if (hasHalf) {
    stars.push(<StarIcon key="h" size={size} filled={true} half={true} />);
  }
  for (let i = 0; i < emptyStars; i++) {
    stars.push(<StarIcon key={`e${i}`} size={size} filled={false} />);
  }

  return (
    <div className="stars-rating">
      {stars}
      {showNum && <span className="score-num">{score.toFixed(1)}</span>}
    </div>
  );
}

// ===== 蜡笔柱状图 =====
function CrayonBarChart({ projects, activeId, onBarClick, dimensions }) {
  return (
    <div className="bar-chart">
      {projects.map((p) => (
        <div
          key={p.id}
          className={`bar-group ${activeId === p.id ? 'active' : ''}`}
          onClick={() => onBarClick(p.id)}
        >
          <div className="project-label">{p.name.split('/')[1] || p.name}</div>
          <div className="score-badge">综合 {p.totalScore}</div>
          <div className="bars-wrapper">
            {dimensions.map((dim, idx) => {
              const val = p.scores[dim.key];
              const heightPercent = (val / 10) * 100;
              return (
                <div key={dim.key} className="bar-item">
                  <div
                    className={`bar bar-${idx}`}
                    style={{ height: `${heightPercent}%` }}
                    title={`${dim.label}: ${val}分`}
                  >
                    <span className="bar-value">{val}</span>
                  </div>
                  <div className="bar-label">{dim.label}</div>
                </div>
              );
            })}
          </div>
        </div>
      ))}
    </div>
  );
}

// ===== 项目卡片 =====
function ProjectCard({ project, isExpanded, onToggle }) {
  return (
    <div
      className={`project-card rank-${project.rank}`}
      data-comment-anchor={`project-${project.id}`}
      onClick={onToggle}
    >
      {/* 卡通头像 */}
      <div className="card-avatar">
        {project.avatarEmoji}
      </div>

      {/* 排名徽章 */}
      <div className={`rank-badge rank-${project.rank}`}>
        <span className="rank-num">{project.rank}</span>
        <span>第{['一','二','三','四','五'][project.rank-1]}名</span>
      </div>

      {/* 星星评分 */}
      <StarRating score={project.totalScore} size={18} />

      {/* 卡片头部 */}
      <div className="card-header">
        <a className="project-name" href={"https://github.com/" + project.name} target="_blank" rel="noopener noreferrer" style={{textDecoration:'none',color:'inherit',cursor:'pointer'}}>{project.name}</a>
        <div className="project-meta">
          <span className="lang-pill">
            <span className="lang-dot" style={{
              display: 'inline-block',
              width: '8px',
              height: '8px',
              borderRadius: '50%',
              background: 'white',
              border: '1.5px solid var(--ink)'
            }}></span>
            {project.language}
          </span>
          <span className="star-count">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="var(--mustard)" stroke="var(--ink)" strokeWidth="1.5">
              <path d="M12 2 L14.5 9 L22 9.5 L16 14.5 L18 22 L12 18 L6 22 L8 14.5 L2 9.5 L9.5 9 Z" strokeLinejoin="round"/>
            </svg>
            {project.totalStars}
            <span className="today-star">{project.todayStars}</span>
          </span>
        </div>
      </div>

      {/* 卡片主体 */}
      <div className="card-body">
        <p className="desc-text">{project.description}</p>

        <div className={`card-details ${isExpanded ? 'open' : ''}`}>
          <div className="info-row">
            <span className="info-label type">类型</span>
            <span className="info-content">{project.type}</span>
          </div>
          <div className="info-row">
            <span className="info-label tech">技术栈</span>
            <span className="info-content">{project.tech}</span>
          </div>
          <div className="info-row">
            <span className="info-label usage">使用方式</span>
            <span className="info-content">{project.usage}</span>
          </div>
          <div className="info-row">
            <span className="info-label highlight">核心亮点</span>
            <span className="info-content">{project.highlight}</span>
          </div>
          <div className="info-row">
            <span className="info-label warning">注意事项</span>
            <span className="info-content">{project.warning}</span>
          </div>
          <div className="info-row">
            <span className="info-label audience">适合谁</span>
            <span className="info-content">{project.audience}</span>
          </div>
        </div>

        <div className={`expand-hint ${isExpanded ? 'open' : ''}`}>
          {isExpanded ? '收起详情' : '点击展开更多'}
          <span className="arrow">▼</span>
        </div>
      </div>
    </div>
  );
}

// ===== 筛选漏斗 =====
function FunnelBar({ funnel }) {
  const steps = [
    { num: funnel.raw, label: '双榜原始', highlight: false },
    { num: funnel.starFiltered, label: '今日≥100★', highlight: false },
    { num: funnel.categoryFiltered, label: '类别过滤', highlight: true },
    { num: funnel.duplicates, label: '双榜重复', highlight: false },
  ];

  return (
    <div className="funnel-bar">
      {steps.map((s, i) => (
        <React.Fragment key={i}>
          <span className={`funnel-step ${s.highlight ? 'highlight' : ''}`}>
            <span className="num">{s.num}</span>
            <span>{s.label}</span>
          </span>
          {i < steps.length - 1 && <span className="funnel-arrow">→</span>}
        </React.Fragment>
      ))}
    </div>
  );
}

// ===== 被排除项目折叠区 =====
function ExcludedSection({ projects }) {
  const [collapsed, setCollapsed] = useState(true);

  return (
    <div className={`excluded-section ${collapsed ? 'collapsed' : ''}`}>
      <div className="section-title" onClick={() => setCollapsed(!collapsed)}>
        <span className="toggle-icon">▼</span>
        📎 被排除的项目（点击展开）
      </div>
      <div className="excluded-content" style={{ maxHeight: collapsed ? '0' : '500px' }}>
        <div className="excluded-grid">
          {projects.map((p, i) => (
            <span key={i} className="excluded-chip">
              <span className="chip-name">{p.name}</span>
              <span className="chip-reason">— {p.reason}</span>
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

// ===== 归档列表侧边栏 =====
function ArchiveSidebar({ archiveItems, currentDate, onSelectDate, isOpen, onToggle }) {
  return (
    <>
      {/* 移动端触发按钮 */}
      <button className="archive-toggle-btn" onClick={onToggle}>
        📚 归档
      </button>

      {/* 遮罩层（移动端） */}
      {isOpen && <div className="archive-overlay" onClick={onToggle}></div>}

      {/* 侧边栏 */}
      <aside className={`archive-sidebar ${isOpen ? 'open' : ''}`}>
        <div className="sidebar-header">
          <h3 className="sidebar-title">
            <span style={{ marginRight: '6px' }}>📚</span>
            冒险手册归档
          </h3>
          <button className="sidebar-close" onClick={onToggle}>✕</button>
        </div>

        <div className="archive-list">
          {archiveItems.map((item) => (
            <div
              key={item.date}
              className={`archive-item ${currentDate === item.date ? 'active' : ''}`}
              onClick={() => onSelectDate(item.date)}
            >
              <div className="archive-date">
                <span className="archive-day">{item.date.slice(5)}</span>
                <span className="archive-weekday">{item.weekday}</span>
                {item.isLatest && <span className="latest-badge">最新</span>}
              </div>
              <div className="archive-meta">
                <span className="archive-count">{item.count} 个合格项目</span>
                <span className="archive-top">
                  <StarIcon size={14} filled={true} />
                  {item.topProject}
                </span>
                <span className="archive-score">{item.topScore.toFixed(1)} 分</span>
              </div>
            </div>
          ))}
        </div>

        <div className="sidebar-footer">
          每日更新 · 手工挑选
        </div>
      </aside>
    </>
  );
}

Object.assign(window, {
  StarIcon,
  StarRating,
  CrayonBarChart,
  ProjectCard,
  FunnelBar,
  ExcludedSection,
  ArchiveSidebar
});