'use client'

import type { Finding } from '../types'
import { getSeverityBadge } from '../useSecurityDashboard'

interface FindingsTabProps {
  filteredFindings: Finding[]
  severityFilter: string | null
  setSeverityFilter: (filter: string | null) => void
  toolFilter: string | null
  setToolFilter: (filter: string | null) => void
}

const SEVERITY_OPTIONS = ['CRITICAL', 'HIGH', 'MEDIUM', 'LOW', 'INFO']
const TOOL_OPTIONS = ['gitleaks', 'semgrep', 'bandit', 'trivy', 'grype']

export function FindingsTab({
  filteredFindings,
  severityFilter,
  setSeverityFilter,
  toolFilter,
  setToolFilter,
}: FindingsTabProps) {
  return (
    <div>
      {/* Filters */}
      <div className="flex gap-2 mb-4 flex-wrap">
        <button
          onClick={() => setSeverityFilter(null)}
          className={`px-3 py-1 rounded-full text-sm ${!severityFilter ? 'bg-orange-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`}
        >
          Alle
        </button>
        {SEVERITY_OPTIONS.map(sev => (
          <button
            key={sev}
            onClick={() => setSeverityFilter(sev)}
            className={`px-3 py-1 rounded-full text-sm ${severityFilter === sev ? 'bg-orange-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`}
          >
            {sev}
          </button>
        ))}
        <span className="mx-2 border-l border-slate-300" />
        {TOOL_OPTIONS.map(t => (
          <button
            key={t}
            onClick={() => setToolFilter(toolFilter === t ? null : t)}
            className={`px-3 py-1 rounded-full text-sm capitalize ${toolFilter === t ? 'bg-orange-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`}
          >
            {t}
          </button>
        ))}
      </div>

      {filteredFindings.length === 0 ? (
        <div className="text-center py-8 text-slate-500">
          Keine Findings mit diesem Filter gefunden.
        </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">Zeile</th>
                <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Gefunden</th>
              </tr>
            </thead>
            <tbody>
              {filteredFindings.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">
                    <div className="text-sm text-slate-900">{finding.title}</div>
                    {finding.message && (
                      <div className="text-xs text-slate-500 mt-1">{finding.message}</div>
                    )}
                  </td>
                  <td className="py-3 px-4 text-sm text-slate-500 font-mono max-w-xs truncate">
                    {finding.file || '-'}
                  </td>
                  <td className="py-3 px-4 text-sm text-slate-500">{finding.line || '-'}</td>
                  <td className="py-3 px-4 text-sm text-slate-500">
                    {finding.found_at ? new Date(finding.found_at).toLocaleDateString('de-DE') : '-'}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  )
}