/**
 * Copyright (c) 2023-present Pi Dash Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import { lazy, Suspense } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import useSWR from "swr";
// pi dash package imports
import { useTranslation } from "@pi-dash/i18n";
import { EmptyStateCompact } from "@pi-dash/propel/empty-state";
import type { TChartData } from "@pi-dash/types";
// hooks
import { useAnalytics } from "@/hooks/store/use-analytics";
// services
import { AnalyticsService } from "@/services/analytics.service";
// pi dash web components
import AnalyticsSectionWrapper from "../analytics-section-wrapper";
import { ProjectInsightsLoader } from "../loaders";

const RadarChart = lazy(function RadarChart() {
  return import("@pi-dash/propel/charts/radar-chart").then((mod) => ({
    default: mod.RadarChart,
  }));
});

const analyticsService = new AnalyticsService();

const ProjectInsights = observer(function ProjectInsights() {
  const params = useParams();
  const { t } = useTranslation();
  const workspaceSlug = params.workspaceSlug.toString();
  const { selectedDuration, selectedDurationLabel, selectedProjects, selectedCycle, selectedModule, isPeekView } =
    useAnalytics();

  const { data: projectInsightsData, isLoading: isLoadingProjectInsight } = useSWR(
    `radar-chart-project-insights-${workspaceSlug}-${selectedDuration}-${selectedProjects}-${selectedCycle}-${selectedModule}-${isPeekView}`,
    () =>
      analyticsService.getAdvanceAnalyticsCharts<TChartData<string, string>[]>(
        workspaceSlug,
        "projects",
        {
          // date_filter: selectedDuration,
          ...(selectedProjects?.length > 0 && { project_ids: selectedProjects?.join(",") }),
          ...(selectedCycle ? { cycle_id: selectedCycle } : {}),
          ...(selectedModule ? { module_id: selectedModule } : {}),
        },
        isPeekView
      )
  );

  return (
    <AnalyticsSectionWrapper
      title={`${t("Project Insights")}`}
      subtitle={selectedDurationLabel}
      className="md:col-span-3"
    >
      {isLoadingProjectInsight ? (
        <ProjectInsightsLoader />
      ) : projectInsightsData && projectInsightsData?.length == 0 ? (
        <EmptyStateCompact
          assetKey="unknown"
          assetClassName="size-20"
          rootClassName="border border-subtle px-5 py-10 md:py-20 md:px-20"
          title={t("Create projects with work items and assignees to start tracking performance, progress, and team impact here.")}
        />
      ) : (
        <div className="gap-8 lg:flex">
          {projectInsightsData && (
            <Suspense fallback={<ProjectInsightsLoader />}>
              <RadarChart
                className="h-[350px] w-full text-accent-primary lg:w-3/5"
                data={projectInsightsData}
                dataKey="key"
                radars={[
                  {
                    key: "count",
                    name: "Count",
                    fill: "var(--text-color-accent-primary)",
                    stroke: "var(--text-color-accent-primary)",
                    fillOpacity: 0.6,
                    dot: {
                      r: 4,
                      fillOpacity: 1,
                    },
                  },
                ]}
                margin={{ top: 0, right: 40, bottom: 10, left: 40 }}
                showTooltip
                angleAxis={{
                  key: "name",
                }}
              />
            </Suspense>
          )}
          <div className="w-full lg:w-2/5">
            <div className="text-13 text-tertiary">{t("Summary of Projects")}</div>
            <div className="mb-3 border-b border-subtle py-2">{t("All Projects")}</div>
            <div className="flex flex-col gap-4">
              <div className="flex items-center justify-between text-13 text-tertiary">
                <div>{t("Trend on charts")}</div>
                <div>{t("Work items")}</div>
              </div>
              {projectInsightsData?.map((item) => (
                <div key={item.key} className="flex items-center justify-between text-13 text-primary">
                  <div>{item.name}</div>
                  <div className="flex items-center gap-1">
                    {/* <TrendPiece key={item.key} size='xs' /> */}
                    <div className="text-secondary">{item.count}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </AnalyticsSectionWrapper>
  );
});

export default ProjectInsights;
