import { notFound } from "next/navigation";
import type { Metadata, ResolvingMetadata } from "next";
import type { Story } from "@/app/components/stories/StoryStepScroll";
import { AWS_CDN_URL } from "@/utils/staticValues";

import StoryCover from "@/app/components/stories/StoryCover";
import StoryBottom from "@/app/components/stories/StoryBottom";
import OtherStories from "@/app/components/stories/OtherStories";
import StoryStepScroll from "@/app/components/stories/StoryStepScroll";

type ApiResponse = {
  success: boolean;
  vision_board?: any;
  other_stories?: any[];
  data: Story & {
    id: number;
    title: string;
    thumbnail: string;
    pieceThumbnail: string;
  };
};

async function getStoryBySlug(slug: string): Promise<Story | null> {
  const apiBaseUrl = process.env.API_BASE_URL;
  if (!apiBaseUrl) {
    console.warn("API_BASE_URL not set");
    return null;
  }

  try {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 10000);

    const response = await fetch(`${apiBaseUrl}/stories/${slug}`, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      next: { revalidate: 0 },
      signal: controller.signal,
    });

    clearTimeout(timeoutId);

    if (!response.ok) return null;

    const result: ApiResponse = await response.json();

    if (!result.success || !result.data) return null;

    return {
      slug: result.data.slug,
      visionFor: result.data.visionFor,
      designHouse: result.data.designHouse,
      coverTitle: result.data.coverTitle,
      title: result.data.title,
      subtitle: result.data.subtitle,
      cover: result.data.cover,
      visionSubtitle: result.data.visionSubtitle,
      drawingSubtitle: result.data.drawingSubtitle,
      artisanSubtitle: result.data.artisanSubtitle,
      finalSubtitle: result.data.finalSubtitle,
      drawingFront: result.data.drawingFront,
      drawingBack: result.data.drawingBack,
      artisanBeginNote: result.data.artisanBeginNote,
      artisanVideo: result.data.artisanVideo,
      finalSketchImg: result.data.finalSketchImg,
      finalPieceImg: result.data.finalPieceImg,
      piecesGallery: (result.data.piecesGallery ?? []).map((p: any) => ({
        type: p.type === "video" ? "video" : "image",
        src: p.src,
      })),
      bottomSlides: result.data.bottomSlides ?? [],
      visionBoard: result.vision_board,
      otherStories: result.other_stories,
    };
  } catch (error) {
    if (error instanceof Error && error.name === "AbortError") {
      console.warn(`Story API request timed out for slug: ${slug}`);
    } else {
      console.error("Error fetching story from API:", error);
    }
    return null;
  }
}

type StoryPageProps = {
  params: Promise<{ slug: string }>;
};

function toTitleCase(str: string) {
  return str.replace(/\w\S*/g, (txt) =>
    txt.charAt(0).toUpperCase() + txt.substring(1).toLowerCase()
  );
}

export async function generateMetadata(
  { params }: StoryPageProps,
  _parent: ResolvingMetadata,
): Promise<Metadata> {
  const { slug } = await params;
  const story = await getStoryBySlug(slug);

  if (!story)
    return {
      title: "Story not found - Morni",
      description: "This story could not be found.",
    };

  const pageUrl = `${process.env.NEXT_PUBLIC_BASE_URL}/stories/${slug}`;
  const rawImage = story.cover || story.finalPieceImg || "";
  const ogImage = `${AWS_CDN_URL}/${rawImage}`;
  const title = `${toTitleCase(story.coverTitle)} | Morni Stories`;

  return {
    title: title,
    description: story.subtitle || "Explore inspiring stories on Morni.",
    openGraph: {
      title:title,
      description: story.subtitle || "Explore inspiring stories on Morni.",
      url: pageUrl,
      siteName: "Morni",
      type: "article",
      images: ogImage
        ? [{ url: ogImage, width: 800, height: 1000, alt: story.title }]
        : [],
    },
    twitter: {
      card: "summary_large_image",
      title: title,
      description: story.subtitle || "Explore inspiring stories on Morni.",
      images: ogImage ? [ogImage] : [],
    },
  };
}

export default async function StoryDetail({ params }: StoryPageProps) {
  const { slug } = await params;
  const story = await getStoryBySlug(slug);

  if (!story) return notFound();

  return (
    <div className="relative bg-gray-100 pt-16">
      {/* Background textures */}
      <div className="mob-noise absolute top-0 left-0 z-1 h-full w-full" />
      <div className="absolute -top-8 -left-1/5 z-2 h-64 w-64 bg-[url('/images/chakra.webp')] bg-cover opacity-50 md:h-150 md:w-150" />

      <main className="storyWrapper relative z-10 flex flex-col">
        <StoryCover
          coverTitle={story.title}
          subtitle={story.subtitle}
          cover={story.cover}
        />
      </main>

      <StoryStepScroll story={story} />

      <div className="storyWrapper relative z-2">
        <OtherStories stories={story.otherStories ?? []} />
      </div>

      <StoryBottom bottomSlides={story.bottomSlides ?? []} />
    </div>
  );
}