import { Box, Container, Heading, Image, Spinner, Stack, Text, HStack, Badge, Link, SimpleGrid, Button, AspectRatio, useColorModeValue, Flex, VStack, Tag } from '@chakra-ui/react';
import { useQuery } from '@tanstack/react-query';
import { useParams, Link as RouterLink } from 'react-router-dom';
import { getArticle, getArticleBySlug, getArticleMatchLink, trackArticleView, getArticles } from '../services/articles';
import { articleRead } from '../services/engagement';
import MainLayout from '../components/layout/MainLayout';
import DOMPurify from 'dompurify';
import { Helmet } from 'react-helmet-async';
import NewsletterCTA from '../components/common/NewsletterCTA';
import EmbeddedPoll from '../components/polls/EmbeddedPoll';
import { ArrowRight, Eye, Clock, SearchX } from 'lucide-react';
import React from 'react';
import { trackEvent as umamiTrackEvent, trackMatchView as umamiTrackMatchView, trackVideoPlay as umamiTrackVideoPlay, trackArticleView as umamiTrackArticleView } from '../utils/umami';
import { assetUrl } from '../utils/url';
import { API_URL } from '../services/api';
import TeamLogo from '../components/common/TeamLogo';
import MatchModal from '../components/home/MatchModal';
import { extractPalette } from '../utils/colors';
import { getTeamLogo } from '../utils/sportLogosAPI';
import FilePreview from '../components/common/FilePreview';
import { usePublicSettings } from '../hooks/usePublicSettings';
import InstagramGeneratorButton from '../components/admin/InstagramGeneratorButton';
import { MatchSnapshot } from '../services/instagram';
import { Widget } from '../components/widgets/Widget';
import { MatchesWidget } from '../components/widgets/MatchesWidget';
import { getUpcomingEvents } from '../services/eventService';
import CommentsSection from '../components/comments/CommentsSection';

const toText = (html?: string) => {
  if (!html) return '';
  const div = document.createElement('div');
  div.innerHTML = html;
  return (div.textContent || div.innerText || '').replace(/\s+/g, ' ').trim();
};

