import { useState } from 'react';
import {
  CheckIcon,
  ChevronDownIcon,
  InfoIcon,
  MinusIcon,
  XIcon,
} from 'lucide-react';

import { OptionTip } from '../../components/seo/option-row';
import { classNames } from '../../lib/utils';
import {
  GROUP_LABELS,
  GROUP_TIPS,
  type AnalysisGroup,
  type AnalysisResult,
} from '../analysis/analyzer';

import { isToDo, isToFix, resultTone } from './result-tone';

/** What a failing test offers to do about itself, next to its advice. */
export interface TestAction {
  label: string;
  run: () => void;
}

const GROUPS: AnalysisGroup[] = [
  'basic',
  'additional',
  'title',
  'content',
  'product',
  'aeo',
];

const Group = ({
  group,
  results,
  defaultOpen,
  actionFor,
}: {
  group: AnalysisGroup;
  results: AnalysisResult[];
  defaultOpen: boolean;
  actionFor?: (result: AnalysisResult) => TestAction | undefined;
}): JSX.Element => {
  const [open, setOpen] = useState(defaultOpen);
  // A failed test that weighs nothing is advice ("to improve"), not "to fix";
  // one Rank Math runs and the Recomaze rules do not ask for is neither.
  const toFix = results.filter(isToFix).length;
  const toImprove = results.filter(
    result => isToDo(result) && !isToFix(result)
  ).length;
  const allGood = toFix === 0 && toImprove === 0;
  const tip = GROUP_TIPS[group];

  return (
    <div className="rounded-lg border border-border">
      <div className="flex w-full items-start gap-2 px-3 py-2">
        {/* The count sits after the name and drops under it when the sidebar
            is narrow; a name squeezed beside it ran into it. */}
        <button
          type="button"
          onClick={() => setOpen(current => !current)}
          aria-expanded={open}
          className="flex min-w-0 flex-1 cursor-pointer flex-wrap items-center gap-x-2 gap-y-1 text-left"
        >
          <span className="text-sm font-semibold text-foreground">
            {GROUP_LABELS[group]}
          </span>
          <span
            className={classNames(
              'rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap',
              allGood
                ? 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-400'
                : toFix === 0
                  ? 'bg-amber-500/10 text-amber-700 dark:text-amber-400'
                  : 'bg-red-500/10 text-red-700 dark:text-red-400'
            )}
          >
            {allGood
              ? 'All good'
              : [
                  toFix > 0 ? `${toFix} to fix` : '',
                  toImprove > 0 ? `${toImprove} to improve` : '',
                ]
                  .filter(Boolean)
                  .join(' · ')}
          </span>
        </button>
        {tip && <OptionTip>{tip}</OptionTip>}
        <button
          type="button"
          onClick={() => setOpen(current => !current)}
          aria-expanded={open}
          aria-label={open ? 'Collapse the group' : 'Expand the group'}
          className="flex h-5 shrink-0 cursor-pointer items-center"
        >
          <ChevronDownIcon
            className={classNames(
              'size-4 text-muted-foreground transition-transform',
              open && 'rotate-180'
            )}
          />
        </button>
      </div>
      {open && (
        <ul className="flex flex-col gap-2 border-t border-border px-3 py-2">
          {results.map(result => (
            <li key={result.id} className="flex items-start gap-2 text-sm">
              <span
                className={classNames(
                  'mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full',
                  resultTone(result)
                )}
              >
                {result.rankMathOnly ? (
                  <InfoIcon className="size-3" />
                ) : result.partial ? (
                  <MinusIcon className="size-3" />
                ) : result.passed ? (
                  <CheckIcon className="size-3" />
                ) : (
                  <XIcon className="size-3" />
                )}
              </span>
              <span className="flex min-w-0 flex-col">
                <span
                  className={
                    result.rankMathOnly
                      ? 'text-muted-foreground'
                      : 'text-foreground'
                  }
                >
                  {result.message}
                  {result.partial && (
                    <span className="text-muted-foreground">
                      {' '}
                      ({result.score} of {result.max} points)
                    </span>
                  )}
                </span>
                {result.fix && (
                  <span className="text-xs text-muted-foreground">
                    {result.fix}
                  </span>
                )}
                {isToDo(result) &&
                  (() => {
                    const action = actionFor?.(result);
                    return action ? (
                      <button
                        type="button"
                        onClick={action.run}
                        className="mt-1 self-start text-xs font-medium text-brand hover:underline"
                      >
                        {action.label} →
                      </button>
                    ) : null;
                  })()}
              </span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

/**
 * The tests grouped the way Rank Math groups them, failing groups open,
 * with the reason each test fails and what to do about it.
 */
export const AnalysisList = ({
  results,
  actionFor,
}: {
  results: AnalysisResult[];
  /** The way to fix a failing test here, when there is one. */
  actionFor?: (result: AnalysisResult) => TestAction | undefined;
}): JSX.Element => (
  <div className="flex flex-col gap-2">
    {GROUPS.filter(group => results.some(result => result.group === group)).map(
      group => {
        const own = results.filter(result => result.group === group);
        return (
          <Group
            key={group}
            group={group}
            results={own}
            defaultOpen={own.some(result => isToDo(result) && result.max > 0)}
            actionFor={actionFor}
          />
        );
      }
    )}
  </div>
);