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

type Props = {
  log: LogDto;
};
export const LogAnalytics: FC<Props> = ({ log }) => {
  return (
    <AnalyticsContainer>
      <AnalyticsCard title="Model" Icon={Bot}>
        <AnalyticsMajorStat className="text-sm font-medium xl:text-xl">{log.model || "—"}</AnalyticsMajorStat>
      </AnalyticsCard>

      <AnalyticsCard
        title="Cost"
        Icon={DollarSign}
        tooltip={
          <>
            <AnalyticsMinorStat>
              <span>Input</span> <span>${log.inputCost}</span>
            </AnalyticsMinorStat>
            <AnalyticsMinorStat>
              <span>Output</span> <span>${log.outputCost}</span>
            </AnalyticsMinorStat>
          </>
        }
      >
        <AnalyticsMajorStat>{log.totalCost ? `$ ${log.totalCost}` : "—"}</AnalyticsMajorStat>
      </AnalyticsCard>

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

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