'use client'

import { useTheme } from '@/lib/ThemeContext'
import type { B2BHit } from '@/lib/AlertsB2BContext'
import { getImportanceLabelColor, getDecisionLabelColor, formatDeadline } from '@/lib/AlertsB2BContext'

export function HitCard({
  hit,
  onClick
}: {
  hit: B2BHit
  onClick: () => void
}) {
  const { isDark } = useTheme()

  return (
    <button
      onClick={onClick}
      className={`w-full text-left p-4 rounded-xl transition-all group ${
        isDark
          ? `bg-white/5 hover:bg-white/10 ${!hit.isRead ? 'border-l-4 border-amber-500' : ''}`
          : `bg-slate-50 hover:bg-slate-100 ${!hit.isRead ? 'border-l-4 border-amber-500' : ''}`
      }`}
    >
      <div className="flex items-start gap-3">
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-1 flex-wrap">
            <span className={`px-2 py-0.5 rounded-full text-xs font-medium border ${getImportanceLabelColor(hit.importanceLabel, isDark)}`}>
              {hit.importanceLabel}
            </span>
            <span className={`px-2 py-0.5 rounded-lg text-xs ${getDecisionLabelColor(hit.decisionLabel, isDark)}`}>
              {hit.decisionLabel === 'relevant' ? 'Relevant' : hit.decisionLabel === 'needs_review' ? 'Pruefung' : 'Info'}
            </span>
            {hit.deadlineGuess && (
              <span className={`text-xs ${
                formatDeadline(hit.deadlineGuess).includes('Heute') || formatDeadline(hit.deadlineGuess).includes('Morgen')
                  ? 'text-red-500 font-medium'
                  : isDark ? 'text-white/40' : 'text-slate-400'
              }`}>
                📅 {formatDeadline(hit.deadlineGuess)}
              </span>
            )}
            {!hit.isRead && (
              <span className="w-2 h-2 rounded-full bg-amber-500" />
            )}
          </div>
          <h3 className={`font-medium text-sm mb-1 ${isDark ? 'text-white' : 'text-slate-900'}`}>
            {hit.title}
          </h3>
          <p className={`text-xs truncate ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
            {hit.snippet}
          </p>
          <div className={`flex items-center gap-3 mt-2 text-xs ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
            {hit.buyerGuess && <span>🏛️ {hit.buyerGuess}</span>}
            {hit.countryGuess && <span>🌍 {hit.countryGuess}</span>}
          </div>
        </div>
        <svg className={`w-5 h-5 flex-shrink-0 transition-colors ${
          isDark ? 'text-white/30 group-hover:text-white/60' : 'text-slate-300 group-hover:text-slate-600'
        }`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </div>
    </button>
  )
}