import { Link } from "react-router-dom";
import { useJobLive } from "../../data/JobLiveContext";
import { useI18n } from "../../i18n/I18nContext";
import { jobStatusLabel, jobTemplateLabel } from "../../lib/jobLabels";

/** 頂欄下方：進行中任務即時進度（有進度就顯示，不必重整） */
export function ActiveJobsStrip() {
  const { activeJobs } = useJobLive();
  const { t } = useI18n();

  if (activeJobs.length === 0) return null;

  const shown = activeJobs.slice(0, 3);
  const more = activeJobs.length - shown.length;

  return (
    <div className="hb-job-strip" role="status" aria-live="polite">
      <div className="hb-job-strip__inner">
        {shown.map((job) => {
          // 仿寫進行中：點條帶回寫一則，不要把人留在任務詳情出不來
          const href =
            job.template_type === "compose_mimic"
              ? "/app/studio?tab=compose"
              : `/app/jobs/${job.id}`;
          return (
            <Link key={job.id} to={href} className="hb-job-strip__item">
              <span className="hb-job-strip__title">
                {jobTemplateLabel(job.template_type, t)}
                <span className="hb-job-strip__status">
                  {jobStatusLabel(job.status, t)} · {job.progress_percent}%
                </span>
              </span>
              {job.progress_summary ? (
                <span className="hb-job-strip__summary">{job.progress_summary}</span>
              ) : null}
              <span className="hb-progress hb-progress--sm hb-job-strip__bar" aria-hidden>
                <span
                  className="hb-progress__bar"
                  style={{ width: `${Math.min(100, Math.max(0, job.progress_percent))}%` }}
                />
              </span>
            </Link>
          );
        })}
        {more > 0 ? (
          <Link to="/app/jobs" className="hb-job-strip__more">
            {t("jobs.stripMore", { n: more })}
          </Link>
        ) : null}
      </div>
    </div>
  );
}
