import * as React from "react";
import type { Metadata } from "next";
import { notFound, redirect } from "next/navigation";
import { getAdminSession } from "@/lib/admin/auth";
import { blogService } from "@/lib/blog-service";
import { Container } from "@/components/container";
import { Breadcrumbs } from "@/components/breadcrumbs";
import { ArticleReader } from "@/components/blog/article-reader";
import { Eye, ArrowLeft, ShieldAlert } from "lucide-react";
import Link from "next/link";
import { Button } from "@/components/ui/button";

export const dynamic = "force-dynamic";

export const metadata: Metadata = {
  title: "Secure Article Preview — Quto AI CMS",
  robots: { index: false, follow: false },
};

interface PreviewPageProps {
  params: Promise<{ id: string }>;
}

export default async function AdminPreviewPage({ params }: PreviewPageProps) {
  const sessionCtx = await getAdminSession();
  if (!sessionCtx) {
    redirect("/admin/login");
  }

  const { id } = await params;
  const post = await blogService.getPostForPreview(id);

  if (!post) {
    notFound();
  }

  return (
    <div className="min-h-screen bg-white text-neutral-900 dark:bg-neutral-950 dark:text-neutral-100">
      {/* Editorial Preview Notice Banner */}
      <div className="sticky top-0 z-50 border-b border-amber-200 bg-amber-50/95 px-4 py-2.5 backdrop-blur-sm text-xs text-amber-900 dark:border-amber-900/50 dark:bg-amber-950/90 dark:text-amber-200">
        <div className="mx-auto flex max-w-6xl items-center justify-between gap-4">
          <div className="flex items-center gap-2 font-medium">
            <ShieldAlert className="h-4 w-4 text-amber-600" />
            <span>
              <strong>Editorial Preview Mode:</strong> Viewing <em>{post.title}</em> (Status:{" "}
              <strong>{post.status}</strong>, Version: {post.version}
              {post.hasWorkingDraft ? " • Working Draft (Uncommitted Changes)" : ""}).
              {post.hasWorkingDraft && (
                <span className="ml-1.5 text-amber-700 dark:text-amber-300 font-semibold">
                  (Public site continues showing live version until Update Live is clicked)
                </span>
              )}
            </span>
          </div>
          <div className="flex items-center gap-2">
            <Link href={`/admin/posts/${post.id}`}>
              <Button size="sm" variant="outline" className="h-7 text-xs gap-1 border-amber-300">
                <ArrowLeft className="h-3 w-3" />
                <span>Return to Studio</span>
              </Button>
            </Link>
          </div>
        </div>
      </div>

      {/* Public Article Layout Rendering */}
      <div className="relative overflow-hidden pb-16 pt-6">
        <Container className="max-w-6xl">
          <Breadcrumbs
            className="pt-2"
            items={[
              { label: "Blog", href: "/blog" },
              { label: post.title },
            ]}
          />

          <ArticleReader
            post={post as any}
            relatedPosts={[]}
            prevPost={null}
            nextPost={null}
          />
        </Container>
      </div>
    </div>
  );
}