﻿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, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { Button } from '@/components/ui/button';

interface Props {
  post: {
    id: number;
    title: string;
    excerpt?: string;
    content: string;
    content_html: string;
    featured_image?: string;
    published_at: string;
    author?: { name: string };
    slug: string;
  };
}

const BlogShow: React.FC<Props> = ({ post }) => {
  const { localizedPath } = useLocalizedRoutes();
  const { t } = useTranslation('blog_show');

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

      {/* Hero Section */}
      <section className="bg-gradient-to-r from-[#FFB6C1] via-[#FFD700] to-[#87CEEB] py-20 px-4">
        <div className="container mx-auto max-w-4xl">
          <Card className="bg-white/10 backdrop-blur-sm border-white/20 text-white shadow-xl">
            <CardContent className="p-8 text-center">
              <h1 className="text-4xl md:text-5xl font-bold mb-6 leading-tight">{post.title}</h1>

              <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-8 text-lg">
                <Badge variant="secondary" className="bg-white/20 text-white border-white/30">
                  {t('by_author')} {post.author?.name || t('team')}
                </Badge>
                <Separator orientation="vertical" className="hidden sm:block h-6 bg-white/30" />
                <Badge variant="secondary" className="bg-white/20 text-white border-white/30">
                  {t('published_on')} {new Date(post.published_at).toLocaleDateString('de-DE', {
                    day: 'numeric',
                    month: 'long',
                    year: 'numeric'
                  })}
                </Badge>
              </div>

              {post.featured_image && (
                <div className="mt-8">
                  <img
                    src={post.featured_image}
                    alt={post.title}
                    className="mx-auto rounded-lg shadow-lg max-w-2xl w-full object-cover"
                  />
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Post Content */}
      <section className="py-20 px-4 bg-white">
        <div className="container mx-auto max-w-4xl">
          <Card className="shadow-sm">
            <CardContent className="p-8 md:p-12">
              <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-blue-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-blue-500 prose-blockquote:pl-6 prose-blockquote:italic
                          prose-ul:text-slate-700 prose-ol:text-slate-700
                          prose-li:text-slate-700"
                dangerouslySetInnerHTML={{ __html: post.content_html }}
              />
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Back to Blog */}
      <section className="py-10 px-4 bg-gray-50">
        <div className="container mx-auto max-w-4xl">
          <Card className="shadow-sm">
            <CardContent className="p-8 text-center">
              <Separator className="mb-6" />
              <Button
                asChild
                size="lg"
                className="bg-[#FFB6C1] hover:bg-[#FF69B4] text-white px-8 py-3 rounded-full font-semibold transition-colors"
              >
                <Link href={localizedPath('/blog')}>
                  {t('back_to_blog')}
                </Link>
              </Button>
            </CardContent>
          </Card>
        </div>
      </section>
    </MarketingLayout>
  );
};

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

export default BlogShow;
