'use client';

import Image from 'next/image';
import { formatLocalDate } from '../utils/date';
import countriesLib from 'i18n-iso-countries';
import enLocale from 'i18n-iso-countries/langs/en.json';
import { FiInfo } from 'react-icons/fi';
import { ProviderIcon } from '../utils/provider';
import type { ConnectedAccount } from '../types';
import { green1, green2, green3, green4, green5 } from '../colors';

// Register English locale once at module import time
countriesLib.registerLocale(enLocale);

export const getBadgeImageUrl = (score: number, bland: boolean = false, selfCheck?: boolean) => {
  if (selfCheck) { // self-check badges are always green
    return bland ? 'badgegreensimple.png' : '/badgegreen2.png';
  };

  if (score >= 75) return bland ? 'badgegreensimple.png' : '/badgegreen2.png';
  if (score >= 50) return bland ? 'badgeyellowsimple.png' : '/badgeyellow2.png';
  return bland ? 'badgeredsimple.png' : '/badgered2.png';
};


const hexToRgba = (hex: string, alpha: number) => {
  const clean = hex.replace('#', '');
  const r = parseInt(clean.substring(0, 2), 16);
  const g = parseInt(clean.substring(2, 4), 16);
  const b = parseInt(clean.substring(4, 6), 16);
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
};

const pickTint = (score: number, selfCheck?: boolean) => {
  if (selfCheck) {
    if (score < 20) return green5;
    if (score < 40) return green4;
    if (score < 60) return green3;
    if (score < 80) return green2;
    return green1;
  }
  if (score >= 75) return '#02a389';
  if (score >= 50) return '#ffbb54';
  return '#EC6662';
};

interface ReportHeaderProps {
    badgeId: string | undefined;
    developerName: string | undefined;
    updatedAt: string | undefined;
    score?: number | undefined;
    isPublic: boolean;
    badgeImageUrl: string;
    summary?: string;
    enterpriseMatch?: { label?: string; description?: string; roleName?: string } | null;
    countries?: string[];
    accountAuthenticity?: { label?: string; description?: string };
    companyName?: string;
    sourcesProviders?: string[];
    connectedAccounts?: ConnectedAccount[];
    selfCheck?: boolean;
    rightBadgeLayout?: boolean;
}

const normalizeProvider = (value?: string) => (value || '').toLowerCase().trim();

