'use client'

import type { ReadabilityResult } from '@actuate-media/cms-core/seo/analysis'
import { prominentWordsFromText } from '../../lib/editor-seo-content.js'

export function SeoInsightsMetrics({
  readability,
  plainText,
}: {
  readability: ReadabilityResult
  plainText: string
}) {
  const prominent = prominentWordsFromText(plainText)
  const needsMoreCopy = readability.wordCount < 50

  return (
    <div className="space-y-4">
      <div>
        <h4 className="mb-1.5 text-[12.5px] font-medium text-[var(--txt)]">Prominent words</h4>
        {needsMoreCopy ? (
          <p className="text-[11.5px] text-[var(--sub)]">
            Once you add more copy, we&apos;ll list the words that occur most in the content — a
            quick read on what the page focuses on.
          </p>
        ) : prominent.length > 0 ? (
          <div className="flex flex-wrap gap-1.5">
            {prominent.map((word) => (
              <span
                key={word}
                className="rounded-full border border-[var(--bdr)] bg-[var(--card)] px-2 py-0.5 text-[11.5px] text-[var(--txt)]"
              >
                {word}
              </span>
            ))}
          </div>
        ) : (
          <p className="text-[11.5px] text-[var(--sub)]">No recurring terms yet.</p>
        )}
      </div>

      <div className="grid grid-cols-2 gap-3">
        <MetricCard
          label="Reading time"
          value={String(readability.readingTimeMinutes)}
          unit="minutes"
          hint={
            needsMoreCopy
              ? 'Continue writing to estimate reading time.'
              : `${readability.wordCount} words at ~200 wpm`
          }
        />
        <MetricCard
          label="Word count"
          value={String(readability.wordCount)}
          unit="words"
          hint={needsMoreCopy ? 'Add body content to unlock metrics.' : undefined}
        />
      </div>

      <div className="rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] p-3">
        <div className="mb-1 text-[12.5px] font-medium text-[var(--txt)]">Flesch reading ease</div>
        {needsMoreCopy ? (
          <p className="text-[11.5px] text-[var(--sub)]">
            Your text should be slightly longer to calculate readability. Keep writing to unlock
            this score.
          </p>
        ) : (
          <>
            <div className="flex items-baseline gap-2">
              <span className="text-2xl font-medium text-[var(--acc)]">
                {readability.fleschScore}
              </span>
              <span className="text-[11.5px] text-[var(--muted)]">out of 100</span>
            </div>
            <p className="mt-1 text-[11.5px] text-[var(--sub)]">
              {readability.fleschLabel} —{' '}
              {readability.fleschScore >= 60
                ? 'Content is fairly easy to read.'
                : 'Try shorter sentences and simpler words.'}
            </p>
          </>
        )}
      </div>
    </div>
  )
}

function MetricCard({
  label,
  value,
  unit,
  hint,
}: {
  label: string
  value: string
  unit: string
  hint?: string
}) {
  return (
    <div className="rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] p-3">
      <div className="text-[11.5px] font-medium text-[var(--sub)]">{label}</div>
      <div className="mt-1 flex items-baseline gap-1">
        <span className="text-xl font-medium text-[var(--acc)]">{value}</span>
        <span className="text-[11px] text-[var(--muted)]">{unit}</span>
      </div>
      {hint && <p className="mt-1 text-[10.5px] text-[var(--muted)]">{hint}</p>}
    </div>
  )
}
