ログイン不要の生成AIチャットを『請求書破産』から守る — エッジ多層防御と、一貫性モデルで選ぶデータストア

npx @next/codemod@canary middleware-to-proxy .

// 60秒で10トークン補充、バケツの最大は20
// → 平均10回/分だが、休んだ直後は20回まで連打できる
Ratelimit.tokenBucket(10, "60 s", 20)

// 長いプロンプトや高性能モデルの指定は、より多くのトークンを消費させる
await limiter.limit(identifier, { rate: estimateCost(input, model) });

// lib/env.ts
import "server-only";
import { z } from "zod";

/**
 * サーバー専用の環境変数。モジュール読み込み時に一度だけ検証し、
 * 不正ならプロセスを起動させない（フェイルファスト）。
 */
const serverEnvSchema = z.object({
  // Vercel Marketplace の Upstash 統合が自動注入する
  UPSTASH_REDIS_REST_URL: z.url(),
  UPSTASH_REDIS_REST_TOKEN: z.string().min(1),

  // Cloudflare Turnstile のシークレット（クライアントへ渡してはならない）
  TURNSTILE_SECRET_KEY: z.string().min(1),

  // 匿名セッションIDの署名鍵。32バイト以上のランダム値を推奨
  SESSION_SECRET: z.string().min(32),

  // 推論プロバイダ。Vercel AI Gateway 経由なら "provider/model" 形式
  CHAT_MODEL: z.string().min(1).default("anthropic/claude-sonnet-4.5"),

  // 環境の識別（構造化ログのフィールドに使う）
  VERCEL_ENV: z.enum(["production", "preview", "development"]).default("development"),
});

const parsed = serverEnvSchema.safeParse(process.env);

if (!parsed.success) {
  // 値そのものは絶対に出力しない。欠落しているキー名だけを報告する。
  const invalidKeys = [...new Set(parsed.error.issues.map((issue) => issue.path.join(".")))];
  throw new Error(`[env] Invalid server environment variables: ${invalidKeys.join(", ")}`);
}

export const serverEnv = parsed.data;

// lib/env.client.ts
import { z } from "zod";

/**
 * クライアントへ露出してよい公開値のみ。
 * NEXT_PUBLIC_* は静的置換されるため、プロパティアクセスを直書きする必要がある。
 */
const clientEnvSchema = z.object({
  NEXT_PUBLIC_TURNSTILE_SITE_KEY: z.string().min(1),
});

export const clientEnv = clientEnvSchema.parse({
  NEXT_PUBLIC_TURNSTILE_SITE_KEY: process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY,
});

// lib/observability.ts
type LogLevel = "info" | "warn" | "error";

/**
 * 構造化ログの1レコード。値は文字列・数値・真偽値・null に限定する。
 * オブジェクトを許すと、うっかりリクエストボディごと出力する事故が起きる。
 */
interface LogFields {
  readonly level: LogLevel;
  /** ドット区切りのイベント名（例: "rate_limit.blocked"）。集計のキーになる */
  readonly event: string;
  readonly [key: string]: string | number | boolean | null | undefined;
}

/**
 * PII とシークレットを載せないことは呼び出し側の責務。
 * ここでは「何が起きたか」の識別子と、非PIIの計測値だけを流す。
 */
export function logEvent(fields: LogFields): void {
  const line = JSON.stringify({ ...fields, timestamp: new Date().toISOString() });

  // 将来 Sentry を入れる際は、この分岐の中だけを差し替えればよい。
  if (fields.level === "error") {
    console.error(line);
    return;
  }
  if (fields.level === "warn") {
    console.warn(line);
    return;
  }
  console.info(line);
}

// lib/rate-limit.ts
import "server-only";
import { Ratelimit, type Duration } from "@upstash/ratelimit";
import { Redis } from "@upstash/redis";
import { serverEnv } from "./env";
import { logEvent } from "./observability";

const redis = new Redis({
  url: serverEnv.UPSTASH_REDIS_REST_URL,
  token: serverEnv.UPSTASH_REDIS_REST_TOKEN,
});

