// Copyright: © 2026 TWWIM UG. All rights reserved. (www.twwim.com)

import { useTranslation } from '@/i18n/TranslationProvider';
import { Activity, Clock, AlertTriangle, MessagesSquare, PauseCircle, CheckCircle2 } from 'lucide-react';
import type { QueueCounts } from '../lib/types';

interface QueueMetricsHeaderProps {
  counts: QueueCounts;
}

interface MetricCardProps {
  label: string;
  value: number;
  icon: React.ReactNode;
  tone: 'emerald' | 'violet' | 'amber' | 'red' | 'gray' | 'cyan';
  testId: string;
}

const TONES: Record<MetricCardProps['tone'], string> = {
  emerald: 'bg-emerald-50 text-emerald-700 ring-emerald-200',
  violet: 'bg-violet-50 text-violet-700 ring-violet-200',
  amber: 'bg-amber-50 text-amber-700 ring-amber-200',
  red: 'bg-red-50 text-red-700 ring-red-200',
  gray: 'bg-gray-50 text-gray-700 ring-gray-200',
  cyan: 'bg-cyan-50 text-cyan-700 ring-cyan-200',
};

function MetricCard({ label, value, icon, tone, testId }: MetricCardProps) {
  return (
    <div
      className={`flex items-center gap-3 rounded-lg ring-1 ring-inset px-3 py-2 min-w-[150px] ${TONES[tone]}`}
      data-testid={testId}
    >
      <span className="shrink-0">{icon}</span>
      <div>
        <div className="text-[10px] uppercase font-semibold tracking-wide opacity-80">{label}</div>
        <div className="text-xl font-bold leading-tight">{value}</div>
      </div>
    </div>
  );
}

export function QueueMetricsHeader({ counts }: QueueMetricsHeaderProps) {
  const { t } = useTranslation();
  return (
    <div className="flex flex-wrap gap-2 mb-3" data-testid="queue-metrics">
      <MetricCard
        label={t('conversations.metrics.active')}
        value={counts.active}
        icon={<Activity size={18} />}
        tone="emerald"
        testId="metric-active"
      />
      <MetricCard
        label={t('conversations.metrics.intercepted')}
        value={counts.intercepted}
        icon={<MessagesSquare size={18} />}
        tone="violet"
        testId="metric-intercepted"
      />
      <MetricCard
        label={t('conversations.metrics.awaiting')}
        value={counts.awaitingReply}
        icon={<Clock size={18} />}
        tone="amber"
        testId="metric-awaiting"
      />
      <MetricCard
        label={t('conversations.metrics.breaching')}
        value={counts.breaching}
        icon={<AlertTriangle size={18} />}
        tone="red"
        testId="metric-breaching"
      />
      <MetricCard
        label={t('conversations.metrics.idle')}
        value={counts.idle}
        icon={<PauseCircle size={18} />}
        tone="cyan"
        testId="metric-idle"
      />
      <MetricCard
        label={t('conversations.metrics.closed')}
        value={counts.closed}
        icon={<CheckCircle2 size={18} />}
        tone="gray"
        testId="metric-closed"
      />
    </div>
  );
}