/**
 * ContentViewTemplate - Template for displaying individual content with all metadata
 * 
 * Features:
 * - Centered layout with max-width 1200px
 * - Modern styling with Tailwind CSS
 * - Displays all content metadata
 * - Responsive design
 * 
 * Usage:
 * <ContentViewTemplate
 *   content={contentData}
 *   loading={false}
 *   onBack={() => navigate('/writer/content')}
 * />
 */

import React, { useEffect, useMemo, useState } from 'react';
import { Content, fetchImages, ImageRecord } from '../services/api';
import { ArrowLeftIcon, CalendarIcon, TagIcon, FileTextIcon, CheckCircleIcon, XCircleIcon, ClockIcon, PencilIcon, ImageIcon, BoltIcon } from '../icons';
import { useNavigate } from 'react-router-dom';

interface ContentViewTemplateProps {
  content: Content | null;
  loading: boolean;
  onBack?: () => void;
}

interface ArticleSection {
  id: string;
  heading: string;
  headingLevel: number;
  bodyHtml: string;
}

interface ParsedArticle {
  introHtml: string;
  sections: ArticleSection[];
}

const imageStatusClassMap: Record<string, string> = {
  generated: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-200',
  pending: 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-200',
  queued: 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-200',
  failed: 'bg-rose-100 text-rose-700 dark:bg-rose-500/20 dark:text-rose-200',
  error: 'bg-rose-100 text-rose-700 dark:bg-rose-500/20 dark:text-rose-200',
};

const serializeNodes = (nodes: Node[]): string =>
  nodes
    .map((node) => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        return (node as HTMLElement).outerHTML;
      }
      if (node.nodeType === Node.TEXT_NODE) {
        return node.textContent ?? '';
      }
      return '';
    })
    .join('');

const slugify = (value: string, index: number): string => {
  const base = value
    .toLowerCase()
    .trim()
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-+|-+$/g, '');
  return base || `section-${index + 1}`;
};

const parseContentHtml = (html: string): ParsedArticle => {
  if (!html) {
    return { introHtml: '', sections: [] };
  }

  let parser: DOMParser | null = null;
  if (typeof window !== 'undefined' && typeof window.DOMParser !== 'undefined') {
    parser = new window.DOMParser();
  } else if (typeof DOMParser !== 'undefined') {
    parser = new DOMParser();
  }

  if (!parser) {
    return {
      introHtml: html,
      sections: [],
    };
  }

  try {
    const doc = parser.parseFromString(html, 'text/html');
    const body = doc.body;
    const introNodes: Node[] = [];
    const sections: ArticleSection[] = [];

    let currentSection: { heading: string; level: number; nodes: Node[] } | null = null;

    Array.from(body.childNodes).forEach((node) => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        const element = node as HTMLElement;
        if (element.tagName === 'H2') {
          if (currentSection) {
            sections.push({
              id: slugify(currentSection.heading, sections.length),
              heading: currentSection.heading || `Section ${sections.length + 1}`,
              headingLevel: currentSection.level,
              bodyHtml: serializeNodes(currentSection.nodes).trim(),
            });
          }

          currentSection = {
            heading: element.textContent?.trim() || '',
            level: 2,
            nodes: [],
          };
          return;
        }
      }

      if (currentSection) {
        currentSection.nodes.push(node);
      } else {
        introNodes.push(node);
      }
    });

    if (currentSection) {
      sections.push({
        id: slugify(currentSection.heading, sections.length),
        heading: currentSection.heading || `Section ${sections.length + 1}`,
        headingLevel: currentSection.level,
        bodyHtml: serializeNodes(currentSection.nodes).trim(),
      });
    }

    return {
      introHtml: serializeNodes(introNodes).trim(),
      sections,
    };
  } catch {
    return {
      introHtml: html,
      sections: [],
    };
  }
};

interface MetadataPrompts {
  featured_prompt?: string;
  in_article_prompts?: string[];
}

const extractImagePromptsFromMetadata = (metadata: unknown): MetadataPrompts | null => {
  if (!metadata || typeof metadata !== 'object') {
    return null;
  }

  const seen = new WeakSet<object>();

  const search = (value: unknown): MetadataPrompts | null => {
    if (!value || typeof value !== 'object') return null;

    if (seen.has(value as object)) {
      return null;
    }
    seen.add(value as object);

    if (Array.isArray(value)) {
      for (const item of value) {
        const found = search(item);
        if (found) return found;
      }
      return null;
    }

    const obj = value as Record<string, unknown>;
    const hasFeatured = typeof obj.featured_prompt === 'string';
    const hasInArticle = Array.isArray(obj.in_article_prompts);

    if (hasFeatured || hasInArticle) {
      return {
        featured_prompt: hasFeatured ? (obj.featured_prompt as string) : undefined,
        in_article_prompts: hasInArticle
          ? (obj.in_article_prompts as unknown[]).filter((item): item is string => typeof item === 'string')
          : undefined,
      };
    }

    for (const key of Object.keys(obj)) {
      const found = search(obj[key]);
      if (found) return found;
    }

    return null;
  };

  return search(metadata);
};

