'use client'

import type { Topic } from '../types'
import { formatTimeAgo } from '../useAlertsData'

interface TopicsTabProps {
  topics: Topic[]
}

export function TopicsTab({ topics }: TopicsTabProps) {
  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <h3 className="font-semibold text-slate-900">Feed Topics</h3>
        <button className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700">
          + Topic hinzufuegen
        </button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {topics.map((topic) => (
          <div key={topic.id} className="bg-white rounded-xl border border-slate-200 p-4">
            <div className="flex justify-between items-start mb-3">
              <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-6 0a1 1 0 11-2 0 1 1 0 012 0z" />
                </svg>
              </div>
              <span className={`px-2 py-1 rounded text-xs font-semibold ${topic.is_active ? 'bg-green-100 text-green-800' : 'bg-slate-100 text-slate-600'}`}>
                {topic.is_active ? 'Aktiv' : 'Pausiert'}
              </span>
            </div>
            <h4 className="font-semibold text-slate-900">{topic.name}</h4>
            <p className="text-sm text-slate-500 truncate">{topic.feed_url}</p>
            <div className="flex justify-between items-center mt-4 pt-4 border-t border-slate-100">
              <div className="text-sm">
                <span className="font-semibold text-slate-900">{topic.alert_count}</span>
                <span className="text-slate-500"> Alerts</span>
              </div>
              <div className="text-xs text-slate-500">
                {formatTimeAgo(topic.last_fetched_at)}
              </div>
            </div>
          </div>
        ))}
        {topics.length === 0 && (
          <div className="col-span-full text-center py-8 text-slate-500">
            Keine Topics konfiguriert
          </div>
        )}
      </div>
    </div>
  )
}