/**
 * @file SnapshotButton.tsx
 * @description The session analysis page's **Snapshot** action: confirms with a
 * "redact file paths" choice, freezes the session through `POST
 * /api/snapshots`, copies the `/snapshot/<token>` link and offers it inline.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useState } from "react";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Camera } from "lucide-react";
import { api } from "../lib/api";
import { ConfirmModal } from "./ConfirmModal";
import { Checkbox } from "./Checkbox";
import { CopyButton } from "./event-views/primitives";

export function snapshotUrl(token: string): string {
  return `${window.location.origin}/snapshot/${token}`;
}

export function SnapshotButton({ sessionId }: { sessionId: string }) {
  const { t } = useTranslation("sessions");
  const [open, setOpen] = useState(false);
  const [redact, setRedact] = useState(true);
  const [busy, setBusy] = useState(false);
  const [token, setToken] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  const create = async () => {
    setBusy(true);
    setError(null);
    try {
      const { snapshot } = await api.snapshots.create(sessionId, { filePaths: redact });
      setToken(snapshot.token);
      navigator.clipboard?.writeText(snapshotUrl(snapshot.token)).catch(() => undefined);
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setBusy(false);
      setOpen(false);
    }
  };

  return (
    <div className="flex flex-wrap items-center justify-end gap-1">
      {token && (
        <span className="inline-flex items-center gap-1 text-xs text-fg-secondary">
          <Link to={`/snapshot/${token}`} className="text-accent hover:underline">
            {t("snapshot.open")}
          </Link>
          <CopyButton text={snapshotUrl(token)} />
        </span>
      )}
      <button
        type="button"
        onClick={() => setOpen(true)}
        title={t("snapshot.hint")}
        className="btn-ghost text-xs"
      >
        <Camera className="h-4 w-4" />
        {t("snapshot.create")}
      </button>
      {error && (
        <p role="alert" className="basis-full text-right text-[11px] text-status-danger">
          {error}
        </p>
      )}
      <ConfirmModal
        open={open}
        title={t("snapshot.title")}
        message={t("snapshot.body")}
        confirmLabel={t("snapshot.confirm")}
        cancelLabel={t("snapshot.cancel")}
        destructive={false}
        busy={busy}
        onConfirm={() => void create()}
        onCancel={() => setOpen(false)}
      >
        <Checkbox checked={redact} onChange={setRedact} label={t("snapshot.redactPaths")} />
      </ConfirmModal>
    </div>
  );
}