/**
 * Metrics Overview Component
 * Displays key business metrics: Revenue, Bookings, Conversations, Conversion Rate
 */

"use client";

import type { Lang } from "@/lib/config";
import { dashboardEn } from "@/lib/config/translations/modules/dashboard.en";
import { dashboardAr } from "@/lib/config/translations/modules/dashboard.ar";

interface MetricsOverviewProps {
  lang: Lang;
  metrics: any;
  refreshing: boolean;
}

export default function MetricsOverview({
  lang,
  metrics,
  refreshing,
}: MetricsOverviewProps) {
  const isAr = lang === "ar";
  const dt = isAr ? dashboardAr : dashboardEn;

  if (!metrics) {
    return (
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {[1, 2, 3, 4].map((i) => (
          <div
            key={i}
            className="animate-pulse rounded-xl bg-white p-5 shadow-sm"
          >
            <div className="h-4 w-20 rounded bg-slate-200"></div>
            <div className="mt-2 h-8 w-16 rounded bg-slate-200"></div>
            <div className="mt-2 h-3 w-24 rounded bg-slate-200"></div>
          </div>
        ))}
      </div>
    );
  }

  const metricCards = [
    {
      title: dt.revenue,
      value: `${metrics.revenue?.currency || "QAR"} ${(metrics.revenue?.total || 0).toLocaleString()}`,
      subtitle: `${dt.thisWeek}`,
      icon: "💰",
      trend: null, // Can add trend calculation
      color: "emerald",
    },
    {
      title: dt.bookingsMetric,
      value: metrics.bookings?.total || 0,
      subtitle: `${metrics.bookings?.confirmed || 0} ${isAr ? "مؤكد" : "confirmed"}`,
      icon: "📅",
      trend: metrics.bookings?.trend,
      color: "sky",
    },
    {
      title: dt.conversations,
      value: metrics.conversations?.total || 0,
      subtitle: `${metrics.conversations?.active || 0} ${dt.activeConv}`,
      icon: "💬",
      trend: null,
      color: "violet",
    },
    {
      title: dt.conversion,
      value: `${metrics.performance?.conversionRate || 0}%`,
      subtitle: dt.demoToBooking,
      icon: "📊",
      trend: null,
      color: "orange",
    },
  ];

  // Static color variants mapping for Tailwind JIT compiler
  const colorVariants: Record<string, string> = {
    emerald: "bg-emerald-500",
    sky: "bg-sky-500",
    violet: "bg-violet-500",
    orange: "bg-orange-500",
    blue: "bg-blue-500",
    green: "bg-green-500",
    purple: "bg-purple-500",
    red: "bg-red-500",
    yellow: "bg-yellow-500",
    pink: "bg-pink-500",
    teal: "bg-teal-500",
  };

  return (
    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
      {metricCards.map((card, index) => (
        <div
          key={index}
          className={`group relative overflow-hidden rounded-xl bg-white p-5 shadow-sm transition-all hover:shadow-md ${
            refreshing ? "opacity-60" : ""
          }`}
        >
          {/* Icon */}
          <div className="absolute -right-2 -top-2 text-6xl opacity-10 group-hover:opacity-20 transition-opacity">
            {card.icon}
          </div>

          {/* Content */}
          <div className="relative">
            <p className="text-xs font-medium text-slate-500 uppercase tracking-wide">
              {card.title}
            </p>
            <div className="mt-2 flex items-baseline gap-2">
              <p className="text-3xl font-bold text-slate-900">{card.value}</p>
              {card.trend !== null && card.trend !== undefined && (
                <span
                  className={`text-xs font-semibold ${
                    card.trend > 0
                      ? "text-emerald-600"
                      : card.trend < 0
                        ? "text-rose-600"
                        : "text-slate-400"
                  }`}
                >
                  {card.trend > 0 && "↑"}
                  {card.trend < 0 && "↓"}
                  {card.trend === 0 && "→"}
                  {Math.abs(card.trend)}%
                </span>
              )}
            </div>
            <p className="mt-1 text-xs text-slate-500">{card.subtitle}</p>
          </div>

          {/* Bottom accent line */}
          <div
            className={`absolute bottom-0 left-0 right-0 h-1 ${colorVariants[card.color] || colorVariants.blue}`}
          ></div>
        </div>
      ))}

      {/* Additional metric: Response Time */}
      {metrics.conversations?.avgResponseTimeSeconds !== undefined && (
        <div className="rounded-xl bg-gradient-to-br from-brand-green/10 to-emerald-50 p-5 shadow-sm lg:col-span-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-slate-700">
                {dt.avgResponseTime}
              </p>
              <p className="mt-1 text-2xl font-bold text-brand-green">
                {metrics.conversations.avgResponseTimeSeconds < 60
                  ? `${metrics.conversations.avgResponseTimeSeconds}s`
                  : `${Math.round(metrics.conversations.avgResponseTimeSeconds / 60)}m`}
              </p>
              <p className="text-xs text-slate-600">
                {isAr
                  ? "متوسط وقت استجابة وكيل الذكاء الاصطناعي للعملاء"
                  : "Average AI agent response time to customers"}
              </p>
            </div>
            <div className="text-5xl">⚡</div>
          </div>
        </div>
      )}
    </div>
  );
}