/**
 * ホットなインスタンス内で「拒否済み」の識別子を記憶し、Redis への往復を省く。
 * 注意: これは最適化であって正しさの機構ではない。Next.js の Proxy は
 * グローバル状態への依存を明示的に禁じており、消えても動作は変わらない
 * （Redis に問い合わせ直すだけ）。片方向の最適化として扱うこと。
 */
const ephemeralCache = new Map<string, number>();

interface TokenBucketPolicy {
  /** interval ごとに補充されるトークン数（＝長期的な平均レート） */
  readonly refillRate: number;
  /** 補充の間隔 */
  readonly interval: Duration;
  /** バケツの最大容量（＝許容するバーストの大きさ） */
  readonly maxTokens: number;
  /** Redis キーの名前空間。層ごとに必ず分ける */
  readonly prefix: string;
}

/** 上限値のSSoT。運用中の調整はこのオブジェクトだけを触る。 */
const POLICIES: Readonly<Record<"network" | "session", TokenBucketPolicy>> = {
  // 粗い網: 発信元ネットワーク単位。Cookie を捨てても効く防御の背骨。
  network: { refillRate: 60, interval: "60 s", maxTokens: 90, prefix: "rl:net" },
  // 細かい網: セッション単位。1利用者の体感を守る公平性の装置。
  session: { refillRate: 10, interval: "60 s", maxTokens: 20, prefix: "rl:sess" },
};

function createLimiter(policy: TokenBucketPolicy): Ratelimit {
  return new Ratelimit({
    redis,
    limiter: Ratelimit.tokenBucket(policy.refillRate, policy.interval, policy.maxTokens),
    prefix: policy.prefix,
    ephemeralCache,
    // Redis が応答しない場合、この時間を超えたリクエストは通す（フェイルオープン）。
    // 可用性 > 厳密性。レート制限の障害でサービスを止めない。
    timeout: 1_000,
    // 本番のみ分析を有効化。Redis コマンドを追加消費するため開発では切る。
    analytics: serverEnv.VERCEL_ENV === "production",
  });
}

const limiters: Readonly<Record<keyof typeof POLICIES, Ratelimit>> = {
  network: createLimiter(POLICIES.network),
  session: createLimiter(POLICIES.session),
};

export interface RateLimitVerdict {
  readonly allowed: boolean;
  /** 拒否した層。監視とレスポンスヘッダに使う */
  readonly limitedBy: keyof typeof POLICIES | null;
  /** 再試行可能になるまでの秒数（Retry-After 用） */
  readonly retryAfterSeconds: number;
  /** 完了を待つべき非同期処理（analytics の書き込みなど） */
  readonly pending: readonly Promise<unknown>[];
}

const ALLOWED: RateLimitVerdict = {
  allowed: true,
  limitedBy: null,
  retryAfterSeconds: 0,
  pending: [],
};

export interface RateLimitInput {
  /** 粗い網の識別子（IPv4 完全アドレス / IPv6 は /64 プレフィックス） */
  readonly networkId: string;
  /** 細かい網の識別子（署名済みCookie のセッションID） */
  readonly sessionId: string;
  /** 1リクエストで消費するトークン数。入力長やモデルで重み付けする */
  readonly cost: number;
}

/**
 * 2本のリミッタを AND で評価する。粗い網を先に引くのは、
 * 攻撃トラフィックを最小のコストで棄却するため（フェイルファスト）。
 */
export async function checkRateLimit(input: RateLimitInput): Promise<RateLimitVerdict> {
  const checks: readonly [keyof typeof POLICIES, string][] = [
    ["network", input.networkId],
    ["session", input.sessionId],
  ];

  const pending: Promise<unknown>[] = [];

  for (const [layer, identifier] of checks) {
    try {
      const result = await limiters[layer].limit(identifier, { rate: input.cost });
      pending.push(result.pending);

      if (!result.success) {
        return {
          allowed: false,
          limitedBy: layer,
          retryAfterSeconds: Math.max(1, Math.ceil((result.reset - Date.now()) / 1_000)),
          pending,
        };
      }
    } catch (error) {
      // フェイルオープン: レート制限基盤の障害を、サービス全体の障害にしない。
      // ただし沈黙させず、必ず異常として記録する（L4 のプロバイダ上限が最後の砦）。
      logEvent({
        level: "error",
        event: "rate_limit.unavailable",
        layer,
        message: error instanceof Error ? error.message : "unknown error",
      });
      return ALLOWED;
    }
  }

  return { ...ALLOWED, pending };
}

