path: root/app/routes/home.tsx

import { useRef, useState } from "react";
import { Form, redirect, useNavigation, useSearchParams, Link } from "react-router";
import type { Route } from "./+types/home";
import {
  listTodos,
  createTodo,
  toggleTodo,
  deleteTodo,
  countActiveTodos,
  hasAnyCredential,
} from "~/lib/db.server";
import { getSession, commitSession } from "~/lib/session.server";

export async function loader({ request }: Route.LoaderArgs) {
  const session = await getSession(request.headers.get("Cookie"));
  const userId = session.get("userId") as string | undefined;
  const username = session.get("username") as string | undefined;
  const url = new URL(request.url);
  const filter = url.searchParams.get("filter") ?? "all";
  const hasCredentials = hasAnyCredential();

  if (!userId) {
    return { isAuthenticated: false, hasCredentials, todos: [], activeCount: 0, filter, username: null };
  }

  const todos = listTodos(userId, filter);
  const activeCount = countActiveTodos(userId);
  return { isAuthenticated: true, hasCredentials, todos, activeCount, filter, username: username ?? null };
}

export async function action({ request }: Route.ActionArgs) {
  const session = await getSession(request.headers.get("Cookie"));
  const userId = session.get("userId") as string | undefined;
  if (!userId) throw new Response("Unauthorized", { status: 401 });

  const form = await request.formData();
  const intent = String(form.get("intent") ?? "");

  if (intent === "create") {
    const title = String(form.get("title") ?? "").trim();
    if (!title) return { error: "タイトルを入力してください" };
    createTodo(userId, title);
    return redirect("/", { headers: { "Set-Cookie": await commitSession(session) } });
  }

  if (intent === "toggle") {
    const id = String(form.get("id") ?? "");
    const done = form.get("done") === "1";
    if (id) toggleTodo(id, userId, done);
    return redirect(request.headers.get("Referer") ?? "/", {
      headers: { "Set-Cookie": await commitSession(session) },
    });
  }

  if (intent === "delete") {
    const id = String(form.get("id") ?? "");
    if (id) deleteTodo(id, userId);
    return redirect(request.headers.get("Referer") ?? "/", {
      headers: { "Set-Cookie": await commitSession(session) },
    });
  }

  return { error: "不正なリクエスト" };
}

function bufferToB64url(buf: ArrayBuffer): string {
  const bytes = new Uint8Array(buf);
  let binary = "";
  for (let i = 0; i < bytes.byteLength; i++) binary += String.fromCharCode(bytes[i]);
  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
}

function b64urlToBuffer(b64url: string): ArrayBuffer {
  const base64 = b64url.replace(/-/g, "+").replace(/_/g, "/");
  const pad = "=".repeat((4 - (base64.length % 4)) % 4);
  const binary = atob(base64 + pad);
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
  return bytes.buffer;
}

