"use client";

import React from "react";
import type { Lang } from "@/lib/config";

/**
 * Client logo/partner data structure
 */
export interface ClientLogo {
  id: string;
  name_en: string;
  name_ar: string;
  logo?: string; // Optional image path
  category?:
    | "healthcare"
    | "hospitality"
    | "retail"
    | "government"
    | "enterprise";
}

/**
 * Default client logos - placeholder data that can be replaced with real logos
 */
export const DEFAULT_CLIENT_LOGOS: ClientLogo[] = [
  {
    id: "client-1",
    name_en: "Gulf Medical Center",
    name_ar: "مركز الخليج الطبي",
    category: "healthcare",
  },
  {
    id: "client-2",
    name_en: "Al Noor Clinics",
    name_ar: "عيادات النور",
    category: "healthcare",
  },
  {
    id: "client-3",
    name_en: "Doha Dental Group",
    name_ar: "مجموعة دوحة لطب الأسنان",
    category: "healthcare",
  },
  {
    id: "client-4",
    name_en: "Elite Wellness Spa",
    name_ar: "إليت ويلنس سبا",
    category: "hospitality",
  },
  {
    id: "client-5",
    name_en: "Qatar Dining Collection",
    name_ar: "مجموعة قطر للمطاعم",
    category: "hospitality",
  },
  {
    id: "client-6",
    name_en: "Riyadh Beauty Centers",
    name_ar: "مراكز الرياض للتجميل",
    category: "hospitality",
  },
  {
    id: "client-7",
    name_en: "Gulf Property Management",
    name_ar: "الخليج لإدارة العقارات",
    category: "enterprise",
  },
  {
    id: "client-8",
    name_en: "Al Jazeera Fitness",
    name_ar: "الجزيرة للياقة",
    category: "hospitality",
  },
];

/**
 * Trust badges/certifications
 */
export interface TrustBadge {
  id: string;
  name: string;
  description_en: string;
  description_ar: string;
  icon: string;
}

export const DEFAULT_TRUST_BADGES: TrustBadge[] = [
  {
    id: "badge-whatsapp",
    name: "WhatsApp Business",
    description_en: "Official Partner",
    description_ar: "شريك رسمي",
    icon: "💬",
  },
  {
    id: "badge-security",
    name: "SOC 2",
    description_en: "Type II Certified",
    description_ar: "معتمد من النوع الثاني",
    icon: "🛡️",
  },
  {
    id: "badge-gdpr",
    name: "GDPR",
    description_en: "Compliant",
    description_ar: "متوافق",
    icon: "🇪🇺",
  },
  {
    id: "badge-aws",
    name: "AWS",
    description_en: "GCC Hosted",
    description_ar: "مستضاف في الخليج",
    icon: "☁️",
  },
  {
    id: "badge-uptime",
    name: "99.9%",
    description_en: "Uptime SLA",
    description_ar: "ضمان وقت التشغيل",
    icon: "✅",
  },
  {
    id: "badge-support",
    name: "24/7",
    description_en: "Arabic Support",
    description_ar: "دعم عربي",
    icon: "🌙",
  },
];

interface ClientLogosProps {
  lang: Lang;
  logos?: ClientLogo[];
  variant?: "default" | "marquee" | "grid" | "minimal";
  showNames?: boolean;
  className?: string;
  title?: string;
  filterByCategory?: ClientLogo["category"];
}

interface TrustBadgesProps {
  lang: Lang;
  badges?: TrustBadge[];
  variant?: "default" | "compact" | "inline";
  className?: string;
  title?: string;
}

/**
 * ClientLogos Component
 *
 * Displays client logos with multiple variants:
 * - default: Grid layout with logo placeholders
 * - marquee: Animated scrolling logos
 * - grid: Simple grid without animation
 * - minimal: Just logos, no container styling
 *
 * Supports RTL and bilingual content
 */
