// AuthorSection.jsx
'use client';

import Image from "next/image";
import Link from 'next/link';
import { 
  BookOpen, 
  Users, 
  ArrowRight, 
  Facebook, 
  Twitter, 
  Instagram, 
  Linkedin, 
  ExternalLink 
} from 'lucide-react';

// Helper function to get S3 URL
const getS3Url = (imagePath) => {
  if (!imagePath) return null;
  
  if (imagePath.startsWith('/')) {
    return `https://${process.env.NEXT_PUBLIC_AWS_BUCKET}.s3.${process.env.NEXT_PUBLIC_AWS_DEFAULT_REGION}.amazonaws.com/${imagePath.replace(/^\/+/, "")}`;
  }
  
  if (imagePath.startsWith('http')) {
    return imagePath;
  }
  
  return `https://${process.env.NEXT_PUBLIC_AWS_BUCKET}.s3.${process.env.NEXT_PUBLIC_AWS_DEFAULT_REGION}.amazonaws.com/${imagePath}`;
};

interface AuthorSectionProps {
  authorData?: {
    id?: number;
    full_name?: string;
    slug?: string;
    profile_image?: string;
    bio?: string;
    website?: string;
    social_facebook?: string;
    social_twitter?: string;
    social_instagram?: string;
    social_linkedin?: string;
  } | null;
}

const AuthorSection: React.FC<AuthorSectionProps> = ({ authorData }) => {
  if (!authorData?.full_name) return null;
  
  const authorImageUrl = authorData.profile_image ? getS3Url(authorData.profile_image) : null;
  const socialLinks = [
    { platform: 'facebook', url: authorData.social_facebook, icon: Facebook, color: 'hover:text-blue-600 hover:bg-blue-50' },
    { platform: 'twitter', url: authorData.social_twitter, icon: Twitter, color: 'hover:text-blue-400 hover:bg-blue-50' },
    { platform: 'instagram', url: authorData.social_instagram, icon: Instagram, color: 'hover:text-pink-600 hover:bg-pink-50' },
    { platform: 'linkedin', url: authorData.social_linkedin, icon: Linkedin, color: 'hover:text-blue-700 hover:bg-blue-50' },
    { platform: 'website', url: authorData.website, icon: ExternalLink, color: 'hover:text-teal-600 hover:bg-teal-50' }
  ].filter(link => link.url);

  return (
    <div className="mt-12 pt-12 border-t border-gray-200/60">
      <div className="bg-linear-to-br from-teal-50/50 to-blue-50/50 rounded-2xl p-6 md:p-8">
        <div className="flex flex-col md:flex-row items-center md:items-start gap-6">
          {/* Author Image Container - Square on LG, Circle on mobile */}
          <div className="relative group">
            <div className="hidden lg:block relative w-40 h-40 rounded-2xl overflow-hidden shadow-lg">
              {authorImageUrl ? (
                <Image
                  src={authorImageUrl}
                  alt={authorData.full_name}
                  fill
                  className="object-cover transition-transform duration-500 group-hover:scale-110"
                  unoptimized={authorImageUrl.includes('s3.amazonaws.com')}
                />
              ) : (
                <div className="w-full h-full bg-linear-to-br from-teal-100 to-blue-100 flex items-center justify-center">
                  <Users className="w-16 h-16 text-teal-300" />
                </div>
              )}
            </div>
            <div className="block lg:hidden relative w-32 h-32 rounded-full overflow-hidden shadow-lg mx-auto">
              {authorImageUrl ? (
                <Image
                  src={authorImageUrl}
                  alt={authorData.full_name}
                  fill
                  className="object-cover transition-transform duration-500 group-hover:scale-110"
                  unoptimized={authorImageUrl.includes('s3.amazonaws.com')}
                />
              ) : (
                <div className="w-full h-full bg-linear-to-br from-teal-100 to-blue-100 flex items-center justify-center">
                  <Users className="w-12 h-12 text-teal-300" />
                </div>
              )}
            </div>
            <div className="absolute inset-0 bg-linear-to-t from-black/20 to-transparent lg:rounded-2xl rounded-full"></div>
          </div>
          
          {/* Author Info */}
          <div className="flex-1 text-center md:text-left">
            <div className="inline-flex items-center gap-2 bg-linear-to-r from-teal-100 to-blue-100 text-teal-700 px-4 py-1.5 rounded-full text-xs font-semibold mb-3">
              <BookOpen className="w-3 h-3" />
              Article Author
            </div>
            
            <div className="mb-4">
              <h3 className="text-2xl font-bold text-gray-900 mb-2">
                {authorData.full_name}
              </h3>
              
              {authorData.bio && (
                <div className="text-gray-600 leading-relaxed">
                  {(() => {
                    const words = authorData.bio.split(' ');
                    const shouldTruncate = words.length > 100;
                    const truncatedBio = shouldTruncate ? words.slice(0, 90).join(' ') + '...' : authorData.bio;
                    
                    return (
                      <>
                        <p className="mb-2">
                          {truncatedBio}
                        </p>
                        {shouldTruncate && (
                          <Link 
                            href={`/author/${authorData.slug || authorData.id}`}
                            className="inline-flex items-center gap-1 text-teal-600 hover:text-teal-700 font-medium text-sm group"
                          >
                            Read more
                            <ArrowRight className="w-3 h-3 transition-transform group-hover:translate-x-1" />
                          </Link>
                        )}
                      </>
                    );
                  })()}
                </div>
              )}
            </div>
            
            {/* Stats & Links Row */}
            <div className="flex flex-col sm:flex-row items-center justify-between gap-4 mt-6 pt-6 border-t border-gray-200/50">
              {/* View Profile Button */}
              <Link 
                href={`/author/${authorData.slug || authorData.id}`}
                className="group flex items-center gap-2 bg-linear-to-r from-teal-600 to-blue-500 text-white px-6 py-3 rounded-xl hover:opacity-90 transition-all duration-300 font-semibold whitespace-nowrap"
              >
                <span>View Author Profile</span>
                <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
              </Link>
              
              {/* Social Links */}
              {socialLinks.length > 0 && (
                <div className="flex items-center gap-3">
                  <span className="text-sm text-gray-500 font-medium hidden sm:block">Follow:</span>
                  <div className="flex items-center gap-2">
                    {socialLinks.map((link, index) => {
                      const Icon = link.icon;
                      return (
                        <a
                          key={index}
                          href={link.url}
                          target="_blank"
                          rel="noopener noreferrer"
                          className={`w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center text-gray-600 transition-all duration-300 shadow-sm hover:shadow-md ${link.color}`}
                          aria-label={`Follow on ${link.platform}`}
                        >
                          <Icon className="w-4 h-4" />
                        </a>
                      );
                    })}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AuthorSection;