/**
 * PostHero - Hero section for individual blog post pages
 *
 * Displays the post title, author, date, tags, and cover image
 * with an overlay gradient for readability.
 */

import Link from "next/link";
import Image from "next/image";
import { BLOG_COLORS, formatBlogDateLong } from "@/lib/blog.config";
import BlogPlaceholder from "./BlogPlaceholder";

export interface PostHeroProps {
  /** Post title */
  title: string;
  /** Post author name */
  author: string;
  /** Post publication date (ISO string) */
  date: string;
  /** Post tags */
  tags: string[];
  /** Optional cover image URL */
  coverImage?: string;
  /** Optional reading time */
  readingTime?: string;
  /** Language for localization */
  lang: "ar" | "en";
  /** Translations for display text */
  translations: {
    home: string;
    blog: string;
    writtenBy: string;
  };
}

export default function PostHero({
  title,
  author,
  date,
  tags,
  coverImage,
  readingTime,
  lang,
  translations,
}: PostHeroProps) {
  const formattedDate = formatBlogDateLong(date, lang);
  const hasCoverImage = !!coverImage;

  return (
    <section className="relative">
      <div
        className={`relative w-full overflow-hidden ${
          hasCoverImage
            ? "h-[50vh] min-h-[400px] max-h-[600px]"
            : "h-[40vh] min-h-[350px] max-h-[500px]"
        }`}
      >
        {/* Background */}
        {hasCoverImage ? (
          <Image
            src={coverImage}
            alt={title}
            fill
            className="object-cover"
            priority
            unoptimized={coverImage.endsWith(".svg")}
          />
        ) : (
          <BlogPlaceholder title={title} tag={tags?.[0]} size="lg" />
        )}

        {/* Gradient overlay */}
        <div className="absolute inset-0 bg-gradient-to-t from-[#1E293B] via-[#1E293B]/60 to-transparent" />

        {/* Content overlay */}
        <div className="absolute inset-0 flex items-end">
          <div
            className={`mx-auto w-full max-w-4xl px-6 ${
              hasCoverImage ? "pb-16" : "pb-12"
            }`}
          >
            {/* Breadcrumb */}
            <Breadcrumb lang={lang} translations={translations} />

            {/* Tags */}
            {tags && tags.length > 0 && (
              <div className="flex flex-wrap items-center gap-2 mb-6">
                {tags.slice(0, 3).map((tag) => (
                  <TagPill key={tag} tag={tag} />
                ))}
              </div>
            )}

            {/* Title */}
            <h1
              className={`font-bold text-white leading-tight tracking-tight mb-6 ${
                hasCoverImage
                  ? "text-4xl md:text-5xl lg:text-6xl"
                  : "text-3xl md:text-4xl lg:text-5xl"
              }`}
            >
              {title}
            </h1>

            {/* Meta */}
            <PostMeta
              author={author}
              date={date}
              formattedDate={formattedDate}
              readingTime={readingTime}
              translations={translations}
            />
          </div>
        </div>
      </div>
    </section>
  );
}

/** Breadcrumb navigation */
function Breadcrumb({
  lang,
  translations,
}: {
  lang: "ar" | "en";
  translations: { home: string; blog: string };
}) {
  return (
    <nav className="mb-6" aria-label="Breadcrumb">
      <ol className="flex items-center gap-2 text-sm text-white/60">
        <li>
          <Link
            href={`/${lang}`}
            className="hover:text-[#10B981] transition-colors"
          >
            {translations.home}
          </Link>
        </li>
        <li>/</li>
        <li>
          <Link
            href={`/${lang}/blog`}
            className="hover:text-[#10B981] transition-colors"
          >
            {translations.blog}
          </Link>
        </li>
      </ol>
    </nav>
  );
}

/** Tag pill component */
function TagPill({ tag }: { tag: string }) {
  return (
    <span className="inline-flex items-center gap-1.5 px-3 py-1 bg-white/10 backdrop-blur-sm text-white text-xs font-bold uppercase tracking-wider">
      <span
        className="w-1.5 h-1.5"
        style={{ backgroundColor: BLOG_COLORS.primary }}
      />
      {tag}
    </span>
  );
}

/** Post meta information */
function PostMeta({
  author,
  date,
  formattedDate,
  readingTime,
  translations,
}: {
  author: string;
  date: string;
  formattedDate: string;
  readingTime?: string;
  translations: { writtenBy: string };
}) {
  return (
    <div className="flex flex-wrap items-center gap-4 text-sm text-white/70">
      {/* Author */}
      <div className="flex items-center gap-3">
        <div
          className="w-10 h-10 flex items-center justify-center font-bold text-white"
          style={{ backgroundColor: BLOG_COLORS.primary }}
        >
          {author?.charAt(0).toUpperCase() || "M"}
        </div>
        <div>
          <p className="text-xs uppercase tracking-wider text-white/50">
            {translations.writtenBy}
          </p>
          <p className="font-medium text-white">{author}</p>
        </div>
      </div>

      <span className="w-1 h-1 bg-white/30 rounded-full hidden sm:block" />

      {/* Date */}
      <time dateTime={date} className="flex items-center gap-2">
        <span className="font-mono text-xs">{formattedDate}</span>
      </time>

      {/* Reading time */}
      {readingTime && (
        <>
          <span className="w-1 h-1 bg-white/30 rounded-full hidden sm:block" />
          <span className="font-mono text-xs">{readingTime}</span>
        </>
      )}
    </div>
  );
}