// lib/session.ts
import "server-only";
import { serverEnv } from "./env";

const SESSION_COOKIE = "aichat_sid";
const SESSION_MAX_AGE_SECONDS = 60 * 60 * 24; // 24時間

/** Web Crypto のみを使用（Node.js / Edge の両ランタイムで同一コードが動く）。 */
async function hmac(payload: string): Promise<string> {
  const key = await crypto.subtle.importKey(
    "raw",
    new TextEncoder().encode(serverEnv.SESSION_SECRET),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["sign"],
  );
  const signature = await crypto.subtle.sign("HMAC", key, new TextEncoder().encode(payload));
  return Array.from(new Uint8Array(signature))
    .map((byte) => byte.toString(16).padStart(2, "0"))
    .join("");
}

/** タイミング攻撃を避ける定数時間比較。 */
function timingSafeEqual(a: string, b: string): boolean {
  if (a.length !== b.length) return false;
  let diff = 0;
  for (let i = 0; i < a.length; i += 1) {
    diff |= a.charCodeAt(i) ^ b.charCodeAt(i);
  }
  return diff === 0;
}

export async function issueSessionId(): Promise<string> {
  const id = crypto.randomUUID();
  return `${id}.${await hmac(id)}`;
}

/** 署名が正しいときだけ ID を返す。偽造・欠落は null。 */
export async function verifySessionId(value: string | undefined): Promise<string | null> {
  if (!value) return null;
  const separatorIndex = value.lastIndexOf(".");
  if (separatorIndex <= 0) return null;

  const id = value.slice(0, separatorIndex);
  const signature = value.slice(separatorIndex + 1);
  const expected = await hmac(id);

  return timingSafeEqual(signature, expected) ? id : null;
}

interface SessionCookieSpec {
  readonly name: string;
  readonly options: {
    readonly httpOnly: true;
    readonly secure: true;
    /** JSはCookieを読まない（httpOnly）。CSRF面を狭めるため lax 固定 */
    readonly sameSite: "lax";
    readonly path: "/";
    readonly maxAge: number;
  };
}

export const sessionCookie: SessionCookieSpec = {
  name: SESSION_COOKIE,
  options: {
    httpOnly: true,
    secure: true,
    sameSite: "lax",
    path: "/",
    maxAge: SESSION_MAX_AGE_SECONDS,
  },
};

// proxy.ts （Next.js 16。旧 middleware.ts。関数名も proxy に変わる）
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import { checkRateLimit } from "@/lib/rate-limit";
import { issueSessionId, sessionCookie, verifySessionId } from "@/lib/session";
import { clientIp, networkKey } from "@/lib/client-identifier";
import { logEvent } from "@/lib/observability";

/**
 * 保護対象を明示する。matcher を広げるほど、静的アセットにまで
 * 課金対象の実行が乗る。ここでは推論エンドポイントとチャット画面のみ。
 */
export const config = {
  matcher: ["/api/chat", "/chat"],
};

/** 1リクエストの基準コスト。実際の重み付けは Route Handler で再評価する。 */
const BASE_COST = 1;

