// src/app/components/ui/PageHero.tsx
'use client';

import { motion } from 'framer-motion';
import { ReactNode } from 'react';
import Link from 'next/link';

interface PageHeroProps {
  title: string;
  subtitle?: string;
  description?: string;
  icon?: ReactNode;
  badge?: string;
  breadcrumbs?: Array<{ name: string; href: string }>;
  stats?: Array<{ icon: ReactNode; label: string; value?: string }>;
  children?: ReactNode;
  className?: string;
  align?: 'left' | 'center' | 'right';
}

export default function PageHero({
  title,
  description,
  icon,
  badge,
  breadcrumbs,
  stats,
  children,
  className = '',
  align = 'center',
}: PageHeroProps) {
  const alignmentClasses = {
    left: 'text-left',
    center: 'text-center',
    right: 'text-right',
  };

  const titleWithGradient = title.includes('{gradient}');
  const cleanTitle = title.replace('{gradient}', '');
  const titleParts = cleanTitle.split('|');

  return (
    <div className={`relative overflow-hidden ${className}`}>
      {/* Background Decorations */}
      <div className="absolute inset-0 bg-linear-to-br from-blue-600/5 via-transparent to-cyan-600/5" />
      <div className="absolute top-20 right-10 w-72 h-72 bg-blue-500/10 rounded-full blur-3xl animate-pulse" />
      <div className="absolute bottom-20 left-10 w-96 h-96 bg-cyan-500/10 rounded-full blur-3xl animate-pulse delay-1000" />
      
      {/* Grid Pattern */}
      <div className="absolute inset-0 opacity-[0.02]">
        <div 
          className="absolute inset-0"
          style={{
            backgroundImage: `radial-gradient(circle at 1px 1px, rgb(0,0,0) 1px, transparent 1px)`,
            backgroundSize: '40px 40px'
          }}
        />
      </div>

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-10 py-16 md:py-20 lg:py-24">
        {/* Badge */}
        {badge && (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className={`flex ${align === 'center' ? 'justify-center' : align === 'right' ? 'justify-end' : 'justify-start'} mb-6 mt-8`}
          >
            <div className="inline-flex items-center gap-2 px-4 py-2 bg-white/80 backdrop-blur-sm rounded-full shadow-sm">
              {icon && <div className="text-blue-600">{icon}</div>}
              <span className="text-sm font-medium text-slate-700">{badge}</span>
            </div>
          </motion.div>
        )}

        {/* Title */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.1 }}
          className={`${alignmentClasses[align]} mb-4`}
        >
          {titleWithGradient ? (
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-800">
              {titleParts[0]}
              <span className="bg-linear-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
                {titleParts[1] || ''}
              </span>
              {titleParts[2] || ''}
            </h1>
          ) : (
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-800">
              {title}
            </h1>
          )}
        </motion.div>

        {/* Description */}
        {description && (
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className={`text-base md:text-lg text-slate-600 max-w-3xl ${
              align === 'center' ? 'mx-auto text-center' : align === 'right' ? 'ml-auto text-right' : 'text-left'
            } mb-8`}
          >
            {description}
          </motion.p>
        )}

        {/* Stats */}
        {stats && stats.length > 0 && (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.25 }}
            className={`flex flex-wrap items-center gap-6 md:gap-8 mb-8 ${
              align === 'center' ? 'justify-center' : align === 'right' ? 'justify-end' : 'justify-start'
            }`}
          >
            {stats.map((stat, index) => (
              <div key={index} className="flex items-center gap-2">
                <div className="text-blue-600">{stat.icon}</div>
                <div>
                  {stat.value && <span className="font-semibold text-slate-800">{stat.value} </span>}
                  <span className="text-sm text-slate-600">{stat.label}</span>
                </div>
              </div>
            ))}
          </motion.div>
        )}

        {/* Breadcrumbs */}
        {breadcrumbs && breadcrumbs.length > 0 && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.5, delay: 0.3 }}
            className={`flex items-center gap-2 text-sm text-slate-500 ${
              align === 'center' ? 'justify-center' : align === 'right' ? 'justify-end' : 'justify-start'
            }`}
          >
            {breadcrumbs.map((crumb, index) => (
              <div key={index} className="flex items-center gap-2">
                {index > 0 && <span>/</span>}
                {index === breadcrumbs.length - 1 ? (
                  <span className="text-slate-800 font-medium">{crumb.name}</span>
                ) : (
                  <Link href={crumb.href} className="hover:text-blue-600 transition-colors">
                    {crumb.name}
                  </Link>
                )}
              </div>
            ))}
          </motion.div>
        )}

        {/* Children */}
        {children && (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.35 }}
            className={`mt-8 ${align === 'center' ? 'text-center' : align === 'right' ? 'text-right' : 'text-left'}`}
          >
            {children}
          </motion.div>
        )}
      </div>
    </div>
  );
}