'use client';

import React, { useState, useEffect, useRef, useCallback } from 'react';
import { createPortal } from 'react-dom';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import { Document, Page, pdfjs } from 'react-pdf';
import {
  Home,
  User,
  FileCheck2,
  PenTool,
  BookOpen,
  Mail,
  Users,
  LogOut,
  FileText,
  Clock,
  Calendar,
  HelpCircle,
  ArrowRight,
  FlaskConical,
  X,
  ZoomIn,
  ZoomOut,
  ImageIcon,
  Search,
  Book,
  ChevronDown,
  ChevronLeft,
  ChevronRight,
  ExternalLink,
  Sparkles,
  Bell,
  CheckCircle2,
} from 'lucide-react';

import 'react-pdf/dist/Page/TextLayer.css';
import 'react-pdf/dist/Page/AnnotationLayer.css';

pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;

// Base URL for publications redirection
const PUBLICATIONS_BASE_URL = 'https://ichai.net';

export interface Category {
  id: string;
  name: string;
}

// Default standard domains matching focus areas and slugs
const DEFAULT_RESEARCH_FIELDS: Category[] = [
  { id: 'ai_ethics', name: 'AI Ethics & Responsible AI' },
  { id: 'digital_wellbeing', name: 'Digital Wellbeing' },
  { id: 'online_safety', name: 'Online Safety' },
  { id: 'education', name: 'Education & Learning' },
  { id: 'psychology', name: 'Psychology & Behaviour' },
  { id: 'child_dev', name: 'Child Development' },
  { id: 'big_tech', name: 'Big Tech & Responsible AI Governance' },
  { id: 'neuroscience', name: 'Neuroscience & Attention' },
  { id: 'public_policy', name: 'Public Policy & Regulation' },
  { id: 'machine_learning_safety', name: 'Machine Learning Safety & Alignment' },
  { id: 'human_computer_interaction', name: 'Human-Computer Interaction (HCI)' },
];

/**
 * Mapping the PDF section headings to your exact DEFAULT_RESEARCH_FIELDS category IDs
 */
const PDF_HEADING_TO_CATEGORY_ID: Record<string, string> = {
  'digital discipline': 'digital_wellbeing',
  'self-regulation': 'digital_wellbeing',
  'digital wellbeing': 'digital_wellbeing',
  'social media': 'psychology',
  'digital behaviour': 'psychology',
  'digital behavior': 'psychology',
  'children, young people': 'child_dev',
  'young people & technology': 'child_dev',
  'online safety': 'online_safety',
  'artificial intelligence & human behaviour': 'machine_learning_safety',
  'artificial intelligence & human behavior': 'machine_learning_safety',
  'psychology, neuroscience': 'neuroscience',
  'neuroscience & attention': 'neuroscience',
  'human-aligned intelligence': 'ai_ethics',
  'responsible ai': 'ai_ethics',
  'ai ethics': 'ai_ethics',
  'policy, governance': 'public_policy',
  'public policy': 'public_policy',
  'governance & standards': 'big_tech',
};

function extractCategorySlugFromHref(urlStr: string): string | null {
  try {
    const parsed = new URL(urlStr, 'https://dummy.local');
    const cat = parsed.searchParams.get('category');
    if (cat) return cat.trim();

    const match = urlStr.match(/category[=/]([a-zA-Z0-9_-]+)/i);
    if (match && match[1]) return match[1].trim();
  } catch {
    const match = urlStr.match(/category[=/]([a-zA-Z0-9_-]+)/i);
    if (match && match[1]) return match[1].trim();
  }
  return null;
}

function detectCategoryFromElement(targetEl: HTMLElement): string | null {
  const pageContainer = targetEl.closest('.react-pdf__Page') || targetEl.closest('.textLayer');
  if (!pageContainer) return null;

  const allSpans = Array.from(pageContainer.querySelectorAll('.textLayer span'));
  const clickedIdx = allSpans.findIndex((s) => s === targetEl || s.contains(targetEl));

  const searchSpans = clickedIdx !== -1 ? allSpans.slice(0, clickedIdx + 1).reverse() : allSpans.reverse();

  for (const span of searchSpans) {
    const text = (span.textContent || '').trim().toLowerCase();
    if (!text) continue;

    for (const field of DEFAULT_RESEARCH_FIELDS) {
      if (text.includes(field.id) || text.includes(field.name.toLowerCase())) {
        return field.id;
      }
    }

    for (const [key, categoryId] of Object.entries(PDF_HEADING_TO_CATEGORY_ID)) {
      if (text.includes(key)) {
        return categoryId;
      }
    }
  }

  return null;
}

interface PublicationRouteItem {
  title: string;
  path: string;
}

const PUBLICATION_LINKS: PublicationRouteItem[] = [
  { title: 'Overview', path: '/publications/' },
  { title: 'Policy Papers', path: '/publications/policy-papers/' },
  { title: 'Advisory Notes', path: '/publications/advisory-notes/' },
  { title: 'Discussions Papers', path: '/publications/discussion-papers/' },
  { title: 'Interpretive Guidelines', path: '/publications/interpretive-guidance/' },
];

interface KnowledgeQuestion {
  id?: number;
  title: string;
  page: number;
  illustrationImage?: string;
  hasIllustration?: boolean;
}

interface KnowledgeCategory {
  category: string;
  questions: KnowledgeQuestion[];
}

interface NavItem {
  label: string;
  href: string;
  icon: React.ElementType;
  badge?: number;
  action?: 'pdf' | 'knowledge_guide' | 'coming_soon';
  pdfUrl?: string;
  pdfTitle?: string;
  illustrationImage?: string;
  onSubmitRedirect?: string;
}

interface PdfModalProps {
  pdfUrl: string;
  title: string;
  illustrationImage?: string;
  onSubmitRedirect?: string;
  onOpenKnowledgeGuide?: () => void;
  onOpenPdf?: (url: string, title: string) => void;
  onClose: () => void;
}

