buildmymcpserver/apps/web/app/templates/page.tsx

'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { ShieldCheck, GitFork, Activity } from 'lucide-react';
import { apiFetch } from '@/lib/api';
import { cn } from '@/lib/cn';
import { Logo } from '@/components/logo';
import { Input } from '@/components/input';

interface Template {
  id: string;
  slug: string;
  title: string;
  shortDescription: string;
  category: string;
  verified: boolean;
  forkCount: number;
  activeDeployments: number;
  ownerName: string | null;
  ownerOrgName: string | null;
  createdAt: string;
}

type Sort = 'trending' | 'top' | 'newest';

export default function TemplatesMarketplace() {
  const [templates, setTemplates] = useState<Template[] | null>(null);
  const [categories, setCategories] = useState<string[]>([]);
  const [sort, setSort] = useState<Sort>('trending');
  const [category, setCategory] = useState('');
  const [search, setSearch] = useState('');

  useEffect(() => {
    const params = new URLSearchParams({ sort });
    if (category) params.set('category', category);
    apiFetch<{ templates: Template[]; categories: string[] }>(`/v1/templates?${params}`).then((r) => {
      setTemplates(r.templates);
      setCategories(r.categories);
    });
  }, [sort, category]);

  const visible = templates?.filter((t) =>
    search
      ? t.title.toLowerCase().includes(search.toLowerCase()) ||
        t.shortDescription.toLowerCase().includes(search.toLowerCase())
      : true,
  );

  return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-50 border-b border-[--color-border] bg-[--color-bg]/85 backdrop-blur-md">
        <div className="mx-auto flex h-12 max-w-6xl items-center justify-between px-6">
          <div className="flex items-center gap-3">
            <Logo />
            <span className="text-[12.5px] text-[--color-fg-subtle]">/ templates</span>
          </div>
          <nav className="flex items-center gap-2">
            <Link
              href="/"
              className="text-[12.5px] text-[--color-fg-muted] transition-colors hover:text-[--color-fg]"
            >
              Home
            </Link>
            <Link
              href="/login"
              className="rounded-md bg-[--color-accent] px-3 py-1.5 text-[12.5px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
            >
              Start building
            </Link>
          </nav>
        </div>
      </header>

      <main className="mx-auto w-full max-w-6xl flex-1 px-6 py-12">
        <header className="mb-8 max-w-2xl">
          <div className="text-[11px] uppercase tracking-[0.16em] text-[--color-fg-subtle]">
            Marketplace
          </div>
          <h1 className="mt-2 text-[32px] font-semibold tracking-tight">
            MCP server templates
          </h1>
          <p className="mt-3 text-[14px] leading-relaxed text-[--color-fg-muted]">
            Pre-built MCP servers from the community. Fork in one click — your own container, your
            own credentials, fully isolated. The template author never sees your data.
          </p>
        </header>

        <div className="mb-6 flex flex-wrap items-center gap-3 border-b border-[--color-border] pb-4">
          <div className="flex gap-1">
            {(['trending', 'top', 'newest'] as Sort[]).map((s) => (
              <button
                key={s}
                type="button"
                onClick={() => setSort(s)}
                className={cn(
                  'rounded-md px-2.5 py-1 text-[12.5px] capitalize transition-colors',
                  s === sort
                    ? 'bg-[--color-bg-elevated] text-[--color-fg]'
                    : 'text-[--color-fg-muted] hover:text-[--color-fg]',
                )}
              >
                {s}
              </button>
            ))}
          </div>
          <div className="mx-2 h-4 w-px bg-[--color-border]" />
          <select
            value={category}
            onChange={(e) => setCategory(e.target.value)}
            className="h-7 rounded-md border border-[--color-border] bg-[--color-bg-subtle] px-2 text-[12.5px] focus:border-[--color-accent] focus:outline-none"
          >
            <option value="">All categories</option>
            {categories.map((c) => (
              <option key={c} value={c}>
                {c}
              </option>
            ))}
          </select>
          <div className="flex-1" />
          <Input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Search…"
            className="w-60"
          />
        </div>

        {!visible && (
          <p className="mono text-[12px] text-[--color-fg-muted]">Loading…</p>
        )}
        {visible && visible.length === 0 && (
          <div className="panel p-12 text-center">
            <p className="text-[14px] text-[--color-fg]">No templates yet.</p>
            <p className="mt-1 text-[12.5px] text-[--color-fg-muted]">
              Build a server you&apos;re proud of and click <span className="mono">Publish as template</span>{' '}
              on its detail page.
            </p>
          </div>
        )}

        {visible && visible.length > 0 && (
          <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
            {visible.map((t) => (
              <Link
                key={t.id}
                href={`/templates/${t.slug}`}
                className="panel flex flex-col p-4 transition-colors duration-200 hover:border-[--color-border-strong]"
              >
                <div className="flex items-start justify-between gap-2">
                  <div className="flex items-center gap-1.5">
                    <h2 className="text-[14.5px] font-semibold tracking-tight">{t.title}</h2>
                    {t.verified && (
                      <span
                        className="inline-flex items-center gap-0.5 rounded-full border border-[--color-accent]/40 bg-[--color-accent]/10 px-1.5 py-0.5 text-[9.5px] font-medium text-[--color-accent]"
                        title="Verified by BuildMyMCPServer"
                      >
                        <ShieldCheck size={9} /> verified
                      </span>
                    )}
                  </div>
                  <span className="mono text-[10px] rounded-full border border-[--color-border] bg-[--color-bg-subtle] px-1.5 py-0.5 text-[--color-fg-subtle]">
                    {t.category}
                  </span>
                </div>
                <p className="mt-2 flex-1 text-[12.5px] leading-relaxed text-[--color-fg-muted]">
                  {t.shortDescription}
                </p>
                <div className="mt-4 flex items-center justify-between text-[11px] text-[--color-fg-subtle]">
                  <div className="flex items-center gap-3">
                    <span className="inline-flex items-center gap-1 mono" title="Total forks">
                      <GitFork size={11} />
                      {t.forkCount}
                    </span>
                    <span className="inline-flex items-center gap-1 mono" title="Active deployments">
                      <Activity size={11} />
                      {t.activeDeployments}
                    </span>
                  </div>
                  <span className="truncate">
                    by {t.ownerName ?? t.ownerOrgName ?? 'anonymous'}
                  </span>
                </div>
              </Link>
            ))}
          </div>
        )}
      </main>

      <footer className="border-t border-[--color-border] py-8">
        <div className="mx-auto max-w-6xl px-6 text-[12px] text-[--color-fg-subtle]">
          Every template is isolated: forking creates your own container with your own secrets.
        </div>
      </footer>
    </div>
  );
}