'use client'

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

interface ExploitsCardProps {
  data: Exploit[] | undefined
  isLoading: boolean
}

export function ExploitsCard({ data, isLoading }: ExploitsCardProps) {
  return (
    <ChartCard
      title="Confirmed Exploits"
      subtitle={`${data?.length || 0} confirmed · GVM Active Checks`}
      isLoading={isLoading}
      isEmpty={!data?.length}
    >
      <div className={styles.wrapper}>
        {data?.map((exploit, i) => (
          <div key={i} className={styles.exploit}>
            <div className={styles.exploitHeader}>
              <Zap size={12} className={styles.exploitIcon} />
              <span className={styles.exploitName}>{exploit.name}</span>
              {exploit.cisaKev && (
                <span className={styles.kevBadge}>
                  <AlertTriangle size={10} /> CISA KEV
                </span>
              )}
            </div>
            <div className={styles.exploitMeta}>
              {exploit.targetIp && (
                <span>
                  <ExternalLink href={ipToUrl(exploit.targetIp, exploit.targetPort ?? undefined)}>
                    {exploit.targetIp}{exploit.targetPort ? `:${exploit.targetPort}` : ''}
                  </ExternalLink>
                </span>
              )}
              {exploit.cvssScore != null && (
                <span className={styles.cvssScore}>CVSS {exploit.cvssScore.toFixed(1)}</span>
              )}
              {exploit.cveIds.length > 0 && (
                <span className={styles.cveList}>
                  {exploit.cveIds.map((cve, j) => (
                    <Fragment key={cve}>
                      {j > 0 && ', '}
                      <ExternalLink href={cveToUrl(cve)}>{cve}</ExternalLink>
                    </Fragment>
                  ))}
                </span>
              )}
            </div>
            {exploit.evidence && (
              <div className={styles.evidence}>{exploit.evidence.slice(0, 200)}{exploit.evidence.length > 200 ? '...' : ''}</div>
            )}
          </div>
        ))}
      </div>
    </ChartCard>
  )
}