'use client';

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

/**
 * Donors Page
 * Shows all donors from API with consistent design
 */
export default function DonorsPage() {
  const [donors, setDonors] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [isVisible, setIsVisible] = useState(false);

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

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

  const fetchDonors = async () => {
    try {
      setLoading(true);
      setError(null);
      
      const response: any = await api.getDonors({ status: 'active' });
      
      let donorsData: any[] = [];
      if (Array.isArray(response)) {
        donorsData = response;
      } else if (response && typeof response === 'object' && 'data' in response && Array.isArray(response.data)) {
        donorsData = response.data;
      }
      
      setDonors(donorsData);
    } catch (err: any) {
      console.error('Error fetching donors:', err);
      setError(err?.message || 'Failed to load donors');
    } 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 donors...</p>
          </div>
        </div>
        <Footer />
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-white">
      <Header />
      
      {/* Hero Section - Clean and Simple with Blue Background Text */}
      <section className="relative bg-white pt-32 pb-8 md:pt-40 md:pb-12">
        <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-4 leading-tight">
              <span className="inline-block px-6 py-3 bg-primary-500 text-neutral-900 rounded-lg">
                Our Donors
              </span>
            </h1>
            <p className="text-xl md:text-2xl text-neutral-600 leading-relaxed">
              We are grateful to our partners and donors who make our work possible. Together, we are creating lasting change for children across Afghanistan.
            </p>
          </div>
        </div>
      </section>

      {/* Donors Grid Section */}
      <section className={`py-16 md:py-24 bg-white 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">
          {donors.length > 0 ? (
            <>
              <div className="mb-12 text-center">
                <h2 className="text-3xl md:text-4xl font-bold text-neutral-900 mb-4">
                  Our Valued Partners and Memberships
                </h2>
                <p className="text-lg text-neutral-600 max-w-3xl mx-auto">
                  These organizations and individuals support our mission to create positive change for children and communities.
                </p>
              </div>

              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 mb-16">
                {donors.map((donor, index) => {
                  // Prioritize high quality images
                  const imageUrl = donor.image_large || donor.image_medium || donor.image;
                  
                  return (
                    <div
                      key={donor.id || index}
                      className="group relative bg-white rounded-xl p-8 shadow-md hover:shadow-xl transition-all duration-500 transform hover:-translate-y-2 border border-neutral-100 flex items-center justify-center min-h-[240px]"
                    >
                      {/* Gradient Background on Hover */}
                      <div className="absolute inset-0 bg-gradient-to-br from-primary-500/5 to-primary-600/5 opacity-0 group-hover:opacity-100 rounded-xl transition-opacity duration-500" />
                      
                      {/* Logo Container */}
                      <div className="relative w-full h-full flex items-center justify-center">
                        <div className="relative w-full h-40 md:h-48 flex items-center justify-center">
                          {imageUrl ? (
                            <img
                              src={imageUrl}
                              alt={donor.name}
                              className="w-full h-full object-contain transition-transform duration-500 group-hover:scale-105"
                              loading="lazy"
                              style={{ imageRendering: 'auto' }}
                            />
                          ) : (
                            <div className="text-neutral-400 text-sm font-semibold text-center">
                              {donor.name}
                            </div>
                          )}
                        </div>
                      </div>
                      
                      {/* Hover Border */}
                      <div className="absolute inset-0 rounded-xl border-2 border-primary-500/0 group-hover:border-primary-500/20 transition-all duration-500" />
                    </div>
                  );
                })}
              </div>
            </>
          ) : !loading && !error ? (
            <div className="text-center py-20">
              <p className="text-xl text-neutral-500 mb-4">No donors available at this time.</p>
              <button
                onClick={fetchDonors}
                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>
          ) : error ? (
            <div className="text-center py-20 text-red-600">
              <p className="text-xl mb-4">Error: {error}</p>
              <button
                onClick={fetchDonors}
                className="inline-flex items-center px-6 py-3 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700"
              >
                Retry
              </button>
            </div>
          ) : null}
        </div>
      </section>

      {/* Become a Donor CTA Section */}
      <section id="become-donor" className={`py-24 bg-gradient-to-br from-primary-600 via-primary-500 to-primary-700 text-white overflow-hidden transition-all duration-1000 delay-200 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
        {/* Animated Background Pattern */}
        <div className="absolute inset-0 opacity-10">
          <div className="absolute inset-0" style={{
            backgroundImage: `radial-gradient(circle at 2px 2px, white 1px, transparent 0)`,
            backgroundSize: '40px 40px'
          }} />
        </div>
        
        {/* Floating Orbs */}
        <div className="absolute top-1/4 left-1/4 w-72 h-72 bg-white/10 rounded-full blur-3xl animate-pulse" />
        <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-white/10 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '1s' }} />
        
        <div className="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="inline-flex items-center gap-2 px-6 py-3 bg-white/20 backdrop-blur-md rounded-full border border-white/30 mb-8">
            <span className="text-2xl">🤝</span>
            <span className="font-semibold">Partner With Us</span>
          </div>
          
          <h2 className="text-4xl md:text-5xl font-bold mb-6">
            Become a Donor
          </h2>
          
          <p className="text-xl md:text-2xl text-white/90 mb-10 max-w-2xl mx-auto leading-relaxed">
            Join us in creating lasting change for children across Afghanistan. Your support makes our work possible.
          </p>
          
          <div className="flex flex-col sm:flex-row gap-6 justify-center items-center">
            <Link href="/donate">
            <Button 
              variant="secondary" 
              size="lg" 
              className="bg-white hover:bg-neutral-100 text-primary-600 transform hover:scale-105 transition-all duration-300 shadow-2xl hover:shadow-3xl px-8 py-4 text-lg font-semibold"
            >
              Donate Now
            </Button>
            </Link>
            <Link href="/contact-us">
            <Button 
              variant="outline" 
              size="lg" 
              className="border-3 border-white text-white hover:bg-white/20 backdrop-blur-sm transform hover:scale-105 transition-all duration-300 px-8 py-4 text-lg font-semibold"
            >
              Contact Us
            </Button>
            </Link>
          </div>
          
          {/* Trust Indicators */}
          <div className="mt-12 pt-8 border-t border-white/20 flex flex-wrap justify-center gap-8 text-white/80 text-sm">
            <div className="flex items-center gap-2">
              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
              </svg>
              <span>Secure Donations</span>
            </div>
            <div className="flex items-center gap-2">
              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
              </svg>
              <span>Transparent Impact</span>
            </div>
            <div className="flex items-center gap-2">
              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
              </svg>
              <span>Tax Deductible</span>
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}