export async function proxy(request: NextRequest): Promise<NextResponse> {
  const networkId = networkKey(clientIp(request.headers));

  // 署名検証に通らない Cookie は「無い」ものとして扱い、新規発行する。
  const existingSessionId = await verifySessionId(
    request.cookies.get(sessionCookie.name)?.value,
  );
  const sessionId = existingSessionId ?? (await issueSessionId());

  // 新規発行のセッションは定義上どのバケツも消費していないため、
  // セッション層は必ず通過する。Cookie を捨て続ける攻撃者を捕まえるのは
  // 常にネットワーク層の役目である——2本を独立させる理由がこれ。
  const verdict = await checkRateLimit({
    networkId,
    // 署名込みの文字列ではなく、生のID部分をキーにする
    sessionId: existingSessionId ?? sessionId.split(".")[0],
    cost: BASE_COST,
  });

  if (!verdict.allowed) {
    logEvent({
      level: "warn",
      event: "rate_limit.blocked",
      layer: verdict.limitedBy,
      path: request.nextUrl.pathname,
    });

    return NextResponse.json(
      {
        error: "rate_limited",
        message: "リクエストが多すぎます。少し時間をおいて再度お試しください。",
        retryAfterSeconds: verdict.retryAfterSeconds,
      },
      {
        status: 429,
        headers: { "Retry-After": String(verdict.retryAfterSeconds) },
      },
    );
  }

  const response = NextResponse.next();

  if (!existingSessionId) {
    response.cookies.set({
      name: sessionCookie.name,
      value: sessionId,
      ...sessionCookie.options,
    });
  }

  return response;
}

// lib/client-identifier.ts
const IPV6_PREFIX_SEGMENTS = 4; // /64 = 16bit × 4

/**
 * クライアントの実IP。Vercel は x-forwarded-for を上書きし、外部からの
 * 詐称値を転送しないため、このヘッダはプラットフォームが保証する値として
 * 扱える。自前プロキシを前段に置く構成では x-vercel-forwarded-for を優先。
 *
 * 戻り値は「そのままAPIに渡してよい実アドレス」。取得できなければ null。
 */
export function clientIp(headers: Headers): string | null {
  const raw =
    headers.get("x-vercel-forwarded-for") ??
    headers.get("x-forwarded-for") ??
    headers.get("x-real-ip");

  if (!raw) return null;

  const address = raw.split(",")[0].trim();
  return address.length > 0 ? address : null;
}

/**
 * レート制限のキー用に IP を丸める。実IPとは用途が違うので関数を分ける
 * （丸めた値は不完全なアドレスであり、外部APIに渡してはならない）。
 *
 * IPv6 は /64 で丸める。完全アドレスで数えると、末端ユーザーですら
 * 2^64 個のアドレスを持つため、制限を無限に回避されてしまう。
 */
export function networkKey(ip: string | null): string {
  if (!ip) return "unknown";
  if (!ip.includes(":")) return ip;
  return ip.split(":").slice(0, IPV6_PREFIX_SEGMENTS).join(":");
}

// lib/turnstile.ts
import "server-only";
import { z } from "zod";
import { serverEnv } from "./env";
import { logEvent } from "./observability";

const SITEVERIFY_ENDPOINT = "https://challenges.cloudflare.com/turnstile/v0/siteverify";
const VERIFY_TIMEOUT_MS = 3_000;

/** 公式が定める siteverify のレスポンス形。未知のキーは無視する。 */
const siteverifyResponseSchema = z.object({
  success: z.boolean(),
  "error-codes": z.array(z.string()).default([]),
  challenge_ts: z.string().optional(),
  hostname: z.string().optional(),
  action: z.string().optional(),
  cdata: z.string().optional(),
});

export type TurnstileFailureReason =
  | "missing-token"
  | "invalid-token"
  | "expired-or-duplicate"
  | "action-mismatch"
  | "verification-unavailable";

export type TurnstileResult =
  | { readonly ok: true }
  | { readonly ok: false; readonly reason: TurnstileFailureReason };

interface VerifyParams {
  readonly token: string | undefined;
  /** クライアントの実IP。丸めた値ではなく完全なアドレスを渡すこと */
  readonly remoteIp: string | null;
  /** ウィジェット側で指定した action。値の一致を必ず確認する */
  readonly expectedAction: string;
  /** 自サイトのホスト名。他所で取得したトークンの流用を防ぐ */
  readonly expectedHostname: string;
  /** 再試行しても二重消費にならないための冪等キー */
  readonly idempotencyKey: string;
}

