import React from "react";
import { useAppStore } from "../../store/useAppStore";
import { Card, CardContent, CardHeader, CardTitle } from "../ui/Card";
import { Badge } from "../ui/Badge";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faBan,
  faCircleInfo,
  faClock,
  faDownload,
  faList,
  faTriangleExclamation,
} from "@fortawesome/free-solid-svg-icons";

export const LoopStatsCard = () => {
  const selectedHash = useAppStore((s) => s.selectedHash);
  const jobs = useAppStore((s) => s.jobs);
  const job = jobs.find((j) => j.torrentHash === selectedHash);

  const formatTotal = (bytes: number) => {
    const gb = bytes / (1024 ** 3);
    if (gb >= 1024) {
      return `${(gb / 1024).toFixed(2)} TB`;
    }
    return `${gb.toFixed(2)} GB`;
  };

  if (!job) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Loop Stats</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-slate-500">No active job for selection.</p>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <FontAwesomeIcon icon={faCircleInfo} className="text-slate-400" />
          Loop Stats
        </CardTitle>
        <Badge variant={job.status === "RUNNING" ? "success" : "warn"}>
          {job.status}
        </Badge>
      </CardHeader>
      <CardContent>
        <div className="grid gap-2 text-sm text-slate-700">
          <div className="flex items-center gap-2">
            <FontAwesomeIcon icon={faList} className="text-slate-400" />
            <span>Loops: {job.doneLoops} / {job.targetLoops}</span>
          </div>
          <div className="flex items-center gap-2">
            <FontAwesomeIcon icon={faDownload} className="text-slate-400" />
            <span>
              Total Download:{" "}
              {formatTotal(
                job.totals?.totalDownloadedBytes ??
                  job.doneLoops * job.sizeBytes
              )}
            </span>
          </div>
          <div className="flex items-center gap-2">
            <FontAwesomeIcon icon={faClock} className="text-slate-400" />
            <span>Delay: {job.delayMs} ms</span>
          </div>
          <div className="flex items-center gap-2">
            <FontAwesomeIcon icon={faBan} className="text-slate-400" />
            <span>Banned peers: {job.bans?.bannedIps?.length ?? 0}</span>
          </div>
          {job.nextRunAt && (
            <div className="flex items-center gap-2">
              <FontAwesomeIcon icon={faClock} className="text-slate-400" />
              <span>Next run: {job.nextRunAt}</span>
            </div>
          )}
          {job.lastError && (
            <div className="flex items-center gap-2 text-rose-600">
              <FontAwesomeIcon icon={faTriangleExclamation} />
              <span>{job.lastError}</span>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
};
