'use client';

import React, { useState, useEffect } from 'react';
import { useLanguage } from '@/context/LanguageContext';

// Import Swiper
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';
import { Pagination, Autoplay } from 'swiper/modules';

interface TestimonialData {
  id: number;
  name: string;
  text: string;
  rating: number;
  photo: string | null;
  since: string | null;
  isActive: boolean;
}

export default function Testimonial() {
  const { t } = useLanguage();
  const [testimonials, setTestimonials] = useState<TestimonialData[]>([]);

  useEffect(() => {
    const fetchTestimonials = async () => {
      try {
        const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5000';
        const res = await fetch(`${apiUrl}/api/testimonials`);
        if (res.ok) {
          const data = await res.json();
          setTestimonials(data);
        }
      } catch (e) {
        console.log('API not available, testimonial section will be hidden');
      }
    };
    fetchTestimonials();
  }, []);

  if (testimonials.length === 0) return null;

  return (
    <section className="py-16 md:py-20 bg-ivory">
      <div className="container-custom">
        <div className="text-center mb-12">
          <h2 className="font-cormorant text-3xl md:text-5xl text-espresso font-bold mb-4">{t('testimonial.title')}</h2>
          <div className="w-12 h-0.5 bg-gold mx-auto mb-4"></div>
          <p className="text-grey-dark">{t('testimonial.subtitle')}</p>
        </div>

        <Swiper
          modules={[Pagination, Autoplay]}
          spaceBetween={24}
          slidesPerView={1}
          pagination={{ clickable: true, el: '.swiper-pagination-testimonial' }}
          autoplay={{ delay: 5000, disableOnInteraction: false }}
          breakpoints={{
            640: { slidesPerView: 2, spaceBetween: 24 },
            1024: { slidesPerView: 4, spaceBetween: 24 },
          }}
          className="testimonial-swiper pb-12"
        >
          {testimonials.filter(t => t.isActive).map((testimonial) => (
            <SwiperSlide key={testimonial.id}>
              <div className="bg-white rounded-xl p-6 border border-blush hover:shadow-lg transition-all duration-300 h-full flex flex-col">
                {/* Stars */}
                <div className="flex gap-1 mb-4">
                  {Array.from({ length: 5 }).map((_, i) => (
                    <svg key={i} className={`w-4 h-4 ${i < testimonial.rating ? 'text-gold' : 'text-grey/30'}`} fill="currentColor" viewBox="0 0 20 20">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                  ))}
                </div>

                {/* Text */}
                <p className="text-sm text-grey-dark italic leading-relaxed mb-6 flex-1">&ldquo;{testimonial.text}&rdquo;</p>

                {/* Author */}
                <div className="flex items-center gap-3 pt-4 border-t border-blush">
                  <img
                    src={testimonial.photo || `https://ui-avatars.com/api/?name=${encodeURIComponent(testimonial.name)}&background=C9A24B&color=fff`}
                    alt={testimonial.name}
                    className="w-10 h-10 rounded-full object-cover"
                  />
                  <div>
                    <p className="font-semibold text-espresso text-sm">{testimonial.name}</p>
                    {testimonial.since && <p className="text-xs text-grey">{testimonial.since}</p>}
                  </div>
                </div>
              </div>
            </SwiperSlide>
          ))}
        </Swiper>

        {/* Pagination */}
        <div className="swiper-pagination-testimonial text-center mt-4"></div>
      </div>
    </section>
  );
}