"use client";

import { useMemo, useState, type ReactNode } from "react";
import {
  ArrowUpRight,
  BarChart3,
  Building2,
  CheckCircle2,
  Database,
  Euro,
  Lightbulb,
  Plus,
  Target,
  TrendingDown,
  TrendingUp,
} from "lucide-react";
import { useInsights, type InsightKpiSummary } from "@/hooks/use-insights";
import type { InsightMetricValueType } from "@/types";

const SHELL = "min-h-screen bg-background px-4 py-8 text-white md:px-8";
const CARD =
  "rounded-[24px] border border-white/[0.08] bg-[radial-gradient(ellipse_at_top_left,rgba(255,255,255,0.035),rgba(10,8,18,0.98)_56%,rgba(9,8,15,1)_100%)]";
const INPUT =
  "w-full rounded-xl border border-white/[0.08] bg-white/[0.035] px-3 py-2 text-sm text-white outline-none placeholder:text-white/25 transition-colors focus:border-sky-500/[0.30]";

function todayStr() {
  return new Date().toISOString().split("T")[0];
}

function monthStartStr() {
  const date = new Date();
  return new Date(date.getFullYear(), date.getMonth(), 1).toISOString().split("T")[0];
}

function monthEndStr() {
  const date = new Date();
  return new Date(date.getFullYear(), date.getMonth() + 1, 0).toISOString().split("T")[0];
}

function formatMetricValue(value: number, valueType: InsightMetricValueType, unit = "") {
  if (valueType === "currency") {
    return new Intl.NumberFormat("de-DE", { currency: "EUR", style: "currency" }).format(value);
  }

  if (valueType === "percent") {
    return `${new Intl.NumberFormat("de-DE", { maximumFractionDigits: 1 }).format(value)}%`;
  }

  if (valueType === "duration") {
    return `${new Intl.NumberFormat("de-DE", { maximumFractionDigits: 1 }).format(value)} h`;
  }

  return `${new Intl.NumberFormat("de-DE", { maximumFractionDigits: 2 }).format(value)}${unit ? ` ${unit}` : ""}`;
}

function formatCents(value: number) {
  return new Intl.NumberFormat("de-DE", { currency: "EUR", style: "currency" }).format(value / 100);
}

function getDelta(summary: InsightKpiSummary) {
  if (summary.previousValue === null || summary.previousValue === 0) return null;
  return ((summary.currentValue - summary.previousValue) / Math.abs(summary.previousValue)) * 100;
}

function KpiCard({ summary }: { summary: InsightKpiSummary }) {
  const delta = getDelta(summary);
  const positive = delta !== null && delta >= 0;
  const isGood = summary.metric.direction === "down" ? !positive : positive;

  return (
    <div className="rounded-[22px] border border-white/[0.07] bg-white/[0.025] p-5">
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <p className="truncate text-sm font-semibold text-white">{summary.metric.name}</p>
          <p className="mt-1 text-[11px] uppercase tracking-widest text-white/25">{summary.metric.category}</p>
        </div>
        <div
          className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border"
          style={{
            backgroundColor: `${summary.metric.color}18`,
            borderColor: `${summary.metric.color}44`,
            color: summary.metric.color,
          }}
        >
          <BarChart3 size={15} />
        </div>
      </div>
      <p className="mt-5 text-2xl font-black tracking-tight text-white">
        {formatMetricValue(summary.currentValue, summary.metric.value_type, summary.metric.unit)}
      </p>
      <div className="mt-3 flex items-center gap-2 text-xs">
        {delta === null ? (
          <span className="text-white/28">Noch kein Vergleichszeitraum</span>
        ) : (
          <>
            {positive ? <TrendingUp size={14} /> : <TrendingDown size={14} />}
            <span className={isGood ? "text-emerald-300" : "text-rose-300"}>
              {positive ? "+" : ""}
              {delta.toFixed(1)}% vs. vorheriger Zeitraum
            </span>
          </>
        )}
      </div>
      <div className="mt-4 flex gap-2">
        <button className="rounded-xl border border-white/[0.07] bg-white/[0.03] px-3 py-1.5 text-[12px] font-semibold text-white/45 transition-colors hover:text-white/70">
          Warum?
        </button>
        <button className="rounded-xl border border-sky-500/[0.16] bg-sky-500/[0.08] px-3 py-1.5 text-[12px] font-semibold text-sky-300 transition-colors hover:bg-sky-500/[0.14]">
          Was tun?
        </button>
      </div>
    </div>
  );
}

