// Updated TraumaTestimonials component - No left panel, with breadcrumb

'use client'
import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { ChevronRight } from 'lucide-react';
import testimonialService, { Testimonial } from '../../services/testimonialService';

interface TraumaTestimonialsProps {
  testimonialId?: string;
}

export default function TraumaTestimonials({ testimonialId }: TraumaTestimonialsProps) {
  const [activeIndex, setActiveIndex] = useState(0);
  const [testimonials, setTestimonials] = useState<Testimonial[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

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

  // Set active index when testimonialId changes
  useEffect(() => {
    if (testimonialId && testimonials.length > 0) {
      const index = testimonials.findIndex(t => t.id.toString() === testimonialId);
      if (index !== -1) {
        setActiveIndex(index);
      }
    }
  }, [testimonialId, testimonials]);

  const fetchTestimonials = async () => {
    try {
      setLoading(true);
      setError(null);
      const data = await testimonialService.getActiveTestimonials();
      setTestimonials(data);
    } catch (err) {
      console.error('Error fetching testimonials:', err);
      setError('Failed to load testimonials. Please try again later.');
    } finally {
      setLoading(false);
    }
  };

  const nextTestimonial = () => {
    if (activeIndex < testimonials.length - 1) {
      const nextIndex = activeIndex + 1;
      setActiveIndex(nextIndex);
      // Update URL without page reload
      window.history.pushState({}, '', `/testimonials/${testimonials[nextIndex].id}`);
    }
  };

  const prevTestimonial = () => {
    if (activeIndex > 0) {
      const prevIndex = activeIndex - 1;
      setActiveIndex(prevIndex);
      // Update URL without page reload
      window.history.pushState({}, '', `/testimonials/${testimonials[prevIndex].id}`);
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-white flex items-center justify-center">
        <div className="text-center">
          <div className="inline-block animate-spin rounded-full h-12 w-12 border-3 border-gray-200 border-t-transparent" style={{ borderTopColor: '#012068' }}></div>
        </div>
      </div>
    );
  }

  if (error || testimonials.length === 0) {
    return (
      <div className="min-h-screen bg-white flex items-center justify-center">
        <p className="text-gray-600">{error || 'No testimonials available.'}</p>
      </div>
    );
  }

  const current = testimonials[activeIndex];

  return (
    <div className="bg-white">
      {/* Breadcrumb Section */}
      <section className="py-4" style={{ backgroundColor: '#f4f4f4' }}>
        <div className="max-w-7xl mx-auto px-6 sm:px-8 md:px-6 lg:px-6 xl:px-6">
          <nav className="flex items-center space-x-2 text-sm">
            <Link 
              href="/" 
              className="hover:opacity-70 transition-opacity duration-200"
              style={{ color: '#012068' }}
            >
              Home
            </Link>
            <ChevronRight className="w-4 h-4" style={{ color: '#012068' }} />
            <Link 
              href="/testimonials" 
              className="hover:opacity-70 transition-opacity duration-200"
              style={{ color: '#012068' }}
            >
              Testimonials
            </Link>
            <ChevronRight className="w-4 h-4" style={{ color: '#012068' }} />
            <span className="font-medium" style={{ color: '#e64838' }}>
              {current.name}
            </span>
          </nav>
        </div>
      </section>

      {/* Top Section */}
      <div className="border-b border-gray-100">
        <div className="max-w-7xl mx-auto px-6 sm:px-8 md:px-6 lg:px-6 xl:px-6 py-12">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl md:text-3xl font-bold" style={{ color: '#012068' }}>
                Patient Stories
              </h1>
              <p className="mt-2 text-xs" style={{ color: '#333' }}>Stories of hope and recovery</p>
            </div>
            <a
              href="https://givecmc.org/trauma-centre/"
              target="_blank"
              rel="noopener noreferrer"
              className="hidden md:inline-block px-8 py-3 text-sm font-medium text-white hover:opacity-90 transition-opacity"
              style={{ backgroundColor: '#e64838' }}
            >
              Donate Now
            </a>
          </div>
        </div>
      </div>

      {/* Main Content - Single Column */}
      <div className="max-w-5xl mx-auto px-6 sm:px-8 md:px-6 lg:px-6 xl:px-6 py-12">
        {/* Category Badge */}
        <div className="inline-block px-3 py-1 text-xs font-medium mb-8 rounded-full" 
             style={{ 
               backgroundColor: 'rgba(230, 72, 56, 0.08)',
               color: '#e64838' 
             }}>
          {current.category}
        </div>

        {/* Title */}
        <h2 className="text-2xl md:text-3xl font-bold mb-4" style={{ color: '#012068' }}>
          {current.name}, {current.age}
        </h2>
        
        <p className="text-base leading-relaxed mb-12" style={{ color: '#666' }}>
          {current.title}
        </p>

        {/* Content Sections */}
        <div className="space-y-12">
          <div>
            <div className="flex items-center gap-2 mb-4">
              <div className="w-8 h-px" style={{ backgroundColor: '#e64838' }}></div>
              <h3 className="text-sm font-semibold tracking-widest" style={{ color: '#012068' }}>
                THE JOURNEY
              </h3>
            </div>
            <p className="text-base leading-relaxed" style={{ color: '#333' }}>
              {current.story}
            </p>
          </div>

          <div>
            <div className="flex items-center gap-2 mb-4">
              <div className="w-8 h-px" style={{ backgroundColor: '#e64838' }}></div>
              <h3 className="text-sm font-semibold tracking-widest" style={{ color: '#012068' }}>
                THE OUTCOME
              </h3>
            </div>
            <p className="text-base leading-relaxed" style={{ color: '#333' }}>
              {current.outcome}
            </p>
          </div>

          <div className="bg-gray-50 p-8 border-l-4" style={{ borderColor: '#e64838' }}>
            <div className="flex items-center gap-2 mb-4">
              <div className="w-8 h-px" style={{ backgroundColor: '#e64838' }}></div>
              <h3 className="text-sm font-semibold tracking-widest" style={{ color: '#012068' }}>
                COMMUNITY IMPACT
              </h3>
            </div>
            <p className="text-base leading-relaxed" style={{ color: '#333' }}>
              {current.impact}
            </p>
          </div>
        </div>

        {/* Navigation */}
        <div className="flex items-center justify-between mt-16 pt-8 border-t border-gray-100">
          <button
            onClick={prevTestimonial}
            disabled={activeIndex === 0}
            className="flex items-center gap-2 text-sm font-medium disabled:opacity-30 disabled:cursor-not-allowed hover:opacity-70 transition-opacity"
            style={{ color: '#012068' }}
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
            Previous Story
          </button>

          <div className="text-sm" style={{ color: '#666' }}>
            {activeIndex + 1} of {testimonials.length}
          </div>

          <button
            onClick={nextTestimonial}
            disabled={activeIndex === testimonials.length - 1}
            className="flex items-center gap-2 text-sm font-medium disabled:opacity-30 disabled:cursor-not-allowed hover:opacity-70 transition-opacity"
            style={{ color: '#012068' }}
          >
            Next Story
            <svg className="w-5 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>
          </button>
        </div>

        {/* Back to All Stories Link */}
        <div className="mt-8 text-center">
          <Link
            href="/testimonials"
            className="inline-flex items-center gap-2 text-sm font-medium hover:opacity-70 transition-opacity"
            style={{ color: '#012068' }}
          >
            <svg className="w-4 h-4" 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 All Stories
          </Link>
        </div>
      </div>

      {/* Bottom CTA */}
      <div className="border-t border-gray-100 bg-gray-50">
        <div className="max-w-7xl mx-auto px-6 sm:px-8 md:px-6 lg:px-6 xl:px-6 py-12">
          <div className="flex flex-col md:flex-row items-center justify-between gap-6">
            <div>
              <h3 className="text-xl font-semibold mb-2" style={{ color: '#012068' }}>
                Support Emergency Trauma Care
              </h3>
              <p className="text-sm leading-relaxed" style={{ color: '#333' }}>
                Your donation ensures trauma victims receive immediate, life-saving treatment.
              </p>
            </div>
            <a
              href="https://givecmc.org/trauma-centre/"
              target="_blank"
              rel="noopener noreferrer"
              className="px-8 py-3 text-sm font-medium text-white hover:opacity-90 transition-opacity whitespace-nowrap"
              style={{ backgroundColor: '#e64838' }}
            >
              Donate Now
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}