export async function verifyTurnstile(params: VerifyParams): Promise<TurnstileResult> {
  if (!params.token) return { ok: false, reason: "missing-token" };

  const body = new FormData();
  body.append("secret", serverEnv.TURNSTILE_SECRET_KEY);
  body.append("response", params.token);
  body.append("idempotency_key", params.idempotencyKey);
  // remoteip は任意項目。不正な値を送ると bad-request で弾かれるため、
  // 実アドレスが取れたときだけ付ける。
  if (params.remoteIp !== null) {
    body.append("remoteip", params.remoteIp);
  }

  let payload: unknown;
  try {
    const response = await fetch(SITEVERIFY_ENDPOINT, {
      method: "POST",
      body,
      signal: AbortSignal.timeout(VERIFY_TIMEOUT_MS),
    });
    payload = await response.json();
  } catch (error) {
    // Cloudflare 側の障害・タイムアウト。ボット検証は「安全側 = 拒否」に倒す。
    // レート制限（可用性優先でオープン）とは逆の判断であることに注意。
    logEvent({
      level: "error",
      event: "turnstile.unavailable",
      message: error instanceof Error ? error.message : "unknown error",
    });
    return { ok: false, reason: "verification-unavailable" };
  }

  const parsed = siteverifyResponseSchema.safeParse(payload);
  if (!parsed.success) {
    logEvent({ level: "error", event: "turnstile.malformed_response" });
    return { ok: false, reason: "verification-unavailable" };
  }

  const result = parsed.data;

  if (!result.success) {
    // timeout-or-duplicate は「300秒超過」か「トークンの再利用」を意味する。
    // ユーザーには再試行を促し、攻撃としては扱わない。
    const isReuse = result["error-codes"].includes("timeout-or-duplicate");
    logEvent({
      level: "warn",
      event: "turnstile.rejected",
      codes: result["error-codes"].join(","),
    });
    return { ok: false, reason: isReuse ? "expired-or-duplicate" : "invalid-token" };
  }

  // success: true だけでは不十分。どのウィジェットで・どのドメインで
  // 取得されたトークンなのかを照合して初めて意味を持つ。
  if (result.action !== params.expectedAction || result.hostname !== params.expectedHostname) {
    logEvent({
      level: "warn",
      event: "turnstile.context_mismatch",
      action: result.action ?? "none",
      hostname: result.hostname ?? "none",
    });
    return { ok: false, reason: "action-mismatch" };
  }

  return { ok: true };
}

// app/api/chat/route.ts
import { convertToModelMessages, createUIMessageStreamResponse, streamText, toUIMessageStream } from "ai";
import { z } from "zod";
import { after } from "next/server";
import { serverEnv } from "@/lib/env";
import { verifyTurnstile } from "@/lib/turnstile";
import { checkRateLimit } from "@/lib/rate-limit";
import { verifySessionId, sessionCookie } from "@/lib/session";
import { clientIp, networkKey } from "@/lib/client-identifier";
import { logEvent } from "@/lib/observability";

export const maxDuration = 30;

const TURNSTILE_ACTION = "chat-message";
const MAX_BODY_BYTES = 16 * 1024;
const MAX_MESSAGES = 40;

/** 受け付ける本文の形。UIメッセージの必要最小限だけを許可する。 */
const requestSchema = z.object({
  turnstileToken: z.string().min(1).max(2048),
  messages: z
    .array(
      z.object({
        id: z.string().min(1).max(128),
        role: z.enum(["user", "assistant", "system"]),
        parts: z
          .array(z.object({ type: z.literal("text"), text: z.string().min(1).max(4_000) }))
          .min(1)
          .max(8),
      }),
    )
    .min(1)
    .max(MAX_MESSAGES),
});

/** 入力の総文字数からトークンバケットの消費量を見積もる（重み付き課金）。 */
function estimateCost(text: string): number {
  return Math.max(1, Math.ceil(text.length / 500));
}

function errorResponse(status: number, code: string, message: string, retryAfter?: number): Response {
  return Response.json(
    { error: code, message },
    {
      status,
      headers: retryAfter === undefined ? undefined : { "Retry-After": String(retryAfter) },
    },
  );
}