const getImageSrc = (image: ImageRecord | null): string | undefined => {
  if (!image) return undefined;
  if (image.image_url) return image.image_url;
  if (image.image_path) return `/api/v1/writer/images/${image.id}/file/`;
  return undefined;
};

const ImageStatusPill = ({ status, className = '' }: { status?: string | null; className?: string }) => {
  if (!status) return null;
  const normalized = status.toLowerCase();
  const classes = imageStatusClassMap[normalized] || 'bg-slate-100 text-slate-700 dark:bg-slate-700/70 dark:text-slate-200';
  return (
    <span className={`inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wide ${classes} ${className}`}>
      {status}
    </span>
  );
};

const PromptPlaceholder = ({
  prompt,
  label,
  minHeight = 220,
}: {
  prompt?: string | null;
  label?: string;
  minHeight?: number;
}) => (
  <div
    className="flex w-full items-center justify-center rounded-3xl bg-gradient-to-br from-slate-100 via-slate-50 to-white p-8 text-center dark:from-gray-800 dark:via-gray-900 dark:to-gray-950"
    style={{ minHeight }}
  >
    <div className="max-w-xl space-y-3">
      {label && (
        <p className="text-[0.7rem] font-semibold uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400">
          {label}
        </p>
      )}
      <p className="text-sm font-medium leading-relaxed text-slate-600 dark:text-slate-300 whitespace-pre-wrap">
        {prompt || 'Image prompt available, awaiting generation.'}
      </p>
    </div>
  </div>
);

const FeaturedImageBlock = ({
  image,
  loading,
}: {
  image: ImageRecord | null;
  loading: boolean;
}) => {
  const imageSrc = getImageSrc(image);

  if (!loading && !image && !imageSrc) {
    return null;
  }

  return (
    <div className="overflow-hidden rounded-3xl border border-slate-200/80 bg-white/80 shadow-lg shadow-slate-200/40 backdrop-blur-sm dark:border-gray-800/70 dark:bg-gray-900/70 dark:shadow-black/10">
      <div className="flex items-center justify-between px-8 pt-8">
        <div className="text-xs font-semibold uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400">
          Featured Visual
        </div>
        <ImageStatusPill status={image?.status} />
      </div>
      <div className="relative mt-6">
        {loading && !imageSrc ? (
          <div className="h-[420px] animate-pulse bg-slate-200/70 dark:bg-gray-800/60" />
        ) : imageSrc ? (
          <img
            src={imageSrc}
            alt={image?.prompt ? `Featured visual: ${image.prompt}` : 'Featured visual'}
            className="h-full w-full object-cover"
            loading="lazy"
          />
        ) : (
          <PromptPlaceholder prompt={image?.prompt} minHeight={420} label="Featured Image Prompt" />
        )}
        {image?.caption && imageSrc && (
          <div className="absolute bottom-5 left-5 rounded-full bg-white/80 px-4 py-2 text-xs font-medium text-slate-600 backdrop-blur-sm dark:bg-gray-950/70 dark:text-slate-300">
            Caption aligned to hero section
          </div>
        )}
      </div>
      {image?.caption && (
        <div className="border-t border-slate-200/70 bg-white/70 px-8 py-6 text-sm leading-relaxed text-slate-600 backdrop-blur-sm dark:border-gray-800/60 dark:bg-gray-900/70 dark:text-slate-300">
          {image.caption}
        </div>
      )}
    </div>
  );
};

const SectionImageBlock = ({
  image,
  loading,
  heading,
}: {
  image: ImageRecord | null;
  loading: boolean;
  heading: string;
}) => {
  if (!image && !loading) return null;

  const imageSrc = getImageSrc(image);

  return (
    <figure className="overflow-hidden rounded-3xl border border-slate-200/70 bg-slate-50/70 shadow-inner shadow-slate-200/70 dark:border-gray-800/60 dark:bg-gray-900/40 dark:shadow-black/30">
      <div className="relative">
        {loading && !image ? (
          <div className="h-[260px] animate-pulse bg-slate-200/60 dark:bg-gray-800/60" />
        ) : imageSrc ? (
          <img
            src={imageSrc}
            alt={image?.prompt ? `${heading} visual: ${image.prompt}` : `${heading} visual`}
            className="w-full object-cover"
            loading="lazy"
          />
        ) : (
          <PromptPlaceholder prompt={image?.prompt} minHeight={260} label="In-Article Prompt" />
        )}
        <div className="absolute right-4 top-4">
          <ImageStatusPill status={image?.status} />
        </div>
      </div>
      {image?.caption && (
        <figcaption className="space-y-3 px-6 py-5 text-sm leading-relaxed text-slate-600 dark:text-slate-300">
          <p className="font-semibold uppercase tracking-[0.25em] text-slate-400 dark:text-slate-500">
            Image Caption
          </p>
          <p className="font-medium whitespace-pre-wrap">{image.caption}</p>
        </figcaption>
      )}
    </figure>
  );
};

