'use client';

/**
 * Trending Services Section — 2 Rows of 4 Cards (8 Services)
 *
 * Fully compliant with @.ai/SKILLS.md & docs/DESIGN.md:
 * - Neutral white/zinc background (bg-white dark:bg-zinc-950 border-b border-zinc-100 dark:border-zinc-900)
 * - Section padding: py-16 md:py-24
 * - Mobile snap-scroll peek carousel (flex overflow-x-auto snap-x snap-mandatory hide-scrollbar)
 * - Typography: Headings text-zinc-900 dark:text-white font-bold tracking-tight, Subtext text-zinc-500 dark:text-zinc-400
 */

import React from 'react';
import Link from 'next/link';
import { ArrowRight } from 'lucide-react';
import { ServiceCard } from '@/components/ServiceCard';
import { formatDuration } from '@/lib/utils';
import type { Service } from '@shinecode/api-client/types';

export interface TrendingServicesProps {
  services?: Service[];
  locale?: string;
}

export function TrendingServices({
  services = [],
  locale = 'en',
}: TrendingServicesProps) {
  const isAr = locale === 'ar';

  const displayServices = services.map((s) => {
    let img = 'https://images.unsplash.com/photo-1632345031435-8727f6897d53?w=600&auto=format&fit=crop&q=85';
    if (Array.isArray(s.attchments) && s.attchments.length > 0) {
      const first = s.attchments[0];
      img = typeof first === 'string' ? first : (first?.url || img);
    } else if (s.provider_image) {
      img = s.provider_image;
    }

    const rawRating = Number(s.total_rating ?? s.rating ?? 0);
    const rating = rawRating > 0 ? rawRating : 5.0;
    const reviewCount = Number(s.total_review ?? s.review_count ?? 0);
    const formattedDuration = formatDuration(s.duration, locale);

    return {
      id: s.id,
      slug: s.slug,
      name: s.name,
      price: s.discount_price ?? s.price,
      originalPrice: s.discount_price ? s.price : (s.discount ? s.price : undefined),
      discount: s.discount ?? undefined,
      image: img,
      description: s.description || (isAr ? 'خدمة تجميل فاخرة في منزلك' : 'Premium at-home beauty treatment delivered to your door.'),
      rating: rating,
      reviewCount: reviewCount,
      formattedDuration: formattedDuration || (isAr ? '30 دقيقة' : '30 mins'),
      isFeatured: Boolean(s.is_featured),
    };
  });

  return (
    <section id="trending-services" className="py-16 md:py-24 bg-white dark:bg-zinc-950 border-b border-zinc-100 dark:border-zinc-900 transition-colors duration-200">
      <div className="container mx-auto px-4 lg:px-8">
        
        {/* ── 1. Section Header ── */}
        <div className="flex items-end justify-between mb-8 md:mb-10">
          <div>
            <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-zinc-900 dark:text-white tracking-tight">
              {isAr ? 'خدمات التجميل الأكثر طلباً.' : 'Trending right now.'}
            </h2>
            <p className="text-sm text-zinc-500 dark:text-zinc-400 mt-1">
              {isAr ? 'العلاجات المنزلية الأكثر حجزاً في دبي اليوم' : "Dubai's most booked at-home treatments today."}
            </p>
          </div>

          <Link
            href={`/${locale}/services`}
            className="group inline-flex items-center gap-1.5 text-xs sm:text-sm font-semibold text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors pb-0.5"
          >
            <span>{isAr ? 'عرض الكل' : 'View All'}</span>
            <ArrowRight className="w-3.5 h-3.5 sm:w-4 sm:h-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
          </Link>
        </div>

        {/* ── 2. Cards Track: Native Swipe Peek on Mobile / 4-Col Grid on Desktop ── */}
        <div className="flex overflow-x-auto snap-x snap-mandatory gap-4 pb-6 -mx-4 px-4 hide-scrollbar md:grid md:grid-cols-4 md:overflow-visible md:mx-0 md:px-0">
          {displayServices.map((service) => (
            <div
              key={service.id}
              className="w-[85vw] max-w-[300px] sm:max-w-[320px] flex-shrink-0 snap-start md:w-full md:max-w-none"
            >
              <ServiceCard
                id={service.id}
                slug={service.slug}
                name={service.name}
                price={service.price}
                originalPrice={service.originalPrice}
                discount={service.discount}
                image={service.image}
                description={service.description}
                rating={service.rating}
                reviewCount={service.reviewCount}
                formattedDuration={service.formattedDuration}
                isFeatured={service.isFeatured}
                locale={locale}
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

export default TrendingServices;