import Card from "./Card";
import StatsStyling from "../styles/stats_styling";
import type { LinguisticAnalysisResponse } from "../types/ApiTypes";
import {
  buildNgramSpec,
  buildWordSpec,
  type CorpusExplorerSpec,
} from "../utils/corpusExplorer";

const styles = StatsStyling;

type LinguisticStatsProps = {
  data: LinguisticAnalysisResponse;
  onExplore: (spec: CorpusExplorerSpec) => void;
};

const LinguisticStats = ({ data, onExplore }: LinguisticStatsProps) => {
  const lexical = data.lexical_diversity;
  const words = data.word_frequencies ?? [];
  const bigrams = data.common_two_phrases ?? [];
  const trigrams = data.common_three_phrases ?? [];

  const topWords = words.slice(0, 20);
  const topBigrams = bigrams.slice(0, 10);
  const topTrigrams = trigrams.slice(0, 10);

  return (
    <div style={styles.page}>
      <div style={{ ...styles.container, ...styles.grid }}>
        <div style={{ ...styles.card, gridColumn: "span 12" }}>
          <h2 style={styles.sectionTitle}>Language Overview</h2>
          <p style={styles.sectionSubtitle}>
            Quick read on how broad and repetitive the wording is.
          </p>
        </div>

        <Card
          label="Total Words"
          value={lexical?.total_tokens?.toLocaleString() ?? "—"}
          sublabel="Words after basic filtering"
          style={{ gridColumn: "span 4" }}
        />
        <Card
          label="Unique Words"
          value={lexical?.unique_tokens?.toLocaleString() ?? "—"}
          sublabel="Different words used"
          style={{ gridColumn: "span 4" }}
        />
        <Card
          label="Vocabulary Variety"
          value={
            typeof lexical?.ttr === "number" ? lexical.ttr.toFixed(4) : "—"
          }
          sublabel="Higher means less repetition"
          style={{ gridColumn: "span 4" }}
        />

        <div style={{ ...styles.card, gridColumn: "span 4" }}>
          <h2 style={styles.sectionTitle}>Top Words</h2>
          <p style={styles.sectionSubtitle}>Most used single words.</p>
          <div
            style={{
              ...styles.topUsersList,
              maxHeight: 360,
              overflowY: "auto",
            }}
          >
            {topWords.map((item) => (
              <div
                key={item.word}
                style={{ ...styles.topUserItem, cursor: "pointer" }}
                onClick={() => onExplore(buildWordSpec(item.word))}
              >
                <div style={styles.topUserName}>{item.word}</div>
                <div style={styles.topUserMeta}>
                  {item.count.toLocaleString()} uses
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ ...styles.card, gridColumn: "span 4" }}>
          <h2 style={styles.sectionTitle}>Top Bigrams</h2>
          <p style={styles.sectionSubtitle}>Most used 2-word phrases.</p>
          <div
            style={{
              ...styles.topUsersList,
              maxHeight: 360,
              overflowY: "auto",
            }}
          >
            {topBigrams.map((item) => (
              <div
                key={item.ngram}
                style={{ ...styles.topUserItem, cursor: "pointer" }}
                onClick={() => onExplore(buildNgramSpec(item.ngram))}
              >
                <div style={styles.topUserName}>{item.ngram}</div>
                <div style={styles.topUserMeta}>
                  {item.count.toLocaleString()} uses
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ ...styles.card, gridColumn: "span 4" }}>
          <h2 style={styles.sectionTitle}>Top Trigrams</h2>
          <p style={styles.sectionSubtitle}>Most used 3-word phrases.</p>
          <div
            style={{
              ...styles.topUsersList,
              maxHeight: 360,
              overflowY: "auto",
            }}
          >
            {topTrigrams.map((item) => (
              <div
                key={item.ngram}
                style={{ ...styles.topUserItem, cursor: "pointer" }}
                onClick={() => onExplore(buildNgramSpec(item.ngram))}
              >
                <div style={styles.topUserName}>{item.ngram}</div>
                <div style={styles.topUserMeta}>
                  {item.count.toLocaleString()} uses
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default LinguisticStats;
