"use client";

import { PortableText, PortableTextProps } from "@portabletext/react";
import Image from "next/image";
import Link from "next/link";
import React, { useMemo } from "react";
import { YouTubeEmbed } from "@next/third-parties/google";
import { Highlight, themes } from "prism-react-renderer";
import { CopyButton } from "@/components/ui/copy-button";
import { CheckCircle2, Quote } from "lucide-react";
import { urlFor } from "@/sanity/lib/image";
import CalloutBox from "@/components/ui/callout-box";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { cn } from "@/lib/utils";

// Helper to format inline markdown like **bold**, *italic*, [link](href)
function formatInlineText(text: string): React.ReactNode {
  if (typeof text !== "string" || !text) return text;

  let clean = text
    .replace(/^>\s*\*{1,3}/, "")
    .replace(/\*{1,3}$/, "")
    .replace(/^→\s*/, "")
    .replace(/^\*{2}→\s*/, "**");

  const regex = /(\[.*?\]\(.*?\)|\*\*.*?\*\*|\*.*?\*|`.*?`)/g;
  const parts = clean.split(regex);

  if (parts.length === 1) return clean;

  return parts.map((part, i) => {
    if (!part) return null;

    const linkMatch = part.match(/^\[(.*?)\]\((.*?)\)$/);
    if (linkMatch) {
      const [, label, href] = linkMatch;
      const isExt = href.startsWith("http") || href.startsWith("mailto");
      return (
        <Link
          key={i}
          href={href}
          target={isExt ? "_blank" : undefined}
          rel={isExt ? "noopener noreferrer" : undefined}
          className="text-brand-gold hover:underline font-medium"
        >
          {label}
        </Link>
      );
    }

    const boldMatch = part.match(/^\*\*(.*?)\*\*$/);
    if (boldMatch) {
      return (
        <strong key={i} className="font-semibold text-brand-dark">
          {boldMatch[1]}
        </strong>
      );
    }

    const italicMatch = part.match(/^\*(.*?)\*$/);
    if (italicMatch) {
      return (
        <em key={i} className="italic text-brand-dark/90">
          {italicMatch[1]}
        </em>
      );
    }

    const codeMatch = part.match(/^`(.*?)`$/);
    if (codeMatch) {
      return (
        <code
          key={i}
          className="px-1.5 py-0.5 rounded bg-brand-sand/60 text-xs font-mono text-brand-dark"
        >
          {codeMatch[1]}
        </code>
      );
    }

    return part;
  });
}

function formatChildren(children: React.ReactNode): React.ReactNode {
  if (typeof children === "string") {
    return formatInlineText(children);
  }
  if (Array.isArray(children)) {
    return React.Children.map(children, (child) => {
      if (typeof child === "string") {
        return formatInlineText(child);
      }
      return child;
    });
  }
  return children;
}

