crosspost/frontend/src/components/InteractionalStats.tsx

import Card from "./Card";
import StatsStyling from "../styles/stats_styling";
import type { InteractionAnalysisResponse } from "../types/ApiTypes";
import {
  ResponsiveContainer,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  PieChart,
  Pie,
  Cell,
  Legend,
} from "recharts";

const styles = StatsStyling;

type InteractionalStatsProps = {
  data: InteractionAnalysisResponse;
};

const InteractionalStats = ({ data }: InteractionalStatsProps) => {
  const graph = data.interaction_graph ?? {};
  const userCount = Object.keys(graph).length;
  const edges = Object.values(graph).flatMap((targets) => Object.values(targets));
  const edgeCount = edges.length;
  const interactionVolume = edges.reduce((sum, value) => sum + value, 0);
  const concentration = data.conversation_concentration;
  const topTenCommentShare = typeof concentration?.top_10pct_comment_share === "number"
    ? concentration?.top_10pct_comment_share
    : null;
  const topTenAuthorCount = typeof concentration?.top_10pct_author_count === "number"
    ? concentration.top_10pct_author_count
    : null;
  const totalCommentingAuthors = typeof concentration?.total_commenting_authors === "number"
    ? concentration.total_commenting_authors
    : null;
  const singleCommentAuthorRatio = typeof concentration?.single_comment_author_ratio === "number"
    ? concentration.single_comment_author_ratio
    : null;
  const singleCommentAuthors = typeof concentration?.single_comment_authors === "number"
    ? concentration.single_comment_authors
    : null;

  const topPairs = (data.top_interaction_pairs ?? [])
    .filter((item): item is [[string, string], number] => {
      if (!Array.isArray(item) || item.length !== 2) {
        return false;
      }

      const pair = item[0];
      const count = item[1];

      return Array.isArray(pair)
        && pair.length === 2
        && typeof pair[0] === "string"
        && typeof pair[1] === "string"
        && typeof count === "number";
    })
    .slice(0, 20);

  const topPairChartData = topPairs.slice(0, 8).map(([[source, target], value], index) => ({
    pair: `${source} -> ${target}`,
    replies: value,
    rank: index + 1,
  }));

  const topTenSharePercent = topTenCommentShare === null
    ? null
    : topTenCommentShare * 100;
  const nonTopTenSharePercent = topTenSharePercent === null
    ? null
    : Math.max(0, 100 - topTenSharePercent);

  let concentrationPieData: { name: string; value: number }[] = [];
  if (topTenSharePercent !== null && nonTopTenSharePercent !== null) {
    concentrationPieData = [
      { name: "Top 10% authors", value: topTenSharePercent },
      { name: "Other authors", value: nonTopTenSharePercent },
    ];
  }

  const PIE_COLORS = ["#2b6777", "#c8d8e4"];

  return (
    <div style={styles.page}>
      <div style={{ ...styles.container, ...styles.grid }}>
        <div style={{ ...styles.card, gridColumn: "span 12" }}>
          <h2 style={styles.sectionTitle}>Conversation Overview</h2>
          <p style={styles.sectionSubtitle}>Who talks to who, and how concentrated the replies are.</p>
        </div>

        <Card
          label="Average Reply Depth"
          value={typeof data.average_thread_depth === "number" ? data.average_thread_depth.toFixed(2) : "—"}
          sublabel="How deep reply chains usually go"
          style={{ gridColumn: "span 3" }}
        />
        <Card
          label="Users in Network"
          value={userCount.toLocaleString()}
          sublabel="Users in the reply graph"
          style={{ gridColumn: "span 3" }}
        />
        <Card
          label="User-to-User Links"
          value={edgeCount.toLocaleString()}
          sublabel="Unique reply directions"
          style={{ gridColumn: "span 3" }}
        />
        <Card
          label="Total Replies"
          value={interactionVolume.toLocaleString()}
          sublabel="All reply links combined"
          style={{ gridColumn: "span 3" }}
        />
        <Card
          label="Concentrated Replies"
          value={topTenSharePercent === null ? "-" : `${topTenSharePercent.toFixed(1)}%`}
          sublabel={topTenAuthorCount === null || totalCommentingAuthors === null
            ? "Reply share from the top 10% commenters"
            : `${topTenAuthorCount.toLocaleString()} of ${totalCommentingAuthors.toLocaleString()} authors`}
          style={{ gridColumn: "span 6" }}
        />
        <Card
          label="Single-Comment Authors"
          value={singleCommentAuthorRatio === null ? "-" : `${(singleCommentAuthorRatio * 100).toFixed(1)}%`}
          sublabel={singleCommentAuthors === null
            ? "Authors who commented exactly once"
            : `${singleCommentAuthors.toLocaleString()} authors commented exactly once`}
          style={{ gridColumn: "span 6" }}
        />

        <div style={{ ...styles.card, gridColumn: "span 12" }}>
          <h2 style={styles.sectionTitle}>Conversation Visuals</h2>
          <p style={styles.sectionSubtitle}>Main reply links and concentration split.</p>

          <div style={{ ...styles.grid, marginTop: 12 }}>
            <div style={{ ...styles.cardBase, gridColumn: "span 6" }}>
              <h3 style={{ ...styles.sectionTitle, fontSize: "1rem" }}>Top Interaction Pairs</h3>
              <div style={{ width: "100%", height: 300 }}>
                <ResponsiveContainer>
                  <BarChart data={topPairChartData} layout="vertical" margin={{ top: 8, right: 16, left: 16, bottom: 8 }}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#d9e2ec" />
                    <XAxis type="number" allowDecimals={false} />
                    <YAxis
                      type="category"
                      dataKey="rank"
                      tickFormatter={(value) => `#${value}`}
                      width={36}
                    />
                    <Tooltip />
                    <Bar dataKey="replies" fill="#2b6777" radius={[0, 6, 6, 0]} />
                  </BarChart>
                </ResponsiveContainer>
              </div>
            </div>

            <div style={{ ...styles.cardBase, gridColumn: "span 6" }}>
              <h3 style={{ ...styles.sectionTitle, fontSize: "1rem" }}>Top 10% vs Other Comment Share</h3>
              <div style={{ width: "100%", height: 300 }}>
                <ResponsiveContainer>
                  <PieChart>
                    <Pie
                      data={concentrationPieData}
                      dataKey="value"
                      nameKey="name"
                      innerRadius={56}
                      outerRadius={88}
                      paddingAngle={2}
                    >
                      {concentrationPieData.map((entry, index) => (
                        <Cell key={`${entry.name}-${index}`} fill={PIE_COLORS[index % PIE_COLORS.length]} />
                      ))}
                    </Pie>
                    <Tooltip />
                    <Legend verticalAlign="bottom" height={36} />
                  </PieChart>
                </ResponsiveContainer>
              </div>
            </div>
          </div>
        </div>

        <div style={{ ...styles.card, gridColumn: "span 12" }}>
          <h2 style={styles.sectionTitle}>Frequent Reply Paths</h2>
          <p style={styles.sectionSubtitle}>Most common user-to-user reply paths.</p>
          {!topPairs.length ? (
            <div style={styles.topUserMeta}>No interaction pair data available.</div>
          ) : (
            <div style={{ ...styles.topUsersList, maxHeight: 420, overflowY: "auto" }}>
              {topPairs.map(([[source, target], value], index) => (
                <div key={`${source}->${target}-${index}`} style={styles.topUserItem}>
                  <div style={styles.topUserName}>{source} -&gt; {target}</div>
                  <div style={styles.topUserMeta}>{value.toLocaleString()} replies</div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default InteractionalStats;