/**
 * View Component: PostCard
 * Single content card in the grid, with A/B version toggle.
 *
 * Props:
 *   post: { id, versions: {A, B}, book, coverUrl, date, seq, favorite, hotTopic, ... }
 *   onToggleFav: (id) => void
 *   onClick: (id) => void
 */

function HeartIcon({ filled }) {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24"
      fill={filled ? 'currentColor' : 'none'}
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round">
      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
    </svg>
  );
}

function PostCard({ post, onToggleFav, onClick, preferredVersion }) {
  // Default to version A; sync with version filter if provided
  const [activeVersion, setActiveVersion] = React.useState(
    preferredVersion && post.versions && post.versions[preferredVersion] ? preferredVersion : 'A'
  );

  React.useEffect(() => {
    if (preferredVersion && post.versions && post.versions[preferredVersion]) {
      setActiveVersion(preferredVersion);
    }
  }, [preferredVersion]);

  // Get version data safely
  const getVersionData = (post, ver) => {
    if (post.versions && post.versions[ver]) return post.versions[ver];
    // Fallback to flat model
    return post;
  };

  const versionData = getVersionData(post, activeVersion);
  const versionKeys = post.versions ? Object.keys(post.versions).sort() : [];
  const hasMultiVersions = versionKeys.length > 1;
  // Cover switches with the active version (per-version cover), fallback to post-level cover
  const coverUrl = (versionData && versionData.coverUrl) || post.coverUrl || '';

  // Short label for toggle: strip the suffix after "·" for brevity
  const versionToggleLabel = (ver) => {
    const full = post.versions[ver] && post.versions[ver].versionLabel;
    return full || ver;
  };

  const handleFavClick = (e) => {
    e.stopPropagation();
    onToggleFav(post.id);
  };

  const handleVersionChange = (e, ver) => {
    e.stopPropagation();
    setActiveVersion(ver);
  };

  return (
    <div
      className={`post-card ${post.favorite ? 'favorited' : ''}`}
      onClick={() => onClick(post.id)}
    >
      <div className="post-card-cover">
        {coverUrl ? (
          <img key={`${post.id}-${activeVersion}`} src={coverUrl} alt={post.book} loading="lazy" />
        ) : (
          <div className="post-card-cover-placeholder">
            《{post.book}》
          </div>
        )}

        {/* Favorite stamp */}
        <div className="fav-stamp">已选</div>

        {/* Version indicator badge */}
        {hasMultiVersions && (
          <div className="version-badge source-ab">
            {activeVersion}版 · {versionData.versionLabel}
          </div>
        )}

        {/* Favorite button */}
        <button
          className={`fav-btn ${post.favorite ? 'favorited' : ''}`}
          onClick={handleFavClick}
          aria-label={post.favorite ? '取消收藏' : '收藏'}
        >
          <HeartIcon filled={post.favorite} />
        </button>
      </div>

      <div className="post-card-body">
        <div className="post-card-book">
          <span>{post.book ? `《${post.book}》` : '未分类选题'}</span>
          <span className={`title-count-badge ${versionData.title.length > 19 ? 'over' : ''}`}>
            {versionData.title.length}/19
          </span>
        </div>

        <div className="post-card-title">{versionData.title}</div>

        {post.hotTopic && (
          <div className="post-card-hot-topic" title={post.hotTopic}>
            🔥 {post.hotTopic}
          </div>
        )}

        <div className="post-card-summary">{versionData.summary}</div>

        {/* A/B/C Version Toggle - driven by available versions in data */}
        {hasMultiVersions && (
          <div className="version-toggle" onClick={(e) => e.stopPropagation()}>
            {versionKeys.map(ver => (
              <button
                key={ver}
                className={`version-toggle-btn ${activeVersion === ver ? 'active' : ''}`}
                onClick={(e) => handleVersionChange(e, ver)}
              >
                <span className="version-toggle-label"><span className="vt-letter">{ver}</span><span className="vt-text"> · {versionToggleLabel(ver)}</span></span>
              </button>
            ))}
          </div>
        )}

        <div className="post-card-tags">
          {versionData.tags.slice(0, 3).map(tag => (
            <span key={tag} className="post-card-tag">#{tag}</span>
          ))}
        </div>

        <div className="post-card-meta">
          {post.batch && (
            <span className="post-card-meta-batch">{post.batch}批次</span>
          )}
          <span className="post-card-meta-angle">{versionData.angle}</span>
          <span>{versionData.wordCount}字</span>
        </div>
      </div>
    </div>
  );
}

window.PostCard = PostCard;