import {Image} from '@shopify/hydrogen';
import {Link} from 'react-router';
import {motion} from 'motion/react';
import {ArrowLeft, Clock, Tag} from 'lucide-react';
import {MOCK_ABIIR_JOURNAL_POSTS} from '~/lib/journal';
import type {AbiirJournalPostCms} from '~/lib/journal';
import {abiirJournalImageIsRemote} from '~/lib/journal';
import {PAGE_CONTENT_MAX_WIDTH_CLASS} from '~/lib/pageTitle';
import {PAGE_TITLE_TYPOGRAPHY_CLASS} from '~/lib/pageTitle';
// ─── Sanity: GROQ projection (single `journalPost` document) ─────────────────

/**
 * GROQ field projection for one journal article. Reused by `buildJournalPostGroq`.
 * Sanity schema: `journalPost` in `Hydrogen/studio` (title, slug, content, image, etc.).
 */
export const JOURNAL_POST_GROQ_PROJECTION = /* groq */ `{
  "slug": slug.current,
  title,
  subtitle,
  excerpt,
  cardExcerpt,
  content,
  author,
  authorRole,
  date,
  readTime,
  category,
  featured,
  tags,
  image{
    alt,
    asset->{
      _id,
      url,
      metadata{dimensions{width,height}}
    }
  }
}` as const;

/**
 * Builds a **parameterized** GROQ query for a single post by `slug` (JSON-stringified, safe for GROQ).
 * Use in the route `loader` with `context.sanity.loadQuery(buildJournalPostGroq(params.slug))`.
 */
export function buildJournalPostGroq(slug: string): string {
  const safe = JSON.stringify(slug);
  return `*[_type == "journalPost" && slug.current == ${safe}][0]${JOURNAL_POST_GROQ_PROJECTION}`;
}

/**
 * Static **example** query (illustrates shape only). Prefer `buildJournalPostGroq` in production.
 */
export const JOURNAL_POST_PAGE_GROQ_EXAMPLE = `*[_type == "journalPost" && slug.current == "ancient-art-ayurvedic-skincare"][0]${JOURNAL_POST_GROQ_PROJECTION}` as const;

// ─── Mock: visual / Storybook (matches `React` blog post shape) ─────────────

function buildMockRelated(post: AbiirJournalPostCms): AbiirJournalPostCms[] {
  return MOCK_ABIIR_JOURNAL_POSTS.filter(
    (p) => p.id !== post.id && p.category === post.category,
  ).slice(0, 3);
}

/** `JournalPostPage` with first seed post + related — for local preview or design QA. */
export const MOCK_JOURNAL_POST_PAGE_PROPS: {
  post: AbiirJournalPostCms;
  relatedPosts: AbiirJournalPostCms[];
} = {
  post: MOCK_ABIIR_JOURNAL_POSTS[0]!,
  relatedPosts: buildMockRelated(MOCK_ABIIR_JOURNAL_POSTS[0]!),
};

// ─── Images: Shopify Hydrogen <Image /> (local Vite + Sanity CDN) ───────────

function HeroImage({url, alt}: {url: string; alt: string}) {
  if (abiirJournalImageIsRemote(url)) {
    return (
      <Image
        alt={alt}
        className="h-full w-full object-cover brightness-[0.85]"
        data={{
          url,
          altText: alt,
          width: 1920,
          height: 1080,
        }}
        height="auto"
        loader={({src}) => src ?? ''}
        sizes="100vw"
        width="100%"
      />
    );
  }
  return (
    <Image
      alt={alt}
      className="h-full w-full object-cover brightness-[0.85]"
      height="auto"
      sizes="100vw"
      src={url}
      width="100%"
    />
  );
}

function RelatedThumb({url, alt}: {url: string; alt: string}) {
  const imgClass =
    'block h-full w-full min-h-0 object-cover transition-transform duration-500 group-hover:scale-105';
  if (abiirJournalImageIsRemote(url)) {
    return (
      <Image
        alt={alt}
        className={imgClass}
        data={{
          url,
          altText: alt,
          width: 1200,
          height: 800,
        }}
        height="auto"
        loader={({src}) => src ?? ''}
        sizes="(min-width: 640px) 33vw, 100vw"
        width="100%"
      />
    );
  }
  return (
    <Image
      alt={alt}
      className={imgClass}
      height="auto"
      sizes="(min-width: 640px) 33vw, 100vw"
      src={url}
      width="100%"
    />
  );
}

// ─── Page: blog detail (1:1 with `React/src/app/pages/JournalPost.tsx`) ─────

