// DailyReport — ㊱ 池田さんの日次レポート(rpc_daily_report・0089)。
// 上段: 新規 / 今月クローズ予定 / 並行 / 工事2種の件数
// 下段: 調査・工事2種の金額、今月の入金予定・入金済み
// 管理画面ではなくダッシュボード隣。数字は RPC 1 本(スナップショット)。

function drYen(n) {
  if (n == null || n === "") return "—";
  const v = Number(n);
  if (!Number.isFinite(v)) return "—";
  return "¥" + Math.trunc(v).toLocaleString("ja-JP");
}

function drNum(n) {
  if (n == null || n === "") return "—";
  const v = Number(n);
  if (!Number.isFinite(v)) return "—";
  return v.toLocaleString("ja-JP");
}

function DrKpi({ label, value, sub, mono }) {
  return (
    <AfCard style={{ padding: "12px 14px", flex: "1 1 140px", minWidth: 140 }}>
      <div style={{ fontSize: "var(--text-caption)", color: "var(--muted-foreground)", fontWeight: 600 }}>{label}</div>
      <div className={mono ? "mono" : undefined}
        style={{ marginTop: 4, fontSize: "var(--text-display-md)", fontWeight: 700, letterSpacing: "var(--tracking-tight)" }}>
        {value}
      </div>
      {sub && <div style={{ marginTop: 4, fontSize: "var(--text-caption)", color: "var(--muted-foreground)" }}>{sub}</div>}
    </AfCard>
  );
}