// Preprocess Portable Text blocks to handle Notion callouts, Scenarios, frontmatter cleanup, and clean structure
function preprocessPortableText(blocks: any[]): any[] {
  if (!Array.isArray(blocks)) return blocks;

  const result: any[] = [];
  let i = 0;

  while (i < blocks.length) {
    const block = blocks[i];
    const text = block.children?.map((c: any) => c.text).join("") || "";
    const trimmed = text.trim();

    // 0. Skip frontmatter metadata blocks leftover from markdown import
    if (
      i < 12 &&
      /^(title|slug|customPath|pageId|createdTime|lastEditedTime|cover):/i.test(
        trimmed
      )
    ) {
      i++;
      continue;
    }

    // 0b. Skip redundant duplicate title H1/H2 at the very beginning of the article
    if (
      i < 5 &&
      (block.style === "h1" || block.style === "h2") &&
      (/vietnam luxury wedding cost/i.test(trimmed) ||
        /ngân sách tiệc cưới cao cấp/i.test(trimmed))
    ) {
      i++;
      continue;
    }

    // 1. Detect Notion Callout pattern (<details> or > 💡 **Callout:**)
    if (
      text.includes("<details>") ||
      text.includes("Callout:") ||
      text.startsWith("> 💡")
    ) {
      let title = "Vietnam Wedding Guide's Advice";
      const contentParts: string[] = [];
      let j = i;
      let foundEnd = false;

      while (j < blocks.length && j < i + 15) {
        const bText =
          blocks[j].children?.map((c: any) => c.text).join("") || "";
        const summaryMatch = bText.match(
          /<summary>\s*\**\s*(.*?)\s*\**\s*<\/summary>/i
        );
        if (summaryMatch) {
          title = summaryMatch[1].replace(/[*#]/g, "").trim();
        } else if (
          !bText.includes("<details>") &&
          !bText.includes("</details>") &&
          !bText.includes("Callout:") &&
          !bText.startsWith("> 💡")
        ) {
          if (bText.trim()) {
            contentParts.push(bText.trim());
          }
        }

        if (bText.includes("</details>")) {
          foundEnd = true;
          j++;
          break;
        }
        j++;
      }

      if (foundEnd || contentParts.length > 0) {
        result.push({
          _key: block._key || `callout-${i}`,
          _type: "callout",
          tone: "gold",
          title,
          content: contentParts.join("\n\n"),
        });
        i = j;
        continue;
      }
    }

    // 2. Detect Scenario 1, Scenario 2, Scenario 3 pattern (English & Vietnamese)
    const isScenarioStart =
      /Scenario\s*1/i.test(text) ||
      /Kịch bản\s*1/i.test(text) ||
      text.includes("Nếu hai bạn là người trực tiếp") ||
      text.includes("Nếu hai bạn");

    if (isScenarioStart) {
      const scenarios: Array<{
        title: string;
        upside: string;
        downside: string;
      }> = [];
      let j = i;
      let curTitle = "";
      let curUpside = "";
      let curDownside = "";

      while (j < blocks.length && j < i + 25) {
        const bText =
          blocks[j].children?.map((c: any) => c.text).join("") || "";

        // Check if this line is a scenario header
        const scenMatch = bText.match(
          /(?:Scenario\s*(\d+)[:\s]+|Kịch bản\s*(\d+)[:\s]+|→\s*(?:Nếu\s+|Scenario\s*\d+:?\s*))(.*?)(?:\*\*|$)/i
        );
        const isHeader =
          scenMatch ||
          bText.includes("→ Nếu") ||
          (blocks[j].style === "h4" &&
            (bText.includes("Scenario") || bText.includes("Nếu")));

        if (isHeader) {
          if (curTitle) {
            scenarios.push({
              title: curTitle,
              upside: curUpside,
              downside: curDownside,
            });
            curUpside = "";
            curDownside = "";
          }

          if (scenMatch && scenMatch[1]) {
            curTitle = `Scenario ${scenMatch[1]}: ${scenMatch[3]
              ?.replace(/[*#→_]/g, "")
              .trim()}`;
          } else {
            curTitle = bText.replace(/[*#→_]/g, "").trim();
          }
        } else if (
          bText.includes("Upside:") ||
          bText.includes("Reality:") ||
          bText.includes("Lợi ích:") ||
          bText.includes("Thực tế:")
        ) {
          curUpside = bText
            .replace(/.*?(Upside|Reality|Lợi ích|Thực tế):\s*/i, "")
            .replace(/[*]/g, "")
            .trim();
        } else if (
          bText.includes("Challenge:") ||
          bText.includes("Trade-off:") ||
          bText.includes("Rationale:") ||
          bText.includes("Thách thức:") ||
          bText.includes("Đánh đổi:") ||
          bText.includes("Lý do:")
        ) {
          curDownside = bText
            .replace(
              /.*?(Challenge|Trade-off|Rationale|Thách thức|Đánh đổi|Lý do):\s*/i,
              ""
            )
            .replace(/[*]/g, "")
            .trim();
        } else if (
          scenarios.length >= 2 &&
          (blocks[j].style === "h2" ||
            blocks[j].style === "h3" ||
            (!bText.includes("Scenario") &&
              !bText.includes("Nếu") &&
              !bText.includes("Upside") &&
              !bText.includes("Lợi ích") &&
              !bText.includes("Trade-off") &&
              !bText.includes("Thách thức") &&
              !bText.includes("Challenge") &&
              !bText.includes("Reality") &&
              !bText.includes("Thực tế") &&
              !bText.includes("Rationale") &&
              !bText.includes("Lý do")))
        ) {
          break;
        }
        j++;
      }

      if (curTitle) {
        scenarios.push({
          title: curTitle,
          upside: curUpside,
          downside: curDownside,
        });
      }

      if (scenarios.length >= 2) {
        result.push({
          _key: block._key || `scenarios-${i}`,
          _type: "scenariosGrid",
          items: scenarios,
        });
        i = j;
        continue;
      }
    }

    // 3. Skip standalone <details> or </details> leftover tags
    if (
      trimmed === "<details>" ||
      trimmed === "</details>" ||
      trimmed === "> 💡 **Callout:**"
    ) {
      i++;
      continue;
    }

    // 4. Standalone quotes starting with `>` or `> ***`
    if (trimmed.startsWith(">")) {
      const cleanQuote = trimmed
        .replace(/^>\s*/, "")
        .replace(/^\*+|\*+$/g, "")
        .trim();
      result.push({
        _key: block._key || `quote-${i}`,
        _type: "quote",
        content: cleanQuote,
      });
      i++;
      continue;
    }

    result.push(block);
    i++;
  }

  return result;
}

const portableTextComponents: PortableTextProps["components"] = {
  types: {
    tableBlock: ({ value }) => {
      const rows = value?.rows;
      if (!rows || rows.length === 0) return null;
      const [headerRow, ...bodyRows] = rows;
      return (
        <div className="my-8 overflow-x-auto rounded-2xl border border-brand-border/80 bg-white shadow-xs">
          <table className="w-full border-collapse text-left text-sm">
            <thead className="bg-brand-sand/60 border-b border-brand-border/80 text-brand-dark font-title uppercase tracking-wider text-xs">
              <tr>
                {headerRow.cells?.map((cell: string, idx: number) => (
                  <th key={idx} className="p-4 font-semibold">
                    {formatInlineText(cell)}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody className="divide-y divide-brand-border/40 text-brand-dark/85">
              {bodyRows.map((row: any, rIdx: number) => (
                <tr key={rIdx} className="hover:bg-brand-sand/20 transition-colors">
                  {row.cells?.map((cell: string, cIdx: number) => (
                    <td key={cIdx} className="p-4 align-top leading-relaxed">
                      {formatInlineText(cell)}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      );
    },
    faqAccordion: ({ value }) => {
      const items = value?.items;
      if (!items || items.length === 0) return null;
      return (
        <div className="my-8 rounded-2xl border border-brand-border/80 bg-white p-6 shadow-xs">
          <Accordion type="single" collapsible className="w-full space-y-3">
            {items.map((item: any, idx: number) => (
              <AccordionItem
                key={idx}
                value={`faq-item-${idx}`}
                className="border-b border-brand-border/50 py-1 last:border-b-0"
              >
                <AccordionTrigger className="text-left font-title text-base sm:text-lg font-bold text-brand-dark hover:text-brand-gold transition-colors py-3">
                  {item.question}
                </AccordionTrigger>
                <AccordionContent className="text-brand-dark/85 text-sm sm:text-base leading-relaxed pt-1 pb-4">
                  {formatInlineText(item.answer)}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      );
    },
    callout: ({ value }) => {
      return (
        <CalloutBox
          title={value.title}
          tone={value.tone || "gold"}
          className="my-8"
        >
          <div className="space-y-3">
            {typeof value.content === "string"
              ? value.content.split("\n\n").map((p: string, idx: number) => (
                  <p key={idx} className="leading-relaxed">
                    {formatInlineText(p)}
                  </p>
                ))
              : value.content}
          </div>
        </CalloutBox>
      );
    },
    quote: ({ value }) => {
      return (
        <blockquote className="my-8 pl-6 border-l-2 border-brand-gold italic font-title text-lg sm:text-xl text-brand-dark bg-brand-sand/30 py-5 px-6 rounded-r-2xl shadow-2xs">
          <p className="leading-relaxed">{formatInlineText(value.content)}</p>
        </blockquote>
      );
    },
    scenariosGrid: ({ value }) => {
      return (
        <div className="grid grid-cols-1 md:grid-cols-3 gap-5 my-10 not-prose">
          {value.items?.map((scen: any, idx: number) => {
            const isVietnamese = /[\u00C0-\u1EF9]/.test(
              scen.title || scen.upside || ""
            );
            const upsideLabel = isVietnamese ? "Lợi ích:" : "Advantage:";
            const downsideLabel = isVietnamese
              ? "Thách thức / Rủi ro:"
              : "Trade-off / Risk:";
            return (
              <div
                key={idx}
                className="card-luxury rounded-2xl p-6 bg-brand-sand/40 border border-brand-border/80 flex flex-col justify-between shadow-xs hover:border-brand-gold/50 transition-all duration-300"
              >
                <div>
                  <span className="text-[11px] font-semibold text-brand-gold uppercase tracking-[0.2em] block mb-2">
                    Scenario 0{idx + 1}
                  </span>
                  <h4 className="font-title text-base sm:text-lg font-bold text-brand-dark mb-3">
                    {scen.title.replace(
                      /^(?:Scenario\s*\d+:?|Kịch bản\s*\d+:?)\s*/i,
                      ""
                    )}
                  </h4>
                  <div className="space-y-3 text-xs sm:text-sm">
                    {scen.upside && (
                      <p className="text-brand-dark/90 leading-relaxed">
                        <strong className="text-brand-dark font-semibold">
                          {upsideLabel}
                        </strong>{" "}
                        {formatInlineText(scen.upside)}
                      </p>
                    )}
                    {scen.downside && (
                      <p className="text-brand-muted leading-relaxed">
                        <strong className="text-brand-dark font-semibold">
                          {downsideLabel}
                        </strong>{" "}
                        {formatInlineText(scen.downside)}
                      </p>
                    )}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      );
    },
    gallery: ({ value }) => {
      const { images, layout, caption } = value;
      const colsClass =
        layout === "3col"
          ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
          : "grid-cols-1 sm:grid-cols-2";
      return (
        <figure className="my-8">
          <div className={cn("grid gap-4", colsClass)}>
            {images?.map((img: any, i: number) => (
              <div
                key={i}
                className="relative aspect-[4/3] rounded-2xl overflow-hidden bg-brand-sand"
              >
                <Image
                  src={urlFor(img).url()}
                  alt={img.alt || caption || "Wedding Gallery"}
                  fill
                  className="object-cover hover:scale-105 transition-transform duration-500"
                  sizes="(min-width: 768px) 50vw, 100vw"
                />
              </div>
            ))}
          </div>
          {caption && (
            <figcaption className="mt-3 text-center text-xs text-brand-muted italic">
              {caption}
            </figcaption>
          )}
        </figure>
      );
    },
    image: ({ value }) => {
      const { url, metadata } = value.asset;
      const { lqip, dimensions } = metadata;
      return (
        <Image
          src={url}
          alt={value.alt || "Image"}
          width={dimensions.width}
          height={dimensions.height}
          placeholder={lqip ? "blur" : undefined}
          blurDataURL={lqip || undefined}
          style={{
            borderRadius: "1rem",
            marginLeft: "auto",
            marginRight: "auto",
          }}
          quality={100}
        />
      );
    },
    youtube: ({ value }) => {
      const { videoId } = value;
      return (
        <div className="aspect-video max-w-[45rem] rounded-xl overflow-hidden mb-4">
          <YouTubeEmbed videoid={videoId} params="rel=0" />
        </div>
      );
    },
    code: ({ value }) => {
      return (
        <div className="grid my-4 overflow-x-auto rounded-2xl border border-brand-border text-xs lg:text-sm bg-brand-dark text-brand-sand">
          <div className="flex items-center justify-between px-4 py-2 border-b border-brand-dark/20 bg-brand-dark/95">
            <div className="text-brand-muted font-mono">
              {value.filename || ""}
            </div>
            <CopyButton code={value.code} />
          </div>
          <Highlight
            theme={themes.vsDark}
            code={value.code}
            language={value.language || "typescript"}
          >
            {({ style, tokens, getLineProps, getTokenProps }) => (
              <pre
                style={{
                  ...style,
                  padding: "1.5rem",
                  margin: 0,
                  overflow: "auto",
                  backgroundColor: "transparent",
                }}
              >
                {tokens.map((line, i) => (
                  <div key={i} {...getLineProps({ line })}>
                    {line.map((token, key) => (
                      <span key={key} {...getTokenProps({ token })} />
                    ))}
                  </div>
                ))}
              </pre>
            )}
          </Highlight>
        </div>
      );
    },
  },
  block: {
    normal: ({ children }) => {
      const rawText = Array.isArray(children)
        ? children.map((c) => (typeof c === "string" ? c : "")).join("")
        : typeof children === "string"
        ? children
        : "";

      // If this paragraph looks like an imported bullet point (e.g. "1. **Bold**" or "* **Bold**")
      const bulletMatch = rawText.match(/^(\d+\.\s+|[*•-]\s+)(.*)$/);
      if (bulletMatch) {
        return (
          <div className="flex items-start gap-3 text-base sm:text-lg leading-relaxed text-brand-dark/90 my-3">
            <span className="shrink-0 mt-1.5 w-4 h-4 rounded-full bg-brand-sand flex items-center justify-center text-brand-gold shadow-2xs">
              <CheckCircle2 size={12} />
            </span>
            <span className="flex-1">{formatInlineText(bulletMatch[2])}</span>
          </div>
        );
      }

      return (
        <p className="text-base sm:text-lg leading-relaxed text-brand-dark/85 my-4">
          {formatChildren(children)}
        </p>
      );
    },
    h1: ({ children }) => (
      <h1 className="font-title text-3xl sm:text-4xl font-bold text-brand-dark mt-12 mb-6 tracking-tight">
        {formatChildren(children)}
      </h1>
    ),
    h2: ({ children }) => {
      const rawText = Array.isArray(children)
        ? children.map((c) => (typeof c === "string" ? c : "")).join("")
        : typeof children === "string"
        ? children
        : "";
      const id = rawText
        .toLowerCase()
        .replace(/[^a-z0-9]+/g, "-")
        .replace(/^-|-$/g, "");
      return (
        <h2
          id={id || undefined}
          className="scroll-mt-28 font-title text-2xl sm:text-3xl font-bold text-brand-dark mt-12 mb-4 pb-2 border-b border-brand-border/60"
        >
          {formatChildren(children)}
        </h2>
      );
    },
    h3: ({ children }) => {
      const rawText = Array.isArray(children)
        ? children.map((c) => (typeof c === "string" ? c : "")).join("")
        : typeof children === "string"
        ? children
        : "";
      const id = rawText
        .toLowerCase()
        .replace(/[^a-z0-9]+/g, "-")
        .replace(/^-|-$/g, "");
      return (
        <h3
          id={id || undefined}
          className="scroll-mt-28 font-title text-xl sm:text-2xl font-bold text-brand-dark mt-8 mb-3"
        >
          {formatChildren(children)}
        </h3>
      );
    },
    h4: ({ children }) => (
      <h4 className="font-title text-lg sm:text-xl font-bold text-brand-dark mt-6 mb-2">
        {formatChildren(children)}
      </h4>
    ),
    h5: ({ children }) => (
      <h5 className="font-title text-base sm:text-lg font-bold text-brand-dark mt-4 mb-2">
        {formatChildren(children)}
      </h5>
    ),
    blockquote: ({ children }) => (
      <blockquote className="my-8 pl-6 border-l-2 border-brand-gold italic font-title text-lg sm:text-xl text-brand-dark bg-brand-sand/30 py-5 px-6 rounded-r-2xl shadow-2xs">
        {formatChildren(children)}
      </blockquote>
    ),
  },
  marks: {
    link: ({ value, children }) => {
      const isExternal =
        (value?.href || "").startsWith("http") ||
        (value?.href || "").startsWith("https") ||
        (value?.href || "").startsWith("mailto");
      const target = isExternal ? "_blank" : undefined;
      return (
        <Link
          href={value?.href || "#"}
          target={target}
          rel={target ? "noopener noreferrer" : undefined}
          className="text-brand-gold hover:underline font-medium"
        >
          {children}
        </Link>
      );
    },
    strong: ({ children }) => (
      <strong className="font-semibold text-brand-dark">{children}</strong>
    ),
    em: ({ children }) => (
      <em className="italic text-brand-dark/90">{children}</em>
    ),
  },
  list: {
    bullet: ({ children }) => (
      <ul className="space-y-3 my-6 pl-0 list-none">{children}</ul>
    ),
    number: ({ children }) => (
      <ol className="space-y-3 my-6 pl-6 list-decimal marker:text-brand-gold marker:font-semibold text-base sm:text-lg text-brand-dark/85">
        {children}
      </ol>
    ),
  },
  listItem: {
    bullet: ({ children }) => (
      <li className="flex items-start gap-3 text-sm sm:text-base leading-relaxed text-brand-dark/90">
        <span className="shrink-0 mt-1 w-4 h-4 rounded-full bg-brand-sand flex items-center justify-center text-brand-gold shadow-2xs">
          <CheckCircle2 size={12} />
        </span>
        <span className="flex-1">{formatChildren(children)}</span>
      </li>
    ),
    number: ({ children }) => (
      <li className="my-1.5 leading-relaxed text-brand-dark/90">
        {formatChildren(children)}
      </li>
    ),
  },
};

const PortableTextRenderer = ({
  value,
}: {
  value: PortableTextProps["value"];
}) => {
  const processedValue = useMemo(() => {
    return preprocessPortableText(value as any[]);
  }, [value]);

  return <PortableText value={processedValue} components={portableTextComponents} />;
};

export default PortableTextRenderer;