'use client';

import React, { useState, useEffect } from 'react';
import { formatLocalDate } from '../utils/date';
import { FaGithub, FaGitlab, FaStackOverflow, FaLinkedin, FaGoogle, FaKaggle } from 'react-icons/fa';
import { SiCredly, SiFiverr } from 'react-icons/si';
import { DomainCSVRow } from '../types';
import { red, yellow, green, hexToRgba } from '../colors';
import RiskIcon from './icons/risk';
import CodeIcon from './icons/code';
import AiIcon from './icons/ai';
import { ProviderIcon } from '../utils/provider';

interface SanctionSource {
    issuingEntity: string;
    listName: string;
    matched?: boolean;
    sublists?: string[];
}

interface DomainSource {
    country?: string;
    entityType?: string;
    entityName?: string;
    url: string;
}

const PAGE_SIZE = 25;

interface BusinessRuleRow {
    provider: string;
    category?: string;
    label?: string;
    likert_label?: string;
    likert_value?: number;
    weight?: number;
    uid?: string;
}

interface AppendixTableProps {
    type: 'sanctions' | 'domains' | 'business_rules';
    sources: (string | DomainCSVRow | SanctionSource | BusinessRuleRow)[];
    searchedAt: string;
    developerName: string;
    // Used for business_rules: map genres (e.g., Technical/Risk) to category arrays
    genreMapping?: Record<string, string[]>;
    headless?: boolean;
}