export default function Home({ loaderData, actionData }: Route.ComponentProps) {
  const { isAuthenticated, hasCredentials, todos, activeCount, filter, username } = loaderData;
  const navigation = useNavigation();
  const isSubmitting = navigation.state === "submitting";
  const inputRef = useRef<HTMLInputElement>(null);
  const [searchParams] = useSearchParams();
  const [loginStatus, setLoginStatus] = useState<"idle" | "loading" | "error">("idle");
  const [loginError, setLoginError] = useState("");

  async function handleLogin() {
    setLoginStatus("loading");
    setLoginError("");
    try {
      const optRes = await fetch("/api/passkey?intent=login-options", { method: "POST" });
      if (!optRes.ok) throw new Error("オプション取得に失敗しました");
      const options = await optRes.json() as Record<string, unknown>;

      const credential = await navigator.credentials.get({
        publicKey: {
          challenge: b64urlToBuffer(options.challenge as string),
          rpId: options.rpId as string,
          allowCredentials: (options.allowCredentials as Array<{ id: string; transports?: string[] }> ?? []).map((c) => ({
            id: b64urlToBuffer(c.id),
            type: "public-key" as const,
            transports: c.transports as AuthenticatorTransport[] | undefined,
          })),
          userVerification: "required" as UserVerificationRequirement,
          timeout: 60000,
        },
      }) as PublicKeyCredential | null;

      if (!credential) throw new Error("認証に失敗しました");

      const assertion = credential.response as AuthenticatorAssertionResponse;
      const verRes = await fetch("/api/passkey?intent=login-verify", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          id: credential.id,
          rawId: bufferToB64url(credential.rawId),
          response: {
            clientDataJSON: bufferToB64url(assertion.clientDataJSON),
            authenticatorData: bufferToB64url(assertion.authenticatorData),
            signature: bufferToB64url(assertion.signature),
            userHandle: assertion.userHandle ? bufferToB64url(assertion.userHandle) : undefined,
          },
          authenticatorAttachment: credential.authenticatorAttachment ?? undefined,
          clientExtensionResults: credential.getClientExtensionResults(),
          type: "public-key",
        }),
      });
      if (!verRes.ok) {
        const err = await verRes.json() as { error?: string };
        throw new Error(err.error ?? "認証に失敗しました");
      }
      window.location.href = "/";
    } catch (e) {
      setLoginStatus("error");
      setLoginError(e instanceof Error ? e.message : "エラーが発生しました");
    }
  }

  const currentFilter = searchParams.get("filter") ?? "all";

  if (!isAuthenticated) {
    return (
      <div className="wrap">
        <header className="site-header">
          <h1>todo</h1>
        </header>
        <div className="login-box">
          {hasCredentials ? (
            <>
              <button className="btn-login" onClick={handleLogin} disabled={loginStatus === "loading"}>
                {loginStatus === "loading" ? "認証中…" : "パスキーでログイン"}
              </button>
              {loginStatus === "error" && <p className="error-msg">{loginError}</p>}
            </>
          ) : (
            <Link to="/auth/register" className="btn-login">はじめる</Link>
          )}
        </div>
      </div>
    );
  }

  return (
    <div className="wrap">
      <header className="site-header">
        <h1>todo</h1>
        <nav className="header-nav">
          <span className="username">{username}</span>
          <Form method="post" action="/auth/logout">
            <button type="submit" className="logout-btn">ログアウト</button>
          </Form>
        </nav>
      </header>

      <div className="compose">
        <Form
          method="post"
          onSubmit={() => {
            // Reset input after successful submit
            setTimeout(() => inputRef.current?.focus(), 50);
          }}
        >
          <input type="hidden" name="intent" value="create" />
          <div className="compose-row">
            <input
              ref={inputRef}
              type="text"
              name="title"
              placeholder="新しいタスクを追加…"
              autoComplete="off"
              autoFocus
            />
            <button type="submit" disabled={isSubmitting}>追加</button>
          </div>
        </Form>
        {actionData && "error" in actionData && <p className="error-msg">{actionData.error}</p>}
      </div>

      <nav className="filters">
        <Link to="/" className={currentFilter === "all" ? "active" : ""}>すべて</Link>
        <Link to="/?filter=active" className={currentFilter === "active" ? "active" : ""}>未完了</Link>
        <Link to="/?filter=done" className={currentFilter === "done" ? "active" : ""}>完了</Link>
      </nav>

      <ul className="todo-list">
        {todos.length === 0 && (
          <li className="empty">
            {filter === "done" ? "完了したタスクはありません" : filter === "active" ? "未完了のタスクはありません" : "タスクがありません"}
          </li>
        )}
        {todos.map((todo) => (
          <li key={todo.id} className={`todo-item ${todo.done ? "done" : ""}`}>
            <Form method="post" className="toggle-form">
              <input type="hidden" name="intent" value="toggle" />
              <input type="hidden" name="id" value={todo.id} />
              <input type="hidden" name="done" value={todo.done ? "0" : "1"} />
              <button type="submit" className="checkbox" aria-label={todo.done ? "未完了に戻す" : "完了にする"}>
                {todo.done ? (
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <rect width="16" height="16" rx="3" fill="#6c63ff" />
                    <path d="M3.5 8L6.5 11L12.5 5" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                ) : (
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <rect x="0.5" y="0.5" width="15" height="15" rx="2.5" stroke="#4b5563" />
                  </svg>
                )}
              </button>
            </Form>
            <span className="todo-title">{todo.title}</span>
            <Form method="post" className="delete-form">
              <input type="hidden" name="intent" value="delete" />
              <input type="hidden" name="id" value={todo.id} />
              <button type="submit" className="delete-btn" aria-label="削除">×</button>
            </Form>
          </li>
        ))}
      </ul>

      {todos.length > 0 && (
        <footer className="todo-footer">
          <span>{activeCount} 件未完了</span>
        </footer>
      )}
    </div>
  );
}