import { useTheme } from "@/components/theme/ThemeProvider";
import { ProgressBar } from "@/components/ui/ProgressBar";
import { formatMd } from "@/lib/format/date";
import type { DashboardResponse } from "@/lib/types";
import styles from "./ScheduleProgressCard.module.css";

interface ScheduleProgressCardProps {
  progress: DashboardResponse["schedule_progress"];
}

/**
 * スケジュール進捗カード（モック514〜523行相当）。
 *
 * ★対象日を見出しに出す★（ユーザー判断 2026-10-29「案B」）— 直近モード（この画面）では JST の前日。
 *   ダッシュボードの結果は昨夜の清掃なので、当日（まだ始まっていない今夜の予定）を数えない。
 *   対象日は API の `progress.date`（★画面で日付を計算しない★。`CLAUDE.md` §9.6）。
 *   ★モックの見出し（「スケジュール進捗」）に日付を添えた★（D-120 / D-121 と同じ扱いで、モックは書き換えない）。
 *
 * ★rate が null のときはバーを描画しない（D-049）★
 *   planned が0（対象日に清掃予定が無い）のときに 0% のバーを出すと
 *   「予定件数分の清掃がまだ0件しか終わっていない」と誤読される。
 *   「{date} の清掃予定はありません」という別メッセージに置き換える（旧「本日の…」。対象日が当日でなくなったため）。
 */
export function ScheduleProgressCard({ progress }: ScheduleProgressCardProps) {
  const { t } = useTheme();
  const date = formatMd(progress.date);
  return (
    <div className={styles.card}>
      <div className={styles.heading}>
        {t("スケジュール進捗（{date}）").replace("{date}", date)}
      </div>
      {progress.rate === null ? (
        <div className={styles.empty}>
          {t("{date} の清掃予定はありません").replace("{date}", date)}
        </div>
      ) : (
        <>
          <span className={styles.count}>{progress.completed}</span>
          <span className={styles.unit}>
            {" "}
            {t("/ {n} 完了").replace("{n}", String(progress.planned))}
          </span>
          <ProgressBar percent={progress.rate} tone="ok" />
        </>
      )}
    </div>
  );
}