export type JournalPostPageProps = {
  /** Single article (from GROQ / loader) or mock. */
  post: AbiirJournalPostCms;
  relatedPosts: AbiirJournalPostCms[];
};

export function JournalPostPage({post, relatedPosts}: JournalPostPageProps) {
  const paragraphs = post.content
    .split('\n\n')
    .map((p) => p.trim())
    .filter(Boolean);

  return (
    <div className="min-h-screen bg-[#F8F4EF]">
      {/* Breadcrumb — Figma: px-6 py-4, border 6% black */}
      <div className="border-b border-[rgba(26,26,24,0.06)] px-[24px] py-[16px] lg:px-[48px]">
        <div
          className={`mx-auto flex items-center gap-[8px] ${PAGE_CONTENT_MAX_WIDTH_CLASS}`}
        >
          <Link
            className="flex items-center gap-[6px] font-['Jost',sans-serif] text-[0.65rem] font-normal uppercase leading-none tracking-[0.1em] text-[#7A7068] no-underline transition-opacity hover:opacity-60"
            to="/journal"
          >
            <ArrowLeft
              className="shrink-0"
              size={11}
              strokeWidth={1.5}
            />
            Journal
          </Link>
          <span className="select-none text-[0.65rem] leading-none text-[rgba(26,26,24,0.2)]">
            /
          </span>
          <span className="font-['Jost',sans-serif] text-[0.65rem] font-normal uppercase leading-none tracking-[0.1em] text-[#1A1A18]">
            {post.category}
          </span>
        </div>
      </div>

      {/* Hero: 55vh, min 360px (reference) */}
      <div className="h-[55vh] min-h-[360px] w-full overflow-hidden">
        <HeroImage
          alt={post.title}
          url={post.image}
        />
      </div>

      <div
        className={`mx-auto px-[24px] py-[56px] lg:px-[48px] ${PAGE_CONTENT_MAX_WIDTH_CLASS}`}
      >
        <div>
          {/* Category & meta — gap-4, mb-6 = 16px / 24px */}
          <div className="mb-[24px] flex flex-wrap items-center gap-[16px]">
            <span className="bg-[#1A1A18] px-[12px] py-[4px] font-['Jost',sans-serif] text-[0.55rem] font-medium uppercase not-italic leading-none tracking-[0.15em] text-[#F8F4EF]">
              {post.category}
            </span>
            <div className="flex items-center gap-[6px]">
              <Clock
                className="shrink-0 text-[#7A7068]"
                size={12}
                strokeWidth={1.5}
              />
              <span className="font-['Jost',sans-serif] text-[0.65rem] font-light not-italic leading-none text-[#7A7068]">
                {post.readTime}
              </span>
            </div>
            <span className="font-['Jost',sans-serif] text-[0.65rem] font-light not-italic leading-none text-[#7A7068]">
              {post.date}
            </span>
          </div>

          <motion.h1
            className="m-0 mb-[12px] font-['Cormorant_Garamond',serif] text-[2.8rem] font-normal not-italic leading-[1.15] tracking-[-1.19px] text-[#1A1A18]"
            initial={{opacity: 0, y: 12}}
            transition={{duration: 0.55}}
            viewport={{once: true}}
            whileInView={{opacity: 1, y: 0}}
          >
            {post.title}
          </motion.h1>
          <p className="mb-[32px] font-['Cormorant_Garamond',serif] text-[clamp(1rem,2vw,1.3rem)] font-light italic leading-normal text-[#7A7068]">
            {post.subtitle}
          </p>

          {/* Author — border-bottom, gap-3, padding bottom 8 */}
          <div className="mb-[32px] flex items-center gap-[12px] border-b border-[rgba(26,26,24,0.08)] pb-[32px]">
            <div className="flex h-[40px] w-[40px] shrink-0 items-center justify-center font-['Cormorant_Garamond',serif] text-[0.9rem] not-italic leading-none text-[#C17D5C] [background-color:#EDE8E0]">
              {post.author
                .split(' ')
                .map((n) => n[0])
                .join('')}
            </div>
            <div>
              <p className="font-['Jost',sans-serif] text-[0.75rem] font-medium not-italic leading-none text-[#1A1A18]">
                {post.author}
              </p>
              <p className="mt-[2px] font-['Jost',sans-serif] text-[0.62rem] font-light not-italic leading-none tracking-[0.05em] text-[#7A7068]">
                {post.authorRole}
              </p>
            </div>
          </div>

          {/* Content — space-y-5 = 20px; body Jost 0.92rem /1.9; Cormorant “bold” lines 1.15rem/1.5 */}
          <div className="space-y-5">
            {paragraphs.map((para, i) => {
              const isBold = para.startsWith('**') && para.includes('**');
              if (isBold) {
                const boldText = para.replace(/\*\*(.*?)\*\*/g, '$1');
                return (
                  <p
                    key={i}
                    className="font-['Cormorant_Garamond',serif] text-[1.15rem] font-medium not-italic leading-[1.5] text-[#1A1A18]"
                  >
                    {boldText}
                  </p>
                );
              }
              return (
                <p
                  key={i}
                  className="font-['Jost',sans-serif] text-[0.92rem] font-light not-italic leading-[1.9] text-[#4A4845]"
                >
                  {para}
                </p>
              );
            })}
          </div>

          {/* Tags — border-top, pt-10 mt-10 */}
          <div className="mt-[40px] flex flex-wrap gap-[8px] border-t border-[rgba(26,26,24,0.08)] pt-[40px]">
            <div className="mr-[8px] flex items-center gap-[8px]">
              <Tag
                className="shrink-0 text-[#7A7068]"
                size={12}
                strokeWidth={1.5}
              />
              <span className="font-['Jost',sans-serif] text-[0.6rem] font-normal uppercase not-italic leading-none tracking-[0.12em] text-[#7A7068]">
                Tags:
              </span>
            </div>
            {post.tags.map((tag) => (
              <span
                key={tag}
                className="border border-[rgba(26,26,24,0.12)] px-[12px] py-[4px] font-['Jost',sans-serif] text-[0.58rem] font-normal uppercase not-italic leading-none tracking-[0.1em] text-[#7A7068]"
              >
                {tag}
              </span>
            ))}
          </div>
        </div>
      </div>

      {/* Continue reading — #EDE8E0, py-16 / lg:py-20, max 1400 */}
      {relatedPosts.length > 0 && (
        <section className="bg-[#EDE8E0] py-[64px] lg:py-[80px]">
          <div className="mx-auto max-w-[1400px] px-[24px] lg:px-[48px]">
            <motion.h2
              className={`m-0 mb-[40px] w-full text-[#1A1A18] ${PAGE_TITLE_TYPOGRAPHY_CLASS}`}
              initial={{opacity: 0, y: 12}}
              transition={{duration: 0.55}}
              viewport={{once: true}}
              whileInView={{opacity: 1, y: 0}}
            >
              Continue Reading
            </motion.h2>
            <div className="grid grid-cols-1 gap-[32px] sm:grid-cols-3">
              {relatedPosts.map((relPost, i) => (
                <motion.div
                  key={relPost.id}
                  className="min-w-0"
                  initial={{opacity: 0, y: 20}}
                  transition={{duration: 0.5, delay: i * 0.1}}
                  viewport={{once: true}}
                  whileInView={{opacity: 1, y: 0}}
                >
                  <Link
                    className="group block no-underline"
                    prefetch="intent"
                    to={`/journal/${relPost.id}`}
                  >
                    <div className="relative mb-[16px] aspect-[4/3] w-full overflow-hidden [background-color:#F8F4EF]">
                      <RelatedThumb
                        alt={relPost.title}
                        url={relPost.image}
                      />
                    </div>
                    <span className="font-['Jost',sans-serif] text-[0.55rem] font-medium uppercase not-italic leading-none tracking-[0.12em] text-[#C17D5C]">
                      {relPost.category}
                    </span>
                    <h3 className="mt-1 font-['Cormorant_Garamond',serif] text-[1.15rem] font-normal not-italic leading-[1.3] text-[#1A1A18] transition-opacity group-hover:opacity-70">
                      {relPost.title}
                    </h3>
                    <div className="mt-3 flex items-center gap-1">
                      <span className="font-['Jost',sans-serif] text-[0.62rem] font-normal uppercase not-italic leading-none tracking-[0.1em] text-[#7A7068] transition-colors group-hover:text-[#1A1A18]">
                        Read →
                      </span>
                    </div>
                  </Link>
                </motion.div>
              ))}
            </div>
          </div>
        </section>
      )}
    </div>
  );
}

export function JournalPostNotFound() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-[#F8F4EF]">
      <div className="text-center">
        <p className="font-['Cormorant_Garamond',serif] text-[1.5rem] not-italic text-[#7A7068]">
          Article not found
        </p>
        <Link
          className="mt-4 inline-block border-b border-[#C17D5C] font-['Jost',sans-serif] text-[0.7rem] font-normal uppercase leading-none tracking-[0.15em] text-[#C17D5C] no-underline"
          to="/journal"
        >
          Back to Journal
        </Link>
      </div>
    </div>
  );
}