'use client'

import type { ToolStatus, ScanType } from '../types'
import { TOOL_DESCRIPTIONS, TOOL_TO_SCAN_TYPE } from '../types'
import { getStatusBadge } from '../useSecurityDashboard'

interface ToolsTabProps {
  tools: ToolStatus[]
  scanning: string | null
  onRunScan: (scanType: ScanType) => void
}

export function ToolsTab({ tools, scanning, onRunScan }: ToolsTabProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      {tools.map(tool => {
        const info = TOOL_DESCRIPTIONS[tool.name.toLowerCase()] || { icon: '🔧', desc: 'Security Tool' }
        const scanType = TOOL_TO_SCAN_TYPE[tool.name.toLowerCase()] || 'all'
        return (
          <div key={tool.name} className="bg-white border border-slate-200 rounded-lg p-6">
            <div className="flex justify-between items-start mb-4">
              <div>
                <div className="flex items-center gap-3 mb-1">
                  <span className="text-2xl">{info.icon}</span>
                  <h3 className="text-lg font-semibold text-slate-900">{tool.name}</h3>
                </div>
                <p className="text-sm text-slate-600">{info.desc}</p>
              </div>
              <span className={getStatusBadge(tool.installed)}>
                {tool.installed ? 'Installiert' : 'Nicht installiert'}
              </span>
            </div>
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-slate-500">Version:</span>
                <span className="font-mono">{tool.version || '-'}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-500">Letzter Scan:</span>
                <span>{tool.last_run || 'Nie'}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-500">Findings:</span>
                <span className="font-semibold">{tool.last_findings}</span>
              </div>
            </div>
            <div className="flex gap-2 mt-4">
              <button
                onClick={() => onRunScan(scanType)}
                disabled={scanning !== null || !tool.installed}
                className={`flex-1 px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center justify-center gap-2 ${
                  scanning === scanType
                    ? 'bg-orange-200 text-orange-800'
                    : 'bg-orange-600 text-white hover:bg-orange-700 disabled:opacity-50'
                }`}
              >
                {scanning === scanType ? (
                  <>
                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-orange-700" />
                    <span>Scan laeuft...</span>
                  </>
                ) : (
                  'Scan starten'
                )}
              </button>
              <button
                onClick={() => window.open(`/api/v1/security/reports/${tool.name.toLowerCase()}`, '_blank')}
                className="px-4 py-2 border border-slate-300 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors"
              >
                Report
              </button>
            </div>
          </div>
        )
      })}
    </div>
  )
}