'use client'

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

interface OverviewTabProps {
  tools: ToolStatus[]
  findings: Finding[]
  scanning: string | null
  onRunScan: (scanType: ScanType) => void
  onSwitchTab: (tab: TabId) => void
}

export function OverviewTab({ tools, findings, scanning, onRunScan, onSwitchTab }: OverviewTabProps) {
  return (
    <div className="space-y-6">
      {/* Tools Grid */}
      <div>
        <h3 className="text-lg font-semibold text-slate-900 mb-4">DevSecOps Tools</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {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-slate-50 rounded-lg p-4 border border-slate-200">
                <div className="flex justify-between items-start mb-2">
                  <div className="flex items-center gap-2">
                    <span className="text-xl">{info.icon}</span>
                    <span className="font-semibold text-slate-900">{tool.name}</span>
                  </div>
                  <span className={getStatusBadge(tool.installed)}>
                    {tool.installed ? 'Installiert' : 'Nicht installiert'}
                  </span>
                </div>
                <p className="text-sm text-slate-600 mb-3">{info.desc}</p>
                <div className="flex justify-between items-center text-xs text-slate-500">
                  <span>{tool.version || '-'}</span>
                  <span>Letzter Scan: {tool.last_run || 'Nie'}</span>
                </div>
                <button
                  onClick={() => onRunScan(scanType)}
                  disabled={scanning !== null || !tool.installed}
                  className={`mt-3 w-full px-3 py-1.5 text-sm border rounded transition-colors flex items-center justify-center gap-2 ${
                    scanning === scanType
                      ? 'bg-orange-100 border-orange-300 text-orange-700'
                      : 'bg-white border-slate-300 hover:bg-slate-50 disabled:opacity-50'
                  }`}
                >
                  {scanning === scanType ? (
                    <>
                      <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-orange-600" />
                      <span>Scan laeuft...</span>
                    </>
                  ) : (
                    'Scan starten'
                  )}
                </button>
              </div>
            )
          })}
        </div>
      </div>

      {/* Recent Findings */}
      <div>
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Aktuelle Findings</h3>
        {findings.length === 0 ? (
          <div className="text-center py-8 text-slate-500">
            <span className="text-4xl block mb-2">🎉</span>
            Keine Findings gefunden. Das ist gut!
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b border-slate-200">
                  <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Severity</th>
                  <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Tool</th>
                  <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Finding</th>
                  <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Datei</th>
                  <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Gefunden</th>
                </tr>
              </thead>
              <tbody>
                {findings.slice(0, 10).map((finding, idx) => (
                  <tr key={`${finding.id}-${idx}`} className="border-b border-slate-100 hover:bg-slate-50">
                    <td className="py-3 px-4">
                      <span className={getSeverityBadge(finding.severity)}>{finding.severity}</span>
                    </td>
                    <td className="py-3 px-4 text-sm text-slate-600">{finding.tool}</td>
                    <td className="py-3 px-4 text-sm text-slate-900">{finding.title}</td>
                    <td className="py-3 px-4 text-sm text-slate-500 font-mono">{finding.file || '-'}</td>
                    <td className="py-3 px-4 text-sm text-slate-500">
                      {finding.found_at ? new Date(finding.found_at).toLocaleString('de-DE', {
                        day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit',
                      }) : '-'}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            {findings.length > 10 && (
              <button
                onClick={() => onSwitchTab('findings')}
                className="mt-4 text-sm text-orange-600 hover:text-orange-700"
              >
                Alle {findings.length} Findings anzeigen →
              </button>
            )}
          </div>
        )}
      </div>
    </div>
  )
}