import { Form, Link, useLoaderData, useNavigation } from "react-router";
import type { Route } from "./+types/favorites";
import {
  addFavorite,
  deleteFavorite,
  deletePasskey,
  listFavorites,
  listPasskeys,
  requireLogin,
} from "~/lib/auth.server";

export async function loader({ request }: Route.LoaderArgs) {
  requireLogin(request);
  return { favorites: listFavorites(), passkeys: listPasskeys() };
}

export async function action({ request }: Route.ActionArgs) {
  requireLogin(request);
  const form = await request.formData();
  switch (form.get("intent")) {
    case "add": {
      const added = addFavorite(String(form.get("term") ?? ""));
      return { error: added ? null : "空欄か、登録済みのワードです" };
    }
    case "delete":
      deleteFavorite(Number(form.get("id")));
      return { error: null };
    case "delete-passkey":
      return {
        error: deletePasskey(String(form.get("id"))) ? null : "最後のパスキーは削除できません",
      };
  }
  return { error: null };
}

export default function Favorites({ actionData }: Route.ComponentProps) {
  const { favorites, passkeys } = useLoaderData<typeof loader>();
  const navigation = useNavigation();
  const adding = navigation.formData?.get("intent") === "add";

  return (
    <div className="min-h-screen bg-gray-950 text-gray-100">
      <header className="border-b border-gray-800 px-4 sm:px-6 py-3 sm:py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0">
        <Link to="/" className="text-xl font-bold tracking-tight text-white">
          🎸 ライブに行くしかない
        </Link>
        <nav className="flex gap-4 sm:gap-6 text-sm text-gray-400">
          <Link to="/events" className="hover:text-white transition-colors">イベント</Link>
          <Link to="/events/by-date" className="hover:text-white transition-colors">日付別</Link>
          <Link to="/venues" className="hover:text-white transition-colors">会場一覧</Link>
          <Link to="/favorites" className="text-white font-medium">★ お気に入り</Link>
        </nav>
      </header>

      <main className="max-w-2xl mx-auto px-4 py-8 flex flex-col gap-10">
        <section>
          <div className="mb-4 flex items-center justify-between">
            <h1 className="text-2xl font-bold">お気に入り</h1>
            <Link
              to="/events?fav=1"
              className="rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-medium hover:bg-indigo-500 transition-colors"
            >
              該当イベントを見る →
            </Link>
          </div>
          <p className="mb-4 text-xs text-gray-400">
            バンド名などを登録すると、タイトルか出演者に含まれるイベントに ★ が付きます（全角/半角・大文字/小文字は区別しません）。
          </p>

          <Form method="post" className="flex gap-2" key={favorites.length}>
            <input type="hidden" name="intent" value="add" />
            <input
              name="term"
              required
              maxLength={100}
              placeholder="バンド名、イベント名..."
              className="flex-1 rounded-md bg-gray-800 border border-gray-700 px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
            />
            <button
              type="submit"
              disabled={adding}
              className="rounded-md bg-gray-700 px-4 py-1.5 text-sm font-medium hover:bg-gray-600 disabled:opacity-50 transition-colors"
            >
              追加
            </button>
          </Form>
          {actionData?.error && <p className="mt-2 text-sm text-red-400">{actionData.error}</p>}

          {favorites.length === 0 ? (
            <p className="mt-6 text-sm text-gray-500">まだ登録されていません</p>
          ) : (
            <ul className="mt-4 flex flex-col gap-1.5">
              {favorites.map((f) => (
                <li
                  key={f.id}
                  className="flex items-center gap-3 rounded-lg px-4 py-2.5 bg-gray-800/40 border border-gray-700/30 text-sm"
                >
                  <Link
                    to={`/events?keyword=${encodeURIComponent(f.term)}`}
                    className="flex-1 min-w-0 truncate hover:text-indigo-300 transition-colors"
                  >
                    {f.term}
                  </Link>
                  <span className={`text-xs tabular-nums ${f.upcoming_count > 0 ? "text-indigo-300" : "text-gray-600"}`}>
                    {f.upcoming_count} 件
                  </span>
                  <Form method="post">
                    <input type="hidden" name="intent" value="delete" />
                    <input type="hidden" name="id" value={f.id} />
                    <button type="submit" className="text-gray-500 hover:text-red-400 transition-colors" title="削除">
                      ✕
                    </button>
                  </Form>
                </li>
              ))}
            </ul>
          )}
        </section>

        <section className="border-t border-gray-800 pt-8">
          <h2 className="mb-3 text-lg font-semibold">パスキー</h2>
          <ul className="flex flex-col gap-1.5">
            {passkeys.map((p) => (
              <li key={p.id} className="flex items-center gap-3 rounded-lg px-4 py-2.5 bg-gray-800/40 border border-gray-700/30 text-sm">
                <span className="flex-1 min-w-0 truncate">{p.label ?? "（名前なし）"}</span>
                <span className="text-xs text-gray-500">
                  {p.last_used_at ? `最終使用 ${p.last_used_at.slice(0, 10)}` : `登録 ${p.created_at.slice(0, 10)}`}
                </span>
                {passkeys.length > 1 && (
                  <Form method="post">
                    <input type="hidden" name="intent" value="delete-passkey" />
                    <input type="hidden" name="id" value={p.id} />
                    <button type="submit" className="text-gray-500 hover:text-red-400 transition-colors" title="削除">
                      ✕
                    </button>
                  </Form>
                )}
              </li>
            ))}
          </ul>
          <div className="mt-4 flex gap-3">
            <Link
              to="/login"
              className="rounded-md border border-gray-700 px-4 py-1.5 text-sm text-gray-300 hover:text-white transition-colors"
            >
              パスキーを追加
            </Link>
            <Form method="post" action="/api/auth/logout">
              <button
                type="submit"
                className="rounded-md border border-gray-700 px-4 py-1.5 text-sm text-gray-400 hover:text-white transition-colors"
              >
                ログアウト
              </button>
            </Form>
          </div>
        </section>
      </main>
    </div>
  );
}