import { ContactLines } from '@frontend/components/contact/ContactLines';
import { PageBreadcrumb } from '@frontend/components/layout/PageBreadcrumb';
import { useSiteChrome } from '@frontend/lib/site-chrome';
import { Link } from '@inertiajs/react';
import type { PublicActivity } from '@frontend/components/sections/ServiceGrid';

export type PublicActivityDetail = PublicActivity & {
    description: string;
    gallery: string[];
};

type ServiceDetailsProps = {
    service: PublicActivityDetail;
    activities: PublicActivity[];
};

function bodyParagraphs(service: PublicActivityDetail): string[] {
    const body = service.description !== '' ? service.description : service.summary;

    return body
        .split(/\n+/)
        .map((paragraph) => paragraph.trim())
        .filter(Boolean);
}

export function ServiceDetails({ service, activities }: ServiceDetailsProps) {
    const { email, locationSummary, phone, whatsapp } = useSiteChrome();
    const paragraphs = bodyParagraphs(service);
    const showContact = locationSummary !== '' || phone !== '' || email !== '' || whatsapp !== '';

    return (
        <>
            <PageBreadcrumb page="service-detail" title={service.name} parentPage="service" parentHref="/service" />

            <section className="service-single-section pt-100 md-pt-80 pb-100 md-pb-80">
                <div className="container">
                    <div className="row flex-lg-row-reverse">
                        <div className="col-lg-8">
                            <div className="service-single-post">
                                <div className="service-single-media">
                                    <figure className="image-anime">
                                        <img src={service.image} alt={service.name} />
                                    </figure>
                                </div>
                                <div className="service-single-contain">
                                    <div className="service-entry-content">
                                        <h2 className="line-anime">{service.name}</h2>
                                        {paragraphs.map((paragraph) => (
                                            <p key={paragraph}>{paragraph}</p>
                                        ))}
                                        {service.gallery.length > 0 && (
                                            <div className="row gy-4 mb-20">
                                                {service.gallery.map((image, index) => (
                                                    <div className="col-sm-6" key={image}>
                                                        <div className="service-gallery">
                                                            <figure className="image-anime">
                                                                <img src={image} alt={`${service.name} photo ${index + 1}`} />
                                                            </figure>
                                                        </div>
                                                    </div>
                                                ))}
                                            </div>
                                        )}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-4">
                            <div className="widget-sidebar sticky">
                                {activities.length > 0 && (
                                    <div className="widget widget-categories-list">
                                        <div className="widget-title">
                                            <h3 className="line-anime">Activities</h3>
                                        </div>
                                        <div className="widget-content">
                                            <ul className="category-list">
                                                {activities.map((activity) => (
                                                    <li key={activity.slug}>
                                                        <Link href={activity.href} className={activity.slug === service.slug ? 'active' : undefined}>
                                                            <span className="categories-name">{activity.name}</span>
                                                        </Link>
                                                    </li>
                                                ))}
                                            </ul>
                                        </div>
                                    </div>
                                )}
                                {showContact && (
                                    <div className="widget widget-cta">
                                        <div className="widget-title">
                                            <h3 className="line-anime">Needs Any Help?</h3>
                                        </div>
                                        <div className="widget-content">
                                            {locationSummary !== '' && <p>{locationSummary}</p>}
                                            <ContactLines />
                                        </div>
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}