import React from 'react';
import { Head, Link } from '@inertiajs/react';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
import { useTranslation } from 'react-i18next';
import MarketingLayout from '@/layouts/mainWebsite';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { Button } from '@/components/ui/button';

interface AdjacentPost {
  slug: string;
  title: string;
  excerpt?: string;
  excerpt_html?: string;
}

interface HeadingItem {
  text: string;
  slug: string;
  level: number;
}

interface Props {
  post: {
    id: number;
    title: string;
    excerpt?: string;
    excerpt_html?: string;
    content: string;
    content_html: string;
    headings?: HeadingItem[];
    featured_image?: string;
    published_at: string;
    author?: { name: string };
    slug: string;
    url?: string;
    previous_post?: AdjacentPost | null;
    next_post?: AdjacentPost | null;
  };
}

const MarkdownPreview: React.FC<{ html?: string; fallback?: string; className?: string }> = ({ html, fallback, className }) => {
  if (html && html.trim().length > 0) {
    return <div className={className} dangerouslySetInnerHTML={{ __html: html }} />;
  }

  if (!fallback) {
    return null;
  }

  return <p className={className}>{fallback}</p>;
};

const BlogShow: React.FC<Props> = ({ post }) => {
  const { localizedPath } = useLocalizedRoutes();
  const { t, i18n } = useTranslation('blog_show');
  const [copied, setCopied] = React.useState(false);
  const locale = i18n.language || 'de';
  const dateLocale = locale === 'en' ? 'en-US' : 'de-DE';

  const formattedDate = React.useMemo(() => {
    try {
      return new Date(post.published_at).toLocaleDateString(dateLocale, {
        day: 'numeric',
        month: 'long',
        year: 'numeric'
      });
    } catch (error) {
      console.warn('[Marketing BlogShow] Failed to format date', error);
      return post.published_at;
    }
  }, [post.published_at, dateLocale]);

  const handleCopyLink = React.useCallback(() => {
    if (typeof navigator === 'undefined' || !navigator.clipboard) {
      return;
    }

    navigator.clipboard.writeText(post.url || window.location.href).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }).catch((error) => {
      console.warn('[Marketing BlogShow] Failed to copy link', error);
    });
  }, [post.url]);

  const shareUrl = post.url || (typeof window !== 'undefined' ? window.location.href : '');
  const encodedShareUrl = encodeURIComponent(shareUrl);
  const encodedTitle = encodeURIComponent(post.title);

  const shareLinks = [
    {
      key: 'whatsapp',
      label: t('share_whatsapp'),
      href: `https://wa.me/?text=${encodedTitle}%20${encodedShareUrl}`
    },
    {
      key: 'linkedin',
      label: t('share_linkedin'),
      href: `https://www.linkedin.com/sharing/share-offsite/?url=${encodedShareUrl}`
    },
    {
      key: 'email',
      label: t('share_email'),
      href: `mailto:?subject=${encodedTitle}&body=${encodedShareUrl}`
    }
  ];

  const canUseNativeShare = typeof navigator !== 'undefined' && typeof navigator.share === 'function';

  const buildArticleHref = React.useCallback((slug?: string | null) => {
    if (!slug) {
      return '#';
    }

    return localizedPath(`/blog/${encodeURIComponent(slug)}`);
  }, [localizedPath]);

  return (
    <MarketingLayout title={`${post.title} ${t('title_suffix')}`}>
      <Head title={`${post.title} ${t('title_suffix')}`} />

      <section className="bg-gradient-to-br from-pink-50 via-white to-amber-50 px-4 py-8 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-10">
        <div className="container mx-auto max-w-5xl space-y-5">
          <div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400">
            <nav className="flex flex-wrap items-center gap-2">
              <Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
                {t('breadcrumb_home')}
              </Link>
              <span>/</span>
              <Link href={localizedPath('/blog')} className="hover:text-gray-900 dark:hover:text-gray-100">
                {t('breadcrumb_blog')}
              </Link>
              <span>/</span>
              <span className="text-gray-700 dark:text-gray-100">{post.title}</span>
            </nav>
            <Link href={localizedPath('/blog')} className="text-pink-600 hover:text-pink-700">
              {t('back_to_blog')}
            </Link>
          </div>

          <Card className="rounded-[32px] border border-white/60 bg-white/80 text-gray-900 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80 dark:text-gray-50">
            <CardContent className="space-y-6 p-6 md:p-8">
              <div className="flex flex-col gap-6 md:grid md:grid-cols-[minmax(0,1fr)_240px] md:items-center md:gap-8">
                <div className="space-y-4 text-left">
                  <Badge variant="outline" className="border-pink-200 bg-white/70 text-pink-600 dark:border-pink-500/60 dark:bg-gray-900/80 dark:text-pink-200">
                    Fotospiel Stories
                  </Badge>
                  <h1 className="text-3xl font-bold leading-tight text-gray-900 dark:text-gray-50 md:text-4xl">{post.title}</h1>
                  <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-gray-600 dark:text-gray-300">
                    <span>{t('by_author')} {post.author?.name || t('team')}</span>
                    <span className="hidden text-gray-400 sm:inline">•</span>
                    <span>{t('published_on')} {formattedDate}</span>
                  </div>
                  <MarkdownPreview
                    html={post.excerpt_html}
                    fallback={post.excerpt}
                    className="text-base leading-relaxed text-gray-700 dark:text-gray-100"
                  />
                </div>
                <div className="relative">
                  {post.featured_image ? (
                    <div className="rounded-3xl border border-white/80 bg-white/60 p-2 shadow-2xl dark:border-gray-800/80 dark:bg-gray-900/80">
                      <img
                        src={post.featured_image}
                        alt={post.title}
                        className="h-full w-full rounded-2xl object-cover"
                      />
                    </div>
                  ) : (
                    <div className="rounded-3xl border border-dashed border-pink-200 bg-gradient-to-br from-pink-100 via-white to-amber-100 p-8 text-center text-lg font-semibold text-pink-700 shadow-lg dark:border-pink-500/40 dark:from-pink-900/30 dark:via-gray-900 dark:to-gray-900">
                      Fotospiel Stories
                    </div>
                  )}
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      <section className="bg-white px-4 py-12 dark:bg-gray-950">
        <div className="container mx-auto max-w-6xl gap-10 lg:grid lg:grid-cols-[minmax(0,1fr)_320px]">
          <article className="rounded-[32px] border border-gray-100 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
            <div
              className="prose prose-lg prose-slate max-w-none
                        prose-headings:text-slate-900 prose-headings:font-semibold
                        prose-p:text-slate-700 prose-p:leading-relaxed
                        prose-a:text-pink-600 prose-a:no-underline hover:prose-a:underline
                        prose-strong:text-slate-900 prose-strong:font-semibold
                        prose-code:text-slate-900 prose-code:bg-slate-100 prose-code:px-1 prose-code:py-0.5 prose-code:rounded
                        prose-pre:bg-slate-900 prose-pre:text-slate-100
                        prose-blockquote:border-l-4 prose-blockquote:border-pink-500 prose-blockquote:pl-6 prose-blockquote:italic
                        prose-ul:text-slate-700 prose-ol:text-slate-700
                        prose-li:text-slate-700
                        dark:prose-invert dark:prose-headings:text-gray-50 dark:prose-p:text-gray-100
                        dark:prose-strong:text-gray-50 dark:prose-a:text-pink-300 dark:hover:prose-a:text-pink-200
                        dark:prose-code:bg-gray-800 dark:prose-code:text-gray-100 dark:prose-pre:bg-gray-900 dark:prose-pre:text-gray-100
                        dark:prose-li:text-gray-100 dark:prose-blockquote:border-pink-400"
              dangerouslySetInnerHTML={{ __html: post.content_html }}
            />
          </article>

          <aside className="mt-10 space-y-6 lg:mt-0 lg:sticky lg:top-24">
            <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
              <CardContent className="space-y-3 p-6">
                <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                  {t('summary_title')}
                </p>
                <MarkdownPreview
                  html={post.excerpt_html}
                  fallback={post.excerpt}
                  className="text-base leading-relaxed text-gray-700 dark:text-gray-100"
                />
              </CardContent>
            </Card>

            <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
              <CardContent className="space-y-4 p-6">
                <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                  {t('toc_title')}
                </p>
                {post.headings && post.headings.length > 0 ? (
                  <ul className="space-y-3 text-sm text-gray-700 dark:text-gray-100">
                    {post.headings.map((heading) => (
                      <li key={heading.slug} className="border-l-2 border-pink-100 pl-3 dark:border-pink-500/40">
                        <a href={`#${heading.slug}`} className="hover:text-pink-600">
                          {heading.text}
                        </a>
                      </li>
                    ))}
                  </ul>
                ) : (
                  <p className="text-sm text-gray-500 dark:text-gray-400">{t('toc_empty')}</p>
                )}
              </CardContent>
            </Card>

            <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
              <CardContent className="space-y-3 p-6">
                <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                  {t('sidebar_author_title')}
                </p>
                <p className="text-lg font-semibold text-gray-900 dark:text-gray-50">{post.author?.name || t('team')}</p>
                <p className="text-sm text-gray-600 dark:text-gray-300">{t('sidebar_author_description')}</p>
              </CardContent>
            </Card>

            <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
              <CardContent className="space-y-4 p-6">
                <div>
                  <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                    {t('share_title')}
                  </p>
                  <p className="text-sm text-gray-500 dark:text-gray-400">{t('share_hint')}</p>
                </div>
                <div className="flex flex-wrap gap-3">
                  <Button variant="outline" size="sm" onClick={handleCopyLink} className="border-pink-200 text-pink-600 dark:border-pink-500/50 dark:text-pink-200">
                    {copied ? t('share_copied') : t('share_copy')}
                  </Button>
                  {canUseNativeShare && (
                    <Button
                      variant="ghost"
                      size="sm"
                      className="text-gray-700 hover:text-pink-600 dark:text-gray-200"
                      onClick={() => navigator.share?.({ title: post.title, url: shareUrl })}
                    >
                      {t('share_native')}
                    </Button>
                  )}
                </div>
                <Separator className="my-2" />
                <div className="flex flex-col gap-2">
                  {shareLinks.map((link) => (
                    <Button key={link.key} variant="outline" size="sm" asChild className="justify-start border-gray-200 text-gray-700 hover:border-pink-200 hover:text-pink-600 dark:border-gray-700 dark:text-gray-100">
                      <a href={link.href} target="_blank" rel="noreferrer">
                        {link.label}
                      </a>
                    </Button>
                  ))}
                </div>
              </CardContent>
            </Card>
          </aside>
        </div>
      </section>

      {(post.previous_post || post.next_post) && (
        <section className="bg-gradient-to-br from-pink-50 via-white to-amber-50 px-4 py-12 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950">
          <div className="container mx-auto max-w-6xl">
            <div className="grid gap-6 md:grid-cols-2">
              {post.previous_post && (
                <Card className="border-none bg-gradient-to-br from-pink-500 to-pink-400 text-white shadow-lg">
                  <CardContent className="space-y-4 p-6">
                    <p className="text-sm font-semibold uppercase tracking-wide text-white/80">
                      {t('previous_post')}
                    </p>
                    <h3 className="text-2xl font-semibold">{post.previous_post.title}</h3>
                    <MarkdownPreview
                      html={post.previous_post.excerpt_html}
                      fallback={post.previous_post.excerpt}
                      className="text-white/90"
                    />
                    <Button asChild variant="secondary" className="bg-white/20 text-white hover:bg-white/30">
                      <Link href={buildArticleHref(post.previous_post.slug)}>
                        {t('read_story')}
                      </Link>
                    </Button>
                  </CardContent>
                </Card>
              )}

              {post.next_post && (
                <Card className="border-none bg-gradient-to-br from-amber-400 to-pink-400 text-gray-900 shadow-lg">
                  <CardContent className="space-y-4 p-6">
                    <p className="text-sm font-semibold uppercase tracking-wide text-gray-800/80">
                      {t('next_post')}
                    </p>
                    <h3 className="text-2xl font-semibold">{post.next_post.title}</h3>
                    <MarkdownPreview
                      html={post.next_post.excerpt_html}
                      fallback={post.next_post.excerpt}
                      className="text-gray-900/80"
                    />
                    <Button asChild className="bg-gray-900 text-white hover:bg-gray-800">
                      <Link href={buildArticleHref(post.next_post.slug)}>
                        {t('read_story')}
                      </Link>
                    </Button>
                  </CardContent>
                </Card>
              )}
            </div>
          </div>
        </section>
      )}
    </MarketingLayout>
  );
};

BlogShow.layout = (page: React.ReactNode) => page;

export default BlogShow;
