'use client'
import React, { useState, useEffect } from 'react';
import testimonialService, { Testimonial } from '@/services/testimonialService';

export default function PatientTestimonialCarousel() {
  const [testimonials, setTestimonials] = useState<Testimonial[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // Fetch testimonials on component mount
  useEffect(() => {
    fetchTestimonials();
  }, []);

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

  // Loading state
  if (loading) {
    return (
      <div className="py-12 px-6 sm:px-8 md:px-6 lg:px-6 xl:px-6 bg-white max-w-7xl mx-auto">
        <div className="text-center py-20">
          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2" style={{ borderColor: '#012068' }}></div>
          <p className="mt-4 text-gray-600">Loading testimonials...</p>
        </div>
      </div>
    );
  }

  // Error state
  if (error) {
    return (
      <div className="py-12 px-6 sm:px-8 md:px-6 lg:px-6 xl:px-6 bg-white max-w-7xl mx-auto">
        <div className="flex justify-between items-center mb-8">
          <h2 className="text-2xl md:text-3xl font-bold" style={{ color: '#012068' }}>
            Patient Testimonials
          </h2>
        </div>
        <div className="text-center py-20">
          <p className="text-gray-600 mb-4">{error}</p>
          <button 
            onClick={fetchTestimonials}
            className="px-6 py-2 text-sm rounded-lg font-medium text-white"
            style={{ backgroundColor: '#012068' }}
          >
            Try Again
          </button>
        </div>
      </div>
    );
  }

  // Empty state
  if (testimonials.length === 0) {
    return (
      <div className="py-12 px-6 sm:px-8 md:px-6 lg:px-6 xl:px-6 bg-white max-w-7xl mx-auto">
        <div className="flex justify-between items-center mb-8">
          <h2 className="text-2xl md:text-3xl font-bold" style={{ color: '#012068' }}>
            Patient Testimonials
          </h2>
        </div>
        <div className="text-center py-8">
          <p className="text-gray-500">No testimonials available.</p>
        </div>
      </div>
    );
  }

  return (
    <div className="py-12 px-6 sm:px-8 md:px-6 lg:px-6 xl:px-6 bg-white max-w-7xl mx-auto">
      {/* Section Header */}
      <div className="flex justify-between items-center mb-8">
        <h2 className="text-2xl md:text-3xl font-bold" style={{ color: '#012068' }}>
          Patient Testimonials
        </h2>
      </div>

      {/* Testimonial Cards Grid - Fixed to show only 3 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
        {testimonials.map((testimonial) => (
          <div
            key={testimonial.id}
            className="cursor-pointer"
            onClick={() => window.location.href = `/testimonials/${testimonial.id}`}
          >
            {/* Card */}
            <div className="rounded-lg overflow-hidden shadow-sm border border-gray-200 bg-white hover:shadow-md transition-shadow duration-200">
              {/* Image/Story Content */}
              <div 
                className="relative h-48 md:h-56 overflow-hidden"
                style={{ backgroundColor: '#f4f4f4' }}
              >
                <div className="w-full h-full flex items-center justify-center p-6">
                  <div className="text-center">
                    <svg
                      className="w-16 h-16 mx-auto mb-3 opacity-30"
                      style={{ color: '#012068' }}
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={1.5}
                        d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                      />
                    </svg>
                    <p className="text-xs leading-relaxed line-clamp-4 px-2" style={{ color: '#333' }}>
                      {testimonial.story}
                    </p>
                  </div>
                </div>
              </div>

              {/* Card Content */}
              <div className="p-4 md:p-5">
                {/* Name and Age - As Heading */}
                <h3 className="text-base md:text-lg font-semibold mb-2" style={{ color: '#012068' }}>
                  {testimonial.name}{testimonial.age ? `, ${testimonial.age}` : ''}
                </h3>

                {/* Category - As Date */}
                <p className="text-xs mb-3" style={{ color: '#e64838' }}>
                  {testimonial.category || 'Patient Story'}
                </p>
              </div>
            </div>

            {/* Title Outside Card */}
            <div className="mt-4">
              <h4 className="text-sm font-medium leading-tight" style={{ color: '#012068' }}>
                {testimonial.title || 'A Journey of Hope and Recovery'}
              </h4>
            </div>
          </div>
        ))}
      </div>

      {/* View More Button */}
      <div className="flex justify-center mt-8">
        <button
          className="px-6 py-2 rounded-lg text-sm font-medium text-white hover:opacity-90 transition-opacity duration-200"
          style={{ backgroundColor: '#e64838' }}
          onClick={() => window.location.href = '/testimonials'}
        >
          View more
        </button>
      </div>
    </div>
  );
}