const IntroBlock = ({ html }: { html: string }) => (
  <section className="overflow-hidden rounded-3xl border border-slate-200/80 bg-gradient-to-br from-white via-slate-50 to-white p-8 shadow-sm shadow-slate-200/60 dark:border-gray-800/70 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900 dark:shadow-black/20">
    <div className="text-xs font-semibold uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400">
      Opening Narrative
    </div>
    <div className="content-html prose prose-lg mt-6 max-w-none text-gray-800 dark:prose-invert">
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </div>
  </section>
);

// Helper to split content at first H3 tag
const splitAtFirstH3 = (html: string): { beforeH3: string; h3AndAfter: string } => {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  const h3 = doc.querySelector('h3');
  
  if (!h3) {
    return { beforeH3: html, h3AndAfter: '' };
  }
  
  const beforeNodes: Node[] = [];
  const afterNodes: Node[] = [];
  let foundH3 = false;
  
  Array.from(doc.body.childNodes).forEach((node) => {
    if (node === h3) {
      foundH3 = true;
      afterNodes.push(node);
    } else if (foundH3) {
      afterNodes.push(node);
    } else {
      beforeNodes.push(node);
    }
  });
  
  const serializeNodes = (nodes: Node[]): string =>
    nodes
      .map((node) => {
        if (node.nodeType === Node.ELEMENT_NODE) {
          return (node as HTMLElement).outerHTML;
        }
        if (node.nodeType === Node.TEXT_NODE) {
          return node.textContent ?? '';
        }
        return '';
      })
      .join('');
  
  return {
    beforeH3: serializeNodes(beforeNodes),
    h3AndAfter: serializeNodes(afterNodes),
  };
};

// Helper to check if section contains a table
const hasTable = (html: string): boolean => {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  return doc.querySelector('table') !== null;
};