function DailyReport({ onToast }) {
  const [data, setData] = React.useState(null);
  const [err, setErr] = React.useState("");
  const [busy, setBusy] = React.useState(true);

  const load = React.useCallback(async () => {
    setBusy(true);
    setErr("");
    try {
      const cloud = window.MarurouCloud;
      if (!cloud || typeof cloud.dailyReport !== "function") {
        setData(null);
        setErr("日次レポートの数字はまだサーバに用意されていません（rpc_daily_report・0089）。統合後に読み直してください。");
        return;
      }
      const r = await cloud.dailyReport();
      if (!r || typeof r !== "object") {
        setData(null);
        setErr("日次レポートを読めませんでした（空の応答）。");
        return;
      }
      setData(r);
    } catch (e) {
      setData(null);
      const msg = (e && e.message) || "日次レポートを読めませんでした";
      // 関数未作成(統合前)を嘘のシステム障害に見せない
      if (/does not exist|404|not found|rpc_daily_report/i.test(String(msg))) {
        setErr("日次レポートの数字はまだサーバに用意されていません（rpc_daily_report・0089）。統合後に読み直してください。");
      } else {
        setErr(msg);
      }
      onToast && onToast(msg);
    } finally {
      setBusy(false);
    }
  }, [onToast]);

  React.useEffect(() => { load(); }, [load]);

  const works = (data && data.works) || {};
  const amounts = (data && data.amounts) || {};
  const totals = (data && data.totals) || {};
  const monthLabel = data && data.month
    ? (String(data.month).replace("-", "年") + "月")
    : null;
  const rangeLabel = (data && data.monthStart && data.monthEnd)
    ? (String(data.monthStart) + " 〜 " + String(data.monthEnd))
    : null;
  const asOf = data && data.asOf
    ? String(data.asOf).replace("T", " ").replace(/\+09:00$/, " JST")
    : null;

  const amtRow = (key, label) => {
    const a = amounts[key] || {};
    return (
      <tr key={key} style={{ borderBottom: "1px solid var(--border)", height: 36 }}>
        <td style={{ padding: "0 12px", fontWeight: 600 }}>{label}</td>
        <td className="mono" style={{ padding: "0 12px", textAlign: "right" }}>{drYen(a.planned)}</td>
        <td className="mono" style={{ padding: "0 12px", textAlign: "right" }}>{drYen(a.received)}</td>
      </tr>
    );
  };

  return (
    <div className="mr-page-pad" data-daily-report style={{ padding: "18px 24px 32px 20px", maxWidth: "var(--page-max-width)" }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginBottom: 4, flexWrap: "wrap" }}>
        <h1 style={{ margin: 0, fontSize: "var(--text-display-md)", fontWeight: 700, letterSpacing: "var(--tracking-tight)" }}>日次レポート</h1>
        {monthLabel && <span style={{ fontSize: "var(--text-body-sm)", color: "var(--muted-foreground)" }}>{monthLabel}</span>}
        <div style={{ flex: 1 }} />
        <AfButton size="sm" onClick={load} disabled={busy}>{busy ? "読み込み中…" : "読み直す"}</AfButton>
      </div>
      <div style={{ fontSize: "var(--text-body-sm)", color: "var(--muted-foreground)", marginBottom: 16 }}>
        池田さんが Salesforce で毎日見ている並びです。数字はサーバが1回で集計したもので、画面側では数え直していません。
        {rangeLabel && <span> 対象: {rangeLabel}。</span>}
        {asOf && <span> 取得: {asOf}。</span>}
      </div>

      {err && (
        <AfAlert variant="notice" title="数字を出せません">{err}</AfAlert>
      )}

      {!err && busy && !data && (
        <div style={{ padding: 18, fontSize: "var(--text-body-md)", color: "var(--foreground-subtle)" }}>読み込み中…</div>
      )}

      {data && (
        <React.Fragment>
          <div style={{ fontSize: "var(--text-body-sm)", fontWeight: 700, color: "var(--muted-foreground)", marginBottom: 8 }}>件数</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginBottom: 20 }}>
            <DrKpi label="新規案件" value={drNum(data.newCases)} sub="受付日が当月" mono />
            <DrKpi label="今月クローズ予定" value={drNum(data.closeDueThisMonth)} sub="完了予定が当月・未完了" mono />
            <DrKpi label="並行して動いている" value={drNum(data.openCases)} sub="未完了の案件" mono />
            <DrKpi label="原因箇所工事" value={drNum(works.cause)} sub="未完了トラック" mono />
            <DrKpi label="復旧工事" value={drNum(works.restore)} sub="被害箇所工事・未完了" mono />
          </div>

          <div style={{ fontSize: "var(--text-body-sm)", fontWeight: 700, color: "var(--muted-foreground)", marginBottom: 8 }}>金額（当月）</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginBottom: 12 }}>
            <DrKpi label="これから入金予定" value={drYen(totals.planned)} sub="未入金・予定日が当月の残額" mono />
            <DrKpi label="既に入金済み" value={drYen(totals.received)} sub="入金日が当月" mono />
          </div>

          <AfCard pad={0} style={{ overflow: "hidden" }}>
            <div style={{ padding: "11px 14px", borderBottom: "1px solid var(--border)", fontSize: "var(--text-display-sm)", fontWeight: 600 }}>
              種別ごとの金額
            </div>
            <div style={{ overflowX: "auto" }}>
              <table style={{ width: "100%", borderCollapse: "collapse", fontSize: "var(--text-body-md)" }}>
                <thead>
                  <tr style={{ borderBottom: "1px solid var(--border)", background: "var(--muted)" }}>
                    <th style={{ padding: "8px 12px", textAlign: "left", fontWeight: 600, fontSize: "var(--text-caption)", color: "var(--muted-foreground)" }}>種別</th>
                    <th style={{ padding: "8px 12px", textAlign: "right", fontWeight: 600, fontSize: "var(--text-caption)", color: "var(--muted-foreground)" }}>入金予定</th>
                    <th style={{ padding: "8px 12px", textAlign: "right", fontWeight: 600, fontSize: "var(--text-caption)", color: "var(--muted-foreground)" }}>入金済み</th>
                  </tr>
                </thead>
                <tbody>
                  {amtRow("survey", "調査")}
                  {amtRow("cause", "原因箇所工事")}
                  {amtRow("restore", "復旧工事（被害箇所）")}
                  <tr style={{ height: 36, background: "var(--muted)" }}>
                    <td style={{ padding: "0 12px", fontWeight: 700 }}>合計</td>
                    <td className="mono" style={{ padding: "0 12px", textAlign: "right", fontWeight: 700 }}>{drYen(totals.planned)}</td>
                    <td className="mono" style={{ padding: "0 12px", textAlign: "right", fontWeight: 700 }}>{drYen(totals.received)}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div style={{ padding: "10px 14px", fontSize: "var(--text-caption)", color: "var(--muted-foreground)" }}>
              移行データの入金済みは、Salesforce の入金日または入金チェックから請求額が全額入ったとみなした推定です(入金額の項目が無いため)。
            </div>
          </AfCard>
        </React.Fragment>
      )}
    </div>
  );
}

Object.assign(window, { DailyReport });