'use client'

import type { AlertItem } from '../types'
import { formatTimeAgo, getScoreBadgeClass, getDecisionBadgeClass } from '../useAlertsData'

interface InboxTabProps {
  filteredAlerts: AlertItem[]
  inboxFilter: string
  setInboxFilter: (filter: string) => void
}

export function InboxTab({ filteredAlerts, inboxFilter, setInboxFilter }: InboxTabProps) {
  return (
    <div className="space-y-4">
      {/* Filters */}
      <div className="flex gap-2 flex-wrap">
        {['all', 'new', 'keep', 'review'].map((filter) => (
          <button
            key={filter}
            onClick={() => setInboxFilter(filter)}
            className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
              inboxFilter === filter
                ? 'bg-green-600 text-white'
                : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
            }`}
          >
            {filter === 'all' && 'Alle'}
            {filter === 'new' && 'Neu'}
            {filter === 'keep' && 'Relevant'}
            {filter === 'review' && 'Pruefung'}
          </button>
        ))}
      </div>

      {/* Alerts Table */}
      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
        <table className="w-full">
          <thead className="bg-slate-50 border-b border-slate-200">
            <tr>
              <th className="text-left p-4 text-xs font-semibold text-slate-500 uppercase">Alert</th>
              <th className="text-left p-4 text-xs font-semibold text-slate-500 uppercase">Topic</th>
              <th className="text-left p-4 text-xs font-semibold text-slate-500 uppercase">Score</th>
              <th className="text-left p-4 text-xs font-semibold text-slate-500 uppercase">Decision</th>
              <th className="text-left p-4 text-xs font-semibold text-slate-500 uppercase">Zeit</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100">
            {filteredAlerts.map((alert) => {
              const scoreBadge = getScoreBadgeClass(alert.relevance_score)
              const decBadge = getDecisionBadgeClass(alert.relevance_decision)
              return (
                <tr key={alert.id} className="hover:bg-slate-50">
                  <td className="p-4">
                    <a href={alert.url} target="_blank" rel="noopener noreferrer" className="font-medium text-slate-900 hover:text-green-600">
                      {alert.title}
                    </a>
                    <p className="text-sm text-slate-500 truncate max-w-md">{alert.snippet}</p>
                  </td>
                  <td className="p-4 text-sm text-slate-600">{alert.topic_name}</td>
                  <td className="p-4">
                    {scoreBadge && <span className={`px-2 py-0.5 rounded text-xs font-semibold ${scoreBadge.cls}`}>{scoreBadge.pct}%</span>}
                  </td>
                  <td className="p-4">
                    {decBadge && <span className={`px-2 py-0.5 rounded text-xs font-semibold uppercase ${decBadge.cls}`}>{decBadge.decision}</span>}
                  </td>
                  <td className="p-4 text-sm text-slate-500">{formatTimeAgo(alert.fetched_at)}</td>
                </tr>
              )
            })}
            {filteredAlerts.length === 0 && (
              <tr>
                <td colSpan={5} className="p-8 text-center text-slate-500">
                  Keine Alerts gefunden
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  )
}