"use client";

import { Fragment } from "react";
import { Pill } from "@/components/ui/Pill";
import { GradeBadge } from "@/components/ui/GradeBadge";
import { useTheme } from "@/components/theme/ThemeProvider";
import { GRADE_THRESHOLDS } from "@/lib/config";
import { cleanLogRowView } from "@/lib/format/clean-result";
import { formatHm, formatMd } from "@/lib/format/date";
import { precheckMinutesLabel, precheckStatusCell } from "@/lib/format/precheck-status";
import type { Lang } from "@/lib/i18n";
import { displayRate } from "@/lib/judge";
import type { ThemeName } from "@/lib/theme";
import { statusColor } from "@/lib/theme-status";
import type { CleanLogAdviceResponse, CleanLogItem } from "@/lib/types";
import styles from "./CleanLogTable.module.css";

interface CleanLogTableProps {
  rows: CleanLogItem[];
  expandedId: number | null;
  adviceById: Record<number, CleanLogAdviceResponse | undefined>;
  adviceLoadingId: number | null;
  showGradeInfo: boolean;
  onToggleGradeInfo: () => void;
  onToggleRow: (row: CleanLogItem) => void;
  onOpenAreas: (row: CleanLogItem) => void;
  /**
   * true のときはダッシュボード（F-01）用の5列表示にする
   * （施設名 / 予定 / 出発 / 完了率 / 判定）。
   * ★落とす列★は 機種・シリアル・日付・事前チェック1回目・2回目・清掃結果。
   * （出す列を並べると列を足すたびに書き換えが要るため、落とすほうを書く）
   * ★compact では日付を予定のセルに含める（D-159）★ — 「予定」のセルを `M/D HH:mm`（例 `10/5 19:00`）にする。
   * ダッシュボードの行は各清掃エリアの直近の清掃（7日以内）で、行ごとに日付が違うため。日付の列は足さない。
   * 足すのは「出発」1列だけと決めた — ユーザー判断（2026-09-16。D-143 §3 #3）。
   * ★compact でも行展開する★（モック `d-watch-mock.jsx:311` は compact を見ていない）。
   * かつて「ダッシュボードではアドバイスを一切出さない決まりがある」と書かれていたが、
   * ★そのような決まりはどの資料にも存在しなかった★（grep 0件。実装者の自己申告）。
   * ★出所の書けない根拠をここに書き足さないこと★。
   * ユーザー判断で展開を有効にした（2026-09-16 / D-143 §3 #6 / 指示書AO 段階5）。
   * F-02の詳細ログ表と表を分けると修正が2箇所に散るため、
   * 新規コンポーネントは作らずこのテーブルの prop で分岐する。
   */
  compact?: boolean;
}

function adviceHead(maxLevel: number): { className: string; wrap: string; text: string } {
  if (maxLevel >= 3) {
    return {
      className: styles.headL3,
      wrap: styles.adviceWrapL3,
      text: "🔴 レベル3 — DFA介入を検討",
    };
  }
  if (maxLevel >= 2) {
    return {
      className: styles.headL2,
      wrap: styles.adviceWrapL2,
      text: "🔶 レベル2 — DFA運用担当がアクション",
    };
  }
  return {
    className: styles.headL1,
    wrap: styles.adviceWrapL1,
    text: "⚠ レベル1 — 現場確認が必要",
  };
}

/**
 * 「事前チェック1回目 / 2回目」のセルの中身（D-171 / D-178）。
 * ★列は「その清掃の何回目の事前チェックか」★（早い方が1回目）。★何分前かは Pill の横に小さく出す★
 * （JP「60分前」/ EN「60 min」。`precheckMinutesLabel()`）— 事前チェックの時刻は設定で変わる（例 60/30 → 60/10）ため、
 * 見出しに分数を書かない（ユーザー判断 2026-10-16「案1」。D-178。旧見出し「1h前ST / 30分前ST」）。
 * ★null（その回の事前チェックの予定が無い）は Pill を出さず「-」（色なし・控えめ）★。JP/EN 共通の記号なので `t()` に通さない。
 * ★Pill の値は生値のまま★（`t()` を通さない。D-077）。分数が null（本来は起きない）なら Pill だけ。
 */
