import { requireAuth } from "../lib/auth.server";
import type { Route } from "./+types/dashboard";

export function meta({}: Route.MetaArgs) {
  return [{ title: "Dashboard | The Biergarten App" }];
}

export async function loader({ request }: Route.LoaderArgs) {
  const auth = await requireAuth(request);
  return {
    username: auth.username,
    userAccountId: auth.userAccountId,
  };
}

export default function Dashboard({ loaderData }: Route.ComponentProps) {
  const { username, userAccountId } = loaderData;

  return (
    <div className="min-h-screen bg-base-200">
      <div className="mx-auto max-w-4xl px-6 py-10 space-y-6">
        <div className="card bg-base-100 shadow">
          <div className="card-body">
            <h2 className="card-title text-2xl">Welcome, {username}!</h2>
            <p className="text-base-content/70">
              You are successfully authenticated. This is a protected page that
              requires a valid session.
            </p>

            <div className="bg-base-200 rounded-box p-4 mt-2">
              <p className="text-xs font-semibold uppercase tracking-widest text-base-content/50 mb-3">
                Session Info
              </p>
              <div className="stats stats-vertical w-full">
                <div className="stat py-2">
                  <div className="stat-title">Username</div>
                  <div className="stat-value text-lg font-mono">{username}</div>
                </div>
                <div className="stat py-2">
                  <div className="stat-title">User ID</div>
                  <div className="stat-desc font-mono text-xs mt-1">
                    {userAccountId}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="card bg-base-100 shadow">
          <div className="card-body">
            <h2 className="card-title">Auth Flow Demo</h2>
            <p className="text-sm text-base-content/70">
              This demo showcases the following authentication features:
            </p>
            <ul className="list">
              <li className="list-row">
                <div>
                  <p className="font-semibold">Login</p>
                  <p className="text-sm text-base-content/60">
                    POST to <code className="kbd kbd-sm">/api/auth/login</code>{" "}
                    with username &amp; password
                  </p>
                </div>
              </li>
              <li className="list-row">
                <div>
                  <p className="font-semibold">Register</p>
                  <p className="text-sm text-base-content/60">
                    POST to{" "}
                    <code className="kbd kbd-sm">/api/auth/register</code> with
                    full user details
                  </p>
                </div>
              </li>
              <li className="list-row">
                <div>
                  <p className="font-semibold">Session</p>
                  <p className="text-sm text-base-content/60">
                    JWT access &amp; refresh tokens stored in an HTTP-only
                    cookie
                  </p>
                </div>
              </li>
              <li className="list-row">
                <div>
                  <p className="font-semibold">Protected Routes</p>
                  <p className="text-sm text-base-content/60">
                    This dashboard requires authentication via{" "}
                    <code className="kbd kbd-sm">requireAuth()</code>
                  </p>
                </div>
              </li>
              <li className="list-row">
                <div>
                  <p className="font-semibold">Token Refresh</p>
                  <p className="text-sm text-base-content/60">
                    POST to{" "}
                    <code className="kbd kbd-sm">/api/auth/refresh</code> with
                    refresh token
                  </p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}