shadow-gunbuilder-ai-proto/app/vault/page.tsx

// app/vault/page.tsx
"use client";

import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";

import { useAuth } from "@/context/AuthContext";

type BuildDto = {
  id: string; // internal numeric id (not used by UI)
  uuid: string; // public identifier
  title: string;
  description?: string | null;
  isPublic?: boolean | null;
  createdAt?: string | null;
  updatedAt?: string | null;
};

const API_BASE_URL =
  process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";

// UUID validator (defensive)
const isUuid = (v: string) =>
  /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(
    v
  );

function fmt(d?: string | null) {
  if (!d) return "—";
  const dt = new Date(d);
  if (Number.isNaN(dt.getTime())) return d;
  return dt.toLocaleString();
}

export default function VaultPage() {
  const router = useRouter();
  const { user, loading, getAuthHeaders } = useAuth();

  const [builds, setBuilds] = useState<BuildDto[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  const authed = !!user;

  // Redirect if not logged in
  useEffect(() => {
    if (!loading && !authed) {
      router.replace("/login");
    }
  }, [loading, authed, router]);

  const headers = useMemo(() => getAuthHeaders(), [getAuthHeaders]);

  // Fetch user builds
  useEffect(() => {
    if (loading || !authed) return;

    let cancelled = false;

    (async () => {
      setBusy(true);
      setError(null);

      try {
        const res = await fetch(`${API_BASE_URL}/api/v1/builds/me`, {
          method: "GET",
          headers,
          credentials: "include",
        });

        if (!res.ok) {
          const text = await res.text().catch(() => "");
          throw new Error(text || `Request failed (${res.status})`);
        }

        const data = (await res.json()) as BuildDto[];
        if (!cancelled) setBuilds(Array.isArray(data) ? data : []);
      } catch (e: any) {
        if (!cancelled) setError(e?.message || "Failed to load builds");
      } finally {
        if (!cancelled) setBusy(false);
      }
    })();

    return () => {
      cancelled = true;
    };
  }, [loading, authed, headers]);

  if (loading) {
    return (
      <div className="mx-auto max-w-6xl px-4 py-6">
        <div className="text-sm opacity-70">Loading…</div>
      </div>
    );
  }

  // Already redirected
  if (!authed) return null;

  return (
    <div className="mx-auto max-w-6xl px-4 py-6">
      {/* Header */}
      <div className="mb-6 flex items-start justify-between gap-4">
        <div>
          <h1 className="text-2xl font-semibold">Vault</h1>
          <p className="text-sm opacity-70">
            Your saved builds. Open one to keep tweaking parts, or add details
            to submit it to the community.
          </p>
        </div>

        <div className="flex items-center gap-3">
          <Link
            href="/builder"
            className="rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-sm hover:bg-white/10"
          >
            New Build
          </Link>
          <Link href="/account" className="text-sm opacity-80 hover:underline">
            Account →
          </Link>
        </div>
      </div>

      {/* Error */}
      {error && (
        <div className="mb-4 rounded-xl border border-red-500/30 bg-red-500/10 p-3 text-sm">
          {error}
        </div>
      )}

      {/* Builds list */}
      <div className="rounded-xl border border-white/10 bg-white/5">
        <div className="flex items-center justify-between border-b border-white/10 px-4 py-3">
          <div className="text-sm font-medium">My Builds</div>
          <div className="text-xs opacity-70">
            {busy ? "Refreshing…" : `${builds.length} total`}
          </div>
        </div>

        {builds.length === 0 ? (
          <div className="p-4 text-sm opacity-70">
            No builds yet. Create one in the builder and hit “Save Build”.
          </div>
        ) : (
          <ul className="divide-y divide-white/10">
            {builds.map((b) => {
              const valid = !!b?.uuid && isUuid(String(b.uuid));
              const published = Boolean(b.isPublic);

              const openHref = valid
                ? `/builder?load=${encodeURIComponent(b.uuid)}`
                : "#";

              const detailsHref = valid
                ? `/vault/${encodeURIComponent(b.uuid)}/edit`
                : "#";

              return (
                <li
                  key={b.uuid}
                  className="p-4 flex items-start justify-between gap-4"
                >
                  <div className="min-w-0">
                    <div className="flex items-center gap-2">
                      <div className="font-medium truncate">{b.title}</div>

                      {/* Status chip */}
                      <span
                        className={`shrink-0 rounded-full border px-2 py-0.5 text-[11px] ${
                          published
                            ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-200"
                            : "border-white/10 bg-white/5 text-white/70"
                        }`}
                        title={
                          published
                            ? "This build is public (community-visible)."
                            : "Draft (only visible in your Vault)."
                        }
                      >
                        {published ? "Published" : "Draft"}
                      </span>

                      {!valid && (
                        <span
                          className="shrink-0 rounded-full border border-red-500/30 bg-red-500/10 px-2 py-0.5 text-[11px] text-red-200"
                          title="This build record has an invalid UUID. The backend returned a bad identifier."
                        >
                          Invalid UUID
                        </span>
                      )}
                    </div>

                    <div className="mt-1 text-xs opacity-70">
                      Updated: {fmt(b.updatedAt)} • UUID:{" "}
                      <span className="font-mono">{b.uuid}</span>
                    </div>

                    {b.description && (
                      <div className="mt-2 text-sm opacity-80 line-clamp-2">
                        {b.description}
                      </div>
                    )}
                  </div>

                  <div className="flex shrink-0 items-center gap-2">
                    <Link
                      href={openHref}
                      aria-disabled={!valid}
                      tabIndex={!valid ? -1 : 0}
                      className={`rounded-md border px-3 py-1.5 text-xs transition-colors ${
                        valid
                          ? "border-white/10 bg-white/5 hover:bg-white/10"
                          : "border-white/10 bg-white/5 opacity-40 pointer-events-none"
                      }`}
                      title={
                        valid
                          ? "Load this build into the builder"
                          : "Invalid build id"
                      }
                    >
                      Open
                    </Link>

                    <Link
                      href={detailsHref}
                      aria-disabled={!valid}
                      tabIndex={!valid ? -1 : 0}
                      className={`rounded-md border px-3 py-1.5 text-xs transition-colors ${
                        valid
                          ? "border-white/10 bg-white/5 hover:bg-white/10"
                          : "border-white/10 bg-white/5 opacity-40 pointer-events-none"
                      }`}
                      title={
                        valid
                          ? "Add details + submit/publish later"
                          : "Invalid build id"
                      }
                    >
                      Edit
                    </Link>
                  </div>
                </li>
              );
            })}
          </ul>
        )}
      </div>
    </div>
  );
}