// The "Save for offline" control: a button, or progress with a Stop button while a download runs.
import { canSaveOffline } from '../utils/offline.js';

export function DownloadProgress({ job, onCancel }) {
  const pct = job.total ? Math.round((job.done / job.total) * 100) : 0;
  return (
    <div role="status" className="rounded-xl border border-[var(--r-line)] px-3 py-2 text-xs">
      <div className="mb-1.5 flex items-center justify-between gap-2">
        <span>Saving {job.label}… {job.done} of {job.total}</span>
        <button type="button" onClick={onCancel} className="text-[var(--r-accent)] hover:underline">Stop</button>
      </div>
      <div className="h-1 overflow-hidden rounded-full bg-[var(--r-line)]"><div className="h-full bg-[var(--r-accent)] transition-[width]" style={{ width: `${pct}%` }} /></div>
    </div>
  );
}

// One book of a translation.
export function SaveBookOffline({ offline, translation, book, name }) {
  if (!canSaveOffline(translation)) {
    return <p className="mt-4 text-[11px] text-[var(--r-sub)]">Saving for offline works with the BSB and NET. The {translation}’s licence doesn’t allow it.</p>;
  }
  if (offline.job) return <div className="mt-4"><DownloadProgress job={offline.job} onCancel={offline.cancel} /></div>;
  const saved = offline.isSaved(translation, book);
  return (
    <div className="mt-4 flex items-center justify-between gap-3 rounded-xl border border-[var(--r-line)] px-3 py-2 text-sm">
      <span className={saved ? '' : 'text-[var(--r-sub)]'}>{saved ? `✓ ${name} (${translation}) is saved for offline` : `Read ${name} without a connection`}</span>
      {!saved && (
        <button type="button" onClick={() => offline.saveBook(translation, book, name)} className="shrink-0 rounded-full border border-[var(--r-line)] px-3 py-1 text-xs font-medium hover:bg-black/5">Save for offline</button>
      )}
    </div>
  );
}