'use client';

import React from 'react';

export default function SanctionsMatches({ ss, title }: {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  ss?: any;
  title?: string;
}) {
  if (!ss) return null;
  const ofacMatches = ss?.ofac_screen?.matches && (ss.ofac_screen.matches.length > 0);
  const cslDetails = ss?.csl_details && (Array.isArray(ss.csl_details) ? ss.csl_details.length > 0 : Object.keys(ss.csl_details || {}).length > 0);
  const fbiMatches = ss?.fbi_matches && (ss.fbi_matches.length > 0);
  if (!(ofacMatches || cslDetails || fbiMatches)) return null;

  return (
    <div className={'rounded-lg border p-4'} style={{ borderColor: 'var(--icon-button-secondary)', backgroundColor: 'var(--content-card-background)' }}>
      <h4 className={'text-lg font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>{title || 'Sanctions Matches'}</h4>
      {ofacMatches && (
        <div className={'mb-4'}>
          <h5 className={'font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>OFAC API Matches</h5>
          <div>
            {ss!.ofac_screen!.matches!.map((m: any, i: number) => {
              const s = m?.sanction;
              const t = s?.name || 'Unknown';
              const programs = (s?.programs && s?.programs.length) ? ` — Programs: ${s?.programs.join(', ')}` : '';
              return (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '12px 1fr', columnGap: 8, alignItems: 'start', marginBottom: 6 }}>
                  <div aria-hidden="true" style={{ width: 6, height: 6, borderRadius: '50%', marginTop: 6, backgroundColor: 'var(--text-secondary)' }} />
                  <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
                    <span className={'font-medium'} style={{ color: 'var(--text-main)' }}>{t}</span>
                    <span>{programs}</span>
                    {s?.entityLink ? (
                      <>
                        {' '}— <a href={s.entityLink} target='_blank' rel='noopener noreferrer' className={'underline'} style={{ color: 'var(--icon-accent)' }}>Details</a>
                      </>
                    ) : null}
                  </div>
                </div>
              );
            })}
          </div>
          <details className={'mt-2'}>
            <summary className={'cursor-pointer text-sm font-semibold'} style={{ color: 'var(--text-main)' }}>View OFAC Raw JSON</summary>
            <pre className={'mt-2 overflow-auto text-xs p-3 rounded'} style={{ background: 'rgba(0,0,0,0.04)', color: 'var(--text-main)' }}>{JSON.stringify(ss!.ofac_screen!.raw, null, 2)}</pre>
          </details>
        </div>
      )}
      {cslDetails && (
        <div className={'mb-4'}>
          <h5 className={'font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>U.S. CSL Details</h5>
          <details>
            <summary className={'cursor-pointer text-sm font-semibold'} style={{ color: 'var(--text-main)' }}>View CSL Raw JSON</summary>
            <pre className={'mt-2 overflow-auto text-xs p-3 rounded'} style={{ background: 'rgba(0,0,0,0.04)', color: 'var(--text-main)' }}>{JSON.stringify(ss!.csl_details, null, 2)}</pre>
          </details>
        </div>
      )}
      {fbiMatches && (
        <div className={'mb-2'}>
          <h5 className={'font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>FBI Wanted List Matches</h5>
          <div>
            {ss!.fbi_matches!.map((f: any, i: number) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '12px 1fr', columnGap: 8, alignItems: 'start', marginBottom: 6 }}>
                <div aria-hidden="true" style={{ width: 6, height: 6, borderRadius: '50%', marginTop: 6, backgroundColor: 'var(--text-secondary)' }} />
                <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
                  <span className={'font-medium'} style={{ color: 'var(--text-main)' }}>{f.title || 'Match'}</span>
                  {f.url ? <> — <a href={f.url} target='_blank' rel='noopener noreferrer' className={'underline'} style={{ color: 'var(--icon-accent)' }}>Details</a></> : null}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}