"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useCallback, useEffect, useState } from "react";
import { AreaModal } from "@/components/features/detail-log/AreaModal";
import { CleanLogTable } from "@/components/features/detail-log/CleanLogTable";
import { Pill } from "@/components/ui/Pill";
import { StatCard } from "@/components/ui/StatCard";
import { useTheme } from "@/components/theme/ThemeProvider";
import { apiFetch, ApiFetchError } from "@/lib/api/client";
import type { AreaFilter } from "@/lib/clean-logs/areas";
import { DASHBOARD_LATEST_RUN, SUCCESS_RATE_TARGET } from "@/lib/config";
import { formatMd } from "@/lib/format/date";
import { displayRate } from "@/lib/judge";
import { THEME_TOKENS } from "@/lib/theme";
import type {
  AreaCompletionsResponse,
  CleanLogAdviceResponse,
  CleanLogItem,
  DashboardResponse,
} from "@/lib/types";
import { RescueRequiredCard } from "./RescueRequiredCard";
import { ScheduleProgressCard } from "./ScheduleProgressCard";
import { SecurityBanner } from "./SecurityBanner";
import styles from "./DashboardScreen.module.css";

/**
 * エリアモーダルを開いている対象。
 *
 * ★`logId` は「エリアを特定するキー」ではなく、施設と日付を特定するための入口★
 * （指示書Z 決定1）。施設名・日付はヘッダに出すためだけに持つ。
 *
 * ★`DetailLogScreen.tsx` の同名の型と同じ形をあえて各画面に持たせている★ —
 * API契約（`d-watch-api.yaml`）のスキーマではなく画面内部の都合の型なので、
 * `lib/types/`（YAMLのスキーマ名と揃える場所。`CLAUDE.md` §9.2）には置かない。
 */
interface AreaTarget {
  logId: number;
  facilityName: string;
  dateLabel: string;
}

/**
 * コンパクト版の清掃詳細ログに出す件数（★`problem_logs` の先頭5件★。D-159 / 指示書AV 段階5-1）。
 * ★API は件数で切らない★（1清掃エリア最大1行なので、エリア数が自然な上限。指示書AV D11）。
 * 要レスキューの初期表示（`RESCUE_INITIAL_VISIBLE`）はこの5件に揃えてある。
 * 旧: `/api/clean-logs` に `per_page: "5"` を付けて取っていた
 */
const COMPACT_LOG_ROWS = 5;

