import { useMemo } from 'react'
import { computeStats, gradeBand } from './stats'

// StatsPanel is the popover that opens above the word count: a small grid of
// writing statistics computed from the live document. Bilingual zh·en labels to
// match Petal's chrome. Reading level shows a friendly band, not just a number.

interface Props {
  text: string
  wordCount: number
}

interface Row {
  zh: string
  en: string
  value: string
}

export function StatsPanel({ text, wordCount }: Props) {
  const rows = useMemo<Row[]>(() => {
    const s = computeStats(text, wordCount)
    const band = gradeBand(s.gradeLevel)
    const fmt = (n: number, d = 0) =>
      n.toLocaleString(undefined, { minimumFractionDigits: d, maximumFractionDigits: d })
    return [
      { zh: '字数', en: 'Words', value: fmt(s.words) },
      { zh: '字符', en: 'Characters', value: fmt(s.characters) },
      { zh: '句子', en: 'Sentences', value: fmt(s.sentences) },
      { zh: '段落', en: 'Paragraphs', value: fmt(s.paragraphs) },
      { zh: '页数', en: 'Pages', value: `~${fmt(Math.max(s.pages, s.words > 0 ? 0.1 : 0), 1)}` },
      { zh: '阅读时间', en: 'Reading time', value: readingTime(s.readingTimeMin) },
      { zh: '平均词长', en: 'Avg word length', value: `${fmt(s.avgWordLength, 1)}` },
      { zh: '词汇丰富度', en: 'Word variety', value: `${fmt(s.variety * 100)}%` },
      {
        zh: '阅读难度',
        en: 'Reading level',
        value: s.words > 0 ? `${band.en} · ${fmt(s.gradeLevel, 1)}` : '—',
      },
    ]
  }, [text, wordCount])

  return (
    <div
      role="dialog"
      aria-label="Writing statistics"
      className="petal-word-card absolute bottom-7 left-0 z-30 p-3.5"
      style={{
        width: 268,
        background: 'var(--color-surface)',
        border: '1px solid var(--color-border)',
        borderRadius: 'var(--radius-card)',
        boxShadow: 'var(--shadow-soft)',
        color: 'var(--color-plum)',
      }}
    >
      <p className="mb-2 text-xs font-bold" style={{ color: 'var(--color-muted)' }}>
        写作统计 · Writing stats
      </p>
      <dl className="space-y-1.5">
        {rows.map((r) => (
          <div key={r.en} className="flex items-baseline justify-between gap-3 text-sm">
            <dt style={{ color: 'var(--color-muted)' }}>
              <span className="font-semibold" style={{ color: 'var(--color-plum)' }}>
                {r.zh}
              </span>{' '}
              {r.en}
            </dt>
            <dd className="font-bold tabular-nums">{r.value}</dd>
          </div>
        ))}
      </dl>
    </div>
  )
}

// readingTime renders minutes as a friendly "< 1 min" / "N min" string.
function readingTime(min: number): string {
  if (min <= 0) return '0 min'
  if (min < 1) return '< 1 min'
  return `${Math.round(min)} min`
}