"use client";

import { Users, Phone, Clock, AlertCircle } from "lucide-react";
import type { VoiceAgentDashboardStats } from "@/lib/types/voice-agent-staff.types";

interface VoiceAgentsStatsCardsProps {
  stats: VoiceAgentDashboardStats;
}

function formatDuration(seconds: number): string {
  if (seconds < 60) {
    return `${Math.round(seconds)}s`;
  }
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = Math.round(seconds % 60);
  return remainingSeconds > 0
    ? `${minutes}m ${remainingSeconds}s`
    : `${minutes}m`;
}

interface StatCardProps {
  title: string;
  value: string | number;
  icon: React.ReactNode;
  colorClass: string;
  bgClass: string;
  borderClass: string;
}

function StatCard({
  title,
  value,
  icon,
  colorClass,
  bgClass,
  borderClass,
}: StatCardProps) {
  return (
    <div className={`rounded-xl border p-4 ${borderClass} ${bgClass}`}>
      <div className="flex items-center justify-between">
        <div>
          <p className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">
            {title}
          </p>
          <p className={`text-2xl font-bold ${colorClass}`}>{value}</p>
        </div>
        <div className={`p-3 rounded-lg ${bgClass}`}>{icon}</div>
      </div>
    </div>
  );
}

export default function VoiceAgentsStatsCards({
  stats,
}: VoiceAgentsStatsCardsProps) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      <StatCard
        title="Total Agents"
        value={stats.totalAgents}
        icon={<Users className="w-6 h-6 text-blue-600" />}
        colorClass="text-blue-700"
        bgClass="bg-blue-50"
        borderClass="border-blue-200"
      />
      <StatCard
        title="Conversations Today"
        value={stats.conversationsToday}
        icon={<Phone className="w-6 h-6 text-green-600" />}
        colorClass="text-green-700"
        bgClass="bg-green-50"
        borderClass="border-green-200"
      />
      <StatCard
        title="Avg Duration"
        value={formatDuration(stats.avgDuration)}
        icon={<Clock className="w-6 h-6 text-purple-600" />}
        colorClass="text-purple-700"
        bgClass="bg-purple-50"
        borderClass="border-purple-200"
      />
      <StatCard
        title="Pending Actions"
        value={stats.pendingActions}
        icon={<AlertCircle className="w-6 h-6 text-orange-600" />}
        colorClass="text-orange-700"
        bgClass="bg-orange-50"
        borderClass="border-orange-200"
      />
    </div>
  );
}