whyrating-engine-legacy/web/components/reviewiq/kpi/KPISection.tsx

'use client';

import {
  MessageSquare,
  AlertTriangle,
  ThumbsUp,
  ThumbsDown,
  Star,
  Target,
  Layers,
  TrendingUp,
} from 'lucide-react';
import { KPICard } from './KPICard';
import type { OverviewStats, Sentiment } from '../types';
import { useReviewIQFilters } from '@/contexts/ReviewIQFilterContext';

interface KPISectionProps {
  overview: OverviewStats;
}

/**
 * KPI cards section showing overview statistics.
 * Cards are clickable to filter the dashboard.
 */
export function KPISection({ overview }: KPISectionProps) {
  const { filters, toggleSentiment } = useReviewIQFilters();

  const positiveActive = filters.sentiment.includes('positive');
  const negativeActive = filters.sentiment.includes('negative');

  const totalSentiment =
    overview.positive_count + overview.negative_count + overview.neutral_count + overview.mixed_count;

  const positivePercent =
    totalSentiment > 0 ? ((overview.positive_count / totalSentiment) * 100).toFixed(0) : '0';
  const negativePercent =
    totalSentiment > 0 ? ((overview.negative_count / totalSentiment) * 100).toFixed(0) : '0';

  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      {/* Total Reviews */}
      <KPICard
        title="Reviews"
        value={overview.total_reviews}
        subtitle="Total processed"
        icon={MessageSquare}
        colorClass="bg-gradient-to-br from-blue-100 to-blue-200 border-blue-400 text-blue-900"
      />

      {/* Total Spans */}
      <KPICard
        title="Spans"
        value={overview.total_spans}
        subtitle="Classified segments"
        icon={Layers}
        colorClass="bg-gradient-to-br from-purple-100 to-purple-200 border-purple-400 text-purple-900"
      />

      {/* Open Issues */}
      <KPICard
        title="Issues"
        value={overview.open_issues}
        subtitle="Open issues"
        icon={AlertTriangle}
        colorClass="bg-gradient-to-br from-orange-100 to-orange-200 border-orange-400 text-orange-900"
      />

      {/* Average Rating */}
      <KPICard
        title="Avg Rating"
        value={overview.avg_rating !== null ? `${overview.avg_rating.toFixed(1)}` : 'N/A'}
        subtitle="Star rating"
        icon={Star}
        colorClass="bg-gradient-to-br from-yellow-100 to-yellow-200 border-yellow-400 text-yellow-900"
      />

      {/* Positive Count */}
      <KPICard
        title="Positive"
        value={overview.positive_count}
        subtitle={`${positivePercent}% of mentions`}
        icon={ThumbsUp}
        colorClass="bg-gradient-to-br from-green-100 to-green-200 border-green-400 text-green-900"
        onClick={() => toggleSentiment('positive')}
        isActive={positiveActive}
      />

      {/* Negative Count */}
      <KPICard
        title="Negative"
        value={overview.negative_count}
        subtitle={`${negativePercent}% of mentions`}
        icon={ThumbsDown}
        colorClass="bg-gradient-to-br from-red-100 to-red-200 border-red-400 text-red-900"
        onClick={() => toggleSentiment('negative')}
        isActive={negativeActive}
      />

      {/* Neutral Count */}
      <KPICard
        title="Neutral"
        value={overview.neutral_count}
        subtitle="Neutral mentions"
        icon={Target}
        colorClass="bg-gradient-to-br from-gray-100 to-gray-200 border-gray-400 text-gray-900"
        onClick={() => toggleSentiment('neutral')}
        isActive={filters.sentiment.includes('neutral')}
      />

      {/* Mixed Count */}
      <KPICard
        title="Mixed"
        value={overview.mixed_count}
        subtitle="Mixed mentions"
        icon={TrendingUp}
        colorClass="bg-gradient-to-br from-amber-100 to-amber-200 border-amber-400 text-amber-900"
      />
    </div>
  );
}