export function ClientLogos({
  lang,
  logos = DEFAULT_CLIENT_LOGOS,
  variant = "default",
  showNames = false,
  className = "",
  title,
  filterByCategory,
}: ClientLogosProps) {
  const isRTL = lang === "ar";

  // Filter logos by category if specified
  const filteredLogos = filterByCategory
    ? logos.filter((l) => l.category === filterByCategory)
    : logos;

  const defaultTitle = isRTL
    ? "يثق بنا الرواد في الخليج"
    : "Trusted by GCC Leaders";
  const displayTitle = title || defaultTitle;

  const renderLogo = (logo: ClientLogo) => {
    const name = isRTL ? logo.name_ar : logo.name_en;

    return (
      <div
        key={logo.id}
        className="group flex flex-col items-center justify-center p-4"
      >
        {/* Logo Placeholder - Replace with actual images when available */}
        <div className="w-24 h-12 md:w-32 md:h-16 flex items-center justify-center bg-slate-100 dark:bg-slate-800 rounded-lg group-hover:bg-brand-green/10 dark:group-hover:bg-brand-green/20 transition-colors">
          <span className="text-slate-400 dark:text-slate-500 group-hover:text-brand-green font-semibold text-xs md:text-sm text-center px-2">
            {name}
          </span>
        </div>
        {showNames && (
          <span className="mt-2 text-xs text-slate-500 dark:text-slate-400">
            {name}
          </span>
        )}
      </div>
    );
  };

  if (variant === "marquee") {
    return (
      <section className={`py-8 overflow-hidden ${className}`}>
        {displayTitle && (
          <p className="text-center text-sm text-slate-500 dark:text-slate-400 mb-6">
            {displayTitle}
          </p>
        )}
        <div className="relative">
          <div className="flex animate-marquee gap-8">
            {[...filteredLogos, ...filteredLogos].map((logo, index) => (
              <div key={`${logo.id}-${index}`} className="flex-shrink-0">
                {renderLogo(logo)}
              </div>
            ))}
          </div>
        </div>
        <style jsx>{`
          @keyframes marquee {
            0% {
              transform: translateX(0);
            }
            100% {
              transform: translateX(-50%);
            }
          }
          .animate-marquee {
            animation: marquee 30s linear infinite;
          }
          .animate-marquee:hover {
            animation-play-state: paused;
          }
        `}</style>
      </section>
    );
  }

  if (variant === "minimal") {
    return (
      <div
        className={`flex flex-wrap justify-center items-center gap-6 ${className}`}
      >
        {filteredLogos.map(renderLogo)}
      </div>
    );
  }

  return (
    <section
      className={`py-12 md:py-16 bg-slate-50 dark:bg-slate-900/50 ${className}`}
      dir={isRTL ? "rtl" : "ltr"}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {displayTitle && (
          <p className="text-center text-sm font-medium text-slate-500 dark:text-slate-400 mb-8 uppercase tracking-wider">
            {displayTitle}
          </p>
        )}
        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4">
          {filteredLogos.map(renderLogo)}
        </div>
      </div>
    </section>
  );
}

/**
 * TrustBadges Component
 *
 * Displays security certifications and trust indicators:
 * - default: Card grid with icons
 * - compact: Smaller badges in a row
 * - inline: Single line with separators
 */
