import React from 'react';
import { PhotoWithFallback, Carousel, Button } from '../elements';
import type { Testimonial } from '../../types/api/testimonial';
import { getAvatarUrl } from '../../utils/photo-helpers';
import { ChevronLeft, ChevronRight } from '@untitledui/icons';

interface TestimonialsHomeProps {
    testimonials?: Testimonial[] | null;
    title?: string;
    subtitle?: string;
    viewAllText?: string;
    viewAllHref?: string;
    emptyMessage?: string;
}

export const TestimonialsHome = ({
    testimonials: testimonialsData,
    title = "",
    subtitle = "",
    viewAllText = "View All Testimonials",
    viewAllHref = "/testimonials",
    emptyMessage = "No testimonials available",
}: TestimonialsHomeProps) => {
    const testimonials = Array.isArray(testimonialsData) ? testimonialsData : [];

    return (
        <section className="py-16 md:py-20 lg:py-24 bg-secondary">
            <div className="mx-auto max-w-7xl px-4 md:px-8">
                {/* Section Header - Centered */}
                <div className="mx-auto max-w-3xl text-center mb-12 md:mb-16">
                    <h2 className="font-display text-4xl font-medium text-fg-primary md:text-5xl mb-4">
                        {title}
                    </h2>
                    <p className="font-body text-lg text-secondary leading-normal">
                        {subtitle}
                    </p>
                </div>

                {testimonials.length > 0 ? (
                    <Carousel.Root opts={{ align: "start", loop: true }}>
                        <div className="flex items-center justify-end mb-8">
                            <div className="flex gap-2">
                                <Carousel.PrevTrigger className="rounded-full p-2 border border-secondary hover:bg-primary_hover transition-colors disabled:opacity-30 disabled:cursor-not-allowed">
                                    <ChevronLeft className="w-6 h-6 text-fg-primary" />
                                </Carousel.PrevTrigger>
                                <Carousel.NextTrigger className="rounded-full p-2 border border-secondary hover:bg-primary_hover transition-colors disabled:opacity-30 disabled:cursor-not-allowed">
                                    <ChevronRight className="w-6 h-6 text-fg-primary" />
                                </Carousel.NextTrigger>
                            </div>
                        </div>
                        
                        <Carousel.Content className="-ml-4">
                            {testimonials.map((testimonial, i: number) => {
                                const quote = testimonial.content_markdown?.replace(/[#*\[\]()]/g, '').trim() || '';
                                const reviewerName = testimonial.reviewer_name || '';
                                const username = `@${reviewerName.toLowerCase().replace(/\s+/g, '')}`;
                                const avatarUrl = getAvatarUrl(testimonial.photo_attachments, testimonial.id, reviewerName);
                                const rating = testimonial.rating || 5;
                                const isVerified = true; // Always show verified badge
                                
                                return (
                                    <Carousel.Item key={testimonial.id || i} className="pl-4 md:basis-1/2 lg:basis-1/3">
                                        <div className="bg-white rounded-2xl p-8 flex flex-col shadow-sm" style={{ minHeight: '400px' }}>
                                            <div className="flex gap-1 mb-6">
                                                {Array.from({ length: 5 }).map((_, starIdx) => (
                                                    <svg
                                                        key={starIdx}
                                                        className="w-5 h-5"
                                                        style={{
                                                            fill: starIdx < rating ? "var(--color-text-brand-secondary)" : "none",
                                                            stroke: starIdx < rating ? "none" : "#E5E0D8"
                                                        }}
                                                        strokeWidth="2"
                                                        viewBox="0 0 24 24"
                                                    >
                                                        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
                                                    </svg>
                                                ))}
                                            </div>

                                            <p className="font-body text-base leading-relaxed text-tertiary mb-6 flex-grow">
                                                &quot;{quote}&quot;
                                            </p>

                                            <div className="flex items-center gap-3">
                                                <div className="w-12 h-12 rounded-full overflow-hidden flex-shrink-0">
                                                    <PhotoWithFallback
                                                        photoUrl={avatarUrl}
                                                        photoAlt={reviewerName}
                                                        fallbackId={testimonial.id || i}
                                                        className="w-full h-full object-cover"
                                                    />
                                                </div>
                                                <div className="flex-1">
                                                    <div className="flex items-center gap-1.5">
                                                        <p className="font-body text-sm font-medium text-fg-primary">
                                                            {reviewerName}
                                                        </p>
                                                        {isVerified && (
                                                            <svg className="w-4 h-4 text-fg-primary" viewBox="0 0 20 20" fill="currentColor">
                                                                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clipRule="evenodd" />
                                                            </svg>
                                                        )}
                                                    </div>
                                                    <p className="font-body text-xs" style={{ color: 'var(--color-text-brand-secondary)' }}>{username}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </Carousel.Item>
                                );
                            })}
                        </Carousel.Content>
                    </Carousel.Root>
                ) : (
                    <div className="text-center py-12">
                        <p className="font-body text-base text-tertiary">{emptyMessage}</p>
                    </div>
                )}

                {/* View All Testimonials Button */}
                {testimonials.length > 0 && viewAllText && (
                    <div className="mt-12 text-center">
                        <Button
                            href={viewAllHref}
                            color="primary"
                            size="md"
                        >
                            {viewAllText}
                        </Button>
                    </div>
                )}
            </div>
        </section>
    );
};

import { registerThemeVariant } from '../../lib/component-registry';
registerThemeVariant('testimonials-home', 'barelux', TestimonialsHome);
