"use client";

import { useTranslations } from "next-intl";
import { useEffect, useState } from "react";
import { Card } from "@/shared/components";

interface DiversityProviderStat {
  share: number;
}

interface DiversityReport {
  score: number;
  providers: Record<string, DiversityProviderStat>;
  windowSize: number;
  ttlMs: number;
}

export default function DiversityScoreCard() {
  const t = useTranslations("analytics");
  const [data, setData] = useState<DiversityReport | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;

    async function loadDiversity() {
      try {
        const res = await fetch("/api/analytics/diversity");
        if (!res.ok) {
          throw new Error(`Failed to fetch diversity analytics: ${res.status}`);
        }

        const json = (await res.json()) as DiversityReport;
        if (!cancelled) {
          setData(json);
        }
      } catch (error) {
        console.error(error);
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    }

    void loadDiversity();

    return () => {
      cancelled = true;
    };
  }, []);

  if (loading || !data) {
    return (
      <Card className="p-5 flex flex-col justify-center items-center min-h-[220px]">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
      </Card>
    );
  }

  const scorePercentage = Math.round((data.score || 0) * 100);

  let riskColor = "text-green-500";
  let gaugeColor = "bg-green-500";
  let riskLabel = "Healthy Distribution";

  if (scorePercentage < 40) {
    riskColor = "text-red-500";
    gaugeColor = "bg-red-500";
    riskLabel = "High Vendor Lock-in Risk";
  } else if (scorePercentage < 70) {
    riskColor = "text-amber-500";
    gaugeColor = "bg-amber-500";
    riskLabel = "Moderate Distribution";
  }

  const providerEntries = Object.entries(data.providers || {})
    .sort(([, a], [, b]) => b.share - a.share)
    .slice(0, 4);

  return (
    <Card className="p-5">
      {/* Header */}
      <div className="flex items-center justify-between gap-3 mb-4">
        <div className="flex items-center gap-2">
          <span className="material-symbols-outlined text-[20px] text-primary">pie_chart</span>
          <h3 className="font-semibold text-text-main">{t("diversityScoreTitle")}</h3>
          <span className="text-xs text-text-muted hidden sm:inline">
            — Provider concentration snapshot for the recent traffic window.
          </span>
        </div>
        <div className="flex items-center gap-3">
          <span className="text-xs text-text-muted hidden md:inline">
            Window: {data.windowSize} reqs · Last {Math.round(data.ttlMs / 60000)} mins
          </span>
          <span
            className={`shrink-0 rounded-full px-2.5 py-1 text-xs font-medium ${
              scorePercentage < 40
                ? "bg-red-500/10 text-red-500"
                : scorePercentage < 70
                  ? "bg-amber-500/10 text-amber-500"
                  : "bg-green-500/10 text-green-500"
            }`}
          >
            Shannon entropy
          </span>
        </div>
      </div>

      {/* Horizontal layout: gauge + risk label + provider bars */}
      <div className="flex flex-col sm:flex-row items-center gap-5">
        {/* Gauge */}
        <div className="relative shrink-0 h-20 w-20">
          <svg className="h-full w-full -rotate-90" viewBox="0 0 36 36">
            <path
              className="text-border/70"
              strokeWidth="3.5"
              stroke="currentColor"
              fill="none"
              d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
            />
            <path
              className={riskColor}
              strokeWidth="3.5"
              strokeDasharray={`${scorePercentage}, 100`}
              stroke="currentColor"
              fill="none"
              strokeLinecap="round"
              d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
            />
          </svg>
          <div className="absolute inset-0 flex flex-col items-center justify-center">
            <span className={`text-lg font-semibold tabular-nums ${riskColor}`}>
              {scorePercentage}%
            </span>
            <span className="text-[9px] uppercase tracking-[0.15em] text-text-muted">score</span>
          </div>
        </div>

        {/* Risk label */}
        <div className="shrink-0 text-center sm:text-left">
          <div className={`text-sm font-medium ${riskColor}`}>{riskLabel}</div>
          <div className="text-xs text-text-muted mt-0.5 max-w-[200px]">
            Higher values mean traffic is spread across multiple providers.
          </div>
        </div>

        {/* Divider */}
        <div className="hidden sm:block w-px h-14 bg-border/30 shrink-0" />

        {/* Provider bars */}
        <div className="flex-1 min-w-0 w-full">
          {providerEntries.length === 0 ? (
            <div className="text-sm text-text-muted text-center py-2">
              No recent usage data available.
            </div>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-2">
              {providerEntries.map(([provider, stat]) => (
                <div key={provider} className="space-y-1">
                  <div className="flex items-center justify-between gap-3 text-sm">
                    <span className="font-medium text-text-main capitalize truncate">
                      {provider}
                    </span>
                    <span className="tabular-nums text-text-muted shrink-0">
                      {Math.round(stat.share * 100)}%
                    </span>
                  </div>
                  <div className="h-1.5 rounded-full bg-surface/50 overflow-hidden">
                    <div
                      className={`h-full rounded-full ${gaugeColor}`}
                      style={{ width: `${Math.round(stat.share * 100)}%` }}
                    />
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </Card>
  );
}