"use client";

import React from "react";
import { Star, Quote } from "lucide-react";
import type { Lang } from "@/lib/config";

/**
 * Testimonial data structure for bilingual support
 */
export interface Testimonial {
  id: string;
  name_en: string;
  name_ar: string;
  role_en: string;
  role_ar: string;
  company_en: string;
  company_ar: string;
  quote_en: string;
  quote_ar: string;
  avatar?: string;
  rating?: number; // 1-5 stars
  industry?: string;
}

/**
 * Default testimonials data - can be replaced with real content
 */
export const DEFAULT_TESTIMONIALS: Testimonial[] = [
  {
    id: "testimonial-1",
    name_en: "Dr. Layla Al-Harbi",
    name_ar: "د. ليلى الحربي",
    role_en: "Medical Director",
    role_ar: "المديرة الطبية",
    company_en: "Riyadh Aesthetics",
    company_ar: "رياض أستيتيكس",
    quote_en:
      "Mawidi gave us real bilingual reception without hiring six extra coordinators. Deposits alone paid for the pilot in week one.",
    quote_ar:
      "موعدي وفر لنا استقبال ثنائي اللغة دون توظيف ست موظفات إضافيات. العربونات وحدها غطت تكلفة التجربة في الأسبوع الأول.",
    rating: 5,
    industry: "health-care",
  },
  {
    id: "testimonial-2",
    name_en: "Sarah Al-Kuwari",
    name_ar: "سارة الكواري",
    role_en: "Operations Lead",
    role_ar: "قائدة العمليات",
    company_en: "Doha Laser Group",
    company_ar: "مجموعة دوحة ليزر",
    quote_en:
      "Our Friday evening WhatsApps used to pile up. Now the Mawidi concierge clears them by midnight with polite follow-ups.",
    quote_ar:
      "رسائل مساء الجمعة كانت تتكدس. الآن فريق موعدي ينهيها قبل منتصف الليل بمتابعة مهذبة.",
    rating: 5,
    industry: "beauty-wellness",
  },
  {
    id: "testimonial-3",
    name_en: "Ahmed Al-Hassan",
    name_ar: "أحمد الحسن",
    role_en: "CEO",
    role_ar: "الرئيس التنفيذي",
    company_en: "Gulf Medical Center",
    company_ar: "مركز الخليج الطبي",
    quote_en:
      "Our no-show rate dropped by 47% in just one month. The automated deposit collection transformed our business.",
    quote_ar:
      "انخفضت نسبة عدم الحضور بنسبة 47% في شهر واحد فقط. تحصيل العربون الآلي غيّر أعمالنا.",
    rating: 5,
    industry: "health-care",
  },
  {
    id: "testimonial-4",
    name_en: "Fatima Al-Rashid",
    name_ar: "فاطمة الراشد",
    role_en: "Clinic Owner",
    role_ar: "صاحبة العيادة",
    company_en: "Wellness Medical Group",
    company_ar: "مجموعة ويلنس الطبية",
    quote_en:
      "The voice agent handles 60% of our calls automatically. Our front desk can finally focus on patients in the clinic.",
    quote_ar:
      "الوكيل الصوتي يتعامل مع 60% من مكالماتنا تلقائياً. فريق الاستقبال أصبح يركز على المرضى في العيادة.",
    rating: 5,
    industry: "health-care",
  },
  {
    id: "testimonial-5",
    name_en: "Mohammed Al-Thani",
    name_ar: "محمد الثاني",
    role_en: "General Manager",
    role_ar: "المدير العام",
    company_en: "Qatar Dining Group",
    company_ar: "مجموعة قطر للمطاعم",
    quote_en:
      "Table reservations are up 35% since we started using Mawidi. The Arabic dialect support makes all the difference.",
    quote_ar:
      "حجوزات الطاولات ارتفعت 35% منذ بدأنا باستخدام موعدي. دعم اللهجات العربية يصنع الفرق.",
    rating: 5,
    industry: "food-leisure",
  },
  {
    id: "testimonial-6",
    name_en: "Noura Al-Saud",
    name_ar: "نورة السعود",
    role_en: "Operations Director",
    role_ar: "مديرة العمليات",
    company_en: "Elite Fitness Centers",
    company_ar: "مراكز إليت للياقة",
    quote_en:
      "Members love the instant WhatsApp booking. Membership renewals increased 28% with automated follow-ups.",
    quote_ar:
      "الأعضاء يحبون الحجز الفوري عبر واتساب. تجديد العضويات ارتفع 28% مع المتابعة الآلية.",
    rating: 5,
    industry: "beauty-wellness",
  },
];

interface TestimonialsProps {
  lang: Lang;
  testimonials?: Testimonial[];
  variant?: "default" | "compact" | "featured" | "carousel";
  showRating?: boolean;
  maxItems?: number;
  filterByIndustry?: string;
  className?: string;
  title?: string;
  subtitle?: string;
}

/**
 * Testimonials Component
 *
 * A reusable testimonials section supporting:
 * - Bilingual content (Arabic/English)
 * - Multiple display variants (default grid, compact, featured, carousel)
 * - Star ratings
 * - Industry filtering
 * - Responsive design for mobile/tablet/desktop
 * - RTL support for Arabic
 */
