import type { Metadata } from "next";
import { notFound } from "next/navigation";
import {
  SiteClosingCta,
  SiteEmptyState,
  SitePageHero,
  SiteShell,
  SiteLink,
} from "@/components/site/site-shell";
import { resolveRequestTenant } from "@/core/tenant/request-tenant";
import { studioPageMetadata } from "@/core/tenant/studio-metadata";
import { getArchitectProfile } from "@/services/profile-service";
import { listPublishedJournal } from "@/services/journal-service";

export async function generateMetadata(): Promise<Metadata> {
  const resolved = await resolveRequestTenant();
  if (!resolved.ok) return { title: "Journal", robots: { index: false } };
  return studioPageMetadata(
    resolved.context.studioName,
    "Journal",
    `Ideas, process notes, and studio observations from ${resolved.context.studioName}.`,
  );
}

export default async function TenantJournalPage() {
  const resolved = await resolveRequestTenant();
  if (!resolved.ok) notFound();

  const [{ profile }, posts] = await Promise.all([
    getArchitectProfile(resolved.context),
    listPublishedJournal(resolved.context),
  ]);

  return (
    <SiteShell
      studioName={resolved.context.studioName}
      location={profile?.location}
      active="journal"
    >
      <main>
        <SitePageHero
          eyebrow="Insights"
          title="Journal"
          description={`Ideas, process notes, and studio observations from ${resolved.context.studioName}.`}
        />

        <section className="studio-container pb-16 pt-10 sm:pb-20 sm:pt-12">
          {posts.length === 0 ? (
            <SiteEmptyState
              title="No entries yet"
              description="Journal essays and process notes will appear here as the studio publishes them."
            />
          ) : (
            <ul className="divide-y divide-[var(--archi-line)] border-y border-[var(--archi-line)]">
              {posts.map((post) => (
                <li key={post.id}>
                  <SiteLink
                    href={`/journal/${post.slug}`}
                    className="group grid gap-3 py-10 transition sm:grid-cols-[10rem_1fr] sm:gap-10 lg:py-14"
                  >
                    {post.publishedAt ? (
                      <p className="text-sm tracking-[0.12em] text-[var(--archi-ink-muted)] uppercase">
                        {post.publishedAt.toLocaleDateString(undefined, {
                          year: "numeric",
                          month: "short",
                          day: "numeric",
                        })}
                      </p>
                    ) : (
                      <span />
                    )}
                    <div>
                      <h2 className="font-[family-name:var(--font-display)] text-[clamp(1.5rem,4vw,2.25rem)] tracking-tight transition group-hover:opacity-70 sm:text-4xl">
                        {post.title}
                      </h2>
                      {post.excerpt ? (
                        <p className="mt-3 max-w-2xl text-[var(--archi-ink-muted)]">
                          {post.excerpt}
                        </p>
                      ) : null}
                      <span className="mt-5 inline-flex text-sm tracking-wide text-[var(--archi-ink-muted)] opacity-0 transition group-hover:opacity-100">
                        Read →
                      </span>
                    </div>
                  </SiteLink>
                </li>
              ))}
            </ul>
          )}
        </section>

        <SiteClosingCta studioName={resolved.context.studioName} />
      </main>
    </SiteShell>
  );
}