import { useSilentCronXJob, useSilentCronXQueueStats } from "./useSilentCronXJob";

export function SilentCronXDashboard() {
  const { loading, error, jobId, job, progress, triggerReport } = useSilentCronXJob("http://localhost:4517");
  const queueStats = useSilentCronXQueueStats("http://localhost:4517");

  return (
    <section>
      <button disabled={loading} onClick={() => void triggerReport("react-dashboard")}>
        Start Report Job
      </button>

      {jobId ? <p>Job queued: {jobId}</p> : null}
      {progress ? (
        <p>
          Progress: {progress.percent ?? 0}% {progress.message ?? ""}
        </p>
      ) : null}
      {job ? <p>Status: {job.status}</p> : null}
      {error ? <p>{error}</p> : null}

      <h3>Queue Stats</h3>
      <pre>{JSON.stringify(queueStats, null, 2)}</pre>
    </section>
  );
}