import { ArrowUpRight, Sparkles } from 'lucide-react';
import { cn } from '@/lib/utils';
import { __ } from '../lib/i18n';

export interface ReadinessRecommendation {
  id: string;
  message: string;
  action_label?: string;
  action_url?: string;
}

/** Normalize legacy string recommendations from older API responses. */
export function normalizeRecommendations(
  items: ReadinessRecommendation[] | string[] | undefined | null
): ReadinessRecommendation[] {
  if (!items || items.length === 0) {
    return [];
  }

  return items.map((item, index) => {
    if (typeof item === 'string') {
      return { id: `legacy-${index}`, message: item };
    }
    return item;
  });
}

export function ReadinessRecommendationsList({
  items,
  limit = 5,
  className = '',
}: {
  items: ReadinessRecommendation[] | string[];
  limit?: number;
  className?: string;
}) {
  const normalized = normalizeRecommendations(items).slice(0, limit);

  if (normalized.length === 0) {
    return null;
  }

  return (
    <div className={className}>
      <div className="mb-3 flex items-center gap-2">
        <Sparkles className="h-4 w-4 text-purple-600" aria-hidden="true" />
        <h4 className="text-sm font-semibold text-gray-900">
          {__('AI readiness fixes', 'llmagnet-llm-txt-generator')}
        </h4>
      </div>
      <ul className="space-y-2">
        {normalized.map((rec) => (
          <li
            key={rec.id}
            className="rounded-md border border-gray-200 bg-white px-3 py-2.5 shadow-sm"
          >
            <div className="flex items-start justify-between gap-3">
              <p className="min-w-0 text-sm leading-snug text-gray-700">{rec.message}</p>
              {rec.action_label && rec.action_url && (
                <a
                  href={rec.action_url}
                  className={cn(
                    'inline-flex shrink-0 items-center gap-1 text-xs font-medium text-purple-700',
                    'underline-offset-2 hover:text-purple-900 hover:underline',
                  )}
                >
                  {rec.action_label}
                  <ArrowUpRight className="h-3.5 w-3.5" aria-hidden="true" />
                </a>
              )}
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}