'use client';

import { Calendar, Clock, User } from 'lucide-react';
import Breadcrumb, { BreadcrumbItem } from '@/app/components/Frontend/Breadcrumb';
import Link from 'next/link';
import Image from 'next/image';

// ── Types ─────────────────────────────────────────────────────────────────────

export interface BlogDetailHeroMeta {
  date?: string;
  readTime?: string;
  author?: {
    full_name: string;
    slug?: string;
  };
  tags?: string[];
}

export interface BlogDetailHeroProps {
  title: string;
  description?: string;
  breadcrumbs?: BreadcrumbItem[];
  meta?: BlogDetailHeroMeta;
  badge?: { name: string; slug?: string };
  featuredImage?: string;
  featuredImageAlt?: string;
  /**
   * 'navy'   → Deep Navy      (blue + indigo)
   * 'violet' → Violet Dusk    (purple + pink)
   * 'forest' → Forest Depth   (emerald + teal)
   * 'ember'  → Ember Rose     (crimson + orange)
   */
  variant?: 'navy' | 'violet' | 'forest' | 'ember';
}

// ── Variant tokens ────────────────────────────────────────────────────────────

const variants = {
  navy: {
    bg: 'from-[#0a1628] via-[#0f2545] to-[#0a1e3d]',
    orb1: 'bg-blue-700',
    orb2: 'bg-indigo-600',
    badge: 'bg-blue-500/15 text-blue-300 border-blue-500/30',
    badgeDot: 'bg-blue-400',
    title: 'from-white via-blue-100 to-indigo-200',
    glow: 'via-blue-500/40',
    imageBorder: 'ring-blue-500/20',
    imageGlow: 'shadow-blue-900/50',
  },
  violet: {
    bg: 'from-[#120a24] via-[#1e0f3c] to-[#180b30]',
    orb1: 'bg-violet-600',
    orb2: 'bg-pink-600',
    badge: 'bg-purple-500/15 text-purple-300 border-purple-500/30',
    badgeDot: 'bg-purple-400',
    title: 'from-white via-purple-100 to-pink-200',
    glow: 'via-purple-500/40',
    imageBorder: 'ring-purple-500/20',
    imageGlow: 'shadow-purple-900/50',
  },
  forest: {
    bg: 'from-[#071a10] via-[#0d2b1a] to-[#091f13]',
    orb1: 'bg-emerald-600',
    orb2: 'bg-teal-500',
    badge: 'bg-emerald-500/15 text-emerald-300 border-emerald-500/30',
    badgeDot: 'bg-emerald-400',
    title: 'from-white via-emerald-100 to-teal-200',
    glow: 'via-emerald-500/40',
    imageBorder: 'ring-emerald-500/20',
    imageGlow: 'shadow-emerald-900/50',
  },
  ember: {
    bg: 'from-[#1a0810] via-[#2d0f1c] to-[#200b15]',
    orb1: 'bg-rose-600',
    orb2: 'bg-orange-500',
    badge: 'bg-rose-500/15 text-rose-300 border-rose-500/30',
    badgeDot: 'bg-rose-400',
    title: 'from-white via-rose-100 to-orange-200',
    glow: 'via-rose-500/40',
    imageBorder: 'ring-rose-500/20',
    imageGlow: 'shadow-rose-900/50',
  },
};

// ── Component ─────────────────────────────────────────────────────────────────

