'use client'

import { Fragment } from 'react'
import { Zap, Terminal } from 'lucide-react'
import { ExternalLink } from '@/components/ui'
import { cveToUrl, ipToUrl } from '@/lib/url-utils'
import { ChartCard } from './ChartCard'
import styles from './ExploitSuccessesCard.module.css'
import type { AttackChainsData } from '../types'

interface ExploitSuccessesCardProps {
  data: AttackChainsData['exploitSuccesses'] | undefined
  isLoading: boolean
}

export function ExploitSuccessesCard({ data, isLoading }: ExploitSuccessesCardProps) {
  return (
    <ChartCard
      title="Agent Exploit Successes"
      subtitle={`${data?.length || 0} confirmed exploits`}
      isLoading={isLoading}
      isEmpty={!data?.length}
    >
      <div className={styles.wrapper}>
        {data?.map((ex, i) => (
          <div key={i} className={styles.item}>
            <div className={styles.header}>
              <Zap size={12} className={styles.icon} />
              <span className={styles.title}>{ex.title}</span>
            </div>
            <div className={styles.meta}>
              {ex.targetIp && (
                <span>
                  <ExternalLink href={ipToUrl(ex.targetIp, ex.targetPort ?? undefined)}>
                    {ex.targetIp}{ex.targetPort ? `:${ex.targetPort}` : ''}
                  </ExternalLink>
                </span>
              )}
              {ex.attackType && <span className={styles.badge}>{ex.attackType.replace(/_/g, ' ')}</span>}
            </div>
            {ex.module && (
              <div className={styles.module}>
                <Terminal size={10} /> {ex.module}
              </div>
            )}
            {ex.cveIds.length > 0 && (
              <div className={styles.cves}>
                {ex.cveIds.map((cve, j) => (
                  <Fragment key={cve}>
                    {j > 0 && ', '}
                    <ExternalLink href={cveToUrl(cve)}>{cve}</ExternalLink>
                  </Fragment>
                ))}
              </div>
            )}
            {ex.evidence && (
              <div className={styles.evidence}>{ex.evidence.slice(0, 200)}{ex.evidence.length > 200 ? '...' : ''}</div>
            )}
          </div>
        ))}
      </div>
    </ChartCard>
  )
}