'use client'

import type { Prospect, SearchState } from '@/lib/types'

interface KPIStripProps {
  prospects: Prospect[]
  searchState: SearchState
}

export default function KPIStrip({ prospects, searchState }: KPIStripProps) {
  const total = prospects.length
  const real = prospects.filter(p => p.acquisition_mode === 'real').length
  const demo = prospects.filter(p => p.acquisition_mode === 'demo').length
  const high = prospects.filter(p => p.lead_tag === 'High Potential').length
  const avgConfidence = prospects.length > 0
    ? Math.round(prospects.reduce((sum, prospect) => sum + prospect.result_confidence, 0) / prospects.length)
    : 0
  const noWebsite = prospects.filter(p => !p.has_website).length
  const readyForOutreach = prospects.filter(p => p.score >= 50 && (p.phone || p.email)).length

  const isLoading = searchState === 'searching' || searchState === 'processing'

  const cards = [
    { label: 'Total Leads', value: total, color: 'text-[#dae2fd]', accent: '' },
    { label: 'Live Retrieved', value: real, color: 'text-[#9fe8c4]', accent: 'border-l-4 border-[#22c55e]/30' },
    { label: 'Demo Fallback', value: demo, color: 'text-[#bfdbfe]', accent: 'border-l-4 border-[#60a5fa]/30' },
    { label: 'Avg Confidence', value: `${avgConfidence}%`, color: 'text-[#ffd59a]', accent: 'border-l-4 border-[#ffb95f]/30' },
    { label: 'High Potential', value: high, color: 'text-[#dae2fd]', accent: 'border-l-4 border-[#ac8aff]/40', pulse: true },
    { label: 'No Website', value: noWebsite, color: 'text-slate-500', accent: '' },
    { label: 'Ready for Outreach', value: readyForOutreach, color: 'text-[#ffb2b9]', accent: '' },
  ]

  return (
    <div className="px-6 py-4 grid grid-cols-7 gap-3">
      {cards.map(card => (
        <div key={card.label} className={`bg-[#131b2e] p-4 rounded-xl ${card.accent}`}>
          <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1">{card.label}</p>
          <div className="flex items-center gap-2">
            {isLoading ? (
              <div className="h-7 w-12 bg-[#2d3449] rounded animate-pulse" />
            ) : (
              <span className={`text-2xl font-black ${card.color}`}>{card.value.toLocaleString()}</span>
            )}
            {card.pulse && !isLoading && high > 0 && (
              <div className="w-2 h-2 rounded-full bg-[#ac8aff] kinetic-pulse" />
            )}
          </div>
        </div>
      ))}
    </div>
  )
}