export default function BlogDetailHero({
  title,
  description,
  breadcrumbs,
  meta,
  badge,
  featuredImage,
  featuredImageAlt,
  variant = 'navy',
}: BlogDetailHeroProps) {
  const v = variants[variant];

  return (
    <section className={`relative overflow-hidden bg-linear-to-br ${v.bg} mt-24.75`}>

      {/* ── Ambient orbs ── */}
      <div aria-hidden="true" className={`absolute -top-40 -left-40 w-120 h-120 rounded-full ${v.orb1} opacity-15 blur-[120px] pointer-events-none`} />
      <div aria-hidden="true" className={`absolute -bottom-20 right-0 w-96 h-96 rounded-full ${v.orb2} opacity-15 blur-[100px] pointer-events-none`} />

      {/* ── Fine grid overlay ── */}
      <div
        aria-hidden="true"
        className="absolute inset-0 pointer-events-none"
        style={{
          backgroundImage: `
            linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)
          `,
          backgroundSize: '44px 44px',
        }}
      />

      {/* ── Main content wrapper ── */}
      <div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pt-10 pb-12">

        {/* ── Breadcrumb ── */}
        {breadcrumbs && breadcrumbs.length > 0 && (
          <div className="flex items-center mb-8">
            <div className="inline-flex items-center px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-sm">
              <Breadcrumb items={breadcrumbs} darkMode />
            </div>
          </div>
        )}

        {/* ── Two-column: text left | image right ── */}
        <div className="grid grid-cols-1 lg:grid-cols-[1fr_440px] gap-10 lg:gap-14 items-center">

          {/* Left — text */}
          <div className="flex flex-col gap-5">

            {/* Title */}
            <h1 className={`text-3xl sm:text-4xl md:text-5xl font-extrabold leading-[1.1] tracking-tight bg-linear-to-r ${v.title} bg-clip-text text-transparent`}>
              {title}
            </h1>

            {/* Description / excerpt */}
            {description && (
              <p className="text-base sm:text-lg text-white/55 leading-relaxed font-light">
                {description}
              </p>
            )}

            {/* Divider */}
            <div className="h-px w-16 bg-white/10" />

            {/* Meta row */}
            {meta && (
              <div className="flex flex-wrap items-center gap-2 text-sm">

                {/* Category badge */}
                {badge?.name && (
                  <Link href={`/category/${badge.slug || ''}`}>
                    <span className={`flex items-center gap-2 border px-3 py-1.5 rounded-full backdrop-blur-sm transition-colors ${v.badge}`}>
                      <span className={`w-1.5 h-1.5 rounded-full animate-pulse ${v.badgeDot}`} />
                      {badge.name}
                    </span>
                  </Link>
                )}

                {/* Author */}
                {meta.author?.full_name && (
                  <Link href={`/author/${meta.author.slug || ''}`}>
                    <span className={`flex items-center gap-2 border px-3 py-1.5 rounded-full backdrop-blur-sm transition-colors ${v.badge}`}>
                      <User className="w-3.5 h-3.5" />
                      {meta.author.full_name}
                    </span>
                  </Link>
                )}

                {/* Date */}
                {meta.date && (
                  <span className="flex items-center gap-2 bg-white/5 border border-white/10 px-3 py-1.5 rounded-full backdrop-blur-sm text-white/70">
                    <Calendar className="w-3.5 h-3.5 text-white/35" />
                    {meta.date}
                  </span>
                )}

                {/* Read time */}
                {meta.readTime && (
                  <span className="flex items-center gap-2 bg-white/5 border border-white/10 px-3 py-1.5 rounded-full backdrop-blur-sm text-white/70">
                    <Clock className="w-3.5 h-3.5 text-white/35" />
                    {meta.readTime}
                  </span>
                )}

              </div>
            )}
          </div>

          {/* Right — featured image */}
          {featuredImage && (
            <div className="relative">
              {/* Glow behind image */}
              <div aria-hidden="true" className={`absolute inset-4 rounded-2xl blur-2xl opacity-30 ${v.orb1}`} />

              {/* Image card */}
              <div className={`relative rounded-2xl overflow-hidden ring-1 ${v.imageBorder} shadow-2xl ${v.imageGlow}`}>
                <div className="aspect-4/3 w-full relative">
                  <Image
                    src={featuredImage}
                    alt={featuredImageAlt || title}
                    fill
                    className="object-cover"
                    priority
                    sizes="(max-width: 1024px) 100vw, 440px"
                  />
                  <div className="absolute inset-0 bg-linear-to-t from-black/30 via-transparent to-transparent" />
                </div>
              </div>
            </div>
          )}

        </div>
      </div>

      {/* ── Bottom glow line ── */}
      <div
        aria-hidden="true"
        className={`absolute bottom-0 left-0 right-0 h-px bg-linear-to-r from-transparent ${v.glow} to-transparent pointer-events-none`}
      />
    </section>
  );
}