export async function POST(request: Request): Promise<Response> {
  // --- 検証1: 本文サイズ（最も安いチェックを最初に） ---
  // これは善意のクライアント向けの早期棄却にすぎない（ヘッダは詐称できる）。
  // 実効的な上限は次のスキーマ検証（文字数上限・配列長上限）が担保する。
  const contentLength = Number(request.headers.get("content-length") ?? "0");
  if (contentLength > MAX_BODY_BYTES) {
    return errorResponse(413, "payload_too_large", "メッセージが長すぎます。");
  }

  // --- 検証2: スキーマ（推論を呼ぶ前に構造を確定させる） ---
  const parsed = requestSchema.safeParse(await request.json().catch(() => null));
  if (!parsed.success) {
    return errorResponse(400, "invalid_request", "リクエストの形式が正しくありません。");
  }
  const { turnstileToken, messages } = parsed.data;

  // --- 検証3: セッションの真正性（偽造Cookieはここで落ちる） ---
  const cookieHeader = request.headers.get("cookie") ?? "";
  const rawSession = cookieHeader
    .split(";")
    .map((part) => part.trim())
    .find((part) => part.startsWith(`${sessionCookie.name}=`))
    ?.slice(sessionCookie.name.length + 1);

  const sessionId = await verifySessionId(rawSession);
  if (!sessionId) {
    return errorResponse(401, "invalid_session", "セッションが無効です。ページを再読み込みしてください。");
  }

  const ip = clientIp(request.headers);
  const networkId = networkKey(ip);

  // --- 検証4: Turnstile（外部API 1往復。ここまでは自前で完結している） ---
  const turnstile = await verifyTurnstile({
    token: turnstileToken,
    remoteIp: ip,
    expectedAction: TURNSTILE_ACTION,
    expectedHostname: new URL(request.url).hostname,
    idempotencyKey: `${sessionId}:${messages[messages.length - 1].id}`,
  });

  if (!turnstile.ok) {
    const status = turnstile.reason === "verification-unavailable" ? 503 : 403;
    return errorResponse(status, turnstile.reason, "認証に失敗しました。もう一度お試しください。");
  }

  // --- 検証5: 重み付きレート制限（推論の直前・最後の関門） ---
  const inputText = messages
    .flatMap((message) => message.parts.map((part) => part.text))
    .join("");
  const cost = estimateCost(inputText);

  const verdict = await checkRateLimit({ networkId, sessionId, cost });

  if (!verdict.allowed) {
    return errorResponse(
      429,
      "rate_limited",
      "利用が集中しています。少し時間をおいて再度お試しください。",
      verdict.retryAfterSeconds,
    );
  }

  // analytics などの後処理はレスポンスを止めずに完了させる
  after(() => Promise.allSettled(verdict.pending));

  // --- ここまで通過して初めて、課金される推論を呼ぶ ---
  logEvent({ level: "info", event: "chat.accepted", cost });

  const result = streamText({
    model: serverEnv.CHAT_MODEL,
    messages: await convertToModelMessages(messages),
    onError: ({ error }) => {
      logEvent({
        level: "error",
        event: "chat.inference_failed",
        message: error instanceof Error ? error.message : "unknown error",
      });
    },
  });

  return createUIMessageStreamResponse({
    stream: toUIMessageStream({ stream: result.stream }),
  });
}

// components/chat-input.tsx
"use client";

import { useCallback, useEffect, useId, useRef, useState } from "react";
import Script from "next/script";
import { clientEnv } from "@/lib/env.client";

const TURNSTILE_SCRIPT = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
const TURNSTILE_ACTION = "chat-message";

/** 明示レンダリング用の最小限の型。`any` を避けるため自前で宣言する。 */
interface TurnstileRenderOptions {
  sitekey: string;
  action: string;
  appearance: "always" | "execute" | "interaction-only";
  callback: (token: string) => void;
  "error-callback": () => void;
  "expired-callback": () => void;
}

interface TurnstileApi {
  render: (container: HTMLElement, options: TurnstileRenderOptions) => string;
  reset: (widgetId: string) => void;
  remove: (widgetId: string) => void;
}

declare global {
  interface Window {
    turnstile?: TurnstileApi;
  }
}

type Status = "loading-challenge" | "ready" | "sending" | "error";

interface ChatInputProps {
  readonly onSend: (input: { text: string; turnstileToken: string }) => Promise<void>;
  readonly disabled?: boolean;
}