const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImageUrl, summary, enterpriseMatch, countries = [], accountAuthenticity, companyName, sourcesProviders = [], connectedAccounts = [], selfCheck, rightBadgeLayout, isPublic }: ReportHeaderProps) => {
  // Use the dynamic image if available, otherwise fall back to the score-based one.
  const finalBadgeImageUrl = badgeImageUrl || getBadgeImageUrl(score || 0, false, selfCheck);
  const tint = hexToRgba(pickTint(score || 0, selfCheck), 0.06);
  const matchLabel = enterpriseMatch?.label;
  const sources = (() => {
    const primary = Array.isArray(sourcesProviders) ? sourcesProviders : [];
    // Fallback to authenticity oauth list if no explicit sources provided
    const fallback = (accountAuthenticity as any)?.oauth_connected as string[] | undefined;
    const combined = (primary && primary.length ? primary : (fallback || [])).filter(Boolean);
    // Deduplicate while preserving order
    const seen: Record<string, boolean> = {};
    return combined.filter((n) => {
      const key = (n || '').toLowerCase();
      if (seen[key]) return false;
      seen[key] = true;
      return true;
    });
  })();
  const sourceAccounts = (() => {
    const map: Record<string, ConnectedAccount> = {};
    (Array.isArray(connectedAccounts) ? connectedAccounts : []).forEach((account) => {
      const normalized = normalizeProvider(account?.name);
      if (normalized && !map[normalized]) map[normalized] = account;
      const underscored = normalized.replace(/\s+/g, '_');
      if (underscored && !map[underscored]) map[underscored] = account;
      const spaced = normalized.replace(/_/g, ' ');
      if (spaced && !map[spaced]) map[spaced] = account;
    });
    return map;
  })();
  const resolveSourceLink = (provider: string) => {
    if (!provider) return null;
    if (!isPublic) {
      return { href: '#appendix-connected', external: false };
    }
    const normalized = normalizeProvider(provider);
    const account = sourceAccounts[normalized] || sourceAccounts[normalized.replace(/\s+/g, '_')] || sourceAccounts[normalized.replace(/_/g, ' ')];
    if (account?.url) {
      return { href: account.url, external: true, providerName: account?.name || provider };
    }
    return null;
  };
  const SourceIcon = ({ provider }: { provider: string }) => (
    <span className={'text-sm'} style={{ color: 'var(--text-main)' }}>
      <ProviderIcon name={provider} className={'inline-block align-middle'} />
    </span>
  );
  
  return (
    <div
      className={'p-6 rounded-md border h-full'}
      style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', backgroundImage: `linear-gradient(${tint}, ${tint})` }}
    >
      {/* Authenticity notice moved to top-level display */}
      <div className={`flex gap-3 ${rightBadgeLayout ? 'flex-row items-center justify-between' : 'flex-col h-full'}`}>
        {/* Info section: Title, Candidate, Details and Summary */}
        <div className={`w-full ${rightBadgeLayout ? 'md:flex-1' : ''}`}>
          <div className='space-y-1'>
            <span className='flex gap-2 w-full items-end text-start justify-start mb-2 sm:text-xl text-base '>
              <h2 className={'font-light'} style={{ color: 'var(--text-main)' }}>KYD Candidate:</h2>
              <div className={'font-bold'} style={{ color: 'var(--text-main)' }}>{developerName || 'N/A'}</div>
            </span>
            <span className='flex gap-2 w-full items-end text-start justify-start'>
              <h3 className='text-sm font-semibold text-[--text-secondary]'>Date:</h3>
              <span className='text-sm text-[--text-main]'>{formatLocalDate(updatedAt)}</span>
            </span>
              {(() => {
                  const countryNames = countries
                    .map(code => countriesLib.getName((code || '').toUpperCase(), 'en') || code)
                    .filter(Boolean);
                  return (
                    <div className={'flex items-center gap-1 text-sm'}>
                      <span className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>
                        {countryNames.length > 1 ? 'Countries:' : 'Country:'}
                      </span>
                      
                      {countryNames.length > 0 ? (
                        <span style={{ color: 'var(--text-main)' }}>{countryNames.join(', ')}</span>
                      ) : (
                        <span style={{ color: 'var(--text-main)' }}>N/A</span>
                      )}
                      <span className={'relative inline-flex items-center group cursor-help'} style={{ color: 'var(--text-secondary)' }}>
                        <FiInfo size={14} />
                        <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 }}>Countries</div>
                            <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>Derived from linked sources and activity; shows where they’re most affiliated.</div>
                          </div>
                        </div>
                      </span>
                    </div>
                  );
              })()}
              {sources.length > 0 && (
                isPublic ? (
                  <div className='flex flex-wrap items-center gap-2 mt-2 text-sm' style={{ color: 'var(--text-secondary)' }}>
                    <span className={'font-semibold'}>Sources Shared:</span>
                    <span className={'flex items-center gap-2 flex-wrap'}>
                      {sources.map((provider, idx) => {
                        const link = resolveSourceLink(provider);
                        const icon = <SourceIcon provider={provider} />;
                        if (link) {
                          return (
                            <a
                              key={`${provider}-${idx}`}
                              href={link.href}
                              target={link.external ? '_blank' : undefined}
                              rel={link.external ? 'noreferrer noopener' : undefined}
                              className={'inline-flex items-center'}
                              style={{ color: 'var(--text-main)' }}
                              title={link.providerName || provider}
                            >
                              {icon}
                            </a>
                          );
                        }
                        return (
                          <span key={`${provider}-${idx}`} className={'inline-flex items-center'}>
                            {icon}
                          </span>
                        );
                      })}
                    </span>
                  </div>
                ) : (
                  <p className='flex items-center gap-2 mt-2 text-sm'>
                    <a href="#appendix-connected" className={'inline-flex items-center gap-2 group'} style={{ color: 'var(--text-secondary)' }}>
                      <span className={'font-semibold'}>Sources Shared:</span>
                      <span className={'flex items-center gap-2'}>
                        {sources.map((provider, idx) => (
                          <SourceIcon key={`${provider}-${idx}`} provider={provider} />
                        ))}
                      </span>
                    </a>
                  </p>
                )
              )}
            {(enterpriseMatch?.description || matchLabel) ? (
              <div className={'hidden md:block text-sm space-y-2 pt-4'} style={{ borderTop: '1px solid var(--icon-button-secondary)' }}>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <p className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Role Alignment{enterpriseMatch?.roleName ? ` — ${enterpriseMatch.roleName}` : ''}</p>
                    <span className={'relative inline-flex items-center group'} style={{ color: 'var(--text-secondary)' }}>
                      <FiInfo size={16} />
                      <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 }}>AI-generated</div>
                          <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>Role match label and description are AI-generated.</div>
                        </div>
                      </div>
                    </span>
                  </div>
                  {matchLabel && (
                    <span className="px-2 py-1 rounded text-xs font-semibold" style={{ backgroundColor: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)' }}>
                      {matchLabel}
                    </span>
                  )}
                </div>
                {enterpriseMatch?.description && (
                  <p className={'text-sm'} style={{ color: 'var(--text-main)' }}>{enterpriseMatch.description}</p>
                )}
              </div>
            ) : summary && (
              <div className={'hidden md:block text-sm space-y-2 pt-4'} style={{ borderTop: '1px solid var(--icon-button-secondary)' }}>
                <div>
                  <p className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Summary:</p>
                  <p className={'text-sm'} style={{ color: 'var(--text-main)' }}>{summary}</p>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Badge Image with robust centered overlay */}
        <div className={`flex items-center ${rightBadgeLayout ? 'md:justify-end h-20' : 'justify-center w-full h-full mt-4'} `}>
          <div className={`relative w-full ${rightBadgeLayout ? 'max-w-[85px]' : 'px-24 sm:px-6 lg:px-12 xl:px-28'} select-none`}>
            <Image 
              src={finalBadgeImageUrl} 
              alt="KYD Badge" 
              width={rightBadgeLayout ? 25 : 100} 
              height={rightBadgeLayout ? 25 : 100} 
              priority 
              className='w-full h-auto pointer-events-none'
            />
            <div className={`pointer-events-none absolute left-1/2  -translate-x-1/2 -translate-y-1/2 ${rightBadgeLayout ? 'top-[72%]' : 'top-[69%]'}`}>
              <div className={`font-extrabold text-black ${rightBadgeLayout ? 'text-xs' : 'text-base sm:text-2xl md:text-2xl lg:text-3xl'}`}>
                {Math.round(score || 0)}%
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ReportHeader;