const ArticleDetailPage: React.FC = () => {
  const { id, slug } = useParams<{ id?: string; slug?: string }>();
  const { data, isLoading, isError } = useQuery({
    queryKey: ['article', slug ? `slug:${slug}` : `id:${id}`],
    queryFn: () => (slug ? getArticleBySlug(slug!) : getArticle(id!)),
    enabled: Boolean(slug || id),
  });

  
  // UI colors and public settings
  const { data: publicSettings } = usePublicSettings();
  const cardBg = useColorModeValue('white','gray.900');
  const videoBg = useColorModeValue('gray.50','gray.800');
  const textMuted = useColorModeValue('gray.600','gray.400');
  // Hoist all color mode values to top-level to avoid conditional hook calls
  const videoTitleColor = useColorModeValue('gray.700','gray.300');
  const galleryBg = useColorModeValue('blue.50','blue.900');
  const galleryBorder = useColorModeValue('blue.200','blue.700');
  const attachmentsBg = useColorModeValue('gray.50','gray.800');

  // Derive opponent color (for right edge fade) from team logo
  const [opponentColor, setOpponentColor] = React.useState<string | null>(null);
  const [isMatchModalOpen, setIsMatchModalOpen] = React.useState(false);
  const [selectedMatch, setSelectedMatch] = React.useState<any>(null);

  // Placeholders; moved tracking effects below to avoid using variables before declaration

  // Track article view when data is loaded
  React.useEffect(() => {
    if (data && (data as any).id) {
      trackArticleView((data as any).id);
      // Umami + backend generic event
      umamiTrackArticleView((data as any).id, (data as any).title);
    }
  }, [data]);

  // Award engagement for article read after 15s dwell (once per article per device)
  React.useEffect(() => {
    const aid = (data as any)?.id;
    if (!aid) return;
    let timer: any;
    const key = `fc_ar_read_${aid}`;
    const already = (() => { try { return localStorage.getItem(key) === '1'; } catch { return false; } })();
    if (!already) {
      timer = setTimeout(async () => {
        try {
          await articleRead(Number(aid));
          try { localStorage.setItem(key, '1'); } catch {}
        } catch {}
      }, 15000);
    }
    return () => { if (timer) clearTimeout(timer); };
  }, [(data as any)?.id]);

  // Delegated click tracking for normal links inside content
  const contentRef = React.useRef<HTMLDivElement | null>(null);
  React.useEffect(() => {
    const el = contentRef.current;
    if (!el) return;
    const handler = (e: MouseEvent) => {
      let target = e.target as HTMLElement | null;
      if (!target) return;
      // Find nearest anchor
      const anchor = (target.closest ? target.closest('a') : null) as HTMLAnchorElement | null;
      if (anchor && anchor.href) {
        try {
          const href = anchor.getAttribute('href') || anchor.href;
          umamiTrackEvent('Link Click', { href, page: window.location.pathname, context: 'article_content' });
        } catch {}
      }
    };
    el.addEventListener('click', handler);
    return () => { el.removeEventListener('click', handler); };
  }, [contentRef.current]);

  // Fetch linked match (public)
  const matchLinkQuery = useQuery({
    queryKey: ['article-match-link', (data as any)?.id],
    queryFn: () => getArticleMatchLink((data as any)?.id),
    enabled: Boolean((data as any)?.id),
    staleTime: 60_000,
  });

  // Track match view when resolved
  React.useEffect(() => {
    const mid = (matchLinkQuery.data as any)?.external_match_id;
    if (mid) {
      umamiTrackMatchView(mid);
    }
  }, [(matchLinkQuery.data as any)?.external_match_id]);

  // From cached FACR club info, resolve the match details
  const facrMatchQuery = useQuery({
    queryKey: ['facr-cached-match', (matchLinkQuery.data as any)?.external_match_id],
    enabled: Boolean((matchLinkQuery.data as any)?.external_match_id),
    queryFn: async () => {
      const origin = new URL(API_URL, window.location.origin).origin;
      const url = `${origin}/cache/prefetch/facr_club_info.json`;
      const res = await fetch(url, { cache: 'no-cache' });
      if (!res.ok) return null as any;
      const json = await res.json();
      const comps = Array.isArray(json?.competitions) ? json.competitions : [];
      for (const c of comps) {
        const matches = Array.isArray(c.matches) ? c.matches : [];
        for (const m of matches) {
          const mid = String(m.match_id || m.id);
          if (mid === String((matchLinkQuery.data as any)?.external_match_id)) {
            return { ...m, competitionName: c.name };
          }
        }
      }
      return null as any;
    },
    staleTime: 60_000,
  });

  // Build a snapshot usable for sharing if available (FACR data or article fallback)
  const matchSnapshot: MatchSnapshot | null = React.useMemo(() => {
    const m: any = facrMatchQuery?.data as any;
    if (m) {
      let score = '';
      if (m?.score && m.score !== 'vs') score = String(m.score);
      else if (m?.result_home != null && m?.result_away != null) score = `${m.result_home}:${m.result_away}`;
      return {
        external_match_id: String((matchLinkQuery.data as any)?.external_match_id || ''),
        competition: String(m.competitionName || ''),
        date_time: String(m.date_time || m.date || ''),
        venue: m.venue ? String(m.venue) : undefined,
        home: String(m.home || m.home_team || ''),
        away: String(m.away || m.away_team || ''),
        score,
      };
    }
    const snap: any = (data as any)?.match_snapshot;
    if (snap) {
      return {
        external_match_id: snap.external_match_id,
        competition: snap.competition || snap.competitionName,
        date_time: snap.date_time || snap.date,
        venue: snap.venue,
        home: snap.home,
        away: snap.away,
        score: snap.score,
      } as MatchSnapshot;
    }
    return null;
  }, [facrMatchQuery?.data, (matchLinkQuery.data as any)?.external_match_id, (data as any)?.match_snapshot]);

  // Fetch gallery album if article has one (fallback to URL when ID is missing)
  const galleryAlbumQuery = useQuery({
    queryKey: ['article-gallery-album', (data as any)?.gallery_album_id || (data as any)?.gallery_album_url],
    enabled: Boolean((data as any)?.gallery_album_id || (data as any)?.gallery_album_url),
    queryFn: async () => {
      const albumId = (data as any)?.gallery_album_id;
      let photoIds: string[] = [];
      const raw = (data as any)?.gallery_photo_ids;
      if (Array.isArray(raw)) {
        photoIds = raw as string[];
      } else if (typeof raw === 'string') {
        // Try JSON parse, otherwise split by comma
        try {
          const parsed = JSON.parse(raw);
          if (Array.isArray(parsed)) {
            photoIds = parsed.map(String);
          } else {
            photoIds = raw.split(',').map(s => s.trim()).filter(Boolean);
          }
        } catch {
          photoIds = raw.split(',').map(s => s.trim()).filter(Boolean);
        }
      }
      
      const origin = new URL(API_URL, window.location.origin).origin;
      
      // Try to find album in both sources
      const [profileRes, albumsRes] = await Promise.allSettled([
        fetch(`${origin}/cache/prefetch/zonerama_profile.json`, { cache: 'no-cache' }),
        fetch(`${origin}/cache/prefetch/zonerama_albums.json`, { cache: 'no-cache' })
      ]);
      
      // Check profile albums first
      if (profileRes.status === 'fulfilled' && profileRes.value.ok) {
        const profileData = await profileRes.value.json();
        const album = (profileData.albums || []).find((a: any) => a.id === albumId);
        if (album) {
          // Filter photos by selected IDs if available
          const photos = photoIds.length > 0 
            ? album.photos.filter((p: any) => photoIds.includes(p.id))
            : album.photos;
          return { ...album, photos };
        }
      }
      
      // Check blog albums
      if (albumsRes.status === 'fulfilled' && albumsRes.value.ok) {
        const albumsData = await albumsRes.value.json();
        const blogAlbums = Array.isArray(albumsData) ? albumsData : [];
        const album = blogAlbums.find((a: any) => a.id === albumId);
        if (album) {
          const photos = photoIds.length > 0 
            ? album.photos.filter((p: any) => photoIds.includes(p.id))
            : album.photos;
          return { ...album, photos };
        }
      }
      
      // Fallback: load by URL via proxy endpoint
      const albumUrl = (data as any)?.gallery_album_url;
      if (albumUrl) {
        const params = new URLSearchParams({ link: albumUrl, photo_limit: '12', rendered: 'true' });
        const resp = await fetch(`${API_URL}/zonerama-album?${params.toString()}`);
        if (resp.ok) {
          const payload = await resp.json();
          let photos: any[] = [];
          if (Array.isArray(payload?.albums) && payload.albums.length > 0) {
            photos = payload.albums[0]?.photos || [];
          } else if (Array.isArray(payload?.photos)) {
            photos = payload.photos;
          }
          if (photoIds.length > 0) photos = photos.filter((p: any) => photoIds.includes(p.id));
          return { id: albumUrl, title: 'Album', date: '', photos } as any;
        }
      }

      return null;
    },
    staleTime: 60_000,
  });

  // Track gallery section when loaded
  React.useEffect(() => {
    const albumId = (data as any)?.gallery_album_id;
    if (albumId && galleryAlbumQuery.data) {
      umamiTrackEvent('Gallery Section Shown', { album_id: albumId, photos: galleryAlbumQuery.data?.photos?.length || 0 });
    }
  }, [(data as any)?.gallery_album_id, galleryAlbumQuery.data]);

  // Transform content to ensure /uploads URLs resolve against API origin and allow iframes
  // Memoize the transformation function to prevent infinite loops
  const toAbsoluteUploads = React.useCallback((html?: string) => {
    if (!html) return '';
    try {
      const origin = new URL(API_URL, typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3000').origin;
      // Replace src="/uploads... and href="/uploads...
      return html
        .replace(/src=("|')\s*(\/uploads\/[^"']+)("')/g, (_m, q1, p2, q3) => `src=${q1}${origin}${p2}${q3}`)
        .replace(/href=("|')\s*(\/uploads\/[^"']+)("')/g, (_m, q1, p2, q3) => `href=${q1}${origin}${p2}${q3}`)
        // Also rewrite absolute localhost/127.0.0.1 uploads links to backend origin
        .replace(/src=("|')\s*https?:\/\/(?:localhost|127\.0\.0\.1)(?::\d+)?(\/uploads\/[^"']+)("')/g, (_m, q1, p2, q3) => `src=${q1}${origin}${p2}${q3}`)
        .replace(/href=("|')\s*https?:\/\/(?:localhost|127\.0\.0\.1)(?::\d+)?(\/uploads\/[^"']+)("')/g, (_m, q1, p2, q3) => `href=${q1}${origin}${p2}${q3}`);
    } catch {
      return html;
    }
  }, []);

  const safeContentHTML = React.useMemo(() => {
    const transformed = toAbsoluteUploads((data as any)?.content);
    return DOMPurify.sanitize(transformed || '', {
      USE_PROFILES: { html: true },
      ADD_TAGS: ['iframe'],
      ADD_ATTR: ['target', 'rel', 'allow', 'allowfullscreen', 'style', 'data-filters', 'data-img-id'],
    });
  }, [(data as any)?.content, toAbsoluteUploads]);

  const relatedArticlesQuery = useQuery({
    queryKey: ['related-articles', (data as any)?.category?.id || 'none', (data as any)?.id],
    enabled: Boolean((data as any)?.id),
    queryFn: () => getArticles({
      page: 1,
      page_size: 6,
      published: true,
      ...(((data as any)?.category?.id) ? { category_id: (data as any).category.id } : {}),
    }),
    staleTime: 60_000,
  });

  const upcomingEventsQuery = useQuery({
    queryKey: ['upcoming-events-sidebar'],
    queryFn: getUpcomingEvents,
    staleTime: 60_000,
  });

  const latestArticlesQuery = useQuery({
    queryKey: ['latest-articles'],
    queryFn: () => getArticles({ page: 1, page_size: 6, published: true }),
    enabled: Boolean((isError || !data) && (slug || id)),
    staleTime: 60_000,
  });

  if (isLoading) return <Spinner />;
  if (isError || !data) return (
    <MainLayout>
      <Helmet>
        <title>Článek nenalezen</title>
        <meta name="robots" content="noindex" />
      </Helmet>
      <Container maxW="4xl" py={{ base: 12, md: 16 }}>
        <Stack spacing={6} align="center" textAlign="center">
          <Box color="blue.500">
            <SearchX size={64} />
          </Box>
          <Heading size="xl">Článek nenalezen</Heading>
          <Text color={textMuted} maxW="2xl">
            Je nám líto, ale hledaný článek neexistuje, byl smazán nebo byl přesunut.
          </Text>
          <HStack spacing={3}>
            <Button as={RouterLink} to="/news" colorScheme="blue">Zpět na novinky</Button>
            <Button as={RouterLink} to="/" variant="ghost">Domů</Button>
          </HStack>
        </Stack>

        {Array.isArray((latestArticlesQuery.data as any)?.data) && ((latestArticlesQuery.data as any)?.data?.length || 0) > 0 && (
          <Box mt={12}>
            <Heading as="h2" size="md" mb={4}>Nejnovější články</Heading>
            <SimpleGrid columns={{ base: 1, sm: 2, md: 3 }} spacing={4}>
              {((latestArticlesQuery.data as any).data || []).slice(0, 6).map((a: any) => {
                const link = a.slug ? `/news/${a.slug}` : `/articles/${a.id}`;
                return (
                  <Box
                    key={a.id}
                    as={RouterLink}
                    to={link}
                    borderWidth="1px"
                    borderRadius="lg"
                    p={3}
                    bg={cardBg}
                    _hover={{ textDecoration: 'none', boxShadow: 'md' }}
                  >
                    <Image
                      src={assetUrl(a.image_url) || '/stadium-placeholder.jpg'}
                      alt={a.title}
                      w="100%"
                      h="140px"
                      objectFit="cover"
                      borderRadius="md"
                      mb={2}
                    />
                    <Text fontWeight="600" noOfLines={2}>{a.title}</Text>
                    {a.published_at && (
                      <Text fontSize="sm" color={textMuted}>{new Date(a.published_at).toLocaleDateString('cs-CZ')}</Text>
                    )}
                  </Box>
                );
              })}
            </SimpleGrid>
          </Box>
        )}
      </Container>
    </MainLayout>
  );

  const title = (data as any).seo_title || data.title;
  const description = (data as any).seo_description || toText(data.content).slice(0, 160);
  const ogImageRaw = (data as any).og_image_url || data.image_url || '/logo512.png';
  const ogImage = assetUrl(ogImageRaw) || ogImageRaw;
  const canonical = typeof window !== 'undefined' ? window.location.href : undefined;
  const publishedAt = (data as any).published_at || (data as any).created_at;
  const monthParam = (() => {
    if (!publishedAt) return '';
    try { const d = new Date(publishedAt); return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}`; } catch { return ''; }
  })();

  return (
    <MainLayout>
      <Box>
        <InstagramGeneratorButton
          article={data as any}
          match={matchSnapshot}
          targetUrl={typeof window !== 'undefined' ? window.location.href : undefined}
          placement="fixed"
          size="md"
          align="left"
        />
        <Helmet>
          <title>{title}</title>
          <meta name="description" content={description} />
          <meta property="og:type" content="article" />
          <meta property="og:title" content={title} />
          <meta property="og:description" content={description} />
          <meta property="og:image" content={ogImage} />
          <meta name="twitter:card" content="summary_large_image" />
          <meta name="twitter:title" content={title} />
          <meta name="twitter:description" content={description} />
          <meta name="twitter:image" content={ogImage} />
          {canonical && <link rel="canonical" href={canonical} />}
          <script type="application/ld+json">
            {JSON.stringify({
              '@context': 'https://schema.org',
              '@type': 'NewsArticle',
              headline: title,
              image: [ogImage],
              datePublished: (data as any).published_at || data.created_at,
              dateModified: (data as any).updated_at || (data as any).published_at || data.created_at,
              author: data.author ? {
                '@type': 'Person',
                name: `${data.author.first_name || ''} ${data.author.last_name || ''}`.trim() || data.author.email
              } : undefined,
              description,
              mainEntityOfPage: canonical || undefined,
            })}
          </script>
          <script type="application/ld+json">
            {JSON.stringify({
              '@context': 'https://schema.org',
              '@type': 'BreadcrumbList',
              itemListElement: [
                {
                  '@type': 'ListItem',
                  position: 1,
                  name: 'Domů',
                  item: (typeof window !== 'undefined' ? window.location.origin : '') + '/'
                },
                {
                  '@type': 'ListItem',
                  position: 2,
                  name: 'Blog',
                  item: (typeof window !== 'undefined' ? window.location.origin : '') + '/blog'
                },
                {
                  '@type': 'ListItem',
                  position: 3,
                  name: title,
                  item: canonical || undefined
                }
              ]
            })}
          </script>
        </Helmet>
        <Box bg="transparent" color="inherit" py={{ base: 6, md: 8 }} mb={2}>
          <Container maxW="7xl">
            <Heading as="h1" size={{ base: 'xl', md: '2xl' }} mb={2}>{data.title}</Heading>
            <HStack spacing={2} rowGap={2} wrap="wrap" fontSize="sm" color={textMuted}>
              {((data as any).read_time || (data as any).estimated_read_minutes) ? (
                <HStack spacing={1}>
                  <Clock size={16} />
                  <Text>{(data as any).read_time || (data as any).estimated_read_minutes} min čtení</Text>
                </HStack>
              ) : null}
              {publishedAt && (
                <Tag as={RouterLink} to={`/news?month=${monthParam}`} size="sm" variant="subtle">{new Date(publishedAt).toLocaleDateString('cs-CZ')}</Tag>
              )}
              {(data as any)?.category?.id && (
                <Tag as={RouterLink} to={`/news?category_id=${(data as any).category.id}`} size="sm" variant="subtle">{(data as any).category.name || 'Kategorie'}</Tag>
              )}
              {(matchLinkQuery.data as any)?.external_match_id && (
                <Tag as={RouterLink} to={`/news?match_id=${(matchLinkQuery.data as any).external_match_id}`} size="sm" variant="subtle">Zápas</Tag>
              )}
              {(data as any).view_count ? (
                <HStack spacing={1} ml={{ base: 0, md: 2 }}>
                  <Eye size={16} />
                  <Text>{(data as any).view_count} zobrazení</Text>
                </HStack>
              ) : null}
            </HStack>
          </Container>
        </Box>
        <Container maxW="7xl">
          <SimpleGrid columns={{ base: 1, lg: 12 }} spacing={6}>
            <Box gridColumn={{ base: '1 / -1', lg: 'span 8' }}>
              <Stack spacing={6}>
                {/* Featured Image - smaller with subtle overlay */}
                {data.image_url && (
                  <Box borderRadius="xl" overflow="hidden">
                    <Image src={assetUrl(data.image_url) || data.image_url} alt={data.title} w="100%" h="auto" objectFit="contain" />
                  </Box>
                )}

                {(data as any)?.id ? (
                  <CommentsSection targetType="article" targetId={String((data as any).id)} />
                ) : null}
                {/* Match Section - Card with logos, score/countdown, venue/date */}
                {(matchLinkQuery.data as any)?.external_match_id && (
                  <Box position="relative" borderWidth="1px" borderRadius="lg" p={{ base: 4, md: 5 }} bg={cardBg} overflow="hidden">
                    {/* Edge fades */}
                    <Box position="absolute" top={0} left={0} bottom={0} w={{ base: '6px', md: '12px' }} bgGradient={`linear(to-r, var(--club-primary, #0b5cff), transparent)`} pointerEvents="none" />
                    {opponentColor && (
                      <Box position="absolute" top={0} right={0} bottom={0} w={{ base: '6px', md: '12px' }} bgGradient={`linear(to-l, ${opponentColor}, transparent)`} pointerEvents="none" />
                    )}
                    <Heading as="h3" size="md" mb={3}>Zápas k článku</Heading>
                    {facrMatchQuery.isLoading ? (
                      <Text color={textMuted}>Načítám údaje o zápasu…</Text>
                    ) : facrMatchQuery.data ? (
                      <>
                        <HStack spacing={2} wrap="wrap" mb={3}>
                          {facrMatchQuery.data.competitionName && (
                            <Badge colorScheme="blue">{String(facrMatchQuery.data.competitionName)}</Badge>
                          )}
                          <Badge>{String((facrMatchQuery.data as any).date_time || (facrMatchQuery.data as any).date || '')}</Badge>
                        </HStack>
                        <Flex align="center" justify="space-between" gap={4}>
                          <VStack flex={1} spacing={2} minW="0">
                            <TeamLogo size="custom" style={{ width: 64, height: 64 }} teamId={String((facrMatchQuery.data as any).home_team_id || (facrMatchQuery.data as any).home_id || '')} teamName={String((facrMatchQuery.data as any).home || (facrMatchQuery.data as any).home_team || '')} />
                            <Text fontWeight="600" noOfLines={2} textAlign="center">{String((facrMatchQuery.data as any).home || (facrMatchQuery.data as any).home_team || '')}</Text>
                          </VStack>
                          <VStack minW={{ base: '100px', md: '140px' }}>
                            {(() => {
                              const dRaw = String((facrMatchQuery.data as any).date_time || (facrMatchQuery.data as any).date || '');
                              const d = new Date(dRaw);
                              const hasScore = ((facrMatchQuery.data as any).result_home != null && (facrMatchQuery.data as any).result_away != null) || Boolean((facrMatchQuery.data as any).score && (facrMatchQuery.data as any).score !== 'vs');
                              if (hasScore) {
                                const score = String((facrMatchQuery.data as any).score || `${(facrMatchQuery.data as any).result_home}:${(facrMatchQuery.data as any).result_away}`);
                                return (<Heading size="2xl">{score}</Heading>);
                              }
                              const now = Date.now();
                              const ms = d.getTime() - now;
                              const days = Math.max(0, Math.floor(ms / (1000*60*60*24)));
                              const hours = Math.max(0, Math.floor((ms % (1000*60*60*24))/(1000*60*60)));
                              const mins = Math.max(0, Math.floor((ms % (1000*60*60))/(1000*60)));
                              return (<Text fontSize="lg" fontWeight="700">Za {days} d {hours} h {mins} min</Text>);
                            })()}
                            {(() => {
                              const dRaw = String((facrMatchQuery.data as any).date_time || (facrMatchQuery.data as any).date || '');
                              const d = new Date(dRaw);
                              return <Text fontSize="sm" color={textMuted}>{d.toLocaleDateString('cs-CZ')} {d.toLocaleTimeString('cs-CZ', { hour: '2-digit', minute: '2-digit' })}</Text>;
                            })()}
                            {(facrMatchQuery.data as any).venue && <Text fontSize="sm" color={textMuted}>{String((facrMatchQuery.data as any).venue)}</Text>}
                          </VStack>
                          <VStack flex={1} spacing={2} minW="0">
                            <TeamLogo size="custom" style={{ width: 64, height: 64 }} teamId={String((facrMatchQuery.data as any).away_team_id || (facrMatchQuery.data as any).away_id || '')} teamName={String((facrMatchQuery.data as any).away || (facrMatchQuery.data as any).away_team || '')} />
                            <Text fontWeight="600" noOfLines={2} textAlign="center">{String((facrMatchQuery.data as any).away || (facrMatchQuery.data as any).away_team || '')}</Text>
                          </VStack>
                        </Flex>
                        {(facrMatchQuery.data as any).report_url && (
                          <Box mt={3}>
                            <Link href={String((facrMatchQuery.data as any).report_url)} isExternal color="blue.600">Protokol zápasu (fotbal.cz)</Link>
                          </Box>
                        )}
                      </>
                    ) : (
                      <Text color={textMuted}>Propojeno s FACR ID: {(matchLinkQuery.data as any)?.external_match_id}</Text>
                    )}
                  </Box>
                )}

                {/* Article Content - Main Section with editor-like lists */}
                <Box
                  className="article-content"
                  bg={useColorModeValue('white','gray.900')}
                  borderRadius="lg"
                  p={{ base: 4, md: 6 }}
                  ref={contentRef}
                  sx={{
                    'ul, ol': { pl: 6, listStylePosition: 'outside' },
                    'ul': { listStyleType: 'disc' },
                    'ol': { listStyleType: 'decimal' },
                    'li': { mb: 2 },
                    'img': {
                      display: 'block',
                      maxWidth: '100%',
                      height: 'auto',
                      mt: 2,
                      border: 'none !important',
                      outline: 'none !important',
                      boxShadow: 'none !important',
                      cursor: 'default !important',
                    },
                  }}
                  dangerouslySetInnerHTML={{ __html: safeContentHTML }}
                />

                {/* YouTube Video Section - simplified */}
                {(data as any)?.youtube_video_id && (
                  <Box>
                    <AspectRatio ratio={16 / 9}>
                      <Box
                        as="iframe"
                        src={`https://www.youtube-nocookie.com/embed/${(data as any).youtube_video_id}`}
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                        allowFullScreen
                        title={(data as any).youtube_video_title || 'YouTube video'}
                        onLoad={() => umamiTrackEvent('Video Widget Shown', { id: (data as any).youtube_video_id, title: (data as any).youtube_video_title })}
                        onClick={() => umamiTrackVideoPlay((data as any).youtube_video_id, (data as any).youtube_video_title)}
                      />
                    </AspectRatio>
                    {(data as any).youtube_video_title ? (
                      <Text mt={2} color={videoTitleColor}>{(data as any).youtube_video_title}</Text>
                    ) : null}
                  </Box>
                )}

                {/* Gallery Section - Mosaic of 5 images with grayscale + hover color */}
                {((data as any)?.gallery_album_id || (data as any)?.gallery_album_url) && (
                  <Box borderWidth="1px" borderRadius="lg" p={{ base: 3, md: 4 }} bg={galleryBg} borderColor={galleryBorder}>
                    <Box mb={3}>
                      <HStack justify="space-between" align="center" mb={2}>
                        <Heading as="h3" size="md">Fotogalerie k článku</Heading>
                        <Button
                          as={RouterLink}
                          to={(data as any).gallery_album_id ? `/galerie/album/${(data as any).gallery_album_id}` : '#'}
                          size="sm"
                          colorScheme="blue"
                          variant="outline"
                          rightIcon={<ArrowRight size={16} />}
                          onClick={() => umamiTrackEvent('Gallery Link Click', { album_id: (data as any).gallery_album_id })}
                        >
                          Zobrazit galerii
                        </Button>
                      </HStack>
                      {Array.isArray(galleryAlbumQuery.data?.photos) && (galleryAlbumQuery.data?.photos?.length || 0) > 0 && (() => {
                        const photos = (galleryAlbumQuery.data?.photos ?? []).slice(0, 5);
                        if (photos.length < 5) {
                          return (
                            <SimpleGrid columns={{ base: 2, sm: 3 }} spacing={2} role="group">
                              {photos.map((p: any) => (
                                <Image key={p.id} src={p.image_1500} alt={String(p.id)} w="100%" h="140px" objectFit="cover" filter="grayscale(100%) blur(1px)" transition="filter 0.2s ease" _hover={{ filter: 'grayscale(0%) blur(0)' }} _groupHover={{ filter: 'grayscale(0%) blur(0)' }} />
                              ))}
                            </SimpleGrid>
                          );
                        }
                        return (
                          <Box position="relative" role="group" sx={{
                            display: 'grid',
                            gridTemplateColumns: '1fr 1.2fr 1fr',
                            gridTemplateRows: 'repeat(2, 140px)',
                            gap: '8px'
                          }}>
                            <Image src={photos[0].image_1500} alt={String(photos[0].id)} sx={{ gridColumn: 1, gridRow: 1 }} objectFit="cover" w="100%" h="100%" filter="grayscale(100%) blur(1px)" transition="filter 0.2s ease" _hover={{ filter: 'grayscale(0%) blur(0)' }} _groupHover={{ filter: 'grayscale(0%) blur(0)' }} borderRadius="md" />
                            <Image src={photos[1].image_1500} alt={String(photos[1].id)} sx={{ gridColumn: 1, gridRow: 2 }} objectFit="cover" w="100%" h="100%" filter="grayscale(100%) blur(1px)" transition="filter 0.2s ease" _hover={{ filter: 'grayscale(0%) blur(0)' }} _groupHover={{ filter: 'grayscale(0%) blur(0)' }} borderRadius="md" />
                            <Image src={photos[2].image_1500} alt={String(photos[2].id)} sx={{ gridColumn: 2, gridRow: '1 / span 2' }} objectFit="cover" w="100%" h="100%" filter="grayscale(100%) blur(1px)" transition="filter 0.2s ease" _hover={{ filter: 'grayscale(0%) blur(0)' }} _groupHover={{ filter: 'grayscale(0%) blur(0)' }} borderRadius="md" />
                            <Image src={photos[3].image_1500} alt={String(photos[3].id)} sx={{ gridColumn: 3, gridRow: 1 }} objectFit="cover" w="100%" h="100%" filter="grayscale(100%) blur(1px)" transition="filter 0.2s ease" _hover={{ filter: 'grayscale(0%) blur(0)' }} _groupHover={{ filter: 'grayscale(0%) blur(0)' }} borderRadius="md" />
                            <Image src={photos[4].image_1500} alt={String(photos[4].id)} sx={{ gridColumn: 3, gridRow: 2 }} objectFit="cover" w="100%" h="100%" filter="grayscale(100%) blur(1px)" transition="filter 0.2s ease" _hover={{ filter: 'grayscale(0%) blur(0)' }} _groupHover={{ filter: 'grayscale(0%) blur(0)' }} borderRadius="md" />
                            <Button as={RouterLink} to={(data as any).gallery_album_id ? `/galerie/album/${(data as any).gallery_album_id}` : '#'} size="sm" colorScheme="blue" position="absolute" top="50%" left="50%" transform="translate(-50%, -50%)" onClick={() => umamiTrackEvent('Gallery Link Click', { album_id: (data as any).gallery_album_id })}>Zobrazit galerii</Button>
                          </Box>
                        );
                      })()}
                    </Box>
                  </Box>
                )}
              </Stack>
            </Box>
            <VStack align="stretch" spacing={6} gridColumn={{ base: '1 / -1', lg: 'span 4' }}>
              {relatedArticlesQuery.isLoading ? null : (() => {
                const list = ((relatedArticlesQuery.data as any)?.data || [])
                  .filter((a: any) => a?.id !== (data as any)?.id)
                  .slice(0, 4);
                if (!list.length) return null;
                return (
                  <Widget title="Podobné články">
                    <VStack spacing={3} align="stretch">
                      {list.map((a: any) => {
                        const link = a.slug ? `/news/${a.slug}` : `/articles/${a.id}`;
                        return (
                          <HStack key={a.id} align="flex-start" spacing={3} as={RouterLink} to={link} _hover={{ textDecoration: 'none' }}>
                            <Image src={assetUrl(a.image_url) || '/stadium-placeholder.jpg'} alt={a.title} boxSize="64px" objectFit="cover" borderRadius="md" />
                            <VStack align="start" spacing={1} flex={1} minW={0}>
                              <Text fontWeight="600" noOfLines={2}>{a.title}</Text>
                              {a.published_at && (
                                <Text fontSize="sm" color={textMuted}>{new Date(a.published_at).toLocaleDateString('cs-CZ')}</Text>
                              )}
                            </VStack>
                          </HStack>
                        );
                      })}
                    </VStack>
                  </Widget>
                );
              })()}

              <MatchesWidget
                categoryName={(data as any)?.category?.name}
                hideEmpty
                onMatchClick={(m: any) => {
                  setSelectedMatch({ ...m, competition: (m as any).competitionName, competitionName: (m as any).competitionName });
                  setIsMatchModalOpen(true);
                }}
              />

              {(() => {
                const all = Array.isArray(upcomingEventsQuery.data) ? (upcomingEventsQuery.data as any[]) : [];
                const cat = (data as any)?.category?.name;
                const items = cat
                  ? all.filter((ev: any) => !ev?.category_name || String(ev.category_name) === String(cat)).slice(0, 3)
                  : all.slice(0, 3);
                if (!items.length) return null;
                return (
                  <Widget title="Nejbližší aktivity">
                    <VStack spacing={3} align="stretch">
                      {items.map((ev: any) => (
                        <HStack key={ev.id} as={RouterLink} to={`/aktivita/${ev.id}`} _hover={{ textDecoration: 'none' }} align="flex-start" spacing={3}>
                          <Box flex={1} minW={0}>
                            <Text fontWeight="600" noOfLines={2}>{ev.title}</Text>
                            <Text fontSize="sm" color={textMuted}>
                              {(() => { try { const d = new Date(ev.start_time); return d.toLocaleDateString('cs-CZ') + (ev.location ? ` • ${ev.location}` : ''); } catch { return ev.start_time; } })()}
                            </Text>
                          </Box>
                        </HStack>
                      ))}
                    </VStack>
                  </Widget>
                );
              })()}
            </VStack>
          </SimpleGrid>
        </Container>
      </Box>

    {/* Attachments - bottom above CTA */}
    {Array.isArray((data as any)?.attachments) && (data as any).attachments.length > 0 && (
      <Container maxW="7xl" mt={4}>
        <Box borderWidth="1px" borderRadius="lg" p={{ base: 3, md: 4 }} bg={attachmentsBg}>
          <Heading as="h3" size="md" mb={2}>Přílohy</Heading>
          <Stack spacing={2}>
            {(data as any).attachments.map((f: any, idx: number) => (
              <HStack key={idx} justify="space-between">
                <Text noOfLines={1}>{f.name || f.url}</Text>
                <FilePreview url={assetUrl(f.url) || f.url} name={f.name || ''} mimeType={f.mime_type || ''} size={f.size} />
              </HStack>
            ))}
          </Stack>
        </Box>
      </Container>
    )}
    {/* Polls (Ankety) above CTA */}
    {data?.id && <EmbeddedPoll articleId={(data as any).id} maxPolls={3} />}
    {/* Newsletter CTA */}
    <NewsletterCTA />
    <MatchModal isOpen={isMatchModalOpen} onClose={() => setIsMatchModalOpen(false)} match={selectedMatch} />
  </MainLayout>
);
};

export default ArticleDetailPage;