import { IconType } from 'react-icons';
import { formatLocalDate } from '../utils/date';
import { FaGithub, FaGitlab, FaStackOverflow, FaAtlassian, FaLinkedin, FaGoogle } from 'react-icons/fa';
import { SiFiverr, SiCredly, SiKaggle } from 'react-icons/si';
import { TopContributingRule } from '../types';

interface Platform {
  name: string;
  handle?: string | null;
  url?: string | null;
  observedAt?: string;
}

interface ProviderInsightsProps {
  platforms: Platform[];
  topContributingRules: TopContributingRule[];
}

const providerIcons: { [key: string]: IconType } = {
  GitHub: FaGithub,
  GitLab: FaGitlab,
  'Stack Overflow': FaStackOverflow,
  Atlassian: FaAtlassian,
  Fiverr: SiFiverr,
  LinkedIn: FaLinkedin,
  Credly: SiCredly,
  Kaggle: SiKaggle,
  'Google Scholar': FaGoogle,
};

const providerDisplayMap: { [key: string]: string } = {
  github: 'GitHub',
  gitlab: 'GitLab',
  stackoverflow: 'Stack Overflow',
  atlassian: 'Atlassian',
  fiverr: 'Fiverr',
  linkedin: 'LinkedIn',
  credly: 'Credly',
  kaggle: 'Kaggle',
  gscholar: 'Google Scholar',
};

export default function ProviderInsights({ platforms, topContributingRules }: ProviderInsightsProps) {
  if (!platforms || platforms.length === 0) {
    return null;
  }

  return (
    <div className="space-y-6">
      {platforms.map(platform => {
        const normalizedName = platform.name || '';
        const Icon = normalizedName ? (providerIcons[normalizedName] || null) : null;
        // Group top contributing rules by provider display name
        const rulesForProvider = (topContributingRules || []).filter(r => {
          const display = providerDisplayMap[(r.provider || '').toLowerCase()] || r.provider;
          return display === normalizedName;
        });
        const observedDate = platform.observedAt ? formatLocalDate(platform.observedAt, {
          year: 'numeric',
          month: 'short',
          day: 'numeric',
        }) : null;

        return (
          <div
            key={platform.name}
            className={'rounded-xl shadow-sm border'}
            style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}
          >
            {/* Header */}
            <div
              className="p-4 border-b"
              style={{ borderColor: 'var(--icon-button-secondary)' }}
            >
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-3">
                  {Icon && <Icon className={'h-6 w-6'} style={{ color: 'var(--text-secondary)' }} />}
                  <h3 className={'font-semibold text-lg'} style={{ color: 'var(--text-main)' }}>{platform.name}</h3>
                </div>
                <div className="flex flex-col items-end gap-1">
              {platform.url && (
                    <span className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
                      Profile:{' '}
                <a
                  href={platform.url}
                  target="_blank"
                  rel="noopener noreferrer"
                        className={'font-medium underline-offset-2 hover:underline'}
                        style={{ color: 'var(--icon-accent)' }}
                >
                  {platform.handle || 'View Profile'}
                </a>
                    </span>
                  )}
                  {observedDate && (
                    <span className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
                      Observed: {observedDate}
                    </span>
                  )}
                </div>
              </div>
            </div>

            {/* Top Contributing Rules */}
            {rulesForProvider && rulesForProvider.length > 0 && (
              <div className="p-4">
                <div className="space-y-3">
                  {rulesForProvider.map((r, idx) => (
                    <div key={idx} className={'rounded-lg p-3 border'} style={{ backgroundColor: 'var(--content-card-background)/90', borderColor: 'var(--icon-button-secondary)' }}>
                      <div className="flex items-start gap-2">
                        <div className={'mt-1 h-2 w-2 rounded-full'} style={{ backgroundColor: 'var(--text-secondary)' }} />
                        <div>
                          <div className={'font-medium'} style={{ color: 'var(--text-main)' }}>{r.rule_label}</div>
                          {r.why && (
                            <div className={'text-sm mt-1'} style={{ color: 'var(--text-secondary)' }}>{r.why}</div>
                          )}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}