'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { Header } from '../../components/Header';
import { Footer } from '../../components/Footer';
import api from '@/lib/api';

interface LeadershipMember {
  id: number;
  name: string;
  position: string;
  bio: string;
  full_bio: string;
  type: string;
  type_label: string;
  image: string;
  image_thumb?: string;
  image_medium?: string;
  image_large?: string;
  email?: string;
  linkedin?: string;
}

export default function LeadershipMemberPage() {
  const params = useParams();
  const id = params?.id as string;
  
  const [member, setMember] = useState<LeadershipMember | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    if (id) {
      fetchMember();
    }
  }, [id]);

  useEffect(() => {
    if (!loading && member) {
      setTimeout(() => setIsVisible(true), 100);
    }
  }, [loading, member]);

  const fetchMember = async () => {
    try {
      setLoading(true);
      setError(null);
      setIsVisible(false);
      
      const memberId = parseInt(id);
      if (isNaN(memberId)) {
        throw new Error('Invalid member ID');
      }
      
      const data: any = await api.getLeadershipMember(memberId);
      
      setMember(data);
    } catch (err: any) {
      console.error('Error fetching leadership member:', err);
      setError(err?.message || 'Failed to load leadership member');
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-white">
        <Header />
        <div className="min-h-[80vh] flex items-center justify-center px-4">
          <div className="text-center">
            <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
            <p className="text-lg text-neutral-600">Loading leadership member...</p>
          </div>
        </div>
        <Footer />
      </div>
    );
  }

  if (error || !member) {
    return (
      <div className="min-h-screen bg-white">
        <Header />
        <div className="min-h-[80vh] flex items-center justify-center px-4">
          <div className="text-center max-w-2xl">
            <h1 className="text-4xl md:text-5xl font-bold text-primary-500 mb-4">
              {error ? 'Error Loading Member' : 'Member Not Found'}
            </h1>
            <p className="text-lg md:text-xl text-neutral-600 mb-8">
              {error || 'The leadership member you\'re looking for doesn\'t exist.'}
            </p>
            <Link 
              href="/our-leadership"
              className="inline-flex items-center gap-2 px-6 py-3 bg-primary-500 text-neutral-900 rounded-lg hover:bg-primary-700 transition-colors font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
              </svg>
              Back to Leadership
            </Link>
          </div>
        </div>
        <Footer />
      </div>
    );
  }

  const memberImage = member.image_large || member.image_medium || member.image || 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=2070&auto=format&fit=crop';

  return (
    <div className="min-h-screen bg-white">
      <Header />
      
      {/* Hero Section with Blue Background */}
      <section className="relative bg-gradient-to-br from-primary-600 via-primary-500 to-primary-700 text-white overflow-hidden">
        {/* Animated Background Pattern */}
        <div className="absolute inset-0 opacity-10">
          <div className="absolute inset-0" style={{
            backgroundImage: `radial-gradient(circle at 3px 3px, white 1px, transparent 0)`,
            backgroundSize: '50px 50px'
          }} />
        </div>
        
        {/* Floating Orbs */}
        <div className="absolute top-0 right-0 w-96 h-96 bg-white/10 rounded-full blur-3xl animate-pulse" />
        <div className="absolute bottom-0 left-0 w-96 h-96 bg-white/10 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '1.5s' }} />
        
        {/* Breadcrumb */}
        <div className="relative z-10 pt-6 pb-4 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <nav className="mb-0" aria-label="Breadcrumb">
            <ol className="flex items-center space-x-2 text-sm md:text-base flex-wrap">
              <li>
                <Link href="/" className="text-white/90 hover:text-white hover:underline transition-all flex items-center gap-1.5 group">
                  <svg className="w-4 h-4 md:w-5 md:h-5 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                  </svg>
                  <span>Home</span>
                </Link>
              </li>
              <li className="text-white/60">
                <svg className="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </li>
              <li>
                <Link href="/our-leadership" className="text-white/90 hover:text-white hover:underline transition-colors">Our Leadership</Link>
              </li>
              <li className="text-white/60">
                <svg className="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </li>
              <li className="text-white font-semibold truncate max-w-[200px] md:max-w-none">{member.name}</li>
            </ol>
          </nav>
        </div>

        {/* Hero Content */}
        <div className={`relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-20 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
          <div className="max-w-5xl">
            <div className="mb-6">
              <span className="inline-block px-4 py-1.5 bg-white/20 backdrop-blur-md rounded-full border border-white/30 text-sm font-semibold uppercase tracking-wide">
                {member.type_label}
              </span>
            </div>
            <h1 className="text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold leading-tight mb-6">
              {member.name}
            </h1>
            <p className="text-lg md:text-xl lg:text-2xl text-white/95 leading-relaxed font-medium">
              {member.position}
            </p>
          </div>
        </div>
      </section>

      {/* Main Content Section */}
      <section className={`py-12 md:py-16 lg:py-20 bg-neutral-50 transition-all duration-1000 delay-100 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12">
            {/* Sidebar - Member Info Card */}
            <div className="lg:col-span-4">
              <div className="sticky top-24 space-y-6">
                {/* Member Photo Card */}
                <div className="bg-white rounded-2xl overflow-hidden shadow-lg border border-neutral-200 hover:shadow-xl transition-shadow duration-300">
                  <div className="relative h-80 md:h-96 overflow-hidden bg-neutral-100">
                    <img 
                      src={memberImage}
                      alt={member.name}
                      className="absolute inset-0 w-full h-full object-cover object-center"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
                  </div>
                  <div className="p-6 md:p-8">
                    <h3 className="text-lg md:text-xl font-bold text-neutral-900 mb-2 truncate">{member.name}</h3>
                    <p className="text-primary-600 font-semibold mb-3 text-xs md:text-sm leading-relaxed">{member.position}</p>
                    <div className="mb-4">
                      <span className="inline-block px-3 py-1 bg-primary-50 text-primary-700 rounded-lg text-sm font-semibold uppercase tracking-wide">
                        {member.type_label}
                      </span>
                    </div>
                    {member.bio && (
                      <p className="text-neutral-600 leading-relaxed text-sm md:text-base border-t border-neutral-200 pt-4 mt-4">
                        {member.bio}
                      </p>
                    )}
                  </div>
                </div>

                {/* Contact Information Card */}
                {(member.email || member.linkedin) && (
                  <div className="bg-white rounded-2xl p-6 md:p-8 border border-neutral-200 shadow-lg">
                    <h3 className="text-xl font-bold text-neutral-900 mb-6 flex items-center gap-2">
                      <svg className="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                      </svg>
                      Contact
                    </h3>
                    <div className="space-y-3">
                      {member.email && (
                        <a 
                          href={`mailto:${member.email}`}
                          className="flex items-center gap-4 p-4 bg-neutral-50 rounded-xl hover:bg-primary-50 transition-all duration-300 border border-neutral-200 hover:border-primary-300 group"
                        >
                          <div className="w-12 h-12 bg-primary-600 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:bg-primary-700 transition-colors shadow-sm">
                            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                            </svg>
                          </div>
                          <div className="flex-1 min-w-0">
                            <div className="text-xs text-neutral-500 uppercase tracking-wide mb-1">Email</div>
                            <div className="text-sm font-semibold text-neutral-900 truncate group-hover:text-primary-600 transition-colors">{member.email}</div>
                          </div>
                          <svg className="w-5 h-5 text-neutral-400 group-hover:text-primary-600 transition-colors flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                          </svg>
                        </a>
                      )}
                      {member.linkedin && (
                        <a 
                          href={member.linkedin}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="flex items-center gap-4 p-4 bg-neutral-50 rounded-xl hover:bg-primary-50 transition-all duration-300 border border-neutral-200 hover:border-primary-300 group"
                        >
                          <div className="w-12 h-12 bg-primary-600 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:bg-primary-700 transition-colors shadow-sm">
                            <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                              <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                            </svg>
                          </div>
                          <div className="flex-1 min-w-0">
                            <div className="text-xs text-neutral-500 uppercase tracking-wide mb-1">LinkedIn</div>
                            <div className="text-sm font-semibold text-neutral-900 group-hover:text-primary-600 transition-colors">View Profile</div>
                          </div>
                          <svg className="w-5 h-5 text-neutral-400 group-hover:text-primary-600 transition-colors flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                          </svg>
                        </a>
                      )}
                    </div>
                  </div>
                )}

                {/* Back Button */}
                <Link
                  href="/our-leadership"
                  className="w-full inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-primary-500 text-neutral-900 rounded-xl hover:bg-primary-700 transition-all duration-300 font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
                >
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                  </svg>
                  Back to Leadership
                </Link>
              </div>
            </div>

            {/* Main Content - Biography */}
            <div className="lg:col-span-8">
              <div className="bg-white rounded-2xl shadow-lg border border-neutral-200 p-8 md:p-10 lg:p-12">
                <div className="mb-8 pb-6 border-b border-neutral-200">
                  <h2 className="text-3xl md:text-4xl font-bold text-neutral-900 mb-3">
                    Biography
                  </h2>
                  <div className="w-20 h-1 bg-primary-600 rounded-full"></div>
                </div>
                
                <div 
                  className="prose max-w-none text-base md:text-lg text-justified"
                  dangerouslySetInnerHTML={{ __html: member.full_bio }}
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}