const ContentSectionBlock = ({
  section,
  image,
  loading,
  index,
  imagePlacement = 'right',
  firstImage = null,
}: {
  section: ArticleSection;
  image: ImageRecord | null;
  loading: boolean;
  index: number;
  imagePlacement?: 'left' | 'center' | 'right';
  firstImage?: ImageRecord | null;
}) => {
  const hasImage = Boolean(image);
  const headingLabel = section.heading || `Section ${index + 1}`;
  const sectionHasTable = hasTable(section.bodyHtml);
  const { beforeH3, h3AndAfter } = splitAtFirstH3(section.bodyHtml);

  return (
    <section id={section.id} className="group/section scroll-mt-24">
      <div className="overflow-hidden rounded-3xl border border-slate-200/80 bg-white/90 shadow-lg shadow-slate-200/50 backdrop-blur-sm transition-transform duration-300 group-hover/section:-translate-y-1 dark:border-gray-800/70 dark:bg-gray-900/70 dark:shadow-black/20">
        <div className="flex flex-col gap-6 p-8 sm:p-10">
          <div className="flex items-center gap-4">
            <span className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-brand-500/10 text-sm font-semibold text-brand-600 dark:bg-brand-500/20 dark:text-brand-300">
              {index + 1}
            </span>
            <div className="flex flex-col">
              <span className="text-[0.7rem] font-semibold uppercase tracking-[0.35em] text-slate-400 dark:text-slate-500">
                Section Spotlight
              </span>
              <h2 className="text-2xl font-bold text-slate-900 dark:text-white sm:text-3xl">
                {headingLabel}
              </h2>
            </div>
          </div>

          {imagePlacement === 'center' && hasImage ? (
            <div className="flex flex-col gap-10">
              {/* Content before H3 */}
              {beforeH3 && (
                <div className={`content-html prose prose-lg max-w-none text-gray-800 dark:prose-invert`}>
                  <div dangerouslySetInnerHTML={{ __html: beforeH3 }} />
                </div>
              )}
              
              {/* Centered image before H3 */}
              <div className="flex justify-center">
                <div className="w-full max-w-[60%]">
                  <SectionImageBlock image={image} loading={loading} heading={headingLabel} />
                </div>
              </div>
              
              {/* H3 and remaining content */}
              {h3AndAfter && (
                <div className={`content-html prose prose-lg max-w-none text-gray-800 dark:prose-invert`}>
                  <div dangerouslySetInnerHTML={{ __html: h3AndAfter }} />
                </div>
              )}
              
              {/* Fallback if no H3 found */}
              {!beforeH3 && !h3AndAfter && (
                <div className={`content-html prose prose-lg max-w-none text-gray-800 dark:prose-invert`}>
                  <div dangerouslySetInnerHTML={{ __html: section.bodyHtml }} />
                </div>
              )}
            </div>
          ) : sectionHasTable && hasImage && firstImage ? (
            <div className="flex flex-col gap-10">
              {/* Content before H3 */}
              {beforeH3 && (
                <div className={`content-html prose prose-lg max-w-none text-gray-800 dark:prose-invert`}>
                  <div dangerouslySetInnerHTML={{ __html: beforeH3 }} />
                </div>
              )}
              
              {/* Two images side by side at 50% width each */}
              <div className="grid grid-cols-2 gap-6">
                <div className="w-full">
                  <SectionImageBlock image={image} loading={loading} heading={headingLabel} />
                </div>
                <div className="w-full">
                  <SectionImageBlock image={firstImage} loading={loading} heading="First Article Image" />
                </div>
              </div>
              
              {/* H3 and remaining content */}
              {h3AndAfter && (
                <div className={`content-html prose prose-lg max-w-none text-gray-800 dark:prose-invert`}>
                  <div dangerouslySetInnerHTML={{ __html: h3AndAfter }} />
                </div>
              )}
              
              {/* Fallback if no H3 found */}
              {!beforeH3 && !h3AndAfter && (
                <div className={`content-html prose prose-lg max-w-none text-gray-800 dark:prose-invert`}>
                  <div dangerouslySetInnerHTML={{ __html: section.bodyHtml }} />
                </div>
              )}
            </div>
          ) : (
            <div className={hasImage ? `grid gap-10 ${imagePlacement === 'left' ? 'lg:grid-cols-[minmax(0,40%)_minmax(0,60%)]' : 'lg:grid-cols-[minmax(0,60%)_minmax(0,40%)]'}` : ''}>
              {imagePlacement === 'left' && hasImage && (
                <div className="flex flex-col gap-4">
                  <SectionImageBlock image={image} loading={loading} heading={headingLabel} />
                </div>
              )}
              <div className={`content-html prose prose-lg max-w-none text-gray-800 dark:prose-invert`}>
                <div dangerouslySetInnerHTML={{ __html: section.bodyHtml }} />
              </div>
              {imagePlacement === 'right' && hasImage && (
                <div className="flex flex-col gap-4">
                  <SectionImageBlock image={image} loading={loading} heading={headingLabel} />
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

interface ArticleBodyProps {
  introHtml: string;
  sections: ArticleSection[];
  sectionImages: ImageRecord[];
  imagesLoading: boolean;
  rawHtml?: string;
}

const ArticleBody = ({ introHtml, sections, sectionImages, imagesLoading, rawHtml }: ArticleBodyProps) => {
  const hasStructuredSections = sections.length > 0;

  // Calculate image placement: right → center → left → repeat
  const getImagePlacement = (index: number): 'left' | 'center' | 'right' => {
    const position = index % 3;
    if (position === 0) return 'right';
    if (position === 1) return 'center';
    return 'left';
  };

  if (!hasStructuredSections && !introHtml && rawHtml) {
    return (
      <div className="overflow-hidden rounded-3xl border border-slate-200/80 bg-white/90 p-8 shadow-lg shadow-slate-200/50 dark:border-gray-800/70 dark:bg-gray-900/70 dark:shadow-black/20">
        <div className="content-html prose prose-lg max-w-none text-gray-800 dark:prose-invert">
          <div dangerouslySetInnerHTML={{ __html: rawHtml }} />
        </div>
      </div>
    );
  }

  // Get the first in-article image (position 0)
  const firstImage = sectionImages.length > 0 ? sectionImages[0] : null;

  return (
    <div className="space-y-12">
      {introHtml && <IntroBlock html={introHtml} />}
      {sections.map((section, index) => (
        <ContentSectionBlock
          key={section.id || `section-${index}`}
          section={section}
          image={sectionImages[index] ?? null}
          loading={imagesLoading}
          index={index}
          imagePlacement={getImagePlacement(index)}
          firstImage={firstImage}
        />
      ))}
    </div>
  );
};

export default function ContentViewTemplate({ content, loading, onBack }: ContentViewTemplateProps) {
  const navigate = useNavigate();
  const [imageRecords, setImageRecords] = useState<ImageRecord[]>([]);
  const [imagesLoading, setImagesLoading] = useState(false);
  const [imagesError, setImagesError] = useState<string | null>(null);

  const metadataPrompts = useMemo(() => extractImagePromptsFromMetadata(content?.metadata), [content?.metadata]);

  useEffect(() => {
    let isActive = true;

    if (!content?.id) {
      setImageRecords([]);
      setImagesError(null);
      setImagesLoading(false);
      return () => {
        isActive = false;
      };
    }

    setImagesLoading(true);
    fetchImages({
      content_id: content.id,
      ordering: 'position',
      page_size: 50,
    })
      .then((response) => {
        if (!isActive) return;
        setImageRecords((response?.results ?? []).filter(Boolean));
        setImagesError(null);
      })
      .catch((error: any) => {
        if (!isActive) return;
        setImagesError(error?.message || 'Unable to load images for this content.');
        setImageRecords([]);
      })
      .finally(() => {
        if (!isActive) return;
        setImagesLoading(false);
      });

    return () => {
      isActive = false;
    };
  }, [content?.id]);

  const sortedImages = useMemo(() => {
    if (!imageRecords.length) return [];
    return [...imageRecords].sort((a, b) => {
      const aPos = a.position ?? 0;
      const bPos = b.position ?? 0;
      if (a.image_type === b.image_type) {
        return aPos - bPos;
      }
      if (a.image_type === 'featured') return -1;
      if (b.image_type === 'featured') return 1;
      return aPos - bPos;
    });
  }, [imageRecords]);

  const featuredImageFromRecords = useMemo(
    () => sortedImages.find((img) => img.image_type === 'featured') ?? null,
    [sortedImages]
  );

  const inArticleImagesFromRecords = useMemo(
    () => sortedImages.filter((img) => img.image_type === 'in_article'),
    [sortedImages]
  );

  const resolvedFeaturedImage = useMemo(() => {
    if (featuredImageFromRecords) {
      return featuredImageFromRecords;
    }
    if (metadataPrompts?.featured_prompt) {
      return {
        id: -1,
        task_id: content?.task_id ?? null,
        task_title: content?.task_title ?? null,
        content_id: content?.id ?? null,
        content_title: content?.title ?? content?.meta_title ?? null,
        image_type: 'featured',
        image_url: undefined,
        image_path: undefined,
        prompt: metadataPrompts.featured_prompt,
        status: 'pending',
        position: 0,
        created_at: '',
        updated_at: '',
        account_id: undefined,
      } as ImageRecord;
    }
    return null;
  }, [featuredImageFromRecords, metadataPrompts, content?.task_id, content?.task_title, content?.id, content?.title, content?.meta_title]);

  const resolvedInArticleImages = useMemo(() => {
    const sorted = [...inArticleImagesFromRecords].sort((a, b) => (a.position ?? 0) - (b.position ?? 0));
    const prompts = metadataPrompts?.in_article_prompts ?? [];

    if (!prompts.length) {
      return sorted;
    }

    const byPosition = new Map<number, ImageRecord>();
    sorted.forEach((img, index) => {
      const pos = img.position ?? index;
      byPosition.set(pos, img);
    });

    const usedPositions = new Set<number>();
    const merged: ImageRecord[] = prompts.map((prompt, index) => {
      const position = index;  // 0-based position matching section array index
      const existing = byPosition.get(position);
      usedPositions.add(position);
      if (existing) {
        return {
          ...existing,
          prompt: existing.prompt || prompt,
        };
      }
      return {
        id: -1 * (index + 1),
        task_id: content?.task_id ?? null,
        task_title: content?.task_title ?? null,
        content_id: content?.id ?? null,
        content_title: content?.title ?? content?.meta_title ?? null,
        image_type: 'in_article',
        image_url: undefined,
        image_path: undefined,
        prompt,
        status: 'pending',
        position,  // 0-based position
        created_at: '',
        updated_at: '',
        account_id: undefined,
      } as ImageRecord;
    });

    sorted.forEach((img, idx) => {
      const position = img.position ?? idx;
      if (!usedPositions.has(position)) {
        merged.push(img);
      }
    });

    return merged.sort((a, b) => (a.position ?? 0) - (b.position ?? 0));
  }, [
    inArticleImagesFromRecords,
    metadataPrompts,
    content?.task_id,
    content?.task_title,
    content?.id,
    content?.title,
    content?.meta_title,
  ]);

  const parsedArticle = useMemo(
    () => parseContentHtml(content?.content_html ?? ''),
    [content?.content_html]
  );

  const shouldShowFeaturedBlock = imagesLoading || Boolean(resolvedFeaturedImage);

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-8">
        <div className="max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-8">
          <div className="animate-pulse">
            <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/4 mb-6"></div>
            <div className="h-12 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mb-4"></div>
            <div className="space-y-3">
              <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded"></div>
              <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-5/6"></div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (!content) {
    return (
      <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-8">
        <div className="max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-8">
          <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700 p-8 text-center">
            <XCircleIcon className="w-16 h-16 text-gray-400 mx-auto mb-4" />
            <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-2">Content Not Found</h2>
            <p className="text-gray-600 dark:text-gray-400 mb-6">The content you're looking for doesn't exist or has been deleted.</p>
            {onBack && (
              <button
                onClick={onBack}
                className="inline-flex items-center gap-2 px-4 py-2 bg-brand-500 text-white rounded-lg hover:bg-brand-600 transition-colors"
              >
                <ArrowLeftIcon className="w-4 h-4" />
                Back to Content List
              </button>
            )}
          </div>
        </div>
      </div>
    );
  }

  const formatDate = (dateString: string) => {
    try {
      return new Date(dateString).toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
      });
    } catch {
      return dateString;
    }
  };

  const getStatusColor = (status: string) => {
    const statusLower = status.toLowerCase();
    if (statusLower === 'generated' || statusLower === 'published' || statusLower === 'complete') {
      return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400';
    }
    if (statusLower === 'pending' || statusLower === 'draft') {
      return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400';
    }
    if (statusLower === 'failed' || statusLower === 'error') {
      return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400';
    }
    return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300';
  };

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-8">
      <div className="max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-8">
        {/* Back Button */}
        {onBack && (
          <button
            onClick={onBack}
            className="mb-6 inline-flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
          >
            <ArrowLeftIcon className="w-5 h-5" />
            <span className="font-medium">Back to Content</span>
          </button>
        )}

        {/* Main Content Card */}
        <div className="overflow-hidden">
          {/* Header Section */}
          <div className="bg-gradient-to-r from-brand-500 to-brand-600 px-8 py-6 text-white">
            <div className="flex items-start justify-between gap-4">
              <div className="flex-1">
                <div className="flex items-center gap-3 mb-3">
                  <FileTextIcon className="w-6 h-6" />
                  <span className={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(content.status)}`}>
                    {content.status}
                  </span>
                </div>
                <h1 className="text-3xl font-bold mb-2">
                  {content.meta_title || content.title || `Content #${content.id}`}
                </h1>
                {content.meta_description && (
                  <p className="text-brand-50 text-lg leading-relaxed">
                    {content.meta_description}
                  </p>
                )}
              </div>
            </div>
          </div>

          {/* Metadata Section */}
          <div className="px-8 py-6 border-b border-gray-200 dark:border-gray-700">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {/* Basic Info */}
              <div className="space-y-4">
                <h3 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">
                  Basic Information
                </h3>
                <div className="space-y-3">
                  <div className="flex items-start gap-3">
                    <CalendarIcon className="w-5 h-5 text-gray-400 mt-0.5 flex-shrink-0" />
                    <div>
                      <p className="text-xs text-gray-500 dark:text-gray-400">Generated</p>
                      <p className="text-sm font-medium text-gray-900 dark:text-white">
                        {formatDate(content.generated_at)}
                      </p>
                    </div>
                  </div>
                  {content.updated_at && content.updated_at !== content.generated_at && (
                    <div className="flex items-start gap-3">
                      <ClockIcon className="w-5 h-5 text-gray-400 mt-0.5 flex-shrink-0" />
                      <div>
                        <p className="text-xs text-gray-500 dark:text-gray-400">Last Updated</p>
                        <p className="text-sm font-medium text-gray-900 dark:text-white">
                          {formatDate(content.updated_at)}
                        </p>
                      </div>
                    </div>
                  )}
                  <div className="flex items-start gap-3">
                    <FileTextIcon className="w-5 h-5 text-gray-400 mt-0.5 flex-shrink-0" />
                    <div>
                      <p className="text-xs text-gray-500 dark:text-gray-400">Word Count</p>
                      <p className="text-sm font-medium text-gray-900 dark:text-white">
                        {content.word_count?.toLocaleString() || 'N/A'} words
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Task & Sector Info */}
              <div className="space-y-4">
                <h3 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">
                  Related Information
                </h3>
                <div className="space-y-3">
                  {content.task_title && (
                    <div>
                      <p className="text-xs text-gray-500 dark:text-gray-400">Task</p>
                      <p className="text-sm font-medium text-gray-900 dark:text-white">
                        {content.task_title}
                      </p>
                      <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">ID: {content.task_id}</p>
                    </div>
                  )}
                  {content.sector_name && (
                    <div>
                      <p className="text-xs text-gray-500 dark:text-gray-400">Sector</p>
                      <p className="text-sm font-medium text-gray-900 dark:text-white">
                        {content.sector_name}
                      </p>
                    </div>
                  )}
                  {content.cluster_name && (
                    <div>
                      <p className="text-xs text-gray-500 dark:text-gray-400">Cluster</p>
                      <p className="text-sm font-medium text-gray-900 dark:text-white">
                        {content.cluster_name}
                      </p>
                    </div>
                  )}
                  {/* Categories */}
                  {content.taxonomy_terms_data && content.taxonomy_terms_data.filter(term => term.taxonomy_type === 'category').length > 0 && (
                    <div>
                      <p className="text-xs text-gray-500 dark:text-gray-400">Category</p>
                      <div className="flex flex-wrap gap-2">
                        {content.taxonomy_terms_data
                          .filter(term => term.taxonomy_type === 'category')
                          .map((category) => (
                            <span
                              key={category.id}
                              className="px-3 py-1 bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300 rounded-full text-xs font-medium"
                            >
                              {category.name}
                            </span>
                          ))}
                      </div>
                    </div>
                  )}
                  {/* Tags */}
                  {content.taxonomy_terms_data && content.taxonomy_terms_data.filter(term => term.taxonomy_type === 'tag').length > 0 && (
                    <div>
                      <p className="text-xs text-gray-500 dark:text-gray-400">Tags</p>
                      <div className="flex flex-wrap gap-2">
                        {content.taxonomy_terms_data
                          .filter(term => term.taxonomy_type === 'tag')
                          .map((tag) => (
                            <span
                              key={tag.id}
                              className="px-3 py-1 bg-brand-50 dark:bg-brand-900/20 text-brand-700 dark:text-brand-300 rounded-full text-xs font-medium"
                            >
                              {tag.name}
                            </span>
                          ))}
                      </div>
                    </div>
                  )}
                </div>
              </div>

              {/* Keywords & Tags */}
              <div className="space-y-4">
                <h3 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">
                  SEO & Tags
                </h3>
                <div className="space-y-3">
                  {content.meta_title && (
                    <div>
                      <p className="text-xs text-gray-500 dark:text-gray-400">Meta Title</p>
                      <p className="text-sm font-medium text-gray-900 dark:text-white">
                        {content.meta_title}
                      </p>
                    </div>
                  )}
                  {content.meta_description && (
                    <div>
                      <p className="text-xs text-gray-500 dark:text-gray-400">Meta Description</p>
                      <p className="text-sm text-gray-700 dark:text-gray-300">
                        {content.meta_description}
                      </p>
                    </div>
                  )}
                  {content.primary_keyword && (
                    <div>
                      <p className="text-xs text-gray-500 dark:text-gray-400">Primary Keyword</p>
                      <p className="text-sm font-medium text-gray-900 dark:text-white">
                        {content.primary_keyword}
                      </p>
                    </div>
                  )}
                  {content.secondary_keywords && content.secondary_keywords.length > 0 && (
                    <div>
                      <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">Secondary Keywords</p>
                      <div className="flex flex-wrap gap-2">
                        {content.secondary_keywords.map((keyword, idx) => (
                          <span
                            key={idx}
                            className="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded text-xs"
                          >
                            {keyword}
                          </span>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>

          {/* Action Buttons - Conditional based on status */}
          {content.status && (
            <div className="px-8 py-6 bg-gray-50 dark:bg-gray-900/30 border-b border-gray-200 dark:border-gray-700">
              <div className="flex items-center gap-4">
                {/* Draft status: Show Edit Content + Generate Images */}
                {content.status.toLowerCase() === 'draft' && (
                  <>
                    <button
                      onClick={() => navigate(`/sites/${content.site_id}/posts/${content.id}/edit`)}
                      className="inline-flex items-center gap-2 px-4 py-2 bg-brand-500 hover:bg-brand-600 text-white rounded-lg font-medium transition-colors"
                    >
                      <PencilIcon className="w-4 h-4" />
                      Edit Content
                    </button>
                    <button
                      onClick={() => navigate(`/writer/images?contentId=${content.id}`)}
                      className="inline-flex items-center gap-2 px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-lg font-medium transition-colors"
                    >
                      <ImageIcon className="w-4 h-4" />
                      Generate Images
                    </button>
                  </>
                )}
                
                {/* Review status: Show Edit Content + Publish */}
                {content.status.toLowerCase() === 'review' && (
                  <>
                    <button
                      onClick={() => navigate(`/sites/${content.site_id}/posts/${content.id}/edit`)}
                      className="inline-flex items-center gap-2 px-4 py-2 bg-brand-500 hover:bg-brand-600 text-white rounded-lg font-medium transition-colors"
                    >
                      <PencilIcon className="w-4 h-4" />
                      Edit Content
                    </button>
                    <button
                      onClick={() => navigate(`/writer/published?contentId=${content.id}&action=publish`)}
                      className="inline-flex items-center gap-2 px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg font-medium transition-colors"
                    >
                      <BoltIcon className="w-4 h-4" />
                      Publish
                    </button>
                  </>
                )}
              </div>
            </div>
          )}

          {/* Image Status */}
          {(content.has_image_prompts || content.has_generated_images) && (
            <div className="px-8 py-4 bg-gray-50 dark:bg-gray-900/50 border-b border-gray-200 dark:border-gray-700">
              <div className="flex items-center gap-4">
              {content.has_image_prompts && (
                <div className="flex items-center gap-2">
                  <CheckCircleIcon className="w-5 h-5 text-green-500" />
                  <span className="text-sm text-gray-700 dark:text-gray-300">Image Prompts Generated</span>
                </div>
              )}
              {content.has_generated_images && (
                <div className="flex items-center gap-2">
                  <CheckCircleIcon className="w-5 h-5 text-green-500" />
                  <span className="text-sm text-gray-700 dark:text-gray-300">Images Generated</span>
                </div>
              )}
              </div>
            </div>
          )}

          {/* Featured Image */}
          {shouldShowFeaturedBlock && (
            <div className="mb-12 max-w-[800px] mx-auto">
              <FeaturedImageBlock image={resolvedFeaturedImage} loading={imagesLoading} />
            </div>
          )}

          {imagesError && (
            <div className="px-8 pt-4">
              <div className="rounded-2xl border border-rose-200 bg-rose-50/80 px-4 py-3 text-sm font-medium text-rose-700 dark:border-rose-900/40 dark:bg-rose-950/30 dark:text-rose-300">
                {imagesError}
              </div>
            </div>
          )}

          {/* Article Body */}
          <ArticleBody
            introHtml={parsedArticle.introHtml}
            sections={parsedArticle.sections}
            sectionImages={resolvedInArticleImages}
            imagesLoading={imagesLoading}
            rawHtml={content.content_html}
          />

          {/* Metadata JSON (Collapsible) */}
          {content.metadata && Object.keys(content.metadata).length > 0 && (
            <div className="px-8 py-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50">
              <details className="group">
                <summary className="cursor-pointer text-sm font-semibold text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
                  View Full Metadata
                </summary>
                <div className="mt-4 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                  <pre className="text-xs text-gray-600 dark:text-gray-400 overflow-x-auto">
                    {JSON.stringify(content.metadata, null, 2)}
                  </pre>
                </div>
              </details>
            </div>
          )}
        </div>
      </div>

      {/* Custom Styles for Content HTML */}
      <style>{`
        .content-html {
          line-height: 1.85;
          font-size: 1.05rem;
        }
        .content-html h2,
        .content-html h3,
        .content-html h4,
        .content-html h5,
        .content-html h6 {
          margin-top: 2.5rem;
          margin-bottom: 1.25rem;
          font-weight: 600;
          letter-spacing: -0.01em;
          color: inherit;
        }
        .content-html h3 { font-size: 1.6rem; }
        .content-html h4 { font-size: 1.35rem; }
        .content-html h5 { font-size: 1.15rem; }
        .content-html p {
          margin-bottom: 1.3rem;
        }
        .content-html ul,
        .content-html ol {
          margin-bottom: 1.5rem;
          padding-left: 1.75rem;
        }
        .content-html li {
          margin-bottom: 0.6rem;
        }
        .content-html blockquote {
          margin: 2rem 0;
          padding: 1.25rem 1.5rem;
          border-left: 4px solid rgba(59, 130, 246, 0.25);
          background: rgba(59, 130, 246, 0.08);
          border-radius: 1rem;
          font-style: italic;
        }
        .content-html table {
          width: 100%;
          border-collapse: collapse;
          margin: 2rem 0;
          border-radius: 1rem;
          overflow: hidden;
        }
        .content-html table th,
        .content-html table td {
          border: 1px solid #e5e7eb;
          padding: 0.875rem 1rem;
          text-align: left;
        }
        .content-html table th {
          background: #f9fafb;
          font-weight: 600;
        }
        .content-html img {
          max-width: 100%;
          height: auto;
          border-radius: 1.25rem;
          margin: 1.75rem auto;
          display: block;
          box-shadow: 0 20px 45px -25px rgba(15, 23, 42, 0.35);
        }
        .content-html a {
          color: #2563eb;
          text-decoration: none;
          border-bottom: 1px solid rgba(37, 99, 235, 0.3);
          transition: color 0.2s ease, border-bottom-color 0.2s ease;
        }
        .content-html a:hover {
          color: #1d4ed8;
          border-bottom-color: rgba(37, 99, 235, 0.6);
        }
        .content-html code {
          background: rgba(15, 23, 42, 0.06);
          padding: 0.2rem 0.45rem;
          border-radius: 0.4rem;
          font-size: 0.9rem;
        }
        .content-html pre {
          background: rgba(15, 23, 42, 0.08);
          padding: 1.25rem;
          border-radius: 1.25rem;
          overflow-x: auto;
          margin: 2rem 0;
        }
        .content-html hr {
          border: none;
          border-top: 1px solid rgba(148, 163, 184, 0.4);
          margin: 3rem 0;
        }
        .dark .content-html blockquote {
          border-left-color: rgba(96, 165, 250, 0.45);
          background: rgba(30, 41, 59, 0.65);
        }
        .dark .content-html table th,
        .dark .content-html table td {
          border-color: rgba(148, 163, 184, 0.25);
        }
        .dark .content-html table th {
          background: rgba(30, 41, 59, 0.65);
        }
        .dark .content-html a {
          color: #93c5fd;
          border-bottom-color: rgba(147, 197, 253, 0.4);
        }
        .dark .content-html a:hover {
          color: #bfdbfe;
          border-bottom-color: rgba(191, 219, 254, 0.6);
        }
        .dark .content-html code,
        .dark .content-html pre {
          background: rgba(15, 23, 42, 0.7);
        }
      `}</style>
    </div>
  );
}

