'use client'

import type { AlertItem } from './types'
import { formatTimeAgo, getScoreBadge, getDecisionBadge } from './useAlertsData'

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

export default function InboxTab({ inboxFilter, setInboxFilter, filteredAlerts }: 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-primary-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) => (
              <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-primary-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">{getScoreBadge(alert.relevance_score)}</td>
                <td className="p-4">{getDecisionBadge(alert.relevance_decision)}</td>
                <td className="p-4 text-sm text-slate-500">{formatTimeAgo(alert.fetched_at)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}