import { SearchCheckIcon } from 'lucide-react';

import { classNames } from '../../lib/utils';
import { KEYWORD_TESTS, scoreTone, type Analysis } from '../analysis/analyzer';

import { isToFix } from './result-tone';
import { TONE_CLASSES, TONE_LABELS } from './ScoreBadge';

/**
 * What the publish check says about SEO, as Rank Math and Yoast say it
 * there: the score, the focus keyword, how many tests fail, and the way to
 * the SEO panel.
 *
 * @param props          - Component props.
 * @param props.analysis - The analysis of the post as edited.
 * @param props.keyword  - Its first focus keyword.
 * @param props.onOpen   - Opens the SEO sidebar.
 * @return The summary.
 */
export const PrePublishSummary = ({
  analysis,
  keyword,
  onOpen,
}: {
  analysis: Analysis;
  keyword: string;
  onOpen: () => void;
}): JSX.Element => {
  const counted = analysis.needsKeyword
    ? analysis.results.filter(result => !KEYWORD_TESTS.includes(result.id))
    : analysis.results;
  const weighted = counted.filter(result => result.max > 0);
  const passed = weighted.filter(result => result.passed).length;
  const toFix = weighted.filter(isToFix).length;
  const tone = analysis.needsKeyword ? null : scoreTone(analysis.score);
  return (
    <div className="flex flex-col gap-1.5 text-sm">
      <p
        className={classNames(
          'm-0 font-semibold',
          tone ? TONE_CLASSES[tone] : 'text-muted-foreground'
        )}
      >
        {tone
          ? `${TONE_LABELS[tone]} · ${analysis.score}/100`
          : 'No score yet: add a focus keyword'}
      </p>
      {keyword && (
        <p className="m-0 text-foreground">
          Focus keyword: <strong>{keyword}</strong>
        </p>
      )}
      <p className="m-0 text-muted-foreground">
        {passed} of {weighted.length} tests passed
        {toFix > 0 ? ` · ${toFix} to fix` : ''}
      </p>
      <button
        type="button"
        onClick={onOpen}
        className="mt-1 inline-flex w-fit items-center gap-1.5 rounded-md border border-border bg-card px-2.5 py-1.5 text-xs font-semibold text-foreground hover:bg-muted"
      >
        <SearchCheckIcon className="size-3.5" /> Open the SEO panel
      </button>
    </div>
  );
};