export default function InsightsPage() {
  const {
    createEntity,
    createGoal,
    createMetricDefinition,
    createMetricEntry,
    entities,
    error,
    getOperationalOverview,
    getKpiSummaries,
    goals,
    loading,
    metrics,
    portfolioStats,
    recommendations,
  } = useInsights();

  const [entityId, setEntityId] = useState<string | "all">("all");
  const [periodStart, setPeriodStart] = useState(monthStartStr());
  const [periodEnd, setPeriodEnd] = useState(todayStr());
  const [entityName, setEntityName] = useState("");
  const [metricName, setMetricName] = useState("");
  const [metricType, setMetricType] = useState<InsightMetricValueType>("number");
  const [entryMetricId, setEntryMetricId] = useState("");
  const [entryValue, setEntryValue] = useState("");
  const [goalName, setGoalName] = useState("");
  const [goalMetricId, setGoalMetricId] = useState("");
  const [goalTarget, setGoalTarget] = useState("");
  const [saving, setSaving] = useState<string | null>(null);
  const [actionError, setActionError] = useState<string | null>(null);

  const kpis = useMemo(
    () =>
      getKpiSummaries({
        end: periodEnd,
        entityId,
        start: periodStart,
      }).filter((summary) => summary.entries.length > 0 || summary.currentValue !== 0),
    [entityId, getKpiSummaries, periodEnd, periodStart],
  );

  const operational = useMemo(
    () => getOperationalOverview({ end: periodEnd, start: periodStart }),
    [getOperationalOverview, periodEnd, periodStart],
  );

  const hasOperationalSignals =
    operational.leads > 0 ||
    operational.offers > 0 ||
    operational.openInvoiceCents > 0 ||
    operational.paidRevenueCents > 0 ||
    operational.incomingOpenCents > 0;

  const visibleGoals = useMemo(
    () => goals.filter((goal) => entityId === "all" || goal.business_entity_id === entityId),
    [entityId, goals],
  );

  const entityOptions = entities.filter((entity) => entity.entity_type !== "portfolio");

  async function runSaving(key: string, action: () => Promise<void>) {
    setSaving(key);
    setActionError(null);
    try {
      await action();
    } catch (saveError) {
      setActionError(saveError instanceof Error ? saveError.message : "Aktion konnte nicht gespeichert werden.");
    } finally {
      setSaving(null);
    }
  }

  return (
    <div className={SHELL}>
      <div className="mx-auto max-w-7xl space-y-6">
        <div className="rounded-[30px] border border-sky-500/[0.14] bg-[radial-gradient(ellipse_at_top_left,rgba(14,165,233,0.10),rgba(10,8,18,0.98)_58%,rgba(9,8,15,1)_100%)] p-8">
          <div className="flex flex-wrap items-start justify-between gap-5">
            <div>
              <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-sky-500/20 bg-sky-500/[0.08] px-3 py-1">
                <BarChart3 className="h-3.5 w-3.5 text-sky-400" />
                <span className="text-[10px] font-bold uppercase tracking-[0.18em] text-sky-300">Insights</span>
              </div>
              <h1 className="text-[34px] font-black leading-none text-white">Business Intelligence</h1>
              <p className="mt-2 max-w-2xl text-sm text-white/42">
                Data {"->"} Insight {"->"} Action {"->"} Result. Fuehre KPIs, Ziele, Leads und spaetere Integrationen in einem ruhigen Operating System zusammen.
              </p>
            </div>
            <div className="grid min-w-[280px] gap-3 sm:grid-cols-2">
              <select value={entityId} onChange={(event) => setEntityId(event.target.value)} className={INPUT}>
                <option value="all" className="bg-[#0a0a0d]">Alle Unternehmen</option>
                {entityOptions.map((entity) => (
                  <option key={entity.id} value={entity.id} className="bg-[#0a0a0d]">
                    {entity.name}
                  </option>
                ))}
              </select>
              <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
                <input type="date" value={periodStart} onChange={(event) => setPeriodStart(event.target.value)} className={INPUT} />
                <input type="date" value={periodEnd} onChange={(event) => setPeriodEnd(event.target.value)} className={INPUT} />
              </div>
            </div>
          </div>

          <div className="mt-8 grid gap-3 sm:grid-cols-2 xl:grid-cols-5">
            <StatCard icon={<Building2 size={15} />} label="Unternehmen" value={Math.max(portfolioStats.activeEntities, operational.activeCompanies)} />
            <StatCard icon={<BarChart3 size={15} />} label="KPI Werte" value={portfolioStats.entries + operational.leads + operational.offers} />
            <StatCard icon={<Target size={15} />} label="Aktive Ziele" value={portfolioStats.goals} />
            <StatCard icon={<Database size={15} />} label="Datenquellen" value={portfolioStats.sources + (hasOperationalSignals ? 2 : 0)} />
            <StatCard icon={<Lightbulb size={15} />} label="Empfehlungen" value={portfolioStats.openRecommendations} />
          </div>
        </div>

        {error ? (
          <div className="rounded-2xl border border-rose-500/[0.14] bg-rose-500/[0.06] px-4 py-3 text-sm text-rose-300">
            {error}
          </div>
        ) : null}

        {actionError ? (
          <div className="rounded-2xl border border-amber-500/[0.14] bg-amber-500/[0.06] px-4 py-3 text-sm text-amber-200">
            {actionError}
          </div>
        ) : null}

        <div className="grid gap-6 xl:grid-cols-[1fr_360px]">
          <div className="space-y-6">
            <section className={`${CARD} p-6`}>
              <div className="flex items-center justify-between gap-4">
                <div>
                  <p className="text-xs font-semibold uppercase tracking-widest text-white/30">Auto Insights</p>
                  <h2 className="mt-1 text-lg font-bold text-white">Live aus Leads, Angeboten & Rechnungen</h2>
                </div>
                <Euro className="h-5 w-5 text-white/25" />
              </div>

              {loading ? (
                <div className="mt-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
                  {Array.from({ length: 4 }).map((_, index) => (
                    <div key={index} className="h-28 animate-pulse rounded-[22px] border border-white/[0.06] bg-white/[0.02]" />
                  ))}
                </div>
              ) : hasOperationalSignals ? (
                <div className="mt-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
                  <SignalCard label="Leads" value={operational.leads} sub={`${operational.hotLeads} hot`} tone="sky" />
                  <SignalCard label="Pipeline" value={formatMetricValue(operational.pipelineValue, "currency")} sub={`${operational.wonLeads} gewonnen`} tone="emerald" />
                  <SignalCard label="Angebote" value={operational.offers} sub={formatCents(operational.offerVolumeCents)} tone="violet" />
                  <SignalCard label="Offene Rechnungen" value={formatCents(operational.openInvoiceCents)} sub={`Eingang offen: ${formatCents(operational.incomingOpenCents)}`} tone="amber" />
                  <SignalCard label="Bezahlter Umsatz" value={formatCents(operational.paidRevenueCents)} sub="aus ausgehenden Rechnungen" tone="emerald" />
                  <SignalCard label="Aktive Firmen" value={operational.activeCompanies} sub="aus Kunden/Leads erkannt" tone="sky" />
                </div>
              ) : (
                <div className="mt-5 rounded-2xl border border-dashed border-white/[0.08] bg-white/[0.02] p-6">
                  <p className="text-sm font-semibold text-white/45">Noch keine operativen Daten gefunden.</p>
                  <p className="mt-1 text-xs text-white/25">
                    Sobald du Leads, Angebote oder Rechnungen anlegst, erscheinen hier automatisch erste Statistiken.
                  </p>
                </div>
              )}
            </section>

            <section className={`${CARD} p-6`}>
              <div className="flex items-center justify-between gap-4">
                <div>
                  <p className="text-xs font-semibold uppercase tracking-widest text-white/30">Dashboard</p>
                  <h2 className="mt-1 text-lg font-bold text-white">KPI Karten</h2>
                </div>
                <button
                  onClick={() => {
                    setPeriodStart(monthStartStr());
                    setPeriodEnd(monthEndStr());
                  }}
                  className="rounded-xl border border-white/[0.08] bg-white/[0.03] px-3 py-2 text-xs font-semibold text-white/45 transition-colors hover:text-white/70"
                >
                  Dieser Monat
                </button>
              </div>

              {loading ? (
                <div className="mt-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                  {Array.from({ length: 6 }).map((_, index) => (
                    <div key={index} className="h-40 animate-pulse rounded-[22px] border border-white/[0.06] bg-white/[0.02]" />
                  ))}
                </div>
              ) : kpis.length === 0 ? (
                <div className="mt-5 rounded-2xl border border-dashed border-white/[0.08] bg-white/[0.02] p-8 text-center">
                  <p className="text-sm font-semibold text-white/45">Noch keine manuellen KPI-Werte vorhanden.</p>
                  <p className="mt-1 text-xs text-white/25">Die Auto Insights oben laufen bereits aus Leads/Rechnungen. Eigene KPIs kannst du rechts ergänzen.</p>
                </div>
              ) : (
                <div className="mt-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                  {kpis.map((summary) => (
                    <KpiCard key={summary.metric.id} summary={summary} />
                  ))}
                </div>
              )}
            </section>

            <section className={`${CARD} p-6`}>
              <div className="flex items-center justify-between gap-4">
                <div>
                  <p className="text-xs font-semibold uppercase tracking-widest text-white/30">Goals</p>
                  <h2 className="mt-1 text-lg font-bold text-white">Unternehmensziele</h2>
                </div>
                <Target className="h-5 w-5 text-white/25" />
              </div>
              <div className="mt-5 space-y-3">
                {visibleGoals.length === 0 ? (
                  <div className="rounded-2xl border border-dashed border-white/[0.08] bg-white/[0.02] p-6 text-center text-sm text-white/30">
                    Noch keine Ziele fuer diesen Blick.
                  </div>
                ) : (
                  visibleGoals.map((goal) => {
                    const progress = goal.target_value > 0 ? Math.min(100, (goal.current_value / goal.target_value) * 100) : 0;
                    const metric = metrics.find((entry) => entry.id === goal.metric_definition_id) || null;
                    return (
                      <div key={goal.id} className="rounded-2xl border border-white/[0.07] bg-white/[0.025] p-4">
                        <div className="flex items-start justify-between gap-3">
                          <div>
                            <p className="font-semibold text-white">{goal.name}</p>
                            <p className="mt-1 text-xs text-white/30">
                              {metric?.name || "Freies Ziel"} · bis {new Date(goal.period_end).toLocaleDateString("de-DE")}
                            </p>
                          </div>
                          <span className="rounded-full border border-emerald-500/[0.14] bg-emerald-500/[0.07] px-2.5 py-1 text-[11px] font-semibold text-emerald-300">
                            {progress.toFixed(0)}%
                          </span>
                        </div>
                        <div className="mt-4 h-2 overflow-hidden rounded-full bg-white/[0.06]">
                          <div className="h-full rounded-full bg-emerald-400" style={{ width: `${progress}%` }} />
                        </div>
                        <p className="mt-2 text-xs text-white/35">
                          {formatMetricValue(goal.current_value, metric?.value_type || "number", metric?.unit)} /{" "}
                          {formatMetricValue(goal.target_value, metric?.value_type || "number", metric?.unit)}
                        </p>
                      </div>
                    );
                  })
                )}
              </div>
            </section>
          </div>

          <aside className="space-y-5">
            <section className={`${CARD} p-5`}>
              <p className="text-xs font-semibold uppercase tracking-widest text-white/30">Setup</p>
              <h2 className="mt-1 text-base font-bold text-white">Unternehmen / Brand</h2>
              <div className="mt-4 space-y-3">
                <input
                  value={entityName}
                  onChange={(event) => setEntityName(event.target.value)}
                  placeholder="z. B. Autopark Schmidt"
                  className={INPUT}
                />
                <button
                  onClick={() =>
                    void runSaving("entity", async () => {
                      if (!entityName.trim()) return;
                      await createEntity({ name: entityName.trim() });
                      setEntityName("");
                    })
                  }
                  disabled={saving === "entity"}
                  className="inline-flex w-full items-center justify-center gap-2 rounded-xl border border-sky-500/[0.20] bg-sky-500/10 px-4 py-2 text-sm font-semibold text-sky-300 transition-colors hover:bg-sky-500/18 disabled:opacity-45"
                >
                  <Plus size={14} />
                  Unternehmen anlegen
                </button>
              </div>
            </section>

            <section className={`${CARD} p-5`}>
              <p className="text-xs font-semibold uppercase tracking-widest text-white/30">KPI</p>
              <h2 className="mt-1 text-base font-bold text-white">Kennzahl erstellen</h2>
              <div className="mt-4 space-y-3">
                <input value={metricName} onChange={(event) => setMetricName(event.target.value)} placeholder="z. B. Umsatz" className={INPUT} />
                <select value={metricType} onChange={(event) => setMetricType(event.target.value as InsightMetricValueType)} className={INPUT}>
                  <option value="number" className="bg-[#0a0a0d]">Zahl</option>
                  <option value="currency" className="bg-[#0a0a0d]">Euro</option>
                  <option value="percent" className="bg-[#0a0a0d]">Prozent</option>
                  <option value="duration" className="bg-[#0a0a0d]">Stunden</option>
                </select>
                <button
                  onClick={() =>
                    void runSaving("metric", async () => {
                      if (!metricName.trim()) return;
                      await createMetricDefinition({
                        business_entity_id: entityId === "all" ? null : entityId,
                        name: metricName.trim(),
                        value_type: metricType,
                      });
                      setMetricName("");
                      setMetricType("number");
                    })
                  }
                  disabled={saving === "metric"}
                  className="inline-flex w-full items-center justify-center gap-2 rounded-xl border border-violet-500/[0.20] bg-violet-500/10 px-4 py-2 text-sm font-semibold text-violet-300 transition-colors hover:bg-violet-500/18 disabled:opacity-45"
                >
                  <Plus size={14} />
                  KPI anlegen
                </button>
              </div>
            </section>

            <section className={`${CARD} p-5`}>
              <p className="text-xs font-semibold uppercase tracking-widest text-white/30">Manual Input</p>
              <h2 className="mt-1 text-base font-bold text-white">Wert eintragen</h2>
              <div className="mt-4 space-y-3">
                <select value={entryMetricId} onChange={(event) => setEntryMetricId(event.target.value)} className={INPUT}>
                  <option value="" className="bg-[#0a0a0d]">Kennzahl waehlen</option>
                  {metrics.map((metric) => (
                    <option key={metric.id} value={metric.id} className="bg-[#0a0a0d]">{metric.name}</option>
                  ))}
                </select>
                <input value={entryValue} onChange={(event) => setEntryValue(event.target.value)} placeholder="Wert" className={INPUT} />
                <button
                  onClick={() =>
                    void runSaving("entry", async () => {
                      const value = Number.parseFloat(entryValue.replace(",", "."));
                      if (!entryMetricId || !Number.isFinite(value)) return;
                      await createMetricEntry({
                        business_entity_id: entityId === "all" ? null : entityId,
                        metric_definition_id: entryMetricId,
                        period_end: periodEnd,
                        period_start: periodStart,
                        value,
                      });
                      setEntryValue("");
                    })
                  }
                  disabled={saving === "entry"}
                  className="inline-flex w-full items-center justify-center gap-2 rounded-xl border border-emerald-500/[0.20] bg-emerald-500/10 px-4 py-2 text-sm font-semibold text-emerald-300 transition-colors hover:bg-emerald-500/18 disabled:opacity-45"
                >
                  <CheckCircle2 size={14} />
                  Wert speichern
                </button>
              </div>
            </section>

            <section className={`${CARD} p-5`}>
              <p className="text-xs font-semibold uppercase tracking-widest text-white/30">Goal</p>
              <h2 className="mt-1 text-base font-bold text-white">Ziel anlegen</h2>
              <div className="mt-4 space-y-3">
                <input value={goalName} onChange={(event) => setGoalName(event.target.value)} placeholder="z. B. August Umsatz" className={INPUT} />
                <select value={goalMetricId} onChange={(event) => setGoalMetricId(event.target.value)} className={INPUT}>
                  <option value="" className="bg-[#0a0a0d]">Optionale KPI</option>
                  {metrics.map((metric) => (
                    <option key={metric.id} value={metric.id} className="bg-[#0a0a0d]">{metric.name}</option>
                  ))}
                </select>
                <input value={goalTarget} onChange={(event) => setGoalTarget(event.target.value)} placeholder="Zielwert" className={INPUT} />
                <button
                  onClick={() =>
                    void runSaving("goal", async () => {
                      const target = Number.parseFloat(goalTarget.replace(",", "."));
                      if (!goalName.trim() || !Number.isFinite(target)) return;
                      await createGoal({
                        business_entity_id: entityId === "all" ? null : entityId,
                        metric_definition_id: goalMetricId || null,
                        name: goalName.trim(),
                        period_end: monthEndStr(),
                        period_start: monthStartStr(),
                        target_value: target,
                      });
                      setGoalName("");
                      setGoalMetricId("");
                      setGoalTarget("");
                    })
                  }
                  disabled={saving === "goal"}
                  className="inline-flex w-full items-center justify-center gap-2 rounded-xl border border-amber-500/[0.20] bg-amber-500/10 px-4 py-2 text-sm font-semibold text-amber-300 transition-colors hover:bg-amber-500/18 disabled:opacity-45"
                >
                  <Target size={14} />
                  Ziel speichern
                </button>
              </div>
            </section>

            <section className={`${CARD} p-5`}>
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-xs font-semibold uppercase tracking-widest text-white/30">Actions</p>
                  <h2 className="mt-1 text-base font-bold text-white">Naechste Empfehlungen</h2>
                </div>
                <ArrowUpRight className="h-4 w-4 text-white/25" />
              </div>
              <div className="mt-4 space-y-3">
                {recommendations.length === 0 ? (
                  <div className="rounded-2xl border border-dashed border-white/[0.08] bg-white/[0.02] p-4 text-sm text-white/30">
                    Noch keine belastbaren Empfehlungen. Sobald genug Daten vorhanden sind, landen hier Chancen, Risiken und Aufgaben-Vorschlaege.
                  </div>
                ) : (
                  recommendations.slice(0, 3).map((recommendation) => (
                    <div key={recommendation.id} className="rounded-2xl border border-white/[0.07] bg-white/[0.025] p-4">
                      <p className="text-sm font-semibold text-white">{recommendation.title}</p>
                      <p className="mt-1 text-xs text-white/35">{recommendation.body}</p>
                      <button className="mt-3 rounded-xl border border-sky-500/[0.16] bg-sky-500/[0.08] px-3 py-1.5 text-[12px] font-semibold text-sky-300">
                        Als Aufgabe hinzufügen
                      </button>
                    </div>
                  ))
                )}
              </div>
            </section>
          </aside>
        </div>
      </div>
    </div>
  );
}

