/**
 * Nomadic Studios — Remix SEO Usage Examples
 * app/utils/seo.examples.ts
 *
 * Reference file — do not import. Shows implementation pattern
 * for every route type in the application.
 */

import { getSeo, getEventSchema } from '~/utils/seo';
import type { MetaFunction } from '@remix-run/node';

// ─────────────────────────────────────────────────────────────────────────────
// PATTERN 1: Static page — no loader data needed
// Apply to: /, /about, /services, /partners, /join-us, /equipment, /people
// ─────────────────────────────────────────────────────────────────────────────

// app/routes/_index.tsx  (homepage)
export const homeMeta: MetaFunction = () => getSeo('home');

// app/routes/studios.video.tsx
export const videoMeta: MetaFunction = () => getSeo('studios.video');

// app/routes/studios.music.tsx
export const musicMeta: MetaFunction = () => getSeo('studios.music');

// app/routes/studios.photo.tsx
export const photoMeta: MetaFunction = () => getSeo('studios.photo');

// app/routes/studios.art.tsx
export const artMeta: MetaFunction = () => getSeo('studios.art');

// app/routes/studios.fashion.tsx
export const fashionMeta: MetaFunction = () => getSeo('studios.fashion');

// app/routes/studios.maker.tsx
export const makerMeta: MetaFunction = () => getSeo('studios.maker');

// app/routes/equipment.tsx
export const equipmentMeta: MetaFunction = () => getSeo('equipment');

// app/routes/people.tsx
export const peopleMeta: MetaFunction = () => getSeo('people');

// app/routes/about.tsx
export const aboutMeta: MetaFunction = () => getSeo('about');

// app/routes/partners.tsx
export const partnersMeta: MetaFunction = () => getSeo('partners');

// app/routes/join-us.tsx
export const joinUsMeta: MetaFunction = () => getSeo('join-us');


// ─────────────────────────────────────────────────────────────────────────────
// PATTERN 2: Dynamic page — meta drawn from loader data
// Apply to: /events (individual event pages), /news posts, any DB-driven page
// ─────────────────────────────────────────────────────────────────────────────

// app/routes/events.$slug.tsx
//
// loader returns: { event: { title, description, og_image, start_date, end_date, ... } }

import type { LoaderFunctionArgs } from '@remix-run/node';
import { json } from '@remix-run/node';

// Example loader shape — adapt to your actual data model
interface EventLoaderData {
  event: {
    title: string;
    description: string;
    og_image?: string;
    slug: string;
    start_date: string;
    end_date: string;
    location_name: string;
    city: string;
    country: string;
  };
}

export const eventMeta: MetaFunction<() => Promise<ReturnType<typeof json<EventLoaderData>>>> = ({ data }) => {
  if (!data?.event) return getSeo('events'); // fallback to static events page meta

  const baseMeta = getSeo('events', {
    title: `${data.event.title} | Nomadic Studios`,
    description: data.event.description,
    image: data.event.og_image,
    canonical: `https://nomadicstudios.net/events/${data.event.slug}`,
  });

  // Append event-specific schema on top of base meta
  const eventSchema = getEventSchema({
    name: data.event.title,
    description: data.event.description,
    startDate: data.event.start_date,
    endDate: data.event.end_date,
    locationName: data.event.location_name,
    city: data.event.city,
    country: data.event.country,
    imageUrl: data.event.og_image,
  });

  return [...baseMeta, eventSchema];
};


// ─────────────────────────────────────────────────────────────────────────────
// PATTERN 3: /events index page (workshop listing)
// ─────────────────────────────────────────────────────────────────────────────

// app/routes/events._index.tsx
export const eventsIndexMeta: MetaFunction = () => getSeo('events');


// ─────────────────────────────────────────────────────────────────────────────
// PATTERN 4: Auth pages — no indexing, minimal meta
// Apply to: /login, /signup
// These pages should NOT use getSeo() — keep them minimal and
// ensure they are excluded from sitemap.xml (already done).
// ─────────────────────────────────────────────────────────────────────────────

// app/routes/login.tsx
export const loginMeta: MetaFunction = () => [
  { title: 'Login | Nomadic Studios' },
  { name: 'robots', content: 'noindex, nofollow' },
];

// app/routes/signup.tsx
export const signupMeta: MetaFunction = () => [
  { title: 'Sign Up | Nomadic Studios' },
  { name: 'robots', content: 'noindex, nofollow' },
];


// ─────────────────────────────────────────────────────────────────────────────
// ROOT LAYOUT NOTE
// app/root.tsx
//
// Remix merges meta from root + route. In your root.tsx, you can set
// fallback/global meta that all routes inherit, then override per-route.
//
// Recommended root.tsx meta export (fallback only — routes override):
//
//   export const meta: MetaFunction = () => [
//     { charset: 'utf-8' },
//     { name: 'viewport', content: 'width=device-width,initial-scale=1' },
//     ...getSeo('home'),   // fallback — individual routes will override
//   ];
//
// If a route exports its own meta(), it completely replaces the root meta
// unless you use the matches pattern to merge. For most cases, per-route
// meta is sufficient and simpler.
// ─────────────────────────────────────────────────────────────────────────────