export function ChatInput({ onSend, disabled = false }: ChatInputProps) {
  const [status, setStatus] = useState<Status>("loading-challenge");
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [value, setValue] = useState("");

  const tokenRef = useRef<string | null>(null);
  const widgetIdRef = useRef<string | null>(null);
  const containerRef = useRef<HTMLDivElement | null>(null);

  const inputId = useId();
  const errorId = useId();

  const renderWidget = useCallback(() => {
    const container = containerRef.current;
    const turnstile = window.turnstile;
    if (!container || !turnstile || widgetIdRef.current !== null) return;

    widgetIdRef.current = turnstile.render(container, {
      sitekey: clientEnv.NEXT_PUBLIC_TURNSTILE_SITE_KEY,
      action: TURNSTILE_ACTION,
      // 対話が必要なときだけウィジェットを表示する（通常は不可視）
      appearance: "interaction-only",
      callback: (token) => {
        tokenRef.current = token;
        setStatus("ready");
        setErrorMessage(null);
      },
      "error-callback": () => {
        tokenRef.current = null;
        setStatus("error");
        setErrorMessage("セキュリティ確認に失敗しました。ページを再読み込みしてください。");
      },
      // トークンは300秒で失効する。黙って壊れるのを防ぐため必ず取り直す。
      "expired-callback": () => {
        tokenRef.current = null;
        setStatus("loading-challenge");
        if (widgetIdRef.current !== null) window.turnstile?.reset(widgetIdRef.current);
      },
    });
  }, []);

  useEffect(() => {
    return () => {
      const widgetId = widgetIdRef.current;
      if (widgetId !== null) window.turnstile?.remove(widgetId);
    };
  }, []);

  const isBusy = status === "sending" || status === "loading-challenge";
  const canSubmit = status === "ready" && value.trim().length > 0 && !disabled;

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const token = tokenRef.current;
    if (!canSubmit || !token) return;

    setStatus("sending");
    setErrorMessage(null);

    try {
      await onSend({ text: value.trim(), turnstileToken: token });
      setValue("");
    } catch (error) {
      setStatus("error");
      setErrorMessage(
        error instanceof Error ? error.message : "送信に失敗しました。時間をおいてお試しください。",
      );
    } finally {
      // トークンは1回限り。成否にかかわらず必ず次の分を取り直す。
      tokenRef.current = null;
      if (widgetIdRef.current !== null) {
        window.turnstile?.reset(widgetIdRef.current);
        setStatus("loading-challenge");
      }
    }
  };

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-2">
      <Script src={TURNSTILE_SCRIPT} strategy="afterInteractive" onReady={renderWidget} />

      <label htmlFor={inputId} className="text-sm font-medium">
        メッセージ
      </label>

      <textarea
        id={inputId}
        value={value}
        onChange={(event) => setValue(event.target.value)}
        onKeyDown={(event) => {
          // Enter で送信 / Shift+Enter で改行（IME変換中は送信しない）
          if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
            event.preventDefault();
            event.currentTarget.form?.requestSubmit();
          }
        }}
        rows={3}
        maxLength={4000}
        disabled={disabled || status === "sending"}
        aria-describedby={errorMessage ? errorId : undefined}
        aria-invalid={status === "error"}
        className="w-full resize-none rounded-md border border-neutral-300 p-3 disabled:opacity-60"
        placeholder="質問を入力してください"
      />

      {/* 不可視チャレンジのマウント先。対話が必要なときだけ内容が描画される */}
      <div ref={containerRef} />

      {/* エラーは支援技術にも即座に伝える */}
      <p id={errorId} role="alert" aria-live="assertive" className="min-h-5 text-sm text-red-600">
        {errorMessage}
      </p>

      <button
        type="submit"
        disabled={!canSubmit}
        aria-busy={isBusy}
        className="self-end rounded-md bg-neutral-900 px-4 py-2 text-white disabled:opacity-50"
      >
        {status === "sending" ? "送信中…" : status === "loading-challenge" ? "確認中…" : "送信"}
      </button>
    </form>
  );
}