'use client'

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

interface GvmExploitsCardProps {
  data: AttackChainsData['gvmExploits'] | undefined
  isLoading: boolean
}

export function GvmExploitsCard({ data, isLoading }: GvmExploitsCardProps) {
  return (
    <ChartCard
      title="GVM Confirmed Exploits"
      subtitle={`${data?.length || 0} confirmed · QoD 100%`}
      isLoading={isLoading}
      isEmpty={!data?.length}
    >
      <div className={styles.wrapper}>
        {data?.map((ex, i) => (
          <div key={i} className={styles.item}>
            <div className={styles.header}>
              <Shield size={12} className={styles.icon} />
              <span className={styles.name}>{ex.name}</span>
              {ex.cisaKev && (
                <span className={styles.kevBadge}>
                  <AlertTriangle size={10} /> KEV
                </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.cvssScore != null && <span className={styles.cvss}>CVSS {ex.cvssScore.toFixed(1)}</span>}
              {ex.family && <span>{ex.family}</span>}
            </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>
  )
}