const SanctionsRow = ({
    source,
    searchedAt,
    developerName,
    onToggle,
    expanded,
    colSpan,
    headless,
}: {
    source: SanctionSource;
    searchedAt: string;
    developerName: string;
    onToggle: () => void;
    expanded: boolean;
    colSpan: number;
    headless?: boolean;
}) => (
    <>
        <tr className={'transition-colors'} style={source.matched ? { backgroundColor: 'rgba(236,102,98,0.08)' } : undefined}>
            <td className={'px-4 py-4 whitespace-nowrap align-top text-sm font-medium'} style={{ color: 'var(--text-main)' }}>
                <div className="flex flex-col gap-1">
                    <span>{source.issuingEntity}</span>
                    {source.sublists && source.sublists.length > 0 && !headless && (
                        <button
                            type="button"
                            onClick={onToggle}
                            className={'text-xs inline-flex items-center gap-1 text-left'}
                            style={{ color: 'var(--text-secondary)' }}
                            aria-expanded={expanded}
                        >
                            <span style={{ display: 'inline-block', transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)', transition: 'transform 150ms ease' }} className={'mr-1'}>▶</span>
                            <span>View sub-lists</span>
                        </button>
                    )}
                </div>
            </td>
            <td className={'px-4 py-4 whitespace-normal align-top text-sm'} style={{ color: 'var(--text-secondary)' }}>
                {source.listName}
            </td>
            <td className={'px-4 py-4 whitespace-nowrap align-top text-sm'} style={{ color: 'var(--text-secondary)' }}>
                {searchedAt}
            </td>
            <td className={'px-4 py-4 whitespace-nowrap align-top text-sm'} style={{ color: 'var(--text-secondary)' }}>
                {source.matched ? (
                    <span className={'text-xs font-semibold'} style={{ color: 'var(--text-main)' }}>Match</span>
                ) : (
                    <span className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>Not Found</span>
                )}
            </td>
            <td className={'px-4 py-4 text-sm whitespace-normal align-top'} style={{ color: 'var(--text-secondary)' }}>
                {source.matched
                    ? (<span>Exact or strong match for <strong style={{ color: 'var(--text-main)' }}>{developerName}</strong> was found on this list.</span>)
                    : (<span>No exact match for <strong style={{ color: 'var(--text-main)' }}>{developerName}</strong> was found on this list.</span>)}
            </td>
        </tr>
        {(headless || expanded) && source.sublists && source.sublists.length > 0 && (
            <tr>
                <td colSpan={colSpan} className={'px-6 pb-4'}>
                    <div className={'mt-1 border-t pt-3'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
                        <ul className={'grid grid-cols-1 sm:grid-cols-2 gap-y-1 gap-x-6 text-sm list-disc pl-5'} style={{ color: 'var(--text-secondary)' }}>
                            {source.sublists.map((sl, idx) => (
                                <li key={idx}>{sl}</li>
                            ))}
                        </ul>
                    </div>
                </td>
            </tr>
        )}
    </>
);

const DomainRow = ({ source, searchedAt, developerName }: { source: DomainSource, searchedAt: string, developerName: string }) => (
     <tr className={'transition-colors hover:bg-black/5'}>
        <td className={'px-4 py-4 whitespace-normal text-sm'} style={{ color: 'var(--text-secondary)' }}>{source.country || 'N/A'}</td>
        <td className={'px-4 py-4 whitespace-normal text-sm'} style={{ color: 'var(--text-secondary)' }}>{source.entityType || 'N/A'}</td>
        <td className={'px-4 py-4 whitespace-normal text-sm font-medium'} style={{ color: 'var(--text-main)' }}>{source.entityName || source.url}</td>
        <td className={'px-4 py-4 whitespace-nowrap text-sm'} style={{ color: 'var(--text-secondary)' }}>{searchedAt}</td>
        <td className={'px-4 py-4 whitespace-nowrap text-sm'} style={{ color: 'var(--text-secondary)' }}>
            <span className={'px-2 inline-flex text-xs leading-5 font-semibold rounded-full'} style={{ backgroundColor: 'var(--icon-button-secondary)', color: 'var(--text-main)' }}>
                Not Found
            </span>
        </td>
        <td className={'px-4 py-4 text-sm whitespace-normal'} style={{ color: 'var(--text-secondary)' }}>
            No profile matching <strong style={{ color: 'var(--text-main)' }}>{developerName}</strong> (based on name and email) was found at this domain.
        </td>
    </tr>
);


const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedAt, developerName, genreMapping, headless }) => {
    const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
    const [expanded, setExpanded] = useState<{ [k: number]: boolean }>({});
    const [sortBy, setSortBy] = useState<'pillar' | 'category' | 'label' | 'weight' | null>(null);
    const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');

    useEffect(() => {
        const flashIfRule = () => {
            const hash = typeof window !== 'undefined' ? window.location.hash : '';
            if (!hash || !hash.startsWith('#rule-')) return;
            const id = hash.slice(1);
            const el = document.getElementById(id) as HTMLElement | null;
            if (!el) return;
            try {
                el.style.scrollMarginTop = '96px';
                el.scrollIntoView({ block: 'start', behavior: 'smooth' });
            } catch {}
            el.style.transition = 'background-color 300ms ease';
            el.style.backgroundColor = 'rgba(2, 163, 137, 0.14)';
            setTimeout(() => {
                el.style.backgroundColor = '';
            }, 1200);
        };
        flashIfRule();
        window.addEventListener('hashchange', flashIfRule);
        return () => window.removeEventListener('hashchange', flashIfRule);
    }, []);

    const formattedDate = formatLocalDate(searchedAt, {
        year: 'numeric', month: 'short', day: 'numeric',
        // hour: 'numeric', minute: '2-digit',
    });

    const headers = type === 'sanctions' 
        ? ["Issuing Entity", "List Name", "List Searched On", "Value", "Findings"]
        : type === 'domains'
        ? ["Country", "Entity Type", "Entity/Domain", "Searched On", "Value", "Findings"]
        : ["Platform", "KYD Pillar", "Category", "Observation", "Weight Impact"];

    const sortableBusinessHeaders: Record<string, 'pillar' | 'category' | 'label' | 'weight'> = {
        'KYD Pillar': 'pillar',
        'Category': 'category',
        'Observation': 'label',
        'Weight Impact': 'weight',
    };

    const onHeaderClick = (header: string) => {
        if (type !== 'business_rules') return;
        const key = sortableBusinessHeaders[header as keyof typeof sortableBusinessHeaders];
        if (!key) return;
        if (sortBy === key) {
            setSortDir(d => (d === 'asc' ? 'desc' : 'asc'));
        } else {
            setSortBy(key);
            setSortDir('asc');
        }
    };

    // Build quick lookup: category -> KYD Pillar (e.g., Technical or Risk)
    const categoryToPillar: Record<string, string> = (() => {
        const map: Record<string, string> = {};
        try {
            const gm = genreMapping || {};
            Object.keys(gm || {}).forEach((genre) => {
                const cats = (gm as Record<string, string[]>)[genre] || [];
                cats.forEach((c) => {
                    if (typeof c === 'string') map[c] = genre;
                });
            });
        } catch {}
        return map;
    })();

    const parsedSources = type === 'sanctions' 
        ? (sources).map((src) => {
            if (typeof src === 'string') {
                const parts = src.split(':');
                return { issuingEntity: parts[0].trim(), listName: parts.slice(1).join(':').trim(), matched: false } as SanctionSource;
            }
            return src as SanctionSource;
        })
        : type === 'domains'
        ? (sources as DomainCSVRow[]).map(s => ({
            country: s.Country,
            entityType: s['Entity Type'],
            entityName: s['Entity Name'],
            url: s.URL,
        }))
        : (sources as BusinessRuleRow[])
            .filter(s => !((s?.provider || '').toLowerCase().includes('linkedin')))
            .filter(s => (s?.label || '') !== 'Sanctions & Criminal Exposure')
            .map(s => ({
            provider: s.provider,
            // Keep original category label; pillar derived from genreMapping
            category: s.category || '',
            label: s.label || '',
            likert_label: s.likert_label || '',
            likert_value: s.likert_value || 0,
            weight: s.weight || 0,
            uid: s.uid || '',
            pillar: categoryToPillar[(s.category || '')] || '',
        }));

    const sortedParsedSources = (type === 'sanctions')
        ? (parsedSources as SanctionSource[]).slice().sort((a, b) => (b.matched === true ? 1 : 0) - (a.matched === true ? 1 : 0))
        : type === 'business_rules'
        ? (() => {
            const orderForPillar = (p: string) => (p === 'Technical' ? 0 : p === 'Risk' ? 1 : p === 'AI' ? 2 : 3);
            const items = (parsedSources as (BusinessRuleRow & { pillar?: string })[]).slice();
            if (!sortBy) {
                return items.sort((a, b) => {
                    const ap = (a as any).pillar || '';
                    const bp = (b as any).pillar || '';
                    const cmpPillar = orderForPillar(ap) - orderForPillar(bp);
                    if (cmpPillar !== 0) return cmpPillar;
                    const ac = (a.category || '').localeCompare(b.category || '');
                    if (ac !== 0) return ac;
                    return Number(b.weight || 0) - Number(a.weight || 0);
                });
            }
            return items.sort((a, b) => {
                const dir = sortDir === 'asc' ? 1 : -1;
                if (sortBy === 'pillar') {
                    return dir * (orderForPillar((a as any).pillar || '') - orderForPillar((b as any).pillar || ''));
                }
                if (sortBy === 'category') {
                    return dir * ((a.category || '').localeCompare(b.category || ''));
                }
                if (sortBy === 'label') {
                    return dir * ((a.label || '').localeCompare(b.label || ''));
                }
                if (sortBy === 'weight') {
                    return dir * (Number(a.weight || 0) - Number(b.weight || 0));
                }
                return 0;
            });
        })()
        : parsedSources;

    const visibleParsedSources = (type === 'business_rules')
        ? sortedParsedSources
        : (headless ? sortedParsedSources : sortedParsedSources.slice(0, visibleCount));

    const handleLoadMore = () => {
        setVisibleCount(currentCount => currentCount + PAGE_SIZE);
    };

    if (!sources || sources.length === 0) {
        return null;
    }

    return (
        <div className={'kyd-avoid-break'}>
            <div className={'overflow-x-auto rounded-lg border kyd-avoid-break'} style={{ borderColor: 'var(--icon-button-secondary)', backgroundColor: 'var(--content-card-background)', breakInside: 'avoid', pageBreakInside: 'avoid' as unknown as undefined }}>
                <table className={'min-w-full'}>
                    <colgroup>
                        {headers.map((_, idx) => (
                            <col key={idx} style={type === 'business_rules' ? { width: `${100 / headers.length}%` } : (idx === headers.length - 1 ? { width: '50%' } : {})} />
                        ))}
                    </colgroup>
                    <thead className={''}>
                        <tr>
                            {headers.map(header => {
                                const isSortable = type === 'business_rules' && Object.prototype.hasOwnProperty.call(sortableBusinessHeaders, header);
                                const isActive = isSortable && sortBy === sortableBusinessHeaders[header as keyof typeof sortableBusinessHeaders];
                                const arrow = isActive ? (sortDir === 'asc' ? ' ▲' : ' ▼') : '';
                                return (
                                    <th
                                        key={header}
                                        scope="col"
                                        title={header === 'Observation' ? 'Observation attribute details are part of the KYD proprietary framework and are available on a case-by-case basis.' : undefined}
                                        onClick={() => onHeaderClick(header)}
                                        className={'px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider'}
                                        style={{ color: 'var(--text-secondary)', cursor: isSortable ? 'pointer' : 'default', userSelect: isSortable ? 'none' : 'auto' }}
                                        aria-sort={isActive ? (sortDir === 'asc' ? 'ascending' : 'descending') : 'none'}
                                    >
                                        {header}{arrow}
                                    </th>
                                );
                            })}
                        </tr>
                    </thead>
                    <tbody className={''}>
                        {visibleParsedSources.map((source, index) => {
                            if (type === 'sanctions') {
                                const src = source as SanctionSource;
                                return (
                                    <SanctionsRow
                                        key={index}
                                        source={src}
                                        searchedAt={formattedDate}
                                        developerName={developerName}
                                        onToggle={() => setExpanded(prev => ({ ...prev, [index]: !prev[index] }))}
                                        expanded={!!expanded[index]}
                                        colSpan={headers.length}
                                        headless={headless}
                                    />
                                );
                            }
                            if (type === 'domains') {
                                return <DomainRow key={index} source={source as DomainSource} searchedAt={formattedDate} developerName={developerName} />
                            }
                            const br = source as BusinessRuleRow & { pillar?: string };
                            const anchorId = br.uid ? `rule-${br.uid}` : undefined;
                            return (
                                <tr
                                    id={anchorId}
                                    key={index}
                                    className={'transition-colors hover:bg-black/5'}
                                    style={{
                                        backgroundColor: (() => {
                                            const w = Number(br.weight);
                                            if (!Number.isFinite(w)) return undefined;
                                            const hex = w > 0 ? green : w < 0 ? red : yellow;
                                            return hexToRgba(hex, 0.06);
                                        })(),
                                    }}
                                >
                                    <td className={'px-4 py-4 whitespace-normal text-sm'} style={{ color: 'var(--text-secondary)' }}>
                                        <span title={br.provider || ''} className={'inline-flex items-center text-4xl'} style={{ color: 'var(--text-main)' }}>
                                            <ProviderIcon name={br.provider} className='relative w-8 h-8' />
                                        </span>
                                    </td>
                                    <td className={'px-4 py-4 whitespace-normal text-sm'} style={{ color: 'var(--text-secondary)' }}>{br.pillar || '—'}</td>
                                    <td className={'px-4 py-4 whitespace-normal text-sm'} style={{ color: 'var(--text-secondary)' }}>{br.category || '—'}</td>
                                    <td
                                        className={'px-4 py-4 whitespace-normal text-sm font-medium'}
                                        style={{ color: 'var(--text-main)' }}
                                    >
                                        {br.label || '—'}
                                    </td>
                                    <td className={'px-4 py-4 whitespace-normal text-sm text-center'} style={{ color: 'var(--text-secondary)' }}>
                                        {Number.isFinite(Number(br.weight)) ? br.weight : '—'}
                                    </td>
                                </tr>
                            );
                        })}
                    </tbody>
                </table>
            </div>
            {type !== 'business_rules' && parsedSources.length > PAGE_SIZE && !headless && (
                <div className={'mt-4 flex items-center justify-between text-sm'} style={{ color: 'var(--text-secondary)' }}>
                    <p>
                        Showing {Math.min(visibleCount, parsedSources.length)} of {parsedSources.length} entries
                    </p>
                    {visibleCount < parsedSources.length && (
                        <button
                            onClick={handleLoadMore}
                            className={'font-medium underline-offset-2 hover:underline'}
                            style={{ color: 'var(--icon-accent)' }}
                        >
                            Load More
                        </button>
                    )}
                </div>
            )}
        </div>
    );
};

export default AppendixTables; 

// deprecated SharedBadgeDisplay code, storing here for later
{/* <div>
    <h4 className={'text-xl font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Country-specific Entity Affiliations</h4>
    <AppendixTables
        type="domains"
        sources={screening_sources.risk_profile_domains || []}
        searchedAt={updatedAt}
        developerName={developerName || 'this developer'}
    />
</div> */}