"use client";

import { Check, Link2 } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { CoverageBar } from "@/components/intelligence/shared";
import { fmtInt } from "@/lib/format";

/** "47 infrastructure records match · MW coverage 12 %" + Save view (copies the URL — the URL is the saved view). */
export function ResultBar({ total, entity, mwCoverage }: { total: number | null; entity: "facilities" | "projects"; mwCoverage: number | null }) {
  const [copied, setCopied] = useState<"ok" | "fail" | null>(null);
  const save = async () => {
    const url = window.location.href;
    try {
      await navigator.clipboard.writeText(url);
      setCopied("ok");
    } catch {
      window.prompt("Copy this view's URL", url);
      setCopied("fail");
    }
    setTimeout(() => setCopied(null), 2000);
  };
  const word = entity === "projects" ? (total === 1 ? "project record" : "project records") : total === 1 ? "infrastructure record" : "infrastructure records";
  return (
    <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
      <p className="text-[14px] text-ink" aria-live="polite">
        {total === null ? (
          <span className="text-ink-3">Results unavailable</span>
        ) : (
          <>
            <span className="figure font-semibold">{fmtInt(total)}</span> {word} match
          </>
        )}
      </p>
      {mwCoverage !== null && (
        <span className="inline-flex items-center gap-2 text-[12px] text-ink-3">
          MW coverage <CoverageBar value={mwCoverage} width="w-[110px]" label="MW coverage of the result set" />
        </span>
      )}
      <Button size="xs" variant="secondary" onClick={() => void save()} className="ml-auto" aria-label="Save view — copy the URL of this query">
        {copied === "ok" ? <Check className="size-3.5 text-ok" aria-hidden /> : <Link2 className="size-3.5" aria-hidden />}
        {copied === "ok" ? "URL copied" : copied === "fail" ? "Copy from prompt" : "Save view"}
      </Button>
    </div>
  );
}