'use client';

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

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

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

export interface DetailHeroSectionProps {
  title: string;
  description?: string;
  breadcrumbs?: BreadcrumbItem[];
  meta?: DetailHeroMeta;
  badge?: {name: string, slug?:string};
  /**
   * 'navy'   → Option 1 — Deep Navy      (blue + indigo)
   * 'violet' → Option 2 — Violet Dusk    (purple + pink)
   * 'forest' → Option 3 — Forest Depth   (emerald + teal)
   * 'ember'  → Option 4 — Ember Rose     (crimson + orange)
   */
  variant?: 'navy' | 'violet' | 'forest' | 'ember';
}

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

const variants = {
  navy: {
    // Background
    bg: 'from-[#0a1628] via-[#0f2545] to-[#0a1e3d]',
    // Orbs
    orb1: 'bg-blue-700',
    orb2: 'bg-indigo-600',
    orb3: 'bg-cyan-500',
    // Floating squares
    sq: 'bg-blue-400',
    // Badge
    badge: 'bg-blue-500/15 text-blue-300 border-blue-500/30',
    badgeDot: 'bg-blue-400',
    // Title gradient
    title: 'from-white via-blue-100 to-indigo-200',
    // Bottom glow
    glow: 'via-blue-500/50',
  },
  violet: {
    bg: 'from-[#120a24] via-[#1e0f3c] to-[#180b30]',
    orb1: 'bg-violet-600',
    orb2: 'bg-pink-600',
    orb3: 'bg-purple-400',
    sq: 'bg-purple-400',
    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/50',
  },
  forest: {
    bg: 'from-[#071a10] via-[#0d2b1a] to-[#091f13]',
    orb1: 'bg-emerald-600',
    orb2: 'bg-teal-500',
    orb3: 'bg-green-400',
    sq: 'bg-emerald-400',
    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/50',
  },
  ember: {
    bg: 'from-[#1a0810] via-[#2d0f1c] to-[#200b15]',
    orb1: 'bg-rose-600',
    orb2: 'bg-orange-500',
    orb3: 'bg-pink-400',
    sq: 'bg-rose-400',
    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/50',
  },
};

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

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

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

      {/* ── Ambient colour orbs ── */}
      <div
        aria-hidden="true"
        className={`absolute -top-28 -left-28 w-105 h-105 rounded-full ${v.orb1} opacity-20 blur-[100px] pointer-events-none`}
      />
      <div
        aria-hidden="true"
        className={`absolute -bottom-20 -right-20 w-90 h-90 rounded-full ${v.orb2} opacity-20 blur-[90px] pointer-events-none`}
      />
      <div
        aria-hidden="true"
        className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-65 h-65 rounded-full ${v.orb3} opacity-10 blur-[70px] pointer-events-none`}
      />

      {/* ── Floating geometric squares ── */}
      <div aria-hidden="true" className={`absolute top-8 right-[12%] w-20 h-20 rounded-md rotate-18 ${v.sq} opacity-10 pointer-events-none`} />
      <div aria-hidden="true" className={`absolute top-[55%] left-[6%] w-12 h-12 rounded-md -rotate-12 ${v.sq} opacity-10 pointer-events-none`} />
      <div aria-hidden="true" className={`absolute bottom-[20%] right-[20%] w-7 h-7 rounded-md rotate-35 ${v.sq} opacity-10 pointer-events-none`} />
      <div aria-hidden="true" className={`absolute bottom-[10%] left-[15%] w-16 h-16 rounded-md rotate-[-28deg] ${v.sq} opacity-10 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.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px)
          `,
          backgroundSize: '44px 44px',
        }}
      />

      {/* ── Content ── */}
      <div className="relative max-w-4xl mx-auto px-4 pt-20 pb-24 text-center">

        {/* Breadcrumb */}
        {breadcrumbs && breadcrumbs.length > 0 && (
          <div className="flex justify-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} className="justify-center" darkMode />
            </div>
          </div>
        )}

        {/* Badge */}
        {badge && (
          <Link href={`/category/${badge.slug}` || '#'}><div className="flex justify-center mb-5">
            <span className={`inline-flex items-center gap-2 text-xs font-semibold tracking-widest uppercase px-4 py-1.5 rounded-full border ${v.badge}`}>
              <span className={`w-1.5 h-1.5 rounded-full animate-pulse ${v.badgeDot}`} />
              {badge.name}
            </span>
          </div></Link>
        )}

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

        {/* Description */}
        {description && (
          <p className="text-lg sm:text-xl text-white/55 leading-relaxed max-w-2xl mx-auto mb-10 font-light">
            {description}
          </p>
        )}

        {/* Meta row */}
        {meta && (
          <div className="flex flex-wrap items-center justify-center gap-3 text-sm">
            {meta.author?.full_name && (
              <Link href={`/author/${meta?.author?.slug}` || '#'}><span className="flex items-center gap-2 bg-white/5 border border-white/10 px-3.5 py-1.5 rounded-full backdrop-blur-sm text-white/70">
                <User className="w-3.5 h-3.5 text-white/35" />
                {meta.author?.full_name}
              </span></Link>
            )}
            {meta.date && (
              <span className="flex items-center gap-2 bg-white/5 border border-white/10 px-3.5 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>
            )}
            {meta.readTime && (
              <span className="flex items-center gap-2 bg-white/5 border border-white/10 px-3.5 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>
            )}
            {meta.tags && meta.tags.length > 0 &&
              meta.tags.map((tag) => (
                <span
                  key={tag}
                  className="flex items-center gap-1.5 text-xs bg-white/5 border border-white/10 px-3.5 py-1.5 rounded-full backdrop-blur-sm text-white/70"
                >
                  <Tag className="w-3 h-3 text-white/35" />
                  {tag}
                </span>
              ))}
          </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>
  );
}