export function Testimonials({
  lang,
  testimonials = DEFAULT_TESTIMONIALS,
  variant = "default",
  showRating = true,
  maxItems,
  filterByIndustry,
  className = "",
  title,
  subtitle,
}: TestimonialsProps) {
  const isRTL = lang === "ar";

  // Filter testimonials by industry if specified
  let filteredTestimonials = filterByIndustry
    ? testimonials.filter((t) => t.industry === filterByIndustry)
    : testimonials;

  // Limit items if maxItems is specified
  if (maxItems) {
    filteredTestimonials = filteredTestimonials.slice(0, maxItems);
  }

  const defaultTitle = isRTL ? "ماذا يقول عملاؤنا" : "What Our Clients Say";
  const defaultSubtitle = isRTL
    ? "تجارب حقيقية من عملاء حققوا نتائج ملموسة مع موعدي"
    : "Real experiences from clients who achieved tangible results with Mawidi";

  const displayTitle = title || defaultTitle;
  const displaySubtitle = subtitle || defaultSubtitle;

  const renderStars = (rating: number) => (
    <div className="flex gap-0.5">
      {[1, 2, 3, 4, 5].map((star) => (
        <Star
          key={star}
          className={`w-4 h-4 ${
            star <= rating
              ? "text-amber-400 fill-amber-400"
              : "text-gray-300 dark:text-gray-600"
          }`}
        />
      ))}
    </div>
  );

  const renderTestimonial = (testimonial: Testimonial, index: number) => {
    const name = isRTL ? testimonial.name_ar : testimonial.name_en;
    const role = isRTL ? testimonial.role_ar : testimonial.role_en;
    const company = isRTL ? testimonial.company_ar : testimonial.company_en;
    const quote = isRTL ? testimonial.quote_ar : testimonial.quote_en;

    if (variant === "compact") {
      return (
        <div
          key={testimonial.id}
          className="group bg-white dark:bg-slate-900 p-5 rounded-xl border border-slate-200 dark:border-slate-800 hover:border-brand-green/30 dark:hover:border-brand-green/30 transition-all duration-300"
        >
          <p className="text-slate-600 dark:text-slate-300 text-sm leading-relaxed mb-4">
            &ldquo;{quote}&rdquo;
          </p>
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-full bg-brand-green/10 flex items-center justify-center text-brand-green font-bold">
              {name.charAt(0)}
            </div>
            <div>
              <div className="font-semibold text-slate-900 dark:text-white text-sm">
                {name}
              </div>
              <div className="text-xs text-slate-500 dark:text-slate-400">
                {role}, {company}
              </div>
            </div>
          </div>
        </div>
      );
    }

    if (variant === "featured" && index === 0) {
      return (
        <div
          key={testimonial.id}
          className="md:col-span-2 bg-brand-green text-white p-8 rounded-2xl relative overflow-hidden"
        >
          <Quote className="absolute top-4 right-4 w-16 h-16 text-white/10" />
          <div className="relative">
            {showRating && testimonial.rating && (
              <div className="mb-4">{renderStars(testimonial.rating)}</div>
            )}
            <p className="text-xl md:text-2xl font-light leading-relaxed mb-6">
              &ldquo;{quote}&rdquo;
            </p>
            <div className="flex items-center gap-4">
              <div className="w-14 h-14 rounded-full bg-white/20 flex items-center justify-center text-white font-bold text-xl">
                {name.charAt(0)}
              </div>
              <div>
                <div className="font-bold text-lg">{name}</div>
                <div className="text-white/80">{role}</div>
                <div className="text-white/60 text-sm">{company}</div>
              </div>
            </div>
          </div>
        </div>
      );
    }

    return (
      <div
        key={testimonial.id}
        className="group bg-white dark:bg-slate-900 p-6 rounded-2xl border border-slate-200 dark:border-slate-800 hover:shadow-lg hover:border-brand-green/30 dark:hover:border-brand-green/30 transition-all duration-300"
      >
        {showRating && testimonial.rating && (
          <div className="mb-4">{renderStars(testimonial.rating)}</div>
        )}
        <p className="text-slate-600 dark:text-slate-300 leading-relaxed mb-6 min-h-[80px]">
          &ldquo;{quote}&rdquo;
        </p>
        <div className="pt-4 border-t border-slate-100 dark:border-slate-800">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-full bg-brand-green/10 flex items-center justify-center text-brand-green font-bold">
              {name.charAt(0)}
            </div>
            <div>
              <div className="font-semibold text-slate-900 dark:text-white">
                {name}
              </div>
              <div className="text-sm text-slate-500 dark:text-slate-400">
                {role}
              </div>
              <div className="text-sm text-brand-green">{company}</div>
            </div>
          </div>
        </div>
      </div>
    );
  };

  const gridClasses = {
    default: "grid md:grid-cols-2 lg:grid-cols-3 gap-6",
    compact: "grid md:grid-cols-2 lg:grid-cols-4 gap-4",
    featured: "grid md:grid-cols-2 lg:grid-cols-3 gap-6",
    carousel: "flex gap-6 overflow-x-auto pb-4 snap-x snap-mandatory",
  };

  return (
    <section
      className={`py-16 md:py-24 ${className}`}
      dir={isRTL ? "rtl" : "ltr"}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className={`mb-12 ${isRTL ? "text-right" : "text-left"}`}>
          <div
            className={`flex items-center gap-4 mb-4 ${isRTL ? "flex-row-reverse" : ""}`}
          >
            <span className="h-px w-12 bg-brand-green" />
            <span className="text-xs font-bold tracking-[0.2em] uppercase text-brand-green">
              {isRTL ? "شهادات العملاء" : "Testimonials"}
            </span>
          </div>
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 dark:text-white mb-4">
            {displayTitle}
          </h2>
          <p className="text-lg text-slate-600 dark:text-slate-400 max-w-2xl">
            {displaySubtitle}
          </p>
        </div>

        {/* Testimonials Grid */}
        <div className={gridClasses[variant]}>
          {filteredTestimonials.map((testimonial, index) =>
            renderTestimonial(testimonial, index),
          )}
        </div>
      </div>
    </section>
  );
}

export default Testimonials;