export function DashboardScreen() {
  const { t, theme } = useTheme();
  const c = THEME_TOKENS[theme];
  const router = useRouter();

  const [data, setData] = useState<DashboardResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const [expandedId, setExpandedId] = useState<number | null>(null);
  const [adviceById, setAdviceById] = useState<
    Record<number, CleanLogAdviceResponse | undefined>
  >({});
  const [adviceLoadingId, setAdviceLoadingId] = useState<number | null>(null);
  const [areaTarget, setAreaTarget] = useState<AreaTarget | null>(null);
  // 「判定 ?」の凡例。★ボタンは compact でも出ている★ので、状態を持たせないと
  // 「押しても何も起きないボタン」になる（D-143 §3 #2 / 指示書AO 段階6）
  const [showGradeInfo, setShowGradeInfo] = useState(false);
  // ★既定は "problem"（YAML の default と同じ）★
  const [areaFilter, setAreaFilter] = useState<AreaFilter>("problem");
  const [areaData, setAreaData] = useState<AreaCompletionsResponse | null>(null);
  const [areaLoading, setAreaLoading] = useState(false);
  const [areaError, setAreaError] = useState<string | null>(null);

  const fetchAll = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      // ★`/api/dashboard` の1本だけ★（D-159 / 指示書AV D7）。コンパクト版ログは
      // レスポンスの `problem_logs`（数値カードと★同じ `now`・同じ行の集合★の △×）を使う。
      // ★`/api/clean-logs` を別に呼ばない★ — 2本に分けると、それぞれが別々に「現在」を取るので
      // 境界（終了＋落ち着き時間ちょうど付近）でカードと表の母集団がずれうる。
      // トグルは持たせない（全件を見たいときは「全項目 →」で F-02 に遷移する切り分け）
      const dashboard = await apiFetch<DashboardResponse>("/api/dashboard");
      setData(dashboard);
    } catch (e) {
      // 失敗したら画面全体をエラー表示にする（部分表示はこの画面の要件にない）
      setError(
        (e instanceof ApiFetchError ? e.serverMessage : null) ??
          "データの取得に失敗しました"
      );
      setData(null);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    // eslint-disable-next-line react-hooks/set-state-in-effect -- fetch 起点の初期表示
    void fetchAll();
  }, [fetchAll]);

  /**
   * 行を開く / 閉じる（`DetailLogScreen.tsx` からの移植。指示書AO 段階5）。
   *
   * ★compact でも展開する★ — かつて「ダッシュボードではアドバイスを一切出さない
   *   決まりがある」とされていたが、そのような決まりはどの資料にも存在しなかった（grep 0件）。
   *   ユーザー判断で展開を有効にした（2026-09-16 / D-143 §3 #6）。
   */
  async function toggleRow(row: CleanLogItem) {
    if (expandedId === row.id) {
      setExpandedId(null);
      return;
    }
    setExpandedId(row.id);
    if (adviceById[row.id]) return;
    setAdviceLoadingId(row.id);
    try {
      const body = await apiFetch<CleanLogAdviceResponse>(
        `/api/clean-logs/${row.id}/advice`
      );
      setAdviceById((prev) => ({ ...prev, [row.id]: body }));
    } catch {
      // 取得できなくても行は開く。一覧が持っている値で最小限の中身を埋める
      setAdviceById((prev) => ({
        ...prev,
        [row.id]: {
          escalation_level: row.escalation_level,
          consecutive_problem_days: row.consecutive_problem_days,
          // ★一覧の行も同じ上限を通ってきている★（指示書AF 段階6。/clean-logs と
          //   /clean-logs/{id}/advice で連続日数が食い違わないようにするため）。
          //   一覧が古くてフラグを持っていなければ「頭打ちではない」として扱う
          consecutive_problem_days_capped:
            row.consecutive_problem_days_capped ?? false,
          max_level: 0,
          advices: [],
        },
      }));
    } finally {
      setAdviceLoadingId(null);
    }
  }

  /**
   * エリアモーダルを開く。
   *
   * ★ここでは取得しない★ — 取得は下の `useEffect` に寄せてある。
   *   ★`filter` を切り替えたら**取り直す**必要がある★（絞り込みはサーバ側。指示書Z 決定8）ので、
   *   「開いたとき」と「切り替えたとき」で取得経路が2本に分かれないようにした。
   * ★開くたびに `filter` を既定（問題エリアのみ）に戻す★ — 前に見た行の選択が残ると、
   *   別の行を開いたときに何を見ているのか分からなくなる。
   */
  function openAreas(row: CleanLogItem) {
    setAreaFilter("problem");
    setAreaTarget({
      logId: row.id,
      facilityName: row.facility_name,
      dateLabel: formatMd(row.scheduled_at),
    });
  }

  const areaLogId = areaTarget?.logId ?? null;
  useEffect(() => {
    if (areaLogId === null) return;
    // 取得中に別の行を開く / filter を切り替えると、古い応答が後から届いて
    // 新しい表示を上書きしうるので破棄する
    let cancelled = false;
    // eslint-disable-next-line react-hooks/set-state-in-effect -- fetch 起点のモーダル更新
    setAreaLoading(true);
    setAreaError(null);
    setAreaData(null);
    void (async () => {
      try {
        const body = await apiFetch<AreaCompletionsResponse>(
          `/api/clean-logs/${areaLogId}/areas?filter=${areaFilter}`
        );
        if (!cancelled) setAreaData(body);
      } catch (e) {
        // ★取得できなくてもモーダルは開いたままにする★ —
        //   ボタンを押して何も起きないのがいちばん困るため、失敗はモーダルの中に出す
        if (!cancelled) {
          setAreaError(
            (e instanceof ApiFetchError ? e.serverMessage : null) ??
              "データの取得に失敗しました"
          );
        }
      } finally {
        if (!cancelled) setAreaLoading(false);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [areaLogId, areaFilter]);

  // 「成功 / N件」の N は schedule_progress.planned とは別概念（D-049）。
  // planned はスケジュールマスタ由来（当日）、こちらは summary の母集団の行数（成功+失敗+未実施+★結果待ち★）。
  // ★結果待ちも N に入れる★（ユーザー判断 2026-10-07。D-173 / 表2 C8）— カード5枚の数の合計が N になる。
  //   ★成功率の分母には入らない★（API の `success_rate`。C5）ので、「成功 / N件」と成功率は一致しないことがある。
  // ★直近モード（`date` なし。この画面）では、7日以内に終わった予定がある清掃エリアの数★
  // （1清掃エリアにつき直近の1件。D-159）。日数は `DASHBOARD_LATEST_RUN.lookbackDays`。
  // 施設数とは一致しない（1施設に複数の清掃エリアがある場合は施設数を上回る）。
  // ラベルも「件」であって「施設」ではない。
  const totalLogs = data
    ? data.summary.success +
      data.summary.failed +
      data.summary.not_executed +
      data.summary.pending
    : 0;
  // ★先頭5件だけ出す★（並びは API のまま＝データソースの順。画面で並べ替えない）
  const compactLogs = data ? data.problem_logs.slice(0, COMPACT_LOG_ROWS) : [];

  return (
    <div className={styles.page}>
      <div className={styles.header}>
        <div>
          <h1 className={styles.title}>{t("ダッシュボード")}</h1>
          {/* ★モック（`d-watch-mock.jsx:476`）と文言が違う★ — D-159 でユーザーが変えた
              （数値カードと清掃詳細ログは「各清掃エリアの直近の清掃（7日以内）」になったため。
              旧: 当日の日付を添えた「昨夜の…」の見出し）。D-120 / D-121 と同じ扱いで、★モックは書き換えない★。
              ★日数は直書きしない★（`DASHBOARD_LATEST_RUN.lookbackDays` を {n} に差し込む。指示書AV 4-13）。
              ★このコメントを消さないこと★ — 次にモックと突き合わせた人が文言を戻してしまう */}
          <div className={styles.subtitle}>
            {t("直近の清掃結果サマリー（各清掃エリアの最後の清掃・{n}日以内）").replace(
              "{n}",
              String(DASHBOARD_LATEST_RUN.lookbackDays)
            )}
          </div>
        </div>
        <div className={styles.headerRight}>
          {data && data.security_banner.length > 0 && (
            <Pill text={`D-Sec ${data.security_banner.length}件`} color={c.wn} />
          )}
        </div>
      </div>

      {loading && <div className={styles.loading}>読み込み中…</div>}
      {!loading && error && <div className={styles.error}>{error}</div>}

      {!loading && !error && data && (
        <>
          <SecurityBanner alerts={data.security_banner} />

          <div className={styles.statGrid}>
            <StatCard
              value={String(data.summary.success)}
              label={t("成功")}
              sub={`/ ${totalLogs}件`}
              tone="ok"
            />
            <StatCard
              value={String(data.summary.failed)}
              label={t("失敗")}
              tone="ng"
              onClick={() => router.push("/detail-log")}
            />
            <StatCard
              value={String(data.summary.not_executed)}
              label={t("未実施")}
              sub={t("予定時刻経過・実績なし")}
              tone="wn"
              onClick={() => router.push("/detail-log")}
            />
            {/* ★結果待ち★（ユーザー判断 2026-10-07「ダッシュボードに『結果待ち』カードを足す」。D-173 / 表2 C8）—
                レポートがまだ届いていない清掃（予定の終了から `RESULT_WAIT_MINUTES` 分以内）。失敗に数えない。
                ★モックに無いカード★（D-120 / D-121 と同じ扱いで、モックは書き換えない）。
                ★色は控えめに★: 中立の `mt`（成功率の `ac` と見分けるため。監督判断 2026-10-07）。 */}
            <StatCard
              value={String(data.summary.pending)}
              label={t("結果待ち")}
              sub={t("レポートの到着待ち")}
              tone="mt"
            />
            <StatCard
              // "-" は displayRate() の既存の null 表記をそのまま使う（アプリ全体で
              // completion_rate 等の null 表記と統一するため。ここだけ別の記号にしない）
              value={displayRate(data.summary.success_rate)}
              label={t("成功率")}
              sub={`目標: ${SUCCESS_RATE_TARGET}%`}
              tone="ac"
            />
          </div>

          {/*
            要レスキュー店舗（ユーザー指示 2026-09-15 / 指示書AI 段階6）。
            ★位置は「数値カードの直後・清掃詳細ログの直前」で固定★ —
            ユーザー指示の原文「要レスキュー店舗をダッシュボード上の詳細ログの上に表示」。

            ★★モックに対応する画面が無い（`CLAUDE.md` §5 の例外）★★ —
            D-120 / D-121 と同じ扱いで、`d-watch-mock.jsx` は1文字も書き換えていない。
            ★このコメントを消さないこと★ — 次にモックと突き合わせた人が
            「余計なものがある」と判断して消してしまう。理由は `RescueRequiredCard.tsx` の
            docstring に書いてある。

            ★★数値カード（上）とは母集団が違う★★ — こちらは
            ★当日に清掃予定が無い施設も含む★（指示書AI §1-5）ので、件数は一致しない。
            ★数値カードは直近モード（各清掃エリアの直近の清掃・7日以内。D-159）、
            要レスキューは当日基準★（基準日は当日のまま。指示書AV 4-1）。
          */}
          <RescueRequiredCard items={data.rescue_required} />

          <div className={styles.card}>
            <div className={styles.cardHeader}>
              <span className={styles.cardTitle}>{t("清掃詳細ログ")}</span>
              <Link href="/detail-log" className={styles.allLink}>
                {t("全項目 →")}
              </Link>
            </div>
            <div className={styles.tableWrap}>
              <CleanLogTable
                rows={compactLogs}
                compact
                expandedId={expandedId}
                adviceById={adviceById}
                adviceLoadingId={adviceLoadingId}
                showGradeInfo={showGradeInfo}
                onToggleGradeInfo={() => setShowGradeInfo((v) => !v)}
                onToggleRow={toggleRow}
                onOpenAreas={openAreas}
              />
            </div>
          </div>

          <div
            className={styles.bottomGrid}
            style={{
              gridTemplateColumns: data.failure_breakdown ? "1fr 1fr" : "1fr",
            }}
          >
            <ScheduleProgressCard progress={data.schedule_progress} />
            {/*
              failure_breakdown は M2 では返さない（D-048）。undefined のときは
              このブロックごと非表示にする。M3 で値が来たら自動的に表示へ戻る作りにしておく
              （プロパティを消してしまうと、値が来たときにここを書き直す必要が出る）
            */}
            {data.failure_breakdown && (
              <div className={`${styles.card} ${styles.panel}`}>
                <div className={styles.failureHeading}>失敗の内訳</div>
                {data.failure_breakdown.map((f) => (
                  <div key={f.type} className={styles.failureRow}>
                    <span>{f.label}</span>
                    <span>{f.count}</span>
                  </div>
                ))}
              </div>
            )}
          </div>
        </>
      )}

      {/* ★エリア別詳細はモーダルで開く（`/detail-log` へ遷移させない）★ —
          モックは compact でもモーダルを開く（`d-watch-mock.jsx:358` は `LogTable` の
          中にあり `compact` で分岐していない）。遷移にすると開いていた行が失われる。
          ★`components/features/detail-log/AreaModal` を import して使う（複製しない）★ */}
      {areaTarget && (
        <AreaModal
          facilityName={areaTarget.facilityName}
          dateLabel={areaTarget.dateLabel}
          filter={areaFilter}
          onChangeFilter={setAreaFilter}
          data={areaData}
          loading={areaLoading}
          error={areaError}
          onClose={() => setAreaTarget(null)}
        />
      )}
    </div>
  );
}