import { TraceWithLogsDto } from "@montelo/browser-client";
import { Coins, DollarSign, Info, PlusCircle, Timer } from "lucide-react";
import { FC } from "react";
import { AnalyticsCard, AnalyticsContainer, AnalyticsMajorStat, AnalyticsMinorStat } from "./LogAnalytics.styles";
import { formatDate, formatNumber } from "./utils";

type Props = {
  trace: TraceWithLogsDto;
};
export const TraceAnalytics: FC<Props> = ({ trace }) => {
  return (
    <AnalyticsContainer>
      <AnalyticsCard title="General" Icon={Info}>
        <AnalyticsMinorStat>
          <span>UserID</span>
          <span>{trace.userId || "None"}</span>
        </AnalyticsMinorStat>

        <AnalyticsMinorStat>
          <span>Tags</span>
          <span>{trace.tags.length ? trace.tags.join(",") : "None"}</span>
        </AnalyticsMinorStat>
      </AnalyticsCard>

      <AnalyticsCard
        title="Cost"
        Icon={DollarSign}
        tooltip={
          <>
            <AnalyticsMinorStat>
              <span>Input</span> <span>${trace.inputCost}</span>
            </AnalyticsMinorStat>
            <AnalyticsMinorStat>
              <span>Output</span> <span>${trace.outputCost}</span>
            </AnalyticsMinorStat>
          </>
        }
      >
        <AnalyticsMajorStat>$ {trace.totalCost}</AnalyticsMajorStat>
      </AnalyticsCard>

      <AnalyticsCard
        title="Tokens"
        Icon={Coins}
        tooltip={
          <>
            <AnalyticsMinorStat>
              <span>Input</span> <span>{trace.inputTokens ? formatNumber(trace.inputTokens) : "—"}</span>
            </AnalyticsMinorStat>
            <AnalyticsMinorStat>
              <span>Output</span> <span>{trace.outputTokens ? formatNumber(trace.outputTokens) : "—"}</span>
            </AnalyticsMinorStat>
          </>
        }
      >
        <AnalyticsMajorStat>{formatNumber(trace.totalTokens)}</AnalyticsMajorStat>
      </AnalyticsCard>

      <AnalyticsCard
        title="Latency"
        Icon={Timer}
        tooltip={
          <>
            <AnalyticsMinorStat>
              <span>Start</span> <span>{trace.startTime ? formatDate(trace.startTime) : "—"}</span>
            </AnalyticsMinorStat>
            <AnalyticsMinorStat>
              <span>End</span> <span>{trace.endTime ? formatDate(trace.endTime) : "—"}</span>
            </AnalyticsMinorStat>
          </>
        }
      >
        <AnalyticsMajorStat>{trace.duration}s</AnalyticsMajorStat>
      </AnalyticsCard>

      {trace.extra && (
        <AnalyticsCard title="Extra" Icon={PlusCircle}>
          {trace.extra ? (
            Object.entries(trace.extra).map(([key, value]) => (
              <AnalyticsMinorStat key={key}>
                <span>{key}</span> <span>{value.toString()}</span>
              </AnalyticsMinorStat>
            ))
          ) : (
            <AnalyticsMinorStat>None</AnalyticsMinorStat>
          )}
        </AnalyticsCard>
      )}
    </AnalyticsContainer>
  );
};
