import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { useGetStatusQuery } from "@/store/api/toolsApi";
import { __ } from "@wordpress/i18n";
import { toast } from "sonner";

/** Tools › System status, with "Copy system report" for support. */
const StatusCard = () => {
  const { data: items = [] } = useGetStatusQuery();
  const allOk = items.every((i) => i.ok);

  const copy = async () => {
    const report = items.map((i) => `${i.label}: ${i.value}`).join("\n");
    try {
      await navigator.clipboard.writeText(report);
      toast.success(
        __("System report copied", "product-comparison-for-woocommerce"),
      );
    } catch {
      toast.error(
        __(
          "Couldn't copy. Select the list and copy it instead.",
          "product-comparison-for-woocommerce",
        ),
      );
    }
  };

  return (
    <aside
      className="ino:rounded-xl ino:border ino:border-border ino:bg-card ino:p-5"
      aria-labelledby="pcfw-status-h"
    >
      <div className="ino:mb-3 ino:flex ino:items-center ino:justify-between">
        <h2
          id="pcfw-status-h"
          className="ino:m-0 ino:text-base ino:font-semibold"
        >
          {__("System status", "product-comparison-for-woocommerce")}
        </h2>
        {items.length > 0 && (
          <Badge
            className={
              allOk
                ? "ino:bg-emerald-50 ino:text-emerald-800"
                : "ino:bg-amber-50 ino:text-amber-900"
            }
          >
            {allOk
              ? __("All good", "product-comparison-for-woocommerce")
              : __("Needs attention", "product-comparison-for-woocommerce")}
          </Badge>
        )}
      </div>
      <dl className="ino:m-0 ino:text-[13px]">
        {items.map((item) => (
          <div
            key={item.key}
            className="ino:flex ino:justify-between ino:gap-3 ino:border-t ino:border-border/70 ino:py-2"
          >
            <dt className="ino:text-muted-foreground">{item.label}</dt>
            <dd
              className={`ino:m-0 ino:text-right ${item.ok ? "" : "ino:font-medium ino:text-amber-800"}`}
            >
              {item.value}
            </dd>
          </div>
        ))}
      </dl>
      <Button
        variant="outline"
        className="ino:mt-3 ino:w-full"
        onClick={copy}
        disabled={!items.length}
      >
        {__("Copy system report", "product-comparison-for-woocommerce")}
      </Button>
    </aside>
  );
};

export default StatusCard;