GMW/services/frontend/src/features/analytics/components/TrendChart.tsx

import type { TrendBucket } from "../../../shared/api/client";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "../../../shared/ui";

interface TrendChartProps {
  trend: TrendBucket[];
  loading: boolean;
}

export function TrendChart({ trend, loading }: TrendChartProps) {
  if (loading && !trend?.length) {
    return <LoadingBox />;
  }

  if (!trend?.length) {
    return null;
  }

  const data = trend.map((bucket) => ({
    date: bucket.date,
    clean: bucket.clean,
    warned: bucket.warned,
    flagged: bucket.flagged,
    error: bucket.error,
    total: bucket.count,
  }));

  const totalMessages = data.reduce((sum, item) => sum + item.total, 0);

  return (
    <Card className="col-span-3">
      <CardHeader className="pb-2">
        <CardTitle className="text-sm font-semibold">Tren Harian</CardTitle>
        <CardDescription className="text-xs">
          Volume pesan per hari dengan status moderasi.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <div className="flex flex-wrap gap-3 text-[10px] uppercase tracking-wider text-muted-foreground">
            <LegendDot color="bg-blue-500" label="Total" />
            <LegendDot color="bg-emerald-500" label="Clean" />
            <LegendDot color="bg-amber-500" label="Warned" />
            <LegendDot color="bg-red-500" label="Flagged" />
          </div>

          <div className="overflow-hidden rounded-2xl border border-border bg-background/50 p-4">
            <div className="mb-3 flex items-center justify-between text-[11px] text-muted-foreground">
              <span>Rangkuman 7 hari terakhir</span>
              <span>{totalMessages} total pesan</span>
            </div>

            <div className="overflow-x-auto">
              <svg
                viewBox={`0 0 ${Math.max((data.length - 1) * 56, 56)} 220`}
                className="h-55 min-w-130 w-full overflow-visible"
              >
                <defs>
                  <linearGradient id="trendFill" x1="0" x2="0" y1="0" y2="1">
                    <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.35" />
                    <stop
                      offset="100%"
                      stopColor="#3b82f6"
                      stopOpacity="0.02"
                    />
                  </linearGradient>
                </defs>

                <g stroke="#334155" strokeWidth="1" opacity="0.35">
                  {Array.from({ length: 4 }, (_, index) => {
                    const y = 40 + index * 45;
                    return (
                      <line
                        key={index}
                        x1="0"
                        x2={Math.max((data.length - 1) * 56, 56)}
                        y1={y}
                        y2={y}
                      />
                    );
                  })}
                </g>

                <TrendArea
                  data={data}
                  keyName="total"
                  fill="url(#trendFill)"
                  stroke="#3b82f6"
                />
                <TrendLine
                  data={data}
                  keyName="total"
                  color="#3b82f6"
                  strokeWidth={2.5}
                />
                <TrendLine
                  data={data}
                  keyName="clean"
                  color="#10b981"
                  strokeWidth={1.8}
                />
                <TrendLine
                  data={data}
                  keyName="warned"
                  color="#f59e0b"
                  strokeWidth={1.8}
                />
                <TrendLine
                  data={data}
                  keyName="flagged"
                  color="#ef4444"
                  strokeWidth={1.8}
                />

                {data.map((item, index) => {
                  const x =
                    data.length <= 1
                      ? 0
                      : (index / (data.length - 1)) *
                        Math.max((data.length - 1) * 56, 56);
                  return (
                    <g key={item.date} transform={`translate(${x}, 188)`}>
                      <circle cx="0" cy="0" r="2.5" fill="#e2e8f0" />
                      <text
                        x="0"
                        y="18"
                        textAnchor="middle"
                        className="fill-muted-foreground text-[10px]"
                      >
                        {item.date.slice(5)}
                      </text>
                    </g>
                  );
                })}
              </svg>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

function LegendDot({ color, label }: { color: string; label: string }) {
  return (
    <span className="flex items-center gap-1">
      <span className={`h-2 w-2 rounded-full ${color}`} /> {label}
    </span>
  );
}

function TrendLine({
  data,
  color,
  strokeWidth,
  keyName,
}: {
  data: Array<Record<string, number | string>>;
  color: string;
  strokeWidth: number;
  keyName: string;
}) {
  const path = buildPath(data, keyName, 220, false);

  return (
    <path
      d={path}
      fill="none"
      stroke={color}
      strokeWidth={strokeWidth}
      strokeLinejoin="round"
      strokeLinecap="round"
    />
  );
}

function TrendArea({
  data,
  keyName,
  fill,
  stroke,
}: {
  data: Array<Record<string, number | string>>;
  keyName: string;
  fill: string;
  stroke: string;
}) {
  const path = buildPath(data, keyName, 220, true);
  return <path d={path} fill={fill} stroke={stroke} strokeOpacity={0.2} />;
}

function buildPath(
  data: Array<Record<string, number | string>>,
  keyName: string,
  height: number,
  closePath: boolean,
): string {
  const values = data.map((item) => Number(item[keyName] ?? 0));
  const maxValue = Math.max(...values, 1);
  const width = Math.max((data.length - 1) * 56, 56);
  const points = values.map((value, index) => {
    const x = data.length <= 1 ? 0 : (index / (data.length - 1)) * width;
    const y = height - 35 - (value / maxValue) * 130;
    return { x, y };
  });

  if (points.length === 0) {
    return "";
  }

  const segments: string[] = [`M ${points[0].x} ${points[0].y}`];
  for (let index = 1; index < points.length; index++) {
    const previous = points[index - 1];
    const current = points[index];
    const controlX = (previous.x + current.x) / 2;
    segments.push(`Q ${controlX} ${previous.y} ${current.x} ${current.y}`);
  }

  if (closePath) {
    const lastPoint = points[points.length - 1];
    const firstPoint = points[0];
    segments.push(`L ${lastPoint.x} ${height - 24}`);
    segments.push(`L ${firstPoint.x} ${height - 24}`);
    segments.push("Z");
  }

  return segments.join(" ");
}

function LoadingBox() {
  return (
    <Card className="col-span-3">
      <CardContent className="flex h-65 items-center justify-center text-sm text-muted-foreground">
        <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
        <span className="ml-2">Memuat data...</span>
      </CardContent>
    </Card>
  );
}