function StatCard({ icon, label, value }: { icon: ReactNode; label: string; value: number }) {
  return (
    <div className="rounded-2xl border border-white/[0.07] bg-white/[0.025] p-4">
      <div className="mb-3 flex h-8 w-8 items-center justify-center rounded-xl border border-white/[0.08] bg-white/[0.04] text-white/45">
        {icon}
      </div>
      <p className="text-xl font-black text-white">{value}</p>
      <p className="text-xs text-white/35">{label}</p>
    </div>
  );
}

function SignalCard({
  label,
  sub,
  tone,
  value,
}: {
  label: string;
  sub: string;
  tone: "amber" | "emerald" | "sky" | "violet";
  value: number | string;
}) {
  const toneClass = {
    amber: "border-amber-500/[0.14] bg-amber-500/[0.06] text-amber-300",
    emerald: "border-emerald-500/[0.14] bg-emerald-500/[0.06] text-emerald-300",
    sky: "border-sky-500/[0.14] bg-sky-500/[0.06] text-sky-300",
    violet: "border-violet-500/[0.14] bg-violet-500/[0.06] text-violet-300",
  }[tone];

  return (
    <div className={`rounded-2xl border p-4 ${toneClass}`}>
      <p className="text-[11px] font-semibold uppercase tracking-widest text-white/35">{label}</p>
      <p className="mt-3 text-xl font-black tabular-nums text-current">{value}</p>
      <p className="mt-1 text-xs text-white/35">{sub}</p>
    </div>
  );
}