'use client';

import React from 'react';
import { BusinessRule } from '../types';
import BusinessRuleLink from './BusinessRuleLink';
import { ProviderIcon, getProviderDisplayName, getProviderTooltipCopy } from '../utils/provider';

export default function TopContributingFactors({
  categories,
  categoryTopByGraph,
}: {
  categories: string[];
  categoryTopByGraph: { [category: string]: BusinessRule[] };
}) {
  return (
    <div className="space-y-4">
      {(categories || []).map((cat: string) => {
        const topRules = (categoryTopByGraph?.[cat] || []).slice(0, 3) as BusinessRule[];
        if (!topRules || topRules.length === 0) return null;
        return (
          <div key={cat} className="pt-3 first:pt-0">
            <div className={'text-xs font-semibold mb-1'} style={{ color: 'var(--text-main)' }}>{cat}</div>
            <div className="space-y-1">
              {topRules.map((r, idx: number) => (
                <div key={idx} className="flex items-center gap-2 text-xs" style={{ color: 'var(--text-secondary)' }}>
                  <span className={'relative inline-flex items-center group'} style={{ color: 'var(--text-secondary)' }}>
                    <ProviderIcon name={r.provider} className="size-4 relative" />
                    <div className="hidden group-hover:block absolute z-30 left-1/2 -translate-x-1/2 top-full mt-2 w-80">
                      <div style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)', padding: 10, borderRadius: 6 }}>
                        <div style={{ fontWeight: 600 }}>{getProviderDisplayName(r.provider)}</div>
                        <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>{getProviderTooltipCopy(r.provider)}</div>
                      </div>
                    </div>
                  </span>
                  <BusinessRuleLink uid={r.uid} label={r.label} />
                </div>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
}