const KNOWLEDGE_BASE: KnowledgeCategory[] = [
  {
    category: '1. Getting Started',
    questions: [
      { id: 1, title: 'What is ICHAI?', page: 1 },
      { id: 2, title: 'Why Was ICHAI Created?', page: 2 },
      { id: 3, title: 'What is Human-Aligned Intelligence?', page: 7 },
      { id: 4, title: 'What is Digital Discipline?', page: 13 },
      { id: 5, title: 'What is the purpose of ICHAI?', page: 20 },
      { id: 6, title: 'Who can register with ICHAI?', page: 21 },
      { id: 7, title: 'Is ICHAI available worldwide?', page: 21 },
      { id: 8, title: 'How do I create an account?', page: 22, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/8.webp' },
      { id: 9, title: 'Is registration free?', page: 22 },
      { id: 10, title: 'How do I verify my email address?', page: 23, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/10.webp' },
      { id: 11, title: 'What happens after registration?', page: 24, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/11.webp' },
      { id: 12, title: 'Can I register multiple organisations?', page: 25, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/12.webp' },
      { id: 13, title: 'Can individuals register?', page: 25, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/13.webp' },
      { id: 14, title: 'Which browsers are supported?', page: 26 },
      { id: 15, title: 'Is there an ICHAI mobile app?', page: 26 },
    ],
  },
  {
    category: '2. Registering Your Organisation',
    questions: [
      { id: 16, title: 'Which organisation types can register?', page: 27, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/16.webp' },
      { id: 17, title: 'What sectors are supported?', page: 28, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/17.webp' },
      { id: 18, title: 'What documents are required?', page: 29, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/18.webp' },
      { id: 19, title: 'How long does verification take?', page: 29 },
      { id: 20, title: 'Why was my organisation not approved?', page: 30 },
      { id: 21, title: 'Can I edit my organisation profile?', page: 32, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/21.webp' },
      { id: 22, title: 'Can I change organisation details later?', page: 33, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/22.webp' },
      { id: 23, title: 'Can I upload my organisation logo?', page: 34, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/23.webp' },
      { id: 24, title: 'Can I register multiple branches?', page: 35, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/24.webp' },
      { id: 25, title: 'Can one organisation have multiple administrators?', page: 36, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/25.webp' },
    ],
  },
  {
    category: '3. Verification & Secure Status',
    questions: [
      { id: 26, title: 'What does "Verified & Secured" mean?', page: 36, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/26.webp' },
      { id: 27, title: 'How do I become verified?', page: 39, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/27.webp' },
      { id: 28, title: 'What are the benefits of verification?', page: 39 },
      { id: 29, title: 'Does verification expire?', page: 39 },
      { id: 30, title: 'How do I renew verification?', page: 41, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/30.webp' },
      { id: 31, title: 'Can verification be revoked?', page: 41 },
      { id: 32, title: 'How do people verify an organisation?', page: 43, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/32.webp' },
      { id: 33, title: 'What is the verification badge?', page: 44, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/33.webp' },
      { id: 34, title: 'Can parents verify schools?', page: 45, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/34.webp' },
      { id: 35, title: 'Can employers, clients and partners verify companies?', page: 45, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/35.webp' },
    ],
  },
  {
    category: '4. Anti-SMUB Test™',
    questions: [
      { id: 36, title: 'What is the Anti-SMUB Test™?', page: 47, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/36.webp' },
      { id: 37, title: 'What does SMUB mean?', page: 48, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/37.webp' },
      { id: 38, title: 'Who should take the test?', page: 49, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/38.webp' },
      { id: 39, title: 'Where do you take the test and how long does it take?', page: 50, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/39.webp' },
      { id: 40, title: 'Is there a time limit?', page: 51, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/40.webp' },
      { id: 41, title: 'Can I pause the assessment?', page: 51, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/41.webp' },
      { id: 42, title: 'Can I retake the assessment?', page: 52 },
      { id: 43, title: 'How are scores calculated?', page: 53, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/43.webp' },
      { id: 44, title: 'What is a good score?', page: 54, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/44.webp' },
      { id: 45, title: 'Is the assessment scientifically based?', page: 55, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/45.webp' },
      { id: 46, title: 'Can children take it?', page: 56, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/46.webp' },
      { id: 47, title: 'Can organisations customise assessments?', page: 56, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/47.webp' },
    ],
  },
  {
    category: '16. Support',
    questions: [
      { id: 222, title: 'How do I contact support?', page: 211, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/222.webp' },
      { id: 223, title: 'What are support hours?', page: 212, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/223.webp' },
      { id: 224, title: 'How do I submit a ticket?', page: 212, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/224.webp' },
      { id: 225, title: 'How do I report a bug?', page: 213, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/225.webp' },
      { id: 226, title: 'How do I request a feature?', page: 214, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/226.webp' },
      { id: 227, title: 'Where can I find tutorials?', page: 215, hasIllustration: true, illustrationImage: 'https://ichai.net/converted-illustration/227.webp' },
    ],
  },
];

function parseIllustrationNumber(urlOrStr: string): number | null {
  if (!urlOrStr) return null;
  const match = urlOrStr.match(/(\d+)\.webp/i) || urlOrStr.match(/(\d+)$/);
  return match ? parseInt(match[1], 10) : null;
}

function findQuestion(target: { id?: number; page?: number; title?: string }) {
  return KNOWLEDGE_BASE.flatMap((c) => c.questions).find((q) => {
    if (target.id && q.id === target.id) return true;
    if (target.page && q.page === target.page) return true;
    if (target.title && q.title.toLowerCase() === target.title.toLowerCase()) return true;
    return false;
  });
}

/**
 * Modern, high-conversion "Coming Soon" Modal for Events & Opportunities
 */
function ComingSoonModal({ onClose }: { onClose: () => void }) {
  const [email, setEmail] = useState('');
  const [subscribed, setSubscribed] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!email || !email.includes('@')) return;

    setIsSubmitting(true);
    // Simulate lightweight opt-in acknowledgment
    setTimeout(() => {
      setIsSubmitting(false);
      setSubscribed(true);
    }, 600);
  };

  return createPortal(
    <div
      className="fixed inset-0 z-[12000] flex items-center justify-center p-4 bg-black/80 backdrop-blur-md animate-in fade-in duration-200"
      onClick={onClose}
    >
      <div
        className="relative w-full max-w-lg bg-[#07132b] border border-blue-500/30 rounded-3xl p-6 sm:p-8 shadow-2xl shadow-blue-950/50 overflow-hidden text-left"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Glow Effects */}
        <div className="absolute -top-24 -right-24 w-52 h-52 bg-blue-500/20 rounded-full blur-3xl pointer-events-none" />
        <div className="absolute -bottom-24 -left-24 w-52 h-52 bg-amber-500/10 rounded-full blur-3xl pointer-events-none" />

        {/* Close Button */}
        <button
          type="button"
          onClick={onClose}
          className="absolute top-5 right-5 p-1.5 rounded-xl text-slate-400 hover:text-white hover:bg-white/10 transition cursor-pointer"
          aria-label="Close dialog"
        >
          <X size={18} />
        </button>

        {/* Header Badge */}
        <div className="flex items-center gap-2 mb-4">
          <div className="flex items-center gap-1.5 px-3 py-1 rounded-full bg-amber-500/15 border border-amber-500/30 text-amber-300 text-xs font-semibold tracking-wide uppercase">
            <Sparkles className="w-3.5 h-3.5 animate-pulse" />
            <span>Coming Soon</span>
          </div>
          <span className="text-[11px] text-slate-400 font-medium tracking-wide">
            Q4 Focus Initiative
          </span>
        </div>

        {/* Title & Description */}
        <h3 className="text-xl sm:text-2xl font-bold text-white tracking-tight mb-2">
          Events & Research Opportunities
        </h3>
        <p className="text-xs sm:text-sm text-slate-300 leading-relaxed mb-6">
          We are preparing our global roundtable symposiums, peer review summits, and collaborative fellowship calls for contributors and partner institutions.
        </p>

        {/* Feature Preview Cards */}
        <div className="grid grid-cols-2 gap-2.5 mb-6 text-xs">
          <div className="p-3 rounded-2xl bg-white/[0.03] border border-white/10">
            <div className="flex items-center gap-2 text-blue-400 font-semibold mb-1">
              <Calendar className="w-3.5 h-3.5" />
              <span>Symposiums</span>
            </div>
            <p className="text-[11px] text-slate-400">Quarterly virtual briefings with ethics panels and scholars.</p>
          </div>
          <div className="p-3 rounded-2xl bg-white/[0.03] border border-white/10">
            <div className="flex items-center gap-2 text-amber-400 font-semibold mb-1">
              <FlaskConical className="w-3.5 h-3.5" />
              <span>Grants & Calls</span>
            </div>
            <p className="text-[11px] text-slate-400">Collaborative research openings and publication grants.</p>
          </div>
        </div>

        {/* Notification Subscription Form */}
        {/* <div className="border-t border-white/10 pt-5">
          {subscribed ? (
            <div className="flex items-center gap-2.5 p-3 rounded-2xl bg-emerald-500/15 border border-emerald-500/30 text-emerald-300 text-xs font-medium">
              <CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0" />
              <span>You&apos;re on the priority list! We will notify you upon launch.</span>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="space-y-2.5">
              <label htmlFor="notify-email" className="block text-xs font-medium text-slate-300">
                Want early access when calls open?
              </label>
              <div className="flex items-center gap-2">
                <div className="relative flex-1">
                  <Mail className="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
                  <input
                    id="notify-email"
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="Enter your academic or work email"
                    required
                    className="w-full pl-9 pr-3 py-2.5 bg-slate-900/90 border border-white/10 rounded-xl text-xs text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 transition"
                  />
                </div>
                <button
                  type="submit"
                  disabled={isSubmitting}
                  className="px-4 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-xl text-xs font-bold transition-all shadow-md shadow-blue-600/30 hover:shadow-blue-500/40 flex items-center gap-1.5 shrink-0 cursor-pointer disabled:opacity-50"
                >
                  <Bell className="w-3.5 h-3.5" />
                  <span>{isSubmitting ? 'Joining...' : 'Notify Me'}</span>
                </button>
              </div>
            </form>
          )}
        </div> */}
      </div>
    </div>,
    document.body
  );
}

function PublicationsListModal({ onClose }: { onClose: () => void }) {
  const handleRedirect = (path: string) => {
    const fullUrl = `${PUBLICATIONS_BASE_URL.replace(/\/$/, '')}${path}`;
    window.open(fullUrl, '_blank', 'noopener,noreferrer');
  };

  return createPortal(
    <div
      className="fixed inset-0 z-[11000] flex items-center justify-center p-4 bg-black/75 backdrop-blur-sm animate-in fade-in duration-150"
      onClick={onClose}
    >
      <div
        className="relative w-full max-w-md bg-slate-900 border border-white/15 rounded-2xl p-5 shadow-2xl space-y-4"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-center justify-between pb-3 border-b border-white/10">
          <div className="flex items-center gap-2">
            <BookOpen className="w-5 h-5 text-blue-400" />
            <h4 className="text-sm font-bold text-white">Publications</h4>
          </div>
          <button
            type="button"
            onClick={onClose}
            className="p-1 rounded-lg text-slate-400 hover:text-white hover:bg-white/10 transition cursor-pointer"
            aria-label="Close publications dialog"
          >
            <X size={18} />
          </button>
        </div>

        <div className="space-y-1.5">
          {PUBLICATION_LINKS.map((item) => (
            <button
              key={item.path}
              type="button"
              onClick={() => handleRedirect(item.path)}
              className="w-full flex items-center justify-between px-3.5 py-2.5 rounded-xl bg-slate-800/60 hover:bg-blue-600/20 border border-white/5 hover:border-blue-500/30 text-left transition group cursor-pointer"
            >
              <div>
                <p className="text-xs font-semibold text-slate-200 group-hover:text-white transition-colors">
                  {item.title}
                </p>
                <span className="text-[10px] text-slate-500 font-mono">
                  {item.path}
                </span>
              </div>
              <ExternalLink className="w-4 h-4 text-slate-400 group-hover:text-blue-400 shrink-0 transition-transform group-hover:translate-x-0.5" />
            </button>
          ))}
        </div>
      </div>
    </div>,
    document.body
  );
}

function PdfViewerModal({
  pdfUrl,
  title,
  illustrationImage,
  onSubmitRedirect = '/research-contributor/research/add/',
  onOpenKnowledgeGuide,
  onOpenPdf,
  onClose,
}: PdfModalProps) {
  const router = useRouter();
  const [mounted, setMounted] = useState(false);
  const [numPages, setNumPages] = useState<number | null>(null);
  const [pdfScale, setPdfScale] = useState<number>(1.15);
  const [showIllustration, setShowIllustration] = useState(false);
  const [showPublicationsPopup, setShowPublicationsPopup] = useState(false);
  const scrollContainerRef = useRef<HTMLDivElement>(null);

  const isResearchAndPublicationPdf =
    title.toLowerCase().includes('research & publication') ||
    title.toLowerCase().includes('research and publication') ||
    pdfUrl.toLowerCase().includes('ichai-research-and-publications.pdf');

  useEffect(() => {
    setMounted(true);

    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        if (showPublicationsPopup) {
          setShowPublicationsPopup(false);
        } else if (showIllustration) {
          setShowIllustration(false);
        } else {
          onClose();
        }
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [showPublicationsPopup, showIllustration, onClose]);

  useEffect(() => {
    if (!scrollContainerRef.current) return;
    const container = scrollContainerRef.current;

    const highlightActionSpans = () => {
      const items = container.querySelectorAll('.textLayer span, .annotationLayer a');
      items.forEach((item) => {
        const text = item.textContent?.toLowerCase() || '';
        if (
          item.tagName.toLowerCase() === 'a' ||
          text.includes('explore') ||
          text.includes('view') ||
          text.includes('browse') ||
          text.includes('submit') ||
          text.includes('contribute') ||
          text.includes('research') ||
          text.includes('knowledge') ||
          text.includes('support') ||
          text.includes('publication')
        ) {
          (item as HTMLElement).style.cursor = 'pointer';
        }
      });
    };

    const observer = new MutationObserver(highlightActionSpans);
    observer.observe(container, { childList: true, subtree: true });
    highlightActionSpans();

    return () => observer.disconnect();
  }, [numPages, pdfScale]);

  const handleContainerClick = (e: React.MouseEvent) => {
    const target = e.target as HTMLElement;

    const anchor = target.closest('a');
    if (anchor && anchor.href) {
      const href = anchor.href;
      const explicitCatSlug = extractCategorySlugFromHref(href);

      if (explicitCatSlug) {
        e.preventDefault();
        e.stopPropagation();
        onClose();

        if (href.includes('/add') || href.includes('/add/') || href.includes('contribute')) {
          router.push(`/research-contributor/research/add/?category=${encodeURIComponent(explicitCatSlug)}`);
        } else {
          router.push(`/research-contributor/research/?category=${encodeURIComponent(explicitCatSlug)}`);
        }
        return;
      }
    }

    let combinedText = (target.textContent || '').trim();
    if (target.parentElement) {
      combinedText += ' ' + (target.parentElement.textContent || '');
    }
    const upper = combinedText.toUpperCase().replace(/\s+/g, ' ');

    if (
      isResearchAndPublicationPdf &&
      (upper.includes('VIEW PUBLICATIONS') ||
        upper.includes('VIEW PUBLICATION') ||
        upper.includes('PUBLICATIONS LIST'))
    ) {
      e.preventDefault();
      e.stopPropagation();
      setShowPublicationsPopup(true);
      return;
    }

    if (
      upper.includes('EXPLORE RELATED RESEARCH') ||
      upper.includes('EXPLORE RESEARCH') ||
      upper.includes('VIEW RESEARCH')
    ) {
      e.preventDefault();
      e.stopPropagation();
      const detectedCatId = detectCategoryFromElement(target);
      const queryParam = detectedCatId ? `?category=${encodeURIComponent(detectedCatId)}` : '';
      onClose();
      router.push(`/research-contributor/research/${queryParam}`);
      return;
    }

    if (
      upper.includes('CONTRIBUTE RESEARCH') ||
      upper.includes('CONTRIBUTE TO THE LIBRARY') ||
      upper.includes('SUBMIT RESEARCH')
    ) {
      e.preventDefault();
      e.stopPropagation();
      const detectedCatId = detectCategoryFromElement(target);
      const baseSubmit = onSubmitRedirect || '/research-contributor/research/add/';
      const queryParam = detectedCatId ? `?category=${encodeURIComponent(detectedCatId)}` : '';
      onClose();
      router.push(`${baseSubmit.replace(/\/$/, '')}/${queryParam}`);
      return;
    }

    if (
      upper.includes('VISIT THE KNOWLEDGE CENTRE') ||
      upper.includes('HELP & SUPPORT') ||
      upper.includes('KNOWLEDGE CENTRE')
    ) {
      if (onOpenKnowledgeGuide) {
        e.preventDefault();
        e.stopPropagation();
        onOpenKnowledgeGuide();
        return;
      }
    }

    if (upper.includes('EXPLORE RESEARCH & PUBLICATIONS') || (upper.includes('EXPLORE') && upper.includes('PUBLICATIONS'))) {
      if (onOpenPdf) {
        e.preventDefault();
        e.stopPropagation();
        onOpenPdf(
          '/documents/contributor/ichai-research-and-publications.pdf',
          'ICHAI Research & Publications'
        );
        return;
      }
    }

    if (upper.includes('EXPLORE DIGITAL DISCIPLINE') || upper.includes('DIGITAL DISCIPLINEL') || upper.includes('DIGITAL DISCIPLINE')) {
      if (onOpenPdf) {
        e.preventDefault();
        e.stopPropagation();
        onOpenPdf(
          '/documents/contributor/ichai-digital-discipline.pdf',
          'ICHAI Digital Discipline Framework'
        );
        return;
      }
    }

    if (upper.includes('EXPLORE ANTI-SMUB') || upper.includes('ANTI-SMUB')) {
      if (onOpenPdf) {
        e.preventDefault();
        e.stopPropagation();
        onOpenPdf(
          '/documents/contributor/ichai-anti-smub.pdf',
          'Anti-SMUB Assessment'
        );
        return;
      }
    }

    if (upper.includes('EXPLORE HUMAN-ALIGNED INTELLIGENCE') || upper.includes('HUMAN-ALIGNED INTELLIGENCE')) {
      if (onOpenPdf) {
        e.preventDefault();
        e.stopPropagation();
        onOpenPdf(
          '/documents/contributor/ichai-human-aligned-intelligence.pdf',
          'Human-Aligned Intelligence'
        );
        return;
      }
    }

    if (upper.includes('EXPLORE POLICY & STANDARDS') || upper.includes('POLICY & STANDARDS')) {
      if (onOpenPdf) {
        e.preventDefault();
        e.stopPropagation();
        onOpenPdf(
          '/documents/contributor/ichai-policy-and-standards.pdf',
          'Policy & Standards'
        );
        return;
      }
    }

    if (upper.includes('VIEW RESEARCH TOOLS') || upper.includes('RESEARCH TOOLS')) {
      if (onOpenPdf) {
        e.preventDefault();
        e.stopPropagation();
        onOpenPdf(
          '/documents/contributor/ichai-research-tools.pdf',
          'Research Tools & Templates'
        );
        return;
      }
    }

    if (upper.includes('BROWSE RECOMMENDED RESOURCES') || upper.includes('RECOMMENDED RESOURCES')) {
      if (onOpenPdf) {
        e.preventDefault();
        e.stopPropagation();
        onOpenPdf(
          '/documents/contributor/ichai-recommended-resources.pdf',
          'Recommended External Resources'
        );
        return;
      }
    }
  };

  if (!mounted) return null;

  return createPortal(
    <div
      className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/25 backdrop-blur-sm p-2 sm:p-6"
      onClick={onClose}
    >
      <div
        className="relative flex flex-col w-full max-w-4xl h-[94vh] bg-[#0a0f1d]/95 backdrop-blur-md border border-white/10 rounded-2xl shadow-2xl overflow-hidden"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-center justify-between px-5 py-3 border-b border-white/10 bg-black/40 text-white shrink-0">
          <div className="flex items-center gap-3 min-w-0 pr-4">
            <FileText size={18} className="text-blue-400 shrink-0" />
            <h3 className="text-sm font-semibold truncate text-slate-100">{title}</h3>

            {isResearchAndPublicationPdf && (
              <button
                type="button"
                onClick={() => setShowPublicationsPopup(true)}
                className="flex items-center gap-1.5 px-3 py-1 rounded-lg bg-blue-500/20 border border-blue-500/40 text-blue-300 hover:bg-blue-500 hover:text-white text-xs font-semibold transition shadow-sm cursor-pointer shrink-0 ml-2"
                title="View Publications Menu"
              >
                <BookOpen size={14} />
                <span>View Publications</span>
              </button>
            )}

            {illustrationImage && (
              <button
                type="button"
                onClick={() => setShowIllustration(true)}
                className="flex items-center gap-1.5 px-3 py-1 rounded-lg bg-amber-500/20 border border-amber-500/40 text-amber-300 hover:bg-amber-500 hover:text-black text-xs font-semibold transition shadow-sm cursor-pointer shrink-0 ml-2"
                title="View Illustration"
              >
                <ImageIcon size={14} />
                <span>View Illustration</span>
              </button>
            )}
          </div>

          <div className="flex items-center gap-2.5 shrink-0">
            <div className="flex items-center gap-1 bg-white/5 border border-white/10 px-1 py-1 rounded-lg">
              <button
                type="button"
                onClick={() => setPdfScale((s) => Math.max(s - 0.15, 0.7))}
                className="p-1 rounded text-slate-400 hover:text-white hover:bg-white/10 transition cursor-pointer"
                title="Zoom Out"
              >
                <ZoomOut size={15} />
              </button>
              <span className="text-[11px] px-1 text-slate-300 font-mono select-none">
                {Math.round(pdfScale * 100)}%
              </span>
              <button
                type="button"
                onClick={() => setPdfScale((s) => Math.min(s + 0.15, 2.0))}
                className="p-1 rounded text-slate-400 hover:text-white hover:bg-white/10 transition cursor-pointer"
                title="Zoom In"
              >
                <ZoomIn size={15} />
              </button>
            </div>

            <button
              type="button"
              onClick={onClose}
              className="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/10 transition cursor-pointer"
              aria-label="Close"
            >
              <X size={18} />
            </button>
          </div>
        </div>

        <div
          ref={scrollContainerRef}
          onClick={handleContainerClick}
          className="flex-1 overflow-y-auto p-4 sm:p-8 flex flex-col items-center gap-6 scrollbar-thin bg-black/60"
        >
          <Document
            file={encodeURI(pdfUrl)}
            onLoadSuccess={({ numPages: pagesCount }) => setNumPages(pagesCount)}
            loading={
              <div className="text-slate-300 py-32 flex flex-col items-center gap-3 text-sm">
                <div className="w-8 h-8 border-2 border-blue-400 border-t-transparent rounded-full animate-spin" />
                <span>Loading document...</span>
              </div>
            }
            error={
              <div className="text-red-400 p-6 text-center text-sm bg-red-950/20 border border-red-500/20 rounded-2xl my-auto">
                Failed to load PDF document.
              </div>
            }
            className="flex flex-col items-center gap-6 w-full"
          >
            {numPages &&
              Array.from(new Array(numPages), (_, index) => (
                <div
                  key={`page_${index + 1}`}
                  className="shadow-2xl rounded-lg overflow-hidden border border-white/10 bg-white"
                >
                  <Page
                    pageNumber={index + 1}
                    scale={pdfScale}
                    renderTextLayer={true}
                    renderAnnotationLayer={true}
                  />
                </div>
              ))}
          </Document>
        </div>
      </div>

      {showPublicationsPopup && (
        <PublicationsListModal onClose={() => setShowPublicationsPopup(false)} />
      )}

      {showIllustration && illustrationImage && (
        <div
          className="fixed inset-0 z-[10000] flex items-center justify-center p-4 sm:p-8 bg-black/85 backdrop-blur-md animate-in fade-in duration-200"
          onClick={() => setShowIllustration(false)}
        >
          <div
            className="relative flex flex-col w-full max-w-5xl max-h-[92vh] bg-slate-950 border border-white/15 rounded-2xl p-4 sm:p-6 shadow-2xl"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="flex items-center justify-between pb-3 mb-3 border-b border-white/10">
              <div className="flex items-center gap-2">
                <ImageIcon className="w-5 h-5 text-amber-400" />
                <h4 className="text-sm font-semibold text-white">
                  Research Submission Process Illustration
                </h4>
              </div>
              <button
                type="button"
                onClick={() => setShowIllustration(false)}
                className="p-1 rounded-lg text-slate-400 hover:text-white hover:bg-white/10 transition cursor-pointer"
                aria-label="Close illustration"
              >
                <X size={20} />
              </button>
            </div>

            <div className="flex-1 overflow-auto flex items-center justify-center rounded-xl bg-slate-900/60 p-2">
              <img
                src={illustrationImage}
                alt="Research Submission Process"
                className="w-full h-auto object-contain max-h-[75vh] rounded-lg"
              />
            </div>
          </div>
        </div>
      )}
    </div>,
    document.body
  );
}

function KnowledgeGuideModal({
  pdfUrl,
  onClose,
}: {
  pdfUrl: string;
  onClose: () => void;
}) {
  const [mounted, setMounted] = useState(false);
  const [pdfDocument, setPdfDocument] = useState<any>(null);
  const [numPages, setNumPages] = useState<number | null>(null);
  const [pageNumber, setPageNumber] = useState<number>(1);
  const [pdfScale, setPdfScale] = useState<number>(1.0);

  const [searchQuery, setSearchQuery] = useState('');
  const [openCategories, setOpenCategories] = useState<Record<string, boolean>>({
    '1. Getting Started': true,
  });
  const [activeQuestionTitle, setActiveQuestionTitle] = useState<string | null>('What is ICHAI?');

  const [illustrationModalOpen, setIllustrationModalOpen] = useState(false);
  const [currentIllustrationSrc, setCurrentIllustrationSrc] = useState<string | null>(null);
  const [currentIllustrationTitle, setCurrentIllustrationTitle] = useState<string>('');
  const [currentIllustrationSubtitle, setCurrentIllustrationSubtitle] = useState<string>('');
  const [currentQuestionId, setCurrentQuestionId] = useState<number | undefined>(undefined);

  const pdfContainerRef = useRef<HTMLDivElement>(null);
  const activeItemRef = useRef<HTMLButtonElement | null>(null);

  const ensureCategoryOpen = (page: number, questionTitle?: string) => {
    const matchedCategory = KNOWLEDGE_BASE.find((cat) =>
      cat.questions.some(
        (q) => q.page === page || (questionTitle && q.title === questionTitle)
      )
    );

    if (matchedCategory) {
      setOpenCategories((prev) => ({
        ...prev,
        [matchedCategory.category]: true,
      }));
    }
  };

  useEffect(() => {
    setMounted(true);

    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        if (illustrationModalOpen) {
          setIllustrationModalOpen(false);
        } else {
          onClose();
        }
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [illustrationModalOpen, onClose]);

  const safePdfUrl = encodeURI(pdfUrl);

  const onDocumentLoadSuccess = (pdf: any) => {
    setPdfDocument(pdf);
    setNumPages(pdf.numPages);
  };

  const toggleCategory = (catTitle: string) => {
    setOpenCategories((prev) => ({
      ...prev,
      [catTitle]: !prev[catTitle],
    }));
  };

  const extractPageIllustrationLink = async (targetPage: number): Promise<string | null> => {
    if (!pdfDocument) return null;
    try {
      const page = await pdfDocument.getPage(targetPage);
      const annotations = await page.getAnnotations();
      for (const annot of annotations) {
        if (annot.subtype === 'Link' && annot.url) {
          return annot.url;
        }
      }
    } catch (err) {
      console.error('Failed to inspect PDF link annotations:', err);
    }
    return null;
  };

  const openIllustration = async (params: {
    pageNo: number;
    questionId?: number;
    title?: string;
    subtitle?: string;
    imageSrc?: string;
  }) => {
    const { pageNo, questionId, title, subtitle, imageSrc } = params;

    let finalImageSrc = imageSrc;
    if (!finalImageSrc) {
      const extractedUrl = await extractPageIllustrationLink(pageNo);
      if (extractedUrl) {
        finalImageSrc = extractedUrl;
      }
    }

    const parsedIdFromSrc = finalImageSrc ? parseIllustrationNumber(finalImageSrc) : null;
    const foundQuestion = findQuestion({
      id: questionId || parsedIdFromSrc || undefined,
      page: pageNo,
      title,
    });

    const qId = questionId || parsedIdFromSrc || foundQuestion?.id;
    const resolvedImageSrc =
      finalImageSrc ||
      foundQuestion?.illustrationImage ||
      (qId ? `https://ichai.net/converted-illustration/${qId}.webp` : null);

    const pageTitle =
      title || (foundQuestion ? `${foundQuestion.id}. ${foundQuestion.title}` : `Page ${pageNo} Illustration`);
    const pageSubtitle =
      subtitle || `Visual reference guide from Page ${pageNo} of the Knowledge Centre.`;

    setCurrentQuestionId(qId || undefined);
    setCurrentIllustrationTitle(pageTitle);
    setCurrentIllustrationSubtitle(pageSubtitle);
    setCurrentIllustrationSrc(resolvedImageSrc);
    ensureCategoryOpen(pageNo, title);
    setIllustrationModalOpen(true);
  };

  const handleQuestionClick = (question: KnowledgeQuestion, catName: string) => {
    setActiveQuestionTitle(question.title);
    setOpenCategories((prev) => ({ ...prev, [catName]: true }));
    setPageNumber(question.page);
  };

  const changePage = (offset: number) => {
    const target = Math.min(Math.max(pageNumber + offset, 1), numPages || 1);
    setPageNumber(target);
    ensureCategoryOpen(target);
  };

  const handlePdfContainerClick = async (e: React.MouseEvent) => {
    const target = e.target as HTMLElement;
    const anchor = target.closest('a');
    const textContent = (target.innerText || target.textContent || '').trim();

    if (anchor && anchor.href) {
      e.preventDefault();
      e.stopPropagation();
      openIllustration({
        pageNo: pageNumber,
        imageSrc: anchor.href,
        title: `Page ${pageNumber} Illustration`,
      });
      return;
    }

    if (
      textContent.toUpperCase().includes('VIEW ILLUSTRATION') ||
      textContent.toUpperCase().includes('ILLUSTRATION')
    ) {
      e.preventDefault();
      e.stopPropagation();
      openIllustration({ pageNo: pageNumber });
    }
  };

  const filteredKnowledgeBase = KNOWLEDGE_BASE.map((section) => {
    const isCatMatch = section.category.toLowerCase().includes(searchQuery.toLowerCase());
    const matchedQuestions = section.questions.filter((q) =>
      q.title.toLowerCase().includes(searchQuery.toLowerCase())
    );

    if (isCatMatch) return section;
    if (matchedQuestions.length > 0) {
      return { ...section, questions: matchedQuestions };
    }

    return null;
  }).filter(Boolean) as typeof KNOWLEDGE_BASE;

  if (!mounted) return null;

  return createPortal(
    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/85 backdrop-blur-md p-2 sm:p-4">
      <div className="relative flex flex-col w-full max-w-7xl h-[94vh] bg-slate-900 border border-white/10 rounded-2xl overflow-hidden shadow-2xl">
        <div className="flex items-center justify-between px-5 py-3.5 bg-slate-950 border-b border-white/10 text-white shrink-0">
          <div className="flex items-center gap-3">
            <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-blue-600/20 text-blue-400">
              <FileText size={18} />
            </div>
            <div>
              <h3 className="text-sm font-semibold truncate max-w-xs sm:max-w-md">
                ICHAI Knowledge Centre & User Guide
              </h3>
              <p className="text-[10px] text-slate-400">
                Complete Handbook & Interactive Documentation
              </p>
            </div>
          </div>

          <div className="flex items-center gap-2 sm:gap-4">
            <button
              onClick={() => openIllustration({ pageNo: pageNumber })}
              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-amber-500/20 border border-amber-500/40 text-amber-300 hover:bg-amber-500 hover:text-black text-xs font-semibold transition shadow-sm cursor-pointer"
              title="View illustration popup"
            >
              <ImageIcon size={14} />
              <span className="hidden sm:inline">View Illustration</span>
            </button>

            {numPages && (
              <div className="flex items-center gap-1.5 text-xs bg-slate-900 border border-white/10 px-2 py-1 rounded-lg">
                <button
                  type="button"
                  onClick={() => changePage(-1)}
                  disabled={pageNumber <= 1}
                  className="p-1 rounded hover:bg-white/10 disabled:opacity-20 text-slate-300 transition cursor-pointer"
                  aria-label="Previous Page"
                >
                  <ChevronLeft size={16} />
                </button>

                <span className="font-medium px-1 text-slate-200">
                  {pageNumber} / {numPages}
                </span>

                <button
                  type="button"
                  onClick={() => changePage(1)}
                  disabled={pageNumber >= numPages}
                  className="p-1 rounded hover:bg-white/10 disabled:opacity-20 text-slate-300 transition cursor-pointer"
                  aria-label="Next Page"
                >
                  <ChevronRight size={16} />
                </button>
              </div>
            )}

            <div className="hidden md:flex items-center gap-1 bg-slate-900 border border-white/10 px-1 py-1 rounded-lg">
              <button
                type="button"
                onClick={() => setPdfScale((s) => Math.max(s - 0.15, 0.6))}
                className="p-1 rounded text-slate-400 hover:text-white hover:bg-white/10 transition cursor-pointer"
                title="Zoom Out"
              >
                <ZoomOut size={15} />
              </button>
              <span className="text-[11px] px-1 text-slate-400 font-mono">
                {Math.round(pdfScale * 100)}%
              </span>
              <button
                type="button"
                onClick={() => setPdfScale((s) => Math.min(s + 0.15, 2.0))}
                className="p-1 rounded text-slate-400 hover:text-white hover:bg-white/10 transition cursor-pointer"
                title="Zoom In"
              >
                <ZoomIn size={15} />
              </button>
            </div>

            <button
              type="button"
              onClick={onClose}
              className="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/10 transition cursor-pointer"
              aria-label="Close"
            >
              <X size={20} />
            </button>
          </div>
        </div>

        <div className="flex-1 flex min-h-0 overflow-hidden bg-slate-900">
          <div className="w-80 bg-slate-950 border-r border-white/10 flex flex-col shrink-0">
            <div className="p-3 border-b border-white/10">
              <div className="relative">
                <Search className="w-3.5 h-3.5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" />
                <input
                  type="text"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  placeholder="Filter chapters & questions..."
                  className="w-full bg-slate-900 border border-white/10 text-white text-xs rounded-xl pl-8 pr-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 placeholder-slate-500 transition"
                />
              </div>
            </div>

            <div className="flex-1 overflow-y-auto p-3 space-y-2 scrollbar-thin">
              {filteredKnowledgeBase.length > 0 ? (
                filteredKnowledgeBase.map((sec) => {
                  const isCurrentActiveCat = sec.questions.some(
                    (q) => q.title === activeQuestionTitle || q.page === pageNumber
                  );

                  const isOpen =
                    openCategories[sec.category] ??
                    (searchQuery.trim().length > 0 || isCurrentActiveCat);

                  return (
                    <div
                      key={sec.category}
                      className={`rounded-xl border transition-all ${
                        isCurrentActiveCat
                          ? 'border-blue-500/30 bg-blue-950/10'
                          : 'border-white/5 bg-white/[0.02]'
                      } overflow-hidden`}
                    >
                      <button
                        type="button"
                        onClick={() => toggleCategory(sec.category)}
                        className="w-full flex items-center justify-between p-2.5 text-left hover:bg-white/5 transition cursor-pointer"
                      >
                        <span className="text-xs font-semibold text-slate-200 flex items-center gap-2">
                          <Book className="w-3.5 h-3.5 text-blue-400 shrink-0" />
                          {sec.category}
                        </span>
                        <ChevronDown
                          className={`w-3.5 h-3.5 text-slate-400 transition-transform ${
                            isOpen ? 'rotate-180 text-blue-400' : ''
                          }`}
                        />
                      </button>

                      {isOpen && (
                        <div className="bg-black/30 border-t border-white/5 p-1.5 space-y-0.5">
                          {sec.questions.map((q) => {
                            const isSelected =
                              activeQuestionTitle === q.title || pageNumber === q.page;

                            return (
                              <button
                                key={q.id || q.title}
                                ref={isSelected ? activeItemRef : null}
                                type="button"
                                onClick={() => handleQuestionClick(q, sec.category)}
                                className={`w-full text-left px-2.5 py-1.5 rounded-lg text-[11px] transition flex items-center justify-between leading-snug group cursor-pointer ${
                                  isSelected
                                    ? 'bg-blue-600 text-white font-medium shadow-sm'
                                    : 'text-slate-400 hover:text-white hover:bg-white/5'
                                }`}
                              >
                                <span className="truncate pr-2">
                                  {q.id ? `${q.id}. ` : ''}
                                  {q.title}
                                </span>
                                <div className="flex items-center gap-1 shrink-0">
                                  {q.hasIllustration && (
                                    <span
                                      onClick={(e) => {
                                        e.stopPropagation();
                                        setPageNumber(q.page);
                                        setActiveQuestionTitle(q.title);
                                        setOpenCategories((prev) => ({
                                          ...prev,
                                          [sec.category]: true,
                                        }));
                                        openIllustration({
                                          pageNo: q.page,
                                          questionId: q.id,
                                          title: `${q.id}. ${q.title}`,
                                          imageSrc: q.illustrationImage,
                                        });
                                      }}
                                      className="text-[9px] px-1.5 py-0.5 rounded bg-amber-500/20 text-amber-300 border border-amber-500/30 hover:bg-amber-500 hover:text-black font-semibold uppercase tracking-wider transition"
                                      title={`Open illustration #${q.id}`}
                                    >
                                      Diagram
                                    </span>
                                  )}
                                  <span
                                    className={`text-[10px] ${
                                      isSelected ? 'text-blue-200' : 'text-slate-500'
                                    }`}
                                  >
                                    p.{q.page}
                                  </span>
                                </div>
                              </button>
                            );
                          })}
                        </div>
                      )}
                    </div>
                  );
                })
              ) : (
                <div className="p-6 text-center text-xs text-slate-500">
                  No matching subjects found for &quot;{searchQuery}&quot;.
                </div>
              )}
            </div>
          </div>

          <div
            ref={pdfContainerRef}
            onClick={handlePdfContainerClick}
            className="flex-1 overflow-auto flex justify-center items-start p-6 bg-slate-900/50 relative scrollbar-thin transition-all"
          >
            <Document
              file={safePdfUrl}
              onDocumentLoadSuccess={onDocumentLoadSuccess}
              loading={
                <div className="text-slate-400 py-24 flex flex-col items-center gap-3 text-sm">
                  <div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
                  Loading PDF document...
                </div>
              }
              error={
                <div className="text-red-400 p-8 text-center text-sm space-y-3 max-w-md bg-red-950/20 border border-red-500/20 rounded-2xl my-auto">
                  <p className="font-semibold text-base">Failed to load PDF document.</p>
                </div>
              }
            >
              <Page
                pageNumber={pageNumber}
                scale={pdfScale}
                renderTextLayer={true}
                renderAnnotationLayer={true}
                className="shadow-2xl rounded-xl border border-white/10 overflow-hidden transition-transform duration-200 bg-white"
              />
            </Document>
          </div>
        </div>
      </div>

      {illustrationModalOpen && (
        <IllustrationImageLightboxModal
          imageSrc={currentIllustrationSrc}
          fallbackPdfUrl={safePdfUrl}
          pageNumber={pageNumber}
          questionId={currentQuestionId}
          title={currentIllustrationTitle}
          subtitle={currentIllustrationSubtitle}
          onSelectQuestion={(selectedQ) => {
            setPageNumber(selectedQ.page);
            ensureCategoryOpen(selectedQ.page, selectedQ.title);
            openIllustration({
              pageNo: selectedQ.page,
              questionId: selectedQ.id,
              title: `${selectedQ.id}. ${selectedQ.title}`,
              imageSrc: selectedQ.illustrationImage,
            });
          }}
          onClose={() => setIllustrationModalOpen(false)}
        />
      )}
    </div>,
    document.body
  );
}

function IllustrationImageLightboxModal({
  imageSrc,
  fallbackPdfUrl,
  pageNumber,
  questionId,
  title,
  subtitle,
  onSelectQuestion,
  onClose,
}: {
  imageSrc: string | null;
  fallbackPdfUrl: string;
  pageNumber: number;
  questionId?: number;
  title: string;
  subtitle: string;
  onSelectQuestion: (q: KnowledgeQuestion) => void;
  onClose: () => void;
}) {
  const [imageError, setImageError] = useState(false);

  useEffect(() => {
    setImageError(false);
  }, [imageSrc, pageNumber, questionId]);

  const allIllustrationQuestions = KNOWLEDGE_BASE.flatMap((cat) => cat.questions)
    .filter((q) => q.hasIllustration)
    .sort((a, b) => (a.id || a.page) - (b.id || b.page));

  const currentIndex = allIllustrationQuestions.findIndex(
    (q) => (questionId && q.id === questionId) || q.page === pageNumber
  );
  const activeIdx = currentIndex === -1 ? 0 : currentIndex;

  const startIdx = Math.max(0, Math.min(activeIdx - 2, allIllustrationQuestions.length - 6));
  const visibleIllustrations = allIllustrationQuestions.slice(startIdx, startIdx + 6);

  return createPortal(
    <div className="fixed inset-0 z-[10000] flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm overflow-y-auto">
      <div className="relative w-full max-w-4xl bg-white rounded-3xl p-6 shadow-2xl border border-slate-100 flex flex-col my-8 animate-in fade-in zoom-in-95 duration-200">
        <div className="flex items-start justify-between pb-4 border-b border-slate-100 pr-8">
          <div>
            <div className="flex items-center gap-2 mb-1">
              {questionId && (
                <span className="px-2 py-0.5 bg-amber-100 text-amber-900 text-[11px] font-bold rounded-full uppercase tracking-wider">
                  Illustration #{questionId}
                </span>
              )}
              <span className="px-2 py-0.5 bg-slate-100 text-slate-700 text-[11px] font-medium rounded-full">
                Page {pageNumber}
              </span>
            </div>
            <h3 className="text-base font-bold text-slate-900">{title}</h3>
            <p className="text-xs text-slate-500 mt-0.5">{subtitle}</p>
          </div>

          <button
            type="button"
            onClick={onClose}
            className="absolute right-5 top-5 text-slate-400 hover:text-slate-600 p-1.5 rounded-full hover:bg-slate-100 transition cursor-pointer"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        <div className="relative w-full my-4 overflow-hidden rounded-2xl bg-slate-50 border border-slate-200/80 flex items-center justify-center min-h-[320px] max-h-[75vh] overflow-y-auto">
          {imageSrc && !imageError ? (
            <img
              src={imageSrc}
              alt={title}
              onError={() => setImageError(true)}
              className="w-full h-auto object-contain max-h-[72vh] rounded-xl"
            />
          ) : (
            <div className="p-4 flex flex-col justify-center items-center w-full">
              <Document file={fallbackPdfUrl} loading={null}>
                <Page
                  pageNumber={pageNumber}
                  scale={1.3}
                  renderTextLayer={false}
                  renderAnnotationLayer={false}
                  className="shadow-md rounded-xl overflow-hidden bg-white"
                />
              </Document>
            </div>
          )}
        </div>

        <div className="flex flex-col sm:flex-row items-center justify-between gap-3 pt-2 border-t border-slate-100">
          <div className="flex items-center gap-2 overflow-x-auto max-w-full pb-1 sm:pb-0 scrollbar-thin">
            <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider mr-1 shrink-0">
              Related Diagrams:
            </span>
            {visibleIllustrations.map((q) => {
              const isActive = (questionId && q.id === questionId) || q.page === pageNumber;
              return (
                <button
                  key={q.id || q.page}
                  type="button"
                  onClick={() => onSelectQuestion(q)}
                  className={`px-3 py-1.5 text-xs font-semibold rounded-lg whitespace-nowrap transition cursor-pointer flex items-center gap-1.5 ${
                    isActive
                      ? 'bg-blue-600 text-white shadow-sm'
                      : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
                  }`}
                  title={q.title}
                >
                  <span>#{q.id} (p.{q.page})</span>
                  {isActive && <span className="w-1.5 h-1.5 rounded-full bg-white animate-pulse" />}
                </button>
              );
            })}
          </div>

          <button
            type="button"
            onClick={onClose}
            className="w-full sm:w-auto px-4 py-2 bg-slate-900 text-white rounded-xl text-xs font-semibold hover:bg-slate-800 transition cursor-pointer shrink-0"
          >
            Close Illustration
          </button>
        </div>
      </div>
    </div>,
    document.body
  );
}

interface ContributorSidebarProps {
  activeItem?: string;
  memberId?: string;
  statusTitle?: string;
  sinceDate?: string;
}

export default function ContributorSidebar({
  activeItem,
  memberId: initialMemberId,
  statusTitle: initialStatusTitle,
  sinceDate: initialSinceDate,
}: ContributorSidebarProps) {
  const pathname = usePathname();
  const router = useRouter();

  // Modal states
  const [activePdfConfig, setActivePdfConfig] = useState<{
    url: string;
    title: string;
    illustrationImage?: string;
    redirect?: string;
  } | null>(null);

  const [isKnowledgeGuideOpen, setIsKnowledgeGuideOpen] = useState(false);
  const [isComingSoonOpen, setIsComingSoonOpen] = useState(false);

  const [memberId, setMemberId] = useState<string>(initialMemberId || '');
  const [statusTitle, setStatusTitle] = useState<string>(initialStatusTitle || 'Emerging Research Fellow');
  const [sinceDate, setSinceDate] = useState<string>(initialSinceDate || '');
  const [unreadMessages, setUnreadMessages] = useState<number>(0);

  const getAuthToken = useCallback(() => {
    if (typeof window === 'undefined') return null;
    return (
      localStorage.getItem('contributorToken') ||
      localStorage.getItem('ContributorToken')
    );
  }, []);

  const fetchContributorDetails = useCallback(async () => {
    const token = getAuthToken();
    if (!token) return;

    const baseUrl = process.env.NEXT_PUBLIC_API_URL || 'https://api.ichai.net';
    const headers = {
      Accept: 'application/json',
      Authorization: `Bearer ${token}`,
    };

    try {
      const meRes = await fetch(`${baseUrl}/contributor/me`, { headers }).catch(() => null);
      if (meRes && meRes.ok) {
        const meData = await meRes.json();
        const user = meData.user;
        if (user) {
          if (user.member_id) setMemberId(user.member_id);
          if (user.created_at) {
            const date = new Date(user.created_at);
            setSinceDate(
              date.toLocaleDateString('en-US', {
                month: 'long',
                day: 'numeric',
                year: 'numeric',
              })
            );
          }

          const cInfo = user.contributor_info || user.contributorInfo;
          if (cInfo?.application_status) {
            const status = cInfo.application_status.toLowerCase();
            if (status === 'approved') {
              setStatusTitle('Verified Research Fellow');
            } else if (status === 'pending') {
              setStatusTitle('Pending Review');
            } else {
              setStatusTitle('Emerging Research Fellow');
            }
          }
        }
      }

      const msgRes = await fetch(`${baseUrl}/contributor/messages`, { headers }).catch(() => null);
      if (msgRes && msgRes.ok) {
        const msgData = await msgRes.json();
        const messagesList = Array.isArray(msgData) ? msgData : msgData.data || [];
        const unreadCount = messagesList.filter(
          (m: any) => m.sender_type === 'admin' && (m.is_read === false || m.is_read === 0)
        ).length;
        setUnreadMessages(unreadCount);
      }
    } catch (err) {
      console.warn('Error syncing contributor sidebar data:', err);
    }
  }, [getAuthToken]);

  useEffect(() => {
    const token = getAuthToken();
    if (!token) {
      router.push('/contributor/login');
      return;
    }

    fetchContributorDetails();
    const interval = setInterval(fetchContributorDetails, 30000);
    return () => clearInterval(interval);
  }, [getAuthToken, router, fetchContributorDetails]);

  const MAIN_MENU: NavItem[] = [
    { label: 'Dashboard', href: '/research-contributor', icon: Home },
    { label: 'My Profile', href: '/research-contributor/profile', icon: User },
    { label: 'My Submissions', href: '/research-contributor/research', icon: FileCheck2 },
    { label: 'Submit Research', href: '/research-contributor/research/add', icon: PenTool },
    { label: 'My Publications', href: '/research-contributor/publications', icon: BookOpen },
    { label: 'Messages', href: '/research-contributor/messages', icon: Mail, badge: unreadMessages },
    { label: 'Working Groups', href: '/research-contributor/working-groups', icon: Users },
  ];

  const RESOURCES_MENU: NavItem[] = [
    {
      label: 'Contributor Guidelines',
      href: '/research-contributor/guidelines',
      icon: FileText,
      action: 'pdf',
      pdfUrl: '/documents/contributor/ichai-research-contributor-guidelines.pdf',
      pdfTitle: 'ICHAI Research Contributor Guidelines',
      illustrationImage: '/illutrations/research-submission-process.webp',
      onSubmitRedirect: '/research-contributor/research/add/',
    },
    {
      label: 'ICHAI Resources',
      href: '/resources',
      icon: Clock,
      action: 'pdf',
      pdfUrl: '/documents/contributor/ichai-resources.pdf',
      pdfTitle: 'ICHAI Resources',
    },
    {
      label: 'Events & Opportunities',
      href: '/events',
      icon: Calendar,
      action: 'coming_soon',
    },
    {
      label: 'Help & Support',
      href: '/help-centre',
      icon: HelpCircle,
      action: 'knowledge_guide',
    },
  ];

  const handleActionClick = (item: NavItem, e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();

    if (item.action === 'coming_soon') {
      setIsComingSoonOpen(true);
      return;
    }

    if (item.action === 'knowledge_guide') {
      setActivePdfConfig(null);
      setIsKnowledgeGuideOpen(true);
      return;
    }

    setIsKnowledgeGuideOpen(false);
    setActivePdfConfig({
      url: item.pdfUrl || '/documents/contributor/ichai-resources.pdf',
      title: item.pdfTitle || item.label,
      illustrationImage: item.illustrationImage,
      redirect: item.onSubmitRedirect,
    });
  };

  const handleLogout = async () => {
    const token = getAuthToken();
    if (token) {
      try {
        const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'https://api.ichai.net';
        await fetch(`${apiUrl}/contributor/logout`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
            Authorization: `Bearer ${token}`,
          },
        });
      } catch (err) {
        console.error('Logout error:', err);
      }
    }

    if (typeof window !== 'undefined') {
      localStorage.removeItem('contributorToken');
      localStorage.removeItem('ContributorToken');
      localStorage.removeItem('contributionUser');
      localStorage.removeItem('ciontributionUser');
      localStorage.removeItem('contributorUser');

      sessionStorage.removeItem('contributorToken');
      sessionStorage.removeItem('ContributorToken');
      sessionStorage.removeItem('contributionUser');
      sessionStorage.removeItem('ciontributionUser');

      document.cookie = 'contributorToken=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; max-age=0';
      document.cookie = 'ContributorToken=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; max-age=0';
    }

    router.push('/contributor/login');
  };

  const isNavActive = (item: NavItem) => {
    if (activeItem) {
      return activeItem.toLowerCase() === item.label.toLowerCase();
    }
    if (pathname === item.href) return true;
    if (item.href === '/research-contributor' && (pathname === '/research-contributor' || pathname === '/')) {
      return true;
    }
    return pathname.startsWith(item.href) && item.href !== '/research-contributor';
  };

  return (
    <>
      <aside className="w-64 p-3 flex-shrink-0">
        <div className="h-full min-h-[calc(100vh-1.5rem)] bg-[#001028] text-slate-300 rounded-3xl border border-slate-800/80 shadow-xl shadow-slate-950/20 flex flex-col justify-between p-4 font-sans select-none overflow-y-auto">
          <div className="space-y-5">
            <div className="px-2 pt-1 pb-2 border-b border-slate-800/80">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-[#0B254E] to-[#00193D] border border-blue-500/30 flex items-center justify-center text-blue-400 shadow-sm shrink-0">
                  <FlaskConical className="w-5 h-5 text-blue-400" />
                </div>
                <div className="min-w-0">
                  <h2 className="text-xs font-bold text-white tracking-wide truncate">
                    Research Contributor
                  </h2>
                  <p className="text-[10.5px] font-medium text-slate-400 tracking-wider uppercase">
                    Member Portal
                  </p>
                </div>
              </div>
            </div>

            <div>
              <h3 className="px-3 text-[10px] font-bold tracking-widest text-[#3b82f6] uppercase mb-2">
                Main Menu
              </h3>
              <ul className="space-y-1">
                {MAIN_MENU.map((item) => {
                  const Icon = item.icon;
                  const isActive = isNavActive(item);

                  return (
                    <li key={item.label}>
                      <Link
                        href={item.href}
                        className={`flex items-center justify-between px-3.5 py-2.5 rounded-xl font-medium text-xs transition-all ${
                          isActive
                            ? 'bg-[#001e47] text-white shadow-sm border border-blue-500/20'
                            : 'text-slate-300 hover:text-white hover:bg-slate-800/40'
                        }`}
                      >
                        <div className="flex items-center gap-3">
                          <Icon className={`w-4 h-4 ${isActive ? 'text-blue-400' : 'text-slate-400'}`} />
                          <span>{item.label}</span>
                        </div>

                        {item.badge !== undefined && item.badge > 0 && (
                          <span className="min-w-[18px] h-4 px-1 flex items-center justify-center rounded-full bg-amber-500/20 border border-amber-500/40 text-amber-300 text-[10px] font-bold">
                            {item.badge > 99 ? '99+' : item.badge}
                          </span>
                        )}
                      </Link>
                    </li>
                  );
                })}

                <li>
                  <button
                    type="button"
                    onClick={handleLogout}
                    className="w-full flex items-center justify-between px-3.5 py-2.5 rounded-xl font-medium text-xs transition-all text-rose-400/90 hover:text-rose-300 hover:bg-rose-500/10 border border-transparent hover:border-rose-500/20 cursor-pointer text-left group"
                  >
                    <div className="flex items-center gap-3">
                      <LogOut className="w-4 h-4 text-rose-400 group-hover:text-rose-300 transition-colors" />
                      <span>Log Out</span>
                    </div>
                  </button>
                </li>
              </ul>
            </div>

            <div className="h-px bg-slate-800/60 mx-1" />

            <div>
              <h3 className="px-3 text-[10px] font-bold tracking-widest text-slate-400 uppercase mb-2">
                Resources
              </h3>
              <ul className="space-y-1">
                {RESOURCES_MENU.map((item) => {
                  const Icon = item.icon;
                  const isActive = pathname === item.href;

                  if (item.action) {
                    return (
                      <li key={item.label}>
                        <button
                          type="button"
                          onClick={(e) => handleActionClick(item, e)}
                          className="w-full flex items-center justify-between px-3.5 py-2 rounded-xl font-medium text-xs transition-all text-slate-300 hover:text-white hover:bg-slate-800/40 cursor-pointer text-left group"
                        >
                          <div className="flex items-center gap-3">
                            <Icon className="w-4 h-4 text-slate-400 group-hover:text-blue-400 transition-colors" />
                            <span>{item.label}</span>
                          </div>
                          {item.action === 'coming_soon' ? (
                            <span className="text-[9.5px] px-1.5 py-0.5 rounded bg-amber-500/15 text-amber-300 border border-amber-500/30 font-semibold uppercase tracking-wider">
                              Soon
                            </span>
                          ) : (
                            <span className="text-[9.5px] px-1.5 py-0.5 rounded bg-blue-500/20 text-blue-300 border border-blue-500/30 font-semibold uppercase">
                              {item.action === 'knowledge_guide' ? 'Guide' : 'PDF'}
                            </span>
                          )}
                        </button>
                      </li>
                    );
                  }

                  return (
                    <li key={item.label}>
                      <Link
                        href={item.href}
                        className={`flex items-center justify-between px-3.5 py-2 rounded-xl font-medium text-xs transition-all ${
                          isActive
                            ? 'bg-[#001e47] text-white shadow-sm border border-blue-500/20'
                            : 'text-slate-300 hover:text-white hover:bg-slate-800/40'
                        }`}
                      >
                        <div className="flex items-center gap-3">
                          <Icon className={`w-4 h-4 ${isActive ? 'text-blue-400' : 'text-slate-400'}`} />
                          <span>{item.label}</span>
                        </div>
                      </Link>
                    </li>
                  );
                })}
              </ul>
            </div>
          </div>

          <div className="space-y-3 pt-5">
            <div className="rounded-2xl border border-slate-800/90 bg-[#021838]/70 p-3.5 space-y-2">
              <h4 className="text-[11px] font-bold text-white tracking-wide">
                Your Contributor Status
              </h4>

              <div>
                <span className="inline-block px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase bg-[#3b1c61] text-[#c084fc] border border-[#7e3cb8]/40">
                  {statusTitle}
                </span>
              </div>

              <div className="text-[10px] text-slate-400 space-y-0.5 pt-0.5">
                <p>Member ID: {memberId || 'Loading...'}</p>
                <p>Since: {sinceDate || 'Loading...'}</p>
              </div>
            </div>

            <div className="rounded-2xl border border-[#d4af37]/40 bg-gradient-to-b from-[#021838] to-[#011029] p-3.5 text-left space-y-3">
              <div>
                <div className="flex items-center gap-2 mb-1 text-white font-bold text-xs">
                  <HelpCircle className="w-3.5 h-3.5 text-amber-400 shrink-0" />
                  <span>Need Help?</span>
                </div>
                <p className="text-slate-400 text-[10.5px] leading-relaxed">
                  Explore handbook guides, diagrams, and documentation.
                </p>
              </div>

              <button
                type="button"
                onClick={() => {
                  setActivePdfConfig(null);
                  setIsKnowledgeGuideOpen(true);
                }}
                className="w-full bg-[#181d26] hover:bg-[#202733] border border-[#d4af37]/40 text-amber-300 text-xs font-bold py-2 px-3 rounded-xl flex items-center justify-between transition-colors cursor-pointer shadow-sm"
              >
                <div className="flex items-center gap-2">
                  <BookOpen className="w-4 h-4 text-amber-400 shrink-0" />
                  <span>Open Knowledge Guide</span>
                </div>
                <ArrowRight className="w-3.5 h-3.5 text-amber-400 shrink-0" />
              </button>
            </div>
          </div>
        </div>
      </aside>

      {/* 1. Continuous Scroll PDF Modal (Guidelines / Resources) */}
      {activePdfConfig && (
        <PdfViewerModal
          pdfUrl={activePdfConfig.url}
          title={activePdfConfig.title}
          illustrationImage={activePdfConfig.illustrationImage}
          onSubmitRedirect={activePdfConfig.redirect}
          onOpenKnowledgeGuide={() => {
            setActivePdfConfig(null);
            setIsKnowledgeGuideOpen(true);
          }}
          onOpenPdf={(url, title) => {
            setActivePdfConfig({ url, title });
          }}
          onClose={() => setActivePdfConfig(null)}
        />
      )}

      {/* 2. Interactive Special Knowledge Centre Modal (Help & Support) */}
      {isKnowledgeGuideOpen && (
        <KnowledgeGuideModal
          pdfUrl="/documents/ichai-help-knowledge-centre.pdf"
          onClose={() => setIsKnowledgeGuideOpen(false)}
        />
      )}

      {/* 3. Modern Coming Soon Modal (Events & Opportunities) */}
      {isComingSoonOpen && (
        <ComingSoonModal onClose={() => setIsComingSoonOpen(false)} />
      )}
    </>
  );
}