import { cn } from '@/lib/utils';

interface RankWizResultsMockupProps {
  className?: string;
}

interface ResultCardProps {
  rankChange: number;
  pageUrl: string;
  impactDescription: string;
  tags: Array<{
    label: string;
    color: 'amber' | 'blue' | 'purple' | 'pink';
  }>;
}

/**
 * ResultCard Component
 *
 * A single result card showing ranking change, page info, and action tags.
 */
function ResultCard({ rankChange, pageUrl, impactDescription, tags }: ResultCardProps) {
  const severity =
    rankChange <= -14 ? 'critical' : rankChange <= -6 ? 'warning' : 'minor';

  const badgeColor =
    severity === 'critical'
      ? 'bg-red-100 dark:bg-red-950/40 text-red-700 dark:text-red-300'
      : severity === 'warning'
        ? 'bg-amber-100 dark:bg-amber-950/40 text-amber-700 dark:text-amber-300'
        : 'bg-green-100 dark:bg-green-950/40 text-green-700 dark:text-green-300';

  const tagColorMap = {
    amber: 'bg-amber-50 dark:bg-amber-950/30 text-amber-700 dark:text-amber-300 border border-amber-200 dark:border-amber-800',
    blue: 'bg-blue-50 dark:bg-blue-950/30 text-blue-700 dark:text-blue-300 border border-blue-200 dark:border-blue-800',
    purple:
      'bg-purple-50 dark:bg-purple-950/30 text-purple-700 dark:text-purple-300 border border-purple-200 dark:border-purple-800',
    pink: 'bg-pink-50 dark:bg-pink-950/30 text-pink-700 dark:text-pink-300 border border-pink-200 dark:border-pink-800',
  };

  return (
    <div className="rounded-lg border border-border bg-card p-4">
      {/* Header with rank change badge */}
      <div className="flex items-start justify-between mb-3">
        <div className="flex-1">
          <p className="text-sm font-medium text-foreground mb-1">{pageUrl}</p>
          <p className="text-xs text-muted-foreground">{impactDescription}</p>
        </div>
        <div className={cn('px-3 py-1 rounded-md font-semibold text-sm flex-shrink-0', badgeColor)}>
          {rankChange > 0 ? '+' : ''} {rankChange}
        </div>
      </div>

      {/* Tags */}
      <div className="flex flex-wrap gap-2">
        {tags.map((tag, idx) => (
          <span
            key={idx}
            className={cn(
              'text-xs font-medium px-2.5 py-1 rounded-full whitespace-nowrap',
              tagColorMap[tag.color]
            )}
          >
            {tag.label}
          </span>
        ))}
      </div>
    </div>
  );
}

/**
 * RankWizResultsMockup Component
 *
 * A visual mockup showing RankWiz diagnostic results as a collection of
 * result cards with ranking changes and recommended actions.
 */
export function RankWizResultsMockup({ className = '' }: RankWizResultsMockupProps) {
  return (
    <div className={cn('space-y-3', className)}>
      <ResultCard
        rankChange={-14}
        pageUrl="/best-seo-plugins"
        impactDescription="Estimated 47 clicks lost / week"
        tags={[
          { label: 'Content Rewrite', color: 'amber' },
          { label: 'E-E-A-T', color: 'pink' },
        ]}
      />

      <ResultCard
        rankChange={-6}
        pageUrl="/wordpress-seo-guide"
        impactDescription="Estimated 18 clicks lost / week"
        tags={[
          { label: 'Meta Tag Fix', color: 'blue' },
          { label: 'Internal Links', color: 'purple' },
        ]}
      />

      <ResultCard
        rankChange={-2}
        pageUrl="/on-page-optimization"
        impactDescription="Estimated 5 clicks lost / week"
        tags={[{ label: 'Content Rewrite', color: 'amber' }]}
      />
    </div>
  );
}