export function TrustBadges({
  lang,
  badges = DEFAULT_TRUST_BADGES,
  variant = "default",
  className = "",
  title,
}: TrustBadgesProps) {
  const isRTL = lang === "ar";

  const defaultTitle = isRTL ? "أمان وموثوقية مضمونة" : "Trusted & Secure";
  const displayTitle = title || defaultTitle;

  if (variant === "inline") {
    return (
      <div
        className={`flex flex-wrap justify-center items-center gap-4 md:gap-6 ${className}`}
        dir={isRTL ? "rtl" : "ltr"}
      >
        {badges.map((badge, index) => (
          <React.Fragment key={badge.id}>
            <div className="flex items-center gap-2">
              <span className="text-lg">{badge.icon}</span>
              <span className="text-sm font-medium text-slate-600 dark:text-slate-400">
                {badge.name}
              </span>
            </div>
            {index < badges.length - 1 && (
              <span className="hidden md:block text-slate-300 dark:text-slate-600">
                |
              </span>
            )}
          </React.Fragment>
        ))}
      </div>
    );
  }

  if (variant === "compact") {
    return (
      <section className={`py-8 ${className}`} dir={isRTL ? "rtl" : "ltr"}>
        <div className="max-w-7xl mx-auto px-4">
          {displayTitle && (
            <p className="text-center text-xs text-slate-500 dark:text-slate-400 mb-4 uppercase tracking-wider">
              {displayTitle}
            </p>
          )}
          <div className="flex flex-wrap justify-center gap-3">
            {badges.map((badge) => (
              <div
                key={badge.id}
                className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-slate-800 rounded-full border border-slate-200 dark:border-slate-700"
              >
                <span className="text-base">{badge.icon}</span>
                <span className="text-sm font-medium text-slate-700 dark:text-slate-300">
                  {badge.name}
                </span>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  return (
    <section
      className={`py-12 md:py-16 ${className}`}
      dir={isRTL ? "rtl" : "ltr"}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {displayTitle && (
          <p className="text-center text-sm font-medium text-slate-500 dark:text-slate-400 mb-8 uppercase tracking-wider">
            {displayTitle}
          </p>
        )}
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
          {badges.map((badge) => (
            <div
              key={badge.id}
              className="group bg-white dark:bg-slate-800 p-4 rounded-xl border border-slate-200 dark:border-slate-700 text-center hover:border-brand-green/30 dark:hover:border-brand-green/30 transition-colors"
            >
              <span className="block text-2xl mb-2">{badge.icon}</span>
              <div className="font-semibold text-slate-900 dark:text-white text-sm">
                {badge.name}
              </div>
              <div className="text-xs text-slate-500 dark:text-slate-400 mt-1">
                {isRTL ? badge.description_ar : badge.description_en}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/**
 * Combined Social Proof Section
 * Combines testimonials preview + client logos + trust badges
 */
export function SocialProofSection({
  lang,
  className = "",
}: {
  lang: Lang;
  className?: string;
}) {
  const isRTL = lang === "ar";

  return (
    <section
      className={`py-16 md:py-24 bg-slate-50 dark:bg-slate-900 ${className}`}
      dir={isRTL ? "rtl" : "ltr"}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 dark:text-white mb-4">
            {isRTL
              ? "موثوق من قبل الأعمال الرائدة في الخليج"
              : "Trusted by Leading GCC Businesses"}
          </h2>
          <p className="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
            {isRTL
              ? "انضم إلى مئات العيادات والمطاعم والشركات التي تثق بموعدي"
              : "Join hundreds of clinics, restaurants, and businesses that trust Mawidi"}
          </p>
        </div>

        {/* Stats Row */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
          {[
            { value: "500+", label: isRTL ? "شركة" : "Businesses" },
            { value: "1M+", label: isRTL ? "موعد" : "Appointments" },
            {
              value: "38%",
              label: isRTL ? "تقليل عدم الحضور" : "No-show Reduction",
            },
            { value: "<10s", label: isRTL ? "وقت الرد" : "Response Time" },
          ].map((stat) => (
            <div
              key={stat.label}
              className="text-center p-6 bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700"
            >
              <div className="text-3xl md:text-4xl font-bold text-brand-green mb-1">
                {stat.value}
              </div>
              <div className="text-sm text-slate-600 dark:text-slate-400">
                {stat.label}
              </div>
            </div>
          ))}
        </div>

        {/* Trust Badges */}
        <TrustBadges lang={lang} variant="compact" title="" />
      </div>
    </section>
  );
}

export default ClientLogos;