function PrecheckStatus({
  theme,
  lang,
  status,
  minutes,
}: {
  theme: ThemeName;
  lang: Lang;
  status: string | null;
  minutes: number | null;
}) {
  const cell = precheckStatusCell(status);
  if (cell.kind === "none") {
    return <span className={styles.statusNone}>{cell.text}</span>;
  }
  const pill = <Pill text={cell.text} color={statusColor(theme, cell.text)} />;
  const minutesLabel = precheckMinutesLabel(lang, minutes);
  if (minutesLabel === null) return pill;
  // 列幅に収まらないとき（Pill の値が長いとき）は分数が Pill の下に回る（`.precheckCell` の flex-wrap）
  return (
    <div className={styles.precheckCell}>
      {pill}
      <span className={styles.precheckMinutes}>{minutesLabel}</span>
    </div>
  );
}

export function CleanLogTable({
  rows,
  expandedId,
  adviceById,
  adviceLoadingId,
  showGradeInfo,
  onToggleGradeInfo,
  onToggleRow,
  onOpenAreas,
  compact = false,
}: CleanLogTableProps) {
  const { t, theme, lang } = useTheme();

  return (
    <table className={`${styles.table} ${compact ? styles.compact : ""}`}>
      {/* ★列幅は <col> で固定する（`table-layout: fixed`）★ — 2026-10-01 ユーザー指摘
          「言語切り替え時に表などの位置も動いてしまいます」。中身（見出しの文字）から幅を
          自動で決めると、見出しが英語になったとき列ごとに幅が変わり表が横に崩れていた。
          ★全列に幅を付け、余りは全列に比で配る★（通常表示・縮小表示とも。D-167）。幅の値と根拠は CSS 側。
          ★<col> の並びは下の <th> / <td> と1対1★ — 列を足し引きするときは3箇所を揃えること */}
      <colgroup>
        <col className={styles.colFacility} />
        {!compact && <col className={styles.colModel} />}
        {!compact && <col className={styles.colSerial} />}
        {!compact && <col className={styles.colDate} />}
        <col className={styles.colScheduled} />
        {!compact && <col className={styles.colPrecheck1} />}
        {!compact && <col className={styles.colPrecheck2} />}
        <col className={styles.colDeparted} />
        {!compact && <col className={styles.colResult} />}
        <col className={styles.colRate} />
        <col className={styles.colGrade} />
      </colgroup>
      <thead>
        <tr>
          <th className={styles.th} style={{ textAlign: "left" }}>
            {t("施設名")}
          </th>
          {!compact && (
            <th className={styles.th} style={{ textAlign: "left" }}>
              {t("機種")}
            </th>
          )}
          {!compact && (
            <th className={styles.th} style={{ textAlign: "left" }}>
              {t("シリアル")}
            </th>
          )}
          {!compact && (
            <th className={styles.th} style={{ textAlign: "left" }}>
              {t("日付")}
            </th>
          )}
          <th className={styles.th} style={{ textAlign: "left" }}>
            {t("予定")}
          </th>
          {!compact && (
            <th className={styles.th} style={{ textAlign: "left" }}>
              {t("事前チェック1回目")}
            </th>
          )}
          {!compact && (
            <th className={styles.th} style={{ textAlign: "left" }}>
              {t("事前チェック2回目")}
            </th>
          )}
          <th className={styles.th} style={{ textAlign: "center" }}>
            {t("出発")}
          </th>
          {!compact && (
            <th className={styles.th} style={{ textAlign: "left" }}>
              {t("清掃結果")}
            </th>
          )}
          <th className={styles.th} style={{ textAlign: "right" }}>
            {t("完了率")}
          </th>
          <th className={styles.th} style={{ textAlign: "center" }}>
            {t("判定")}{" "}
            <button
              type="button"
              className={styles.helpBtn}
              onClick={onToggleGradeInfo}
              aria-label="判定基準"
            >
              ?
            </button>
          </th>
        </tr>
      </thead>
      {showGradeInfo && (
        <caption style={{ captionSide: "bottom", padding: 0 }}>
          <div className={styles.legend}>
            <span className={styles.legendTitle}>判定基準（タスク完了率）:</span>
            <span className={styles.legendOk}>
              ◎ {GRADE_THRESHOLDS.excellent}%以上
            </span>
            <span className={styles.legendOk}>
              ○ {GRADE_THRESHOLDS.good}%以上
            </span>
            {/* ★「10-69%」のような表記にしないこと★ — 69.5 がどこにも該当しない
                読み方になる。境界を含むか含まないかが読み取れる書き方にする（D-062）。
                ★`good - 1` のような計算もしない★（閾値が小数になった途端に嘘になる） */}
            <span className={styles.legendWn}>
              △ {GRADE_THRESHOLDS.poor}%以上{GRADE_THRESHOLDS.good}%未満
            </span>
            <span className={styles.legendNg}>
              × {GRADE_THRESHOLDS.poor}%未満
            </span>
            <span className={styles.legendNote}>（閾値はシステム設定で変更可能）</span>
            <button
              type="button"
              className={styles.legendClose}
              onClick={onToggleGradeInfo}
            >
              ✕
            </button>
          </div>
        </caption>
      )}
      <tbody>
        {rows.length === 0 && (
          <tr>
            <td className={styles.empty} colSpan={compact ? 5 : 11}>
              該当するログはありません
            </td>
          </tr>
        )}
        {rows.map((r) => {
          // ★1行の見え方は `cleanLogRowView()` の1か所で決める（CSV と共有）★。
          //   ★結果待ち（`result_pending`。D-173）★は 出発「…」・清掃結果「結果待ち」・完了率「-」・判定「-」・
          //   ★行を開けない★（`grade` は "×" のままなので、旗を見ないと開けてアドバイスが出る）
          const view = cleanLogRowView(r);
          const hasAdvice = view.expandable;
          const isExpanded = expandedId === r.id;
          const advice = adviceById[r.id];
          const maxLevel = advice?.max_level ?? 0;
          const head = adviceHead(maxLevel);
          return (
            <Fragment key={r.id}>
              <tr
                className={`${styles.row} ${hasAdvice ? styles.rowClickable : ""} ${isExpanded ? styles.rowExpanded : ""}`}
                onClick={hasAdvice ? () => onToggleRow(r) : undefined}
              >
                <td className={styles.td}>{r.facility_name}</td>
                {!compact && <td className={styles.tdMuted}>{r.model_name}</td>}
                {!compact && <td className={styles.tdSerial}>{r.serial_number}</td>}
                {!compact && <td className={styles.tdDate}>{formatMd(r.scheduled_at)}</td>}
                {/* ★compact では日付を予定のセルに含める★（例 `10/5 19:00`。D-159 / 指示書AV 段階5-3）—
                    ダッシュボードは「各清掃エリアの直近の清掃（7日以内）」なので行ごとに日付が違う。
                    ★列は増やさない★（日付列は compact では落としたまま）。compact でないときは時刻だけ（日付列が別にある） */}
                <td className={styles.td}>
                  {compact
                    ? `${formatMd(r.scheduled_at)} ${formatHm(r.scheduled_at)}`
                    : formatHm(r.scheduled_at)}
                </td>
                {/* ★`status_1h` ＝ 1回目・`status_30m` ＝ 2回目★（フィールド名は互換のため旧名のまま。60分前・30分前とは限らない。D-178）。
                    ★null（その回の事前チェックの予定が無い）は Pill を出さず「-」★（ユーザー指示 2026-10-07。D-171）。
                    分岐は `precheckStatusCell()` の1か所。★`statusColor()` に null を渡さない★ */}
                {!compact && (
                  <td className={`${styles.td} ${styles.tdStatus}`}>
                    <PrecheckStatus
                      theme={theme}
                      lang={lang}
                      status={r.status_1h}
                      minutes={r.status_1h_minutes}
                    />
                  </td>
                )}
                {!compact && (
                  <td className={`${styles.td} ${styles.tdStatus}`}>
                    <PrecheckStatus
                      theme={theme}
                      lang={lang}
                      status={r.status_30m}
                      minutes={r.status_30m_minutes}
                    />
                  </td>
                )}
                {/* ★結果待ちは「…」（`--tx-m`。✓✗ の色を使わない。D-173）★ — 縮小表示には清掃結果列が無いので
                    `title` で「結果待ち」と分かるようにする */}
                {view.departed === "pending" ? (
                  <td className={`${styles.tdCenter} ${styles.departedPending}`} title={t("結果待ち")}>
                    …
                  </td>
                ) : (
                  <td
                    className={`${styles.tdCenter} ${view.departed === "ok" ? styles.departedOk : styles.departedNg}`}
                  >
                    {view.departed === "ok" ? "✓" : "✗"}
                  </td>
                )}
                {/* ★表示名を `t()` に通す★（`clean_task_reports.status` の表示名。第10回 N-2。D-155 項2）。
                    ★表に無い値（6 など）は数字のまま★（辞書に無いので `t()` も数字を返す）。
                    `null`（レポート行が無い）は「出発失敗」（EN では "Launch failed"）。
                    ★結果待ち（D-173）は「結果待ち」（EN では "Pending"）★。
                    ★事前チェック1回目・2回目（Pill）は変えない★（`t()` を通さない。生値のまま。D-077）。 */}
                {!compact && (
                  <td className={styles.td}>{t(view.resultLabel)}</td>
                )}
                <td className={styles.tdRight}>{displayRate(view.completionRate)}</td>
                <td className={styles.tdCenter}>
                  <div className={styles.gradeCell}>
                    {/* ★結果待ちはバッジを出さず「-」（D-173）★ — JP/EN 共通の記号なので `t()` に通さない */}
                    {view.gradeShown ? (
                      <GradeBadge grade={r.grade} />
                    ) : (
                      <span className={styles.statusNone}>-</span>
                    )}
                    {hasAdvice && (
                      <span className={styles.chevron}>{isExpanded ? "▲" : "▼"}</span>
                    )}
                  </div>
                </td>
              </tr>
              {isExpanded && (
                <tr>
                  <td colSpan={compact ? 5 : 11} className={styles.adviceCell}>
                    <div className={`${styles.adviceWrap} ${head.wrap}`}>
                      {adviceLoadingId === r.id && !advice && (
                        <div className={styles.adviceText}>読み込み中…</div>
                      )}
                      {advice && advice.advices.length === 0 && (
                        <div className={styles.adviceText}>
                          該当するアドバイスはありません
                        </div>
                      )}
                      {advice && advice.advices.length > 0 && (
                        <>
                          <div className={`${styles.adviceHead} ${head.className}`}>
                            {head.text}
                          </div>
                          {advice.advices.map((a) => (
                            <div key={a.rule} className={styles.adviceCard}>
                              <div className={styles.adviceTitle}>
                                {a.icon} {a.title}
                              </div>
                              <div className={styles.adviceText}>{a.estimated_cause}</div>
                              {a.recommended_actions.length > 0 && (
                                <ul className={styles.adviceActions}>
                                  {a.recommended_actions.map((action) => (
                                    <li key={action}>{action}</li>
                                  ))}
                                </ul>
                              )}
                            </div>
                          ))}
                          <button
                            type="button"
                            className={styles.areaBtn}
                            onClick={(e) => {
                              e.stopPropagation();
                              onOpenAreas(r);
                            }}
                          >
                            {t("エリア別詳細を見る →")}
                          </button>
                        </>
                      )}
                    </div>
                  </td>
                </tr>
              )}
            </Fragment>
          );
        })}
      </tbody>
    </table>
  );
}