'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
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 OurLeadershipPage() {
  const [directorBoard, setDirectorBoard] = useState<LeadershipMember[]>([]);
  const [managementBoard, setManagementBoard] = useState<LeadershipMember[]>([]);
  const [seniorOfficials, setSeniorOfficials] = useState<LeadershipMember[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    fetchLeadershipMembers();
  }, []);

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

  const fetchLeadershipMembers = async () => {
    try {
      setLoading(true);
      setError(null);
      
      // Fetch leadership members
      const response: any = await api.getLeadershipMembers({ status: 'active' });
      
      let members: any[] = [];
      if (Array.isArray(response)) {
        members = response;
      } else if (response && typeof response === 'object' && 'data' in response && Array.isArray(response.data)) {
        members = response.data;
      }
      
      // Group by type
      const directors = members.filter((m: any) => m.type === 'director');
      const management = members.filter((m: any) => m.type === 'management');
      const senior = members.filter((m: any) => m.type === 'senior');
      
      setDirectorBoard(directors);
      setManagementBoard(management);
      setSeniorOfficials(senior);
    } catch (err: any) {
      console.error('Error fetching leadership members:', err);
      setError(err?.message || 'Failed to load leadership members');
    } finally {
      setLoading(false);
    }
  };

  const LeadershipCard = ({ member, index }: { member: LeadershipMember; index: number }) => {
    // Get API base URL for default avatar
    const getDefaultAvatar = () => {
      const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api/v1';
      // Remove /api/v1 if present to get base URL
      const baseUrl = apiUrl.replace(/\/api\/v1\/?$/, '');
      return `${baseUrl}/images/default-avatar.svg`;
    };
    
    const defaultAvatar = getDefaultAvatar();
    const memberImage = member.image_large || member.image_medium || member.image || defaultAvatar;
    
    return (
      <Link
        href={`/our-leadership/${member.id}`}
        className="group block h-full"
      >
        <div className="bg-white rounded-2xl shadow-md hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 border border-neutral-100 h-full flex flex-col relative overflow-hidden">
          {/* Gradient overlay on hover */}
          <div className="absolute inset-0 bg-gradient-to-br from-primary-600/0 to-primary-600/0 group-hover:from-primary-600/5 group-hover:to-primary-600/10 transition-all duration-500 pointer-events-none z-10" />
          
          {/* Member Photo */}
          <div className="relative h-72 w-full overflow-hidden bg-gradient-to-br from-neutral-100 to-neutral-200 flex-shrink-0">
            <img 
              src={memberImage}
              alt={member.name}
              className="w-full h-full object-cover object-top scale-100 group-hover:scale-110 transition-transform duration-700 ease-out"
            />
            {/* Elegant overlay */}
            <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-black/0 to-black/0 group-hover:from-black/50 transition-opacity duration-300" />
          </div>

          {/* Member Info */}
          <div className="p-5 flex-1 flex flex-col items-center text-center relative z-20">
            <h3 className="text-base font-bold text-neutral-900 mb-2 group-hover:text-primary-600 transition-colors whitespace-nowrap overflow-hidden text-ellipsis w-full">
              {member.name}
            </h3>
            {/* Position below name */}
            <p className="text-[10px] font-semibold text-primary-600 uppercase tracking-wide whitespace-nowrap overflow-hidden text-ellipsis w-full mb-3">
              {member.position}
            </p>
            {member.bio && (
              <p className="text-xs text-neutral-600 leading-relaxed flex-1 line-clamp-3">
                {member.bio}
              </p>
            )}
            
            {/* View Profile Link */}
            <div className="mt-auto pt-3 border-t border-neutral-100 w-full">
              <span className="text-xs font-semibold text-primary-600 group-hover:text-primary-700 flex items-center justify-center gap-1">
                View Profile
                <svg className="w-3 h-3 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </span>
            </div>
          </div>
        </div>
      </Link>
    );
  };

  const LeadershipSection = ({ 
    title, 
    description, 
    members 
  }: { 
    title: string; 
    description: string; 
    members: LeadershipMember[] 
  }) => (
    <section className={`py-16 md:py-20 transition-all duration-1000 ${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">
        {/* Section Header */}
        <div className="mb-12 text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-neutral-900 mb-3">
            {title}
          </h2>
          <p className="text-base md:text-lg text-neutral-600 max-w-3xl mx-auto leading-relaxed">
            {description}
          </p>
        </div>

        {/* Members Grid */}
        {members.length > 0 ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 max-w-6xl mx-auto">
            {members.map((member, index) => (
              <LeadershipCard key={member.id || index} member={member} index={index} />
            ))}
          </div>
        ) : (
          <div className="text-center py-12">
            <p className="text-neutral-500">No members available for this category.</p>
          </div>
        )}
      </div>
    </section>
  );


  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 members...</p>
          </div>
        </div>
        <Footer />
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-white">
      <Header />
      
      {/* Hero Section */}
      <section className="relative bg-white pt-32 pb-16 md:pt-40 md:pb-24">
        <div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
          <div className="max-w-4xl">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-primary-500 mb-6 leading-tight">
              <span className="inline-block px-6 py-3 bg-primary-500 text-neutral-900 rounded-lg">
                Our Leadership
              </span>
            </h1>
            <p className="text-xl md:text-2xl text-neutral-600 leading-relaxed mt-6">
            Guided by a compact leadership team dedicated to education, youth support, and
            community livelihoods across Afghanistan.
            </p>
          </div>
        </div>
      </section>

      {/* Director Board Section - Hidden per request */}
      {/* {directorBoard.length > 0 && (
        <>
          <div className="border-t border-neutral-200"></div>
      <LeadershipSection
        title="Director Board"
        description="Our executive leadership team provides strategic direction and ensures operational excellence across all our programs and initiatives."
        members={directorBoard}
      />
        </>
      )} */}

      {/* Governance & Management Section */}
      {managementBoard.length > 0 && (
        <>
          <div className="border-t border-neutral-200"></div>
      <LeadershipSection
        title="Leadership team"
        description="The people who steer SSEOA’s education programmes, operations, and partnerships."
        members={managementBoard}
      />
        </>
      )}

      {/* Senior Officials Section */}
      {seniorOfficials.length > 0 && (
        <>
          {managementBoard.length > 0 && <div className="border-t border-neutral-200"></div>}
      <LeadershipSection
        title="Senior Officials"
        description="Our senior management team ensures efficient operations and quality program delivery across all our field offices and initiatives."
        members={seniorOfficials}
      />
        </>
      )}

      {/* Error Message */}
      {error && (
        <section className="py-20 bg-white">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <p className="text-xl text-red-600 mb-4">Error: {error}</p>
            <button
              onClick={fetchLeadershipMembers}
              className="inline-flex items-center px-6 py-3 border border-transparent text-sm font-medium rounded-md shadow-sm text-neutral-900 bg-primary-500 hover:bg-primary-400"
            >
              Retry
            </button>
          </div>
        </section>
      )}

      <Footer />
    </div>
  );
}