"use client";

import * as React from "react";
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import {
  ForecastPeriod,
  ForecastData,
  TeamQuotaBreakdown,
} from "./types";
import { ForecastDimensionPanel } from "./forecast-dimension-panel";
import { cn } from "@/lib/utils";
import { ArrowRight } from "lucide-react";
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { ReactSelect } from "@/components/ui/react-select";
import { Loading } from "@/components/ui/loading";
import { useGetProfileQuery } from "@/api/rtk/auth-api";
import { useTeamsQuery } from "@/hooks/use-teams-query";
import { useForecastDataQuery } from "@/features/forecasts/hooks/use-forecast-data-query";
import { getApiEntityId } from "@/api/permissions/types";
import {
  getFirstAccessiblePath,
  hasPermission,
  filterTeamsVisibleToUser,
  canSeeAllTeamsInApp,
  unwrapPermissionSource,
  type PermissionSource,
} from "@/lib/permissions";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  Legend,
} from "recharts";

const FORECAST_PERIODS: ForecastPeriod[] = [
  "This Quarter",
  "This Month",
  "YTD",
  "Next Quarter",
];

const CATEGORY_CLS: Record<string, string> = {
  Won: "bg-emerald-100 text-emerald-600",
  Commit: "bg-indigo-100 text-indigo-600",
  "Best Case": "bg-violet-100 text-violet-600",
  Pipeline: "bg-amber-100 text-amber-600",
};

function isForbiddenError(error: Error | null | undefined): boolean {
  if (!error) return false;
  const msg = error.message.toLowerCase();
  return msg.includes("forbidden") || msg.includes("permission");
}

function fmtUSD(n: number) {
  return n >= 1000 ? `$${(n / 1000).toFixed(1)}M` : `$${n}K`;
}

export default function ForecastsPage() {
  const router = useRouter();
  const { data: session } = useSession();
  const backendUser = (session as { backendUser?: PermissionSource } | null)
    ?.backendUser;
  const { data: profile } = useGetProfileQuery();
  const permissionSource: PermissionSource = backendUser ?? profile ?? null;
  const viewerId =
    getApiEntityId(unwrapPermissionSource(permissionSource) ?? undefined) ?? "";

  const allowed = React.useMemo(
    () => hasPermission(permissionSource, "READ", "REPORT"),
    [permissionSource],
  );

  React.useEffect(() => {
    if (!permissionSource) return;
    if (!allowed) {
      router.replace(getFirstAccessiblePath(permissionSource));
    }
  }, [permissionSource, allowed, router]);

  const { data: teams = [] } = useTeamsQuery();
  const visibleTeams = React.useMemo(
    () => filterTeamsVisibleToUser(teams, viewerId, permissionSource),
    [teams, viewerId, permissionSource],
  );

  const defaultTeam = React.useMemo(
    () => (canSeeAllTeamsInApp(permissionSource) ? "all" : visibleTeams[0]?.id ?? "all"),
    [permissionSource, visibleTeams],
  );

  const [period, setPeriod] = React.useState<ForecastPeriod>("This Quarter");
  const [team, setTeam] = React.useState(defaultTeam);

  React.useEffect(() => {
    setTeam(defaultTeam);
  }, [defaultTeam]);

  const {
    data,
    isLoading,
    isFetching,
    isError,
    error,
    refetch,
  } = useForecastDataQuery(
    { range: period, teamFilter: team },
    { enabled: allowed },
  );

  const teamFilterOptions = React.useMemo(() => {
    const options = visibleTeams.map((t) => ({ value: t.id, label: t.name }));
    if (canSeeAllTeamsInApp(permissionSource)) {
      return [{ value: "all", label: "All Teams" }, ...options];
    }
    return options.length > 0 ? options : [{ value: "all", label: "All Teams" }];
  }, [visibleTeams, permissionSource]);

  const periodFilterOptions = React.useMemo(
    () => FORECAST_PERIODS.map((p) => ({ value: p, label: p })),
    [],
  );

  if (!permissionSource || !allowed) {
    return (
      <Loading variant="api" layout="page" message="Checking access..." />
    );
  }

  const loading = (isLoading || isFetching) && !data;
  if (loading) {
    return (
      <Loading variant="api" layout="page" message="Loading forecasts..." />
    );
  }

  if (isError || !data) {
    const isForbidden = isForbiddenError(error);
    return (
      <div className="flex flex-col items-center justify-center min-h-[400px] gap-4 w-full">
        <p className="text-sm font-semibold text-rose-500 font-['Lexend']">
          {isForbidden
            ? "You do not have permission to view forecasts."
            : "Failed to load forecasts. Please try again."}
        </p>
        {!isForbidden ? (
          <Button size="sm" onClick={() => void refetch()}>
            Reload
          </Button>
        ) : null}
      </div>
    );
  }

  return (
    <ForecastsPageContent
      data={data}
      period={period}
      team={team}
      teams={data.teams}
      onPeriodChange={setPeriod}
      onTeamChange={setTeam}
      teamFilterOptions={teamFilterOptions}
      periodFilterOptions={periodFilterOptions}
    />
  );
}

