import { __, sprintf } from '@/wp-externals/i18n';
import { cn } from '@/lib/utils';
import { normalizeRecommendations } from '@/components/readiness-recommendations-list';
import type { VisibilityDetails } from './use-visibility-data';

/**
 * Diagnostics checklist for the editor sidebar (adoption plan F2.2):
 * the same content-quality sub-components the drawer shows, rendered as
 * passed / partial / missing rows with the points each item is worth
 * (component weight x the 30% content-quality share of the total score).
 */

interface ChecklistItemDef {
  key: string;
  label: string;
  /** Max contribution to the total 0-100 score (weight x 30). */
  points: number;
}

function pageItems(): ChecklistItemDef[] {
  return [
    { key: 'content_length', label: __('Content length', 'llmagnet-llm-txt-generator'), points: 6 },
    { key: 'heading_structure', label: __('Heading structure', 'llmagnet-llm-txt-generator'), points: 6 },
    { key: 'alt_coverage', label: __('Image ALT coverage', 'llmagnet-llm-txt-generator'), points: 6 },
    { key: 'excerpt_quality', label: __('Excerpt', 'llmagnet-llm-txt-generator'), points: 4.5 },
    { key: 'tags_categories', label: __('Tags & categories', 'llmagnet-llm-txt-generator'), points: 4.5 },
    { key: 'readability', label: __('Readability', 'llmagnet-llm-txt-generator'), points: 3 },
  ];
}

function productItems(): ChecklistItemDef[] {
  return [
    { key: 'description_length', label: __('Description length', 'llmagnet-llm-txt-generator'), points: 10.5 },
    { key: 'tags_count', label: __('Tags', 'llmagnet-llm-txt-generator'), points: 6 },
    { key: 'category_assignment', label: __('Category assigned', 'llmagnet-llm-txt-generator'), points: 4.5 },
    { key: 'alt_coverage', label: __('Image ALT coverage', 'llmagnet-llm-txt-generator'), points: 9 },
  ];
}

function StatusIcon({ value }: { value: number }) {
  if (value >= 80) {
    return (
      <span className="font-bold text-green-600" aria-label={__('Passed', 'llmagnet-llm-txt-generator')}>
        ✓
      </span>
    );
  }
  if (value >= 50) {
    return (
      <span className="font-bold text-orange-500" aria-label={__('Needs improvement', 'llmagnet-llm-txt-generator')}>
        ~
      </span>
    );
  }
  return (
    <span className="font-bold text-red-600" aria-label={__('Missing', 'llmagnet-llm-txt-generator')}>
      ✗
    </span>
  );
}

export interface DiagnosticsChecklistProps {
  details: VisibilityDetails;
  postType: string;
  className?: string;
}

export function DiagnosticsChecklist({ details, postType, className }: DiagnosticsChecklistProps) {
  const components = details.content_quality?.components ?? {};
  const items = (postType === 'product' ? productItems() : pageItems()).filter(
    (item) => typeof components[item.key] === 'number'
  );
  const botScore = details.bot_visibility?.score;
  const recommendations = normalizeRecommendations(details.recommendations);

  return (
    <div className={cn('llmagnet-surface space-y-3', className)}>
      {typeof botScore === 'number' && (
        <div className="flex items-center justify-between text-sm">
          <span>{__('AI bot visibility (70% of score)', 'llmagnet-llm-txt-generator')}</span>
          <span className="font-semibold tabular-nums">{Math.round(botScore)}/100</span>
        </div>
      )}

      {items.length > 0 && (
        <ul className="m-0 space-y-1.5 p-0" style={{ listStyle: 'none' }}>
          {items.map((item) => {
            const value = Math.round(components[item.key]);
            return (
              <li
                key={item.key}
                className="flex items-center justify-between gap-2 text-sm"
                title={sprintf(
                  /* translators: 1: checklist item label, 2: max points it contributes to the 0-100 score */
                  __('%1$s is worth up to %2$s points of the total score', 'llmagnet-llm-txt-generator'),
                  item.label,
                  String(item.points)
                )}
              >
                <span className="flex items-center gap-1.5">
                  <StatusIcon value={value} />
                  {item.label}
                </span>
                <span className="tabular-nums text-gray-500">{value}/100</span>
              </li>
            );
          })}
        </ul>
      )}

      {recommendations.length > 0 && (
        <div>
          <p className="m-0 mb-1 text-xs font-semibold uppercase tracking-wide text-gray-500">
            {__('Recommendations', 'llmagnet-llm-txt-generator')}
          </p>
          <ul className="m-0 list-disc space-y-1 pl-4 text-sm">
            {recommendations.map((rec) => (
              <li key={rec.id}>{rec.message}</li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}