import { createSignal, Accessor } from "solid-js";
import { apiBaseUrl } from "../../lib/api-client";
import { useI18n } from "../../providers/i18n-provider";
import { DownloadIcon } from "./icons";

// Downloads an authenticated CSV endpoint — fetch + blob because the
// generated api-client is typed for JSON, not file responses.
export function ExportCsvButton(props: { path: string; filename: string; token: Accessor<string | null | undefined> }) {
  const i18n = useI18n();
  const [busy, setBusy] = createSignal(false);

  const handleClick = async () => {
    const bearer = props.token?.();
    if (!bearer || busy()) return;
    setBusy(true);
    try {
      const response = await fetch(`${apiBaseUrl}${props.path}`, {
        headers: { Authorization: `Bearer ${bearer}` },
      });
      if (!response.ok) return;
      const blob = await response.blob();
      const url = URL.createObjectURL(blob);
      const anchor = document.createElement("a");
      anchor.href = url;
      anchor.download = props.filename;
      anchor.click();
      URL.revokeObjectURL(url);
    } finally {
      setBusy(false);
    }
  };

  return (
    <button onClick={handleClick} disabled={busy()} class="btn-secondary text-sm shrink-0">
      <DownloadIcon /> {i18n.t("dashboard.exportCsv")}
    </button>
  );
}