Stirling-PDF/frontend/src/proprietary/components/shared/config/configSections/AdminUsageSection.tsx

import React, { useState, useEffect, useCallback } from "react";
import { Stack, Group, Text, Button, SegmentedControl, Loader, Alert, Card } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import usageAnalyticsService, { EndpointStatisticsResponse } from "@app/services/usageAnalyticsService";
import UsageAnalyticsChart from "@app/components/shared/config/configSections/usage/UsageAnalyticsChart";
import UsageAnalyticsTable from "@app/components/shared/config/configSections/usage/UsageAnalyticsTable";
import LocalIcon from "@app/components/shared/LocalIcon";
import { useLoginRequired } from "@app/hooks/useLoginRequired";
import LoginRequiredBanner from "@app/components/shared/config/LoginRequiredBanner";
import { useAppConfig } from "@app/contexts/AppConfigContext";
import EnterpriseRequiredBanner from "@app/components/shared/config/EnterpriseRequiredBanner";

const AdminUsageSection: React.FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const { loginEnabled } = useLoginRequired();
  const { config } = useAppConfig();
  const licenseType = config?.license ?? "NORMAL";
  const hasEnterpriseLicense = licenseType === "ENTERPRISE";
  const showDemoData = !loginEnabled || !hasEnterpriseLicense;
  const [data, setData] = useState<EndpointStatisticsResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [displayMode, setDisplayMode] = useState<"top10" | "top20" | "all">("top10");
  const [dataType, setDataType] = useState<"all" | "api" | "ui">("api");

  const buildDemoUsageData = useCallback((): EndpointStatisticsResponse => {
    const totalVisits = 15847;
    const allEndpoints = [
      { endpoint: "merge-pdfs", visits: 3245, percentage: (3245 / totalVisits) * 100 },
      { endpoint: "compress-pdf", visits: 2891, percentage: (2891 / totalVisits) * 100 },
      { endpoint: "pdf-to-img", visits: 2156, percentage: (2156 / totalVisits) * 100 },
      { endpoint: "split-pdf", visits: 1834, percentage: (1834 / totalVisits) * 100 },
      { endpoint: "rotate-pdf", visits: 1523, percentage: (1523 / totalVisits) * 100 },
      { endpoint: "ocr-pdf", visits: 1287, percentage: (1287 / totalVisits) * 100 },
      { endpoint: "add-watermark", visits: 945, percentage: (945 / totalVisits) * 100 },
      { endpoint: "extract-images", visits: 782, percentage: (782 / totalVisits) * 100 },
      { endpoint: "add-password", visits: 621, percentage: (621 / totalVisits) * 100 },
      { endpoint: "html-to-pdf", visits: 563, percentage: (563 / totalVisits) * 100 },
      { endpoint: "remove-password", visits: 487, percentage: (487 / totalVisits) * 100 },
      { endpoint: "pdf-to-pdfa", visits: 423, percentage: (423 / totalVisits) * 100 },
      { endpoint: "extract-pdf-metadata", visits: 356, percentage: (356 / totalVisits) * 100 },
      { endpoint: "add-page-numbers", visits: 298, percentage: (298 / totalVisits) * 100 },
      { endpoint: "crop", visits: 245, percentage: (245 / totalVisits) * 100 },
      { endpoint: "flatten", visits: 187, percentage: (187 / totalVisits) * 100 },
      { endpoint: "sanitize-pdf", visits: 134, percentage: (134 / totalVisits) * 100 },
      { endpoint: "auto-split-pdf", visits: 98, percentage: (98 / totalVisits) * 100 },
      { endpoint: "scale-pages", visits: 76, percentage: (76 / totalVisits) * 100 },
      { endpoint: "compare-pdfs", visits: 42, percentage: (42 / totalVisits) * 100 },
    ];

    let filteredEndpoints = allEndpoints;
    if (displayMode === "top10") {
      filteredEndpoints = allEndpoints.slice(0, 10);
    } else if (displayMode === "top20") {
      filteredEndpoints = allEndpoints.slice(0, 20);
    }

    return {
      totalVisits,
      totalEndpoints: filteredEndpoints.length,
      endpoints: filteredEndpoints,
    };
  }, [displayMode]);

  const fetchData = useCallback(async () => {
    try {
      setLoading(true);
      setError(null);

      const limit = displayMode === "all" ? undefined : displayMode === "top10" ? 10 : 20;
      const response = await usageAnalyticsService.getEndpointStatistics(limit, dataType);

      setData(response);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to load usage statistics");
    } finally {
      setLoading(false);
    }
  }, [dataType, displayMode]);

  useEffect(() => {
    if (!showDemoData) {
      fetchData();
      return;
    }

    // Provide example usage analytics data when running in demo mode
    setError(null);
    setData(buildDemoUsageData());
    setLoading(false);
  }, [buildDemoUsageData, fetchData, showDemoData]);

  const handleRefresh = () => {
    if (showDemoData) {
      setData(buildDemoUsageData());
      return;
    }

    fetchData();
  };

  const getDisplayModeLabel = () => {
    switch (displayMode) {
      case "top10":
        return t("usage.showing.top10", "Top 10");
      case "top20":
        return t("usage.showing.top20", "Top 20");
      case "all":
        return t("usage.showing.all", "All");
      default:
        return "";
    }
  };

  // Override loading state when showing demo data
  const actualLoading = showDemoData ? false : loading;

  // Early returns for loading/error states
  if (actualLoading) {
    return (
      <div style={{ display: "flex", justifyContent: "center", padding: "2rem" }}>
        <Loader size="lg" />
      </div>
    );
  }

  if (error) {
    return (
      <Alert color="red" title={t("usage.error", "Error loading usage statistics")}>
        {error}
      </Alert>
    );
  }

  if (!data) {
    return (
      <Alert color="yellow" title={t("usage.noData", "No data available")}>
        {t("usage.noDataMessage", "No usage statistics are currently available.")}
      </Alert>
    );
  }

  const endpoints = (data?.endpoints ?? []).map((endpoint) => ({
    endpoint: endpoint.endpoint ?? t("usage.table.unknownEndpoint", "Unknown endpoint"),
    visits: Number.isFinite(endpoint.visits) ? Math.max(0, endpoint.visits) : 0,
    percentage: Number.isFinite(endpoint.percentage) ? Math.max(0, endpoint.percentage) : 0,
  }));

  const chartData = endpoints.map((e) => ({
    label: e.endpoint,
    value: Number.isFinite(e.visits) ? Math.max(0, e.visits) : 0,
  }));

  const displayedVisits = endpoints.reduce((sum, e) => sum + e.visits, 0);
  const totalVisits = Number.isFinite(data?.totalVisits) ? Math.max(0, data?.totalVisits ?? 0) : displayedVisits;
  const totalEndpoints = Number.isFinite(data?.totalEndpoints) ? Math.max(0, data?.totalEndpoints ?? 0) : endpoints.length;

  const displayedPercentage = totalVisits > 0 ? ((displayedVisits / (totalVisits || 1)) * 100).toFixed(1) : "0";

  return (
    <Stack gap="lg">
      <LoginRequiredBanner show={!loginEnabled} />
      <EnterpriseRequiredBanner
        show={!hasEnterpriseLicense}
        featureName={t("settings.licensingAnalytics.usageAnalytics", "Usage Analytics")}
      />

      {/* Info banner about usage analytics and audit relationship */}
      {loginEnabled && hasEnterpriseLicense && (
        <Alert
          icon={<LocalIcon icon="info" width="1.2rem" height="1.2rem" />}
          title={t("usage.aboutUsageAnalytics", "About Usage Analytics")}
          color="cyan"
          variant="light"
        >
          <Stack gap="xs">
            <Text size="sm">
              {t(
                "usage.usageAnalyticsExplanation",
                "Usage analytics track endpoint requests and tool usage patterns. Combined with the Audit Logging dashboard, you get complete visibility into system activity, performance, and security events.",
              )}
            </Text>
            <Group gap="sm">
              <Button
                variant="light"
                size="xs"
                onClick={() => navigate("/settings/adminSecurity")}
                rightSection={<LocalIcon icon="arrow-forward" width="0.9rem" height="0.9rem" />}
              >
                {t("usage.configureSettings", "Configure Analytics Settings")}
              </Button>
              <Button
                variant="light"
                size="xs"
                onClick={() => navigate("/settings/adminSecurity#auditLogging")}
                rightSection={<LocalIcon icon="arrow-forward" width="0.9rem" height="0.9rem" />}
              >
                {t("usage.viewAuditLogs", "View Audit Logs")}
              </Button>
            </Group>
          </Stack>
        </Alert>
      )}

      {/* Controls */}
      <Card padding="lg" radius="md" withBorder>
        <Stack gap="md">
          <Group justify="space-between" wrap="wrap">
            <Group>
              <SegmentedControl
                value={displayMode}
                onChange={(value) => setDisplayMode(value as "top10" | "top20" | "all")}
                disabled={showDemoData}
                data={[
                  {
                    value: "top10",
                    label: t("usage.controls.top10", "Top 10"),
                  },
                  {
                    value: "top20",
                    label: t("usage.controls.top20", "Top 20"),
                  },
                  {
                    value: "all",
                    label: t("usage.controls.all", "All"),
                  },
                ]}
              />
              <Button
                variant="outline"
                leftSection={<LocalIcon icon="refresh" width="1rem" height="1rem" />}
                onClick={handleRefresh}
                loading={loading}
                disabled={showDemoData}
              >
                {t("usage.controls.refresh", "Refresh")}
              </Button>
            </Group>
          </Group>

          <Group>
            <Text size="sm" fw={500}>
              {t("usage.controls.dataTypeLabel", "Data Type:")}
            </Text>
            <SegmentedControl
              value={dataType}
              onChange={(value) => setDataType(value as "all" | "api" | "ui")}
              disabled={showDemoData}
              data={[
                {
                  value: "all",
                  label: t("usage.controls.dataType.all", "All"),
                },
                {
                  value: "api",
                  label: t("usage.controls.dataType.api", "API"),
                },
                {
                  value: "ui",
                  label: t("usage.controls.dataType.ui", "UI"),
                },
              ]}
            />
          </Group>

          {/* Statistics Summary */}
          <Group gap="xl" style={{ flexWrap: "wrap" }}>
            <div>
              <Text size="sm" c="dimmed">
                {t("usage.stats.totalEndpoints", "Total Endpoints")}
              </Text>
              <Text size="lg" fw={600}>
                {totalEndpoints}
              </Text>
            </div>
            <div>
              <Text size="sm" c="dimmed">
                {t("usage.stats.totalVisits", "Total Visits")}
              </Text>
              <Text size="lg" fw={600}>
                {totalVisits.toLocaleString()}
              </Text>
            </div>
            <div>
              <Text size="sm" c="dimmed">
                {t("usage.stats.showing", "Showing")}
              </Text>
              <Text size="lg" fw={600}>
                {getDisplayModeLabel()}
              </Text>
            </div>
            <div>
              <Text size="sm" c="dimmed">
                {t("usage.stats.selectedVisits", "Selected Visits")}
              </Text>
              <Text size="lg" fw={600}>
                {displayedVisits.toLocaleString()} ({displayedPercentage}%)
              </Text>
            </div>
          </Group>
        </Stack>
      </Card>

      {/* Chart and Table */}
      <UsageAnalyticsChart data={chartData} />
      <UsageAnalyticsTable data={endpoints} />
    </Stack>
  );
};

export default AdminUsageSection;