"use client";

import React from "react";
import { useTranslation } from "@/lib/i18n/context";
import { blogPosts } from "@/lib/data/blog";
import { notFound } from "next/navigation";
import Image from "next/image";
import Link from "next/link";
import { ArrowLeft, ArrowRight, Calendar, User, Tag } from "lucide-react";

export default function BlogPost({ params }: { params: Promise<{ slug: string }> }) {
  const { t, locale, dir } = useTranslation();
  const { slug } = React.use(params);
  
  const post = blogPosts.find((p) => p.slug === slug);

  if (!post) {
    notFound();
  }

  const title = post.title[locale as keyof typeof post.title];
  const content = post.content[locale as keyof typeof post.content];

  return (
    <div className="pt-20 bg-white" dir={dir}>
      {/* Hero Section */}
      <div className="relative h-[50vh] md:h-[60vh] min-h-[400px] w-full bg-dark-text/90">
        <Image
          src={post.image}
          alt={title}
          fill
          className="object-cover opacity-60"
          priority
        />
        <div className="absolute inset-0 bg-gradient-to-t from-dark-text/90 via-transparent to-transparent" />
        
        <div className="absolute bottom-0 left-0 right-0 p-6 md:p-12 lg:p-20 text-white max-w-5xl mx-auto">
          <div className="flex items-center gap-2 mb-4">
            <span className="px-3 py-1 bg-primary text-white text-xs font-bold rounded-full">
              {post.category}
            </span>
          </div>
          <h1 className="text-3xl md:text-5xl lg:text-6xl font-black leading-tight drop-shadow-md mb-6">
            {title}
          </h1>
          <div className="flex items-center gap-6 text-sm text-white/80 font-medium">
            <div className="flex items-center gap-2">
              <User size={16} className="text-primary" />
              <span>{post.author}</span>
            </div>
            <div className="flex items-center gap-2">
              <Calendar size={16} className="text-primary" />
              <span>{post.date}</span>
            </div>
          </div>
        </div>
      </div>

      {/* Content Section */}
      <article className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="mb-10">
          <Link
            href="/blog"
            className="inline-flex items-center gap-2 text-primary font-bold hover:text-primary-dark transition-colors"
          >
            {dir === "rtl" ? <ArrowRight size={20} /> : <ArrowLeft size={20} />}
            {dir === "rtl" ? "العودة إلى المدونة" : "Back to Blog"}
          </Link>
        </div>

        {/* The rich text content */}
        <div 
          className="blog-content prose prose-lg md:prose-xl text-dark-text/80 max-w-none leading-relaxed"
          dangerouslySetInnerHTML={{ __html: content }}
        />

        {/* Tags / Share (mockup) */}
        <div className="mt-16 pt-8 border-t border-light-gray flex items-center gap-4">
          <Tag size={20} className="text-primary" />
          <span className="font-bold text-dark-text">{dir === "rtl" ? "الكلمات الدالة:" : "Tags:"}</span>
          <div className="flex gap-2">
            <span className="px-3 py-1 bg-light-gray rounded-full text-xs font-semibold text-dark-text/60">UNIPAM</span>
            <span className="px-3 py-1 bg-light-gray rounded-full text-xs font-semibold text-dark-text/60">{post.category}</span>
          </div>
        </div>
      </article>
    </div>
  );
}