'use client'

import { useState } from 'react'
import { ChevronDown, Database } from 'lucide-react'
import { Toggle, WikiInfoButton } from '@/components/ui'
import { SETTINGS_KEYS_HREF } from '@/lib/settingsLinks'
import type { Project } from '@prisma/client'
import styles from '../ProjectForm.module.css'
import { NodeInfoTooltip } from '../NodeInfoTooltip'

type FormData = Omit<Project, 'id' | 'userId' | 'createdAt' | 'updatedAt' | 'user'>

interface CveLookupSectionProps {
  data: FormData
  updateField: <K extends keyof FormData>(field: K, value: FormData[K]) => void
}

export function CveLookupSection({ data, updateField }: CveLookupSectionProps) {
  const [isOpen, setIsOpen] = useState(true)

  return (
    <div className={styles.section}>
      <div className={styles.sectionHeader} onClick={() => setIsOpen(!isOpen)}>
        <h2 className={styles.sectionTitle}>
          <Database size={16} />
          CVE Lookup
          <NodeInfoTooltip section="CveLookup" />
          <WikiInfoButton target="CveLookup" />
          <span className={styles.badgePassive}>Passive</span>
        </h2>
        <div className={styles.sectionHeaderRight}>
          <div onClick={(e) => e.stopPropagation()}>
            <Toggle
              checked={data.cveLookupEnabled}
              onChange={(checked) => updateField('cveLookupEnabled', checked)}
            />
          </div>
          <ChevronDown
            size={16}
            className={`${styles.sectionIcon} ${isOpen ? styles.sectionIconOpen : ''}`}
          />
        </div>
      </div>

      {isOpen && (
        <div className={styles.sectionContent}>
          <p className={styles.sectionDescription}>
            Enrich vulnerability findings with detailed CVE data from NVD and other sources. Provides CVSS scores, affected versions, exploitation status, and remediation guidance for discovered vulnerabilities.
          </p>

          {data.cveLookupEnabled && (
            <>
              <div className={styles.fieldGroup}>
                <label className={styles.fieldLabel}>CVE Source</label>
                <select
                  className="select"
                  value={data.cveLookupSource}
                  onChange={(e) => updateField('cveLookupSource', e.target.value)}
                >
                  <option value="nvd">NVD (National Vulnerability Database)</option>
                  <option value="vulners">Vulners</option>
                </select>
              </div>

              <div className={styles.fieldRow}>
                <div className={styles.fieldGroup}>
                  <label className={styles.fieldLabel}>Max CVEs per Finding</label>
                  <input
                    type="number"
                    className="textInput"
                    value={data.cveLookupMaxCves}
                    onChange={(e) => updateField('cveLookupMaxCves', parseInt(e.target.value) || 20)}
                    min={1}
                    max={100}
                  />
                </div>
                <div className={styles.fieldGroup}>
                  <label className={styles.fieldLabel}>Min CVSS Score</label>
                  <input
                    type="number"
                    className="textInput"
                    value={data.cveLookupMinCvss}
                    onChange={(e) => updateField('cveLookupMinCvss', parseFloat(e.target.value) || 0)}
                    min={0}
                    max={10}
                    step={0.1}
                  />
                </div>
              </div>

              <div className={styles.subSection}>
                <h3 className={styles.subSectionTitle}>API Keys</h3>
                <p className={styles.fieldHint} style={{ marginTop: 0 }}>
                  NVD and Vulners API keys are configured in{' '}
                  <a href={SETTINGS_KEYS_HREF} style={{ color: 'var(--color-accent)', textDecoration: 'underline' }}>
                    Global Settings &rarr; Tool API Keys
                  </a>
                  . Keys set there apply to all projects automatically.
                </p>
              </div>
            </>
          )}
        </div>
      )}
    </div>
  )
}