type ForecastsPageContentProps = {
  data: ForecastData;
  period: ForecastPeriod;
  team: string;
  teams: TeamQuotaBreakdown[];
  onPeriodChange: (period: ForecastPeriod) => void;
  onTeamChange: (team: string) => void;
  teamFilterOptions: Array<{ value: string; label: string }>;
  periodFilterOptions: Array<{ value: string; label: string }>;
};

function ForecastsPageContent({
  data,
  period,
  team,
  teams,
  onPeriodChange,
  onTeamChange,
  teamFilterOptions,
  periodFilterOptions,
}: ForecastsPageContentProps) {
  const hero = data.hero;
  const teamFilteredReps =
    team === "all"
      ? data.reps
      : data.reps.filter((r) => {
          const t = teams.find((x) => x.id === team);
          return t?.reps.includes(r.name);
        });

  const heroAttained =
    team === "all"
      ? parseFloat(hero.attained)
      : teamFilteredReps.reduce((s, r) => s + parseFloat(r.attained), 0);
  const heroTarget =
    team === "all"
      ? parseFloat(hero.target)
      : teamFilteredReps.reduce((s, r) => s + parseFloat(r.target), 0);
  const heroPct = heroTarget > 0 ? Math.round((heroAttained / heroTarget) * 100) : 0;

  const heroProjected =
    team === "all"
      ? parseFloat(hero.projectedRevenue)
      : heroAttained +
        data.deals
          .filter((d) => teamFilteredReps.some((r) => r.name === d.rep))
          .reduce((s, d) => s + parseFloat(d.weighted ?? "0"), 0);

  const chartData = data.trend.labels.map((label, i) => ({
    name: label,
    actual: data.trend.actual[i] ?? 0,
    target: data.trend.target[i] ?? 0,
    projected: data.trend.projected[i] ?? 0,
  }));

  const fcTotal = data.fc.reduce((s, x) => s + x.val, 0) || 1;
  const selectedTeamName =
    team === "all" ? null : teams.find((t) => t.id === team)?.name;

  return (
    <div className="flex flex-col h-full gap-4.5 p-1 sm:p-2 md:p-4 animate-in fade-in duration-500 overflow-hidden">
      <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4 border-b border-border/60 pb-6">
        <div className="flex flex-col">
          <h1 className="text-[21px] font-extrabold text-text font-['Lexend'] tracking-tight">
            Forecasts
          </h1>
          <p className="text-[12px] text-gray-700 font-normal mt-0.5">
            <span className="font-bold text-accent font-['Lexend_Deca']">{period}</span>
            {" · "}
            Revenue projection & quota tracking
          </p>
          <p className="text-[10px] text-gray-600 mt-1 max-w-xl">
            Blended forecast: 60% deal/stage probability + 40% historical stage win rate
            ({data.model.globalWinRatePct}% global win rate).
          </p>
        </div>

        <div className="flex flex-wrap items-center gap-2.5 w-full lg:w-auto">
          <ReactSelect
            value={team}
            onValueChange={onTeamChange}
            options={teamFilterOptions}
            placeholder="All Teams"
            triggerClassName="h-9 rounded-xl text-[12px] font-['Lexend_Deca'] font-semibold min-w-[120px]"
          />
          <ReactSelect
            value={period}
            onValueChange={(val) => onPeriodChange(val as ForecastPeriod)}
            options={periodFilterOptions}
            placeholder="Period"
            triggerClassName="h-9 rounded-xl text-[12px] font-['Lexend_Deca'] min-w-[120px]"
          />
        </div>
      </div>

      <div className="flex-1 min-h-0 overflow-y-auto scrollbar-themed pb-6">
        <div className="flex flex-col gap-5">
          <div className="relative bg-linear-to-br from-accent to-[#8B83FF] rounded-2xl p-8 pt-7 text-white shadow-lg overflow-hidden">
            <div className="absolute top-[-50px] right-[-50px] size-48 rounded-full bg-white/5" />
            <div className="absolute bottom-[-40px] right-60 size-40 rounded-full bg-white/5" />

            <div className="relative z-10">
              <label className="text-[10px] font-extrabold uppercase tracking-[0.15em] text-white/70 font-['Lexend_Deca']">
                {team === "all"
                  ? "Global Quota Attainment"
                  : `${selectedTeamName ?? "Team"} Quota Attainment`}
              </label>
              <div className="text-[44px] font-extrabold font-['Lexend'] leading-tight my-1.5">
                {heroPct}%
              </div>
              <p className="text-[13px] font-medium text-white/80">
                ${heroAttained.toFixed(1)}M attained · ${heroProjected.toFixed(1)}M projected
                of ${heroTarget.toFixed(1)}M target
              </p>

              <div className="mt-5 h-2.5 rounded-full bg-white/20 overflow-hidden">
                <div
                  className="h-full bg-white rounded-full transition-all duration-1000 ease-out"
                  style={{ width: `${Math.min(heroPct, 100)}%` }}
                />
              </div>

              <div className="flex justify-between items-center mt-3 text-[10px] font-bold font-['Lexend_Deca'] text-white/60 uppercase">
                <span>${heroAttained.toFixed(1)}M closed</span>
                <span>${heroTarget.toFixed(1)}M target</span>
              </div>

              <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mt-6 pt-5 border-t border-white/10">
                <HeroStat label="Commit" value={fmtUSD(parseFloat(hero.commit) * 1000)} />
                <HeroStat label="Best Case" value={fmtUSD(parseFloat(hero.best) * 1000)} />
                <HeroStat label="Pipeline" value={fmtUSD(parseFloat(hero.pipeline) * 1000)} />
                <HeroStat
                  label="Days Left"
                  value={hero.days > 0 ? hero.days.toString() : "Done"}
                />
              </div>
            </div>
          </div>

          <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
            <div className="bg-white rounded-xl border border-border p-6 shadow-sm">
              <h3 className="text-[13px] font-extrabold text-text font-['Lexend'] mb-1">
                Rep Quota Tracker
              </h3>
              <p className="text-[11px] text-gray-700 font-medium mb-6 uppercase tracking-tight">
                {period} · Individual Attainment
              </p>

              {teamFilteredReps.length === 0 ? (
                <p className="text-sm text-gray-600">No rep quota data for this period.</p>
              ) : (
                <div className="space-y-4.5">
                  {teamFilteredReps.map((r) => {
                    const qc =
                      r.pct >= 90 ? "#22C55E" : r.pct >= 70 ? "#6C63FF" : "#F59E0B";
                    return (
                      <div key={r.name} className="flex flex-col gap-2">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-2.5">
                            <div className="size-8 rounded-full bg-accent/10 text-accent text-[10px] font-extrabold flex items-center justify-center shrink-0">
                              {r.av}
                            </div>
                            <span className="text-[13px] font-bold text-gray-700">{r.name}</span>
                          </div>
                          <span
                            className="text-[14px] font-extrabold font-['Lexend_Deca']"
                            style={{ color: qc }}
                          >
                            {r.pct}%
                          </span>
                        </div>
                        <div className="h-1.5 w-full bg-bg rounded-full overflow-hidden">
                          <div
                            className="h-full rounded-full transition-all duration-700 ease-out"
                            style={{
                              width: `${Math.min(r.pct, 100)}%`,
                              backgroundColor: qc,
                            }}
                          />
                        </div>
                        <div className="flex justify-between items-center text-[10px] font-bold text-gray-700 font-['Lexend_Deca'] uppercase">
                          <span>Attained: ${r.attained}M</span>
                          <span>Target: ${r.target}M</span>
                        </div>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>

            <div className="bg-white rounded-xl border border-border p-6 shadow-sm flex flex-col">
              <h3 className="text-[13px] font-extrabold text-text font-['Lexend'] mb-1">
                Revenue Forecast Breakdown
              </h3>
              <p className="text-[11px] text-gray-700 font-medium mb-5 uppercase tracking-tight">
                Weighted Pipeline · {period}
              </p>

              {data.fc.length === 0 ? (
                <p className="text-sm text-gray-600">No pipeline forecast data yet.</p>
              ) : (
                <>
                  <div className="w-full h-5 rounded-lg bg-bg overflow-hidden flex mb-4">
                    {data.fc.map((f) => (
                      <div
                        key={f.name}
                        className="h-full transition-all duration-700"
                        style={{
                          width: `${((f.val / fcTotal) * 100).toFixed(1)}%`,
                          backgroundColor: f.fill,
                        }}
                        title={`${f.name}: $${f.val}M`}
                      />
                    ))}
                  </div>

                  <div className="grid grid-cols-2 gap-y-2 gap-x-4 mb-6">
                    {data.fc.map((f) => (
                      <div key={f.name} className="flex items-center justify-between">
                        <div className="flex items-center gap-2 text-[12px] text-gray-700 font-medium">
                          <div
                            className="size-2 rounded shrink-0"
                            style={{ backgroundColor: f.fill }}
                          />
                          {f.name}
                        </div>
                        <span className="text-[12px] font-extrabold text-text font-['Lexend_Deca']">
                          $ {f.val}M
                        </span>
                      </div>
                    ))}
                  </div>
                </>
              )}

              <div className="flex-1 min-h-[140px] mt-2">
                {chartData.length === 0 ? (
                  <p className="text-sm text-gray-600">No trend data for this period.</p>
                ) : (
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart data={chartData}>
                      <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#E4E6EF88" />
                      <XAxis
                        dataKey="name"
                        axisLine={false}
                        tickLine={false}
                        tick={{ fontSize: 10, fill: "#6B7280", fontWeight: "bold" }}
                        dy={5}
                      />
                      <YAxis
                        axisLine={false}
                        tickLine={false}
                        tick={{ fontSize: 10, fill: "#6B7280" }}
                        dx={-5}
                      />
                      <Tooltip
                        cursor={{ fill: "#6C63FF08" }}
                        contentStyle={{
                          borderRadius: "12px",
                          border: "none",
                          boxShadow: "0 4px 14px rgba(0,0,0,0.15)",
                          padding: "12px",
                          backgroundColor: "#0F1117",
                          color: "#fff",
                        }}
                        itemStyle={{ color: "#fff", fontSize: "12px", fontWeight: "bold" }}
                        labelStyle={{ display: "none" }}
                      />
                      <Legend wrapperStyle={{ fontSize: 10 }} />
                      <Bar dataKey="actual" fill="#6C63FF" radius={[5, 5, 0, 0]} barSize={20} name="Actual" />
                      <Bar dataKey="target" fill="#E2E8F0" radius={[5, 5, 0, 0]} barSize={20} name="Target" />
                      <Bar dataKey="projected" fill="#A99EFF" radius={[5, 5, 0, 0]} barSize={20} name="Projected" />
                    </BarChart>
                  </ResponsiveContainer>
                )}
              </div>
            </div>
          </div>

          <div className="bg-white rounded-xl border border-border shadow-sm overflow-hidden">
            <div className="p-6 pb-3">
              <h3 className="text-[13px] font-extrabold text-text font-['Lexend'] mb-1">
                Deal-Level Forecast
              </h3>
              <p className="text-[11px] text-gray-700 font-medium uppercase tracking-tight">
                Top deals by weighted value
              </p>
            </div>
            <div className="overflow-x-auto scrollbar-themed">
              {data.deals.length === 0 ? (
                <p className="px-6 pb-6 text-sm text-gray-600">No open pipeline deals in range.</p>
              ) : (
                <Table>
                  <TableHeader>
                    <TableRow className="bg-bg/40 hover:bg-transparent cursor-default">
                      <TableHead>Deal</TableHead>
                      <TableHead>Rep</TableHead>
                      <TableHead>Stage</TableHead>
                      <TableHead>Value</TableHead>
                      <TableHead>Prob.</TableHead>
                      <TableHead>Weighted</TableHead>
                      <TableHead>Category</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody className="text-[13px] font-['Lexend']">
                    {data.deals.map((r) => {
                      const weighted =
                        r.weighted ??
                        ((parseFloat(r.val) * (r.effectiveP ?? r.prob)) / 100).toFixed(1);
                      return (
                        <TableRow key={`${r.deal}-${r.rep}`}>
                          <TableCell className="font-bold text-gray-700">{r.deal}</TableCell>
                          <TableCell>
                            <div className="flex items-center gap-2">
                              <div className="size-6 rounded-full bg-bg text-gray-700 text-[10px] font-bold flex items-center justify-center shrink-0">
                                {r.av}
                              </div>
                              <span className="text-[11px] font-semibold">
                                {r.rep.split(" ")[0]}
                              </span>
                            </div>
                          </TableCell>
                          <TableCell className="text-gray-700 text-[11px] font-medium">
                            {r.stage}
                          </TableCell>
                          <TableCell className="font-['Lexend_Deca'] font-extrabold text-accent">
                            $ {r.val}M
                          </TableCell>
                          <TableCell className="font-['Lexend_Deca'] font-bold text-gray-700">
                            {r.effectiveP ?? r.prob}%
                          </TableCell>
                          <TableCell className="font-['Lexend_Deca'] font-extrabold text-emerald-500">
                            $ {weighted}M
                          </TableCell>
                          <TableCell>
                            <span
                              className={cn(
                                "text-[9px] font-extrabold px-2.5 py-0.5 rounded-full uppercase tracking-wider",
                                CATEGORY_CLS[r.category] ?? CATEGORY_CLS.Pipeline,
                              )}
                            >
                              {r.category}
                            </span>
                          </TableCell>
                        </TableRow>
                      );
                    })}
                  </TableBody>
                </Table>
              )}
            </div>
          </div>

          <div className="bg-white rounded-xl border border-border p-6 shadow-sm">
            <h3 className="text-[13px] font-extrabold text-text font-['Lexend'] mb-1">
              Sales Velocity Metrics
            </h3>
            <p className="text-[11px] text-gray-700 font-medium mb-6 uppercase tracking-tight">
              Speed & Efficiency Indicators
            </p>

            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-3">
              {data.vel.map((v) => (
                <div
                  key={v.l}
                  className="bg-bg/40 border border-border p-3.5 rounded-xl flex flex-col gap-1 hover:bg-bg transition-colors"
                >
                  <span className="text-[16px] font-extrabold text-accent font-['Lexend'] tracking-tight">
                    {v.v}
                  </span>
                  <span className="text-[9px] font-bold text-gray-700 uppercase leading-tight font-['Lexend_Deca']">
                    {v.l}
                  </span>
                </div>
              ))}
            </div>
          </div>

          <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
            <ForecastDimensionPanel
              title="Service Sales vs Target"
              subtitle={`${period} · Attainment by service (proportional target)`}
              rows={data.serviceSales ?? []}
              emptyMessage="No service-attributed sales or pipeline for this period."
            />
            <ForecastDimensionPanel
              title="Lead Channel vs Target"
              subtitle={`${period} · Attainment by lead channel (proportional target)`}
              rows={data.leadChannels ?? []}
              emptyMessage="No lead-channel-attributed sales or pipeline for this period."
            />
          </div>

          <div className="flex flex-col gap-3.5">
            <h3 className="text-[13px] font-extrabold text-text font-['Lexend'] flex items-center gap-2 ml-1">
              Team Quota Breakdown <ArrowRight size={14} className="text-gray-700" />
            </h3>
            {teams.length === 0 ? (
              <p className="text-sm text-gray-600 ml-1">No teams configured.</p>
            ) : (
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                {teams.map((teamItem) => (
                  <TeamQuotaCard
                    key={teamItem.id}
                    teamItem={teamItem}
                    reps={data.reps}
                    period={period}
                  />
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function TeamQuotaCard({
  teamItem,
  reps,
  period,
}: {
  teamItem: TeamQuotaBreakdown;
  reps: ForecastData["reps"];
  period: string;
}) {
  const teamReps = reps.filter((r) => teamItem.reps.includes(r.name));
  const teamAttained = teamReps.reduce((s, r) => s + parseFloat(r.attained), 0);
  const teamTarget = teamReps.reduce((s, r) => s + parseFloat(r.target), 0);
  const teamPctResult =
    teamTarget > 0 ? Math.round((teamAttained / teamTarget) * 100) : 0;
  const tc =
    teamPctResult >= 90 ? "#22C55E" : teamPctResult >= 70 ? "#6C63FF" : "#F59E0B";

  return (
    <div className="bg-white rounded-xl border border-border p-5 shadow-sm hover:border-accent/40 hover:shadow-premium transition-all">
      <div className="flex items-center justify-between mb-5">
        <div className="flex items-center gap-2">
          <div
            className="size-2.5 rounded-full"
            style={{ backgroundColor: teamItem.color }}
          />
          <span className="text-[14px] font-extrabold text-text leading-none">
            {teamItem.name}
          </span>
        </div>
        <span className="text-[10px] font-bold text-gray-700 uppercase tracking-wider">
          Lead: {teamItem.lead.split(" ")[0]}
        </span>
      </div>

      <div className="flex justify-between items-end mb-1.5">
        <span className="text-[10px] font-bold text-gray-700 uppercase tracking-[0.06em]">
          Attainment · {period}
        </span>
        <span
          className="text-[16px] font-extrabold font-['Lexend_Deca']"
          style={{ color: tc }}
        >
          {teamPctResult}%
        </span>
      </div>
      <div className="h-2 w-full bg-bg rounded-full overflow-hidden mb-5">
        <div
          className="h-full rounded-full transition-all duration-700 ease-out"
          style={{ width: `${Math.min(teamPctResult, 100)}%`, backgroundColor: tc }}
        />
      </div>

      <div className="space-y-3.5 pt-4 border-t border-bg">
        {teamReps.length === 0 ? (
          <p className="text-[11px] text-gray-600">No rep targets for this team.</p>
        ) : (
          teamReps.map((r) => (
            <div key={r.name} className="flex items-center justify-between">
              <div className="flex items-center gap-2.5">
                <div className="size-7 rounded-full bg-accent/10 text-accent text-[9px] font-extrabold flex items-center justify-center shrink-0">
                  {r.name
                    .split(" ")
                    .map((n) => n[0])
                    .join("")}
                </div>
                <div className="flex flex-col">
                  <span className="text-[11px] font-bold text-gray-700 leading-tight">
                    {r.name}
                  </span>
                  <span className="text-[10px] font-bold text-gray-700/60 uppercase leading-none mt-0.5">
                    {r.name === teamItem.lead ? "Lead" : `${r.attained}M`}
                  </span>
                </div>
              </div>
              <span
                className={cn(
                  "text-[11px] font-extrabold font-['Lexend_Deca']",
                  r.pct >= 90 ? "text-emerald-500" : "text-gray-700",
                )}
              >
                {r.pct}%
              </span>
            </div>
          ))
        )}
      </div>
    </div>
  );
}

function HeroStat({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex flex-col gap-1.5">
      <label className="text-[9px] font-extrabold text-white/50 uppercase tracking-widest font-['Lexend_Deca'] leading-none">
        {label}
      </label>
      <div className="text-[20px] font-extrabold text-white font-['Lexend'] tracking-tight">
        {value}
      </div>
    </div>
  );
}