import { marketingRoute } from '@frontend/lib/marketing-route';
import type { ServiceDetailPageProps } from '@frontend/types/pages/service-detail';
import { Link } from '@inertiajs/react';

function featureColumns(features: readonly string[]): [readonly string[], readonly string[]] {
    const midpoint = Math.ceil(features.length / 2);

    return [features.slice(0, midpoint), features.slice(midpoint)];
}

function whatsAppHref(phone: string): string {
    const digits = phone.replace(/\D/g, '');

    return digits !== '' ? `https://wa.me/${digits}` : `tel:${phone}`;
}

const serviceDetailCtaContactIconClass = 'service-detail-cta-contact-icon text-white me-2';

export function ServiceDetailMain({ hero, service, sidebar, benefits }: ServiceDetailPageProps) {
    const [leftFeatures, rightFeatures] = featureColumns(service.featureList);

    return (
        <>
            <section
                className="page-title-section top-position1 bg-img cover-background secondary-overlay"
                data-overlay-dark="8"
                data-background={hero.backgroundData}
            >
                <div className="container">
                    <div className="row">
                        <div className="col-md-12 text-center">
                            <h1>{hero.heading}</h1>
                            <ul>
                                <li>
                                    <Link href={marketingRoute('home')}>Home</Link>
                                </li>
                                <li>
                                    <Link href={marketingRoute('services')}>Services</Link>
                                </li>
                                <li>{hero.breadcrumbCurrent}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>

            <section>
                <div className="container">
                    <div className="row mt-n2-9">
                        <div className="col-xl-4 order-2 order-xl-1 mt-2-9">
                            <div className="sidebar me-xxl-1-9">
                                <div className="widget bg-secondary mb-1-9 wow fadeInUp" data-wow-delay="100ms">
                                    <div className="widget-content">
                                        <h2 className="mb-4 h5 text-white">Our Services</h2>
                                        <ul className="category-list list-unstyled mb-0">
                                            {sidebar.services.map((item) => (
                                                <li key={item.slug} className={item.isActive ? 'active' : undefined}>
                                                    <Link href={marketingRoute('services.show', { service: item.slug })}>
                                                        <span>{item.title}</span>
                                                    </Link>
                                                </li>
                                            ))}
                                        </ul>
                                    </div>
                                </div>

                                {service.brochureUrl ? (
                                    <div className="widget bg-secondary mb-1-9 wow fadeInUp" data-wow-delay="100ms">
                                        <div className="widget-content">
                                            <h2 className="mb-4 h5 text-white">Brochures</h2>
                                            {service.summary ? <p className="text-white mb-1-9">{service.summary}</p> : null}
                                            <div className="btn-wrapper">
                                                <a className="dow-btn" href={service.brochureUrl} download>
                                                    Download
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                ) : null}

                                {sidebar.ctaImageUrl ? (
                                    <div className="bg-secondary rounded wow fadeInUp" data-wow-delay="100ms">
                                        <div className="banner-wrapper rounded">
                                            <img src={sidebar.ctaImageUrl} className="rounded-top" alt="" title="" />
                                            <div className="p-2-2 position-relative rounded-bottom bg-secondary text-center">
                                                <div className="icon-boxs bg-primary">
                                                    <i className="ti-headphone-alt fs-1 text-white"></i>
                                                </div>
                                                <h2 className="mb-3 text-white h4">{sidebar.helperTitle}</h2>
                                                <ul className="text-center list-unstyled mb-0">
                                                    {sidebar.helperPhone ? (
                                                        <li className="text-white mb-2">
                                                            <i
                                                                className={`fa-brands fa-whatsapp ${serviceDetailCtaContactIconClass}`}
                                                                aria-hidden
                                                            ></i>
                                                            <a
                                                                href={whatsAppHref(sidebar.helperPhone)}
                                                                className="text-white"
                                                                target="_blank"
                                                                rel="noopener noreferrer"
                                                            >
                                                                {sidebar.helperPhone}
                                                            </a>
                                                        </li>
                                                    ) : null}
                                                    {sidebar.helperEmail ? (
                                                        <li className="text-white">
                                                            <i
                                                                className={`fa fa-envelope-open ${serviceDetailCtaContactIconClass}`}
                                                                aria-hidden
                                                            ></i>
                                                            <a href={`mailto:${sidebar.helperEmail}`} className="text-white">
                                                                {sidebar.helperEmail}
                                                            </a>
                                                        </li>
                                                    ) : null}
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                ) : null}
                            </div>
                        </div>

                        <div className="col-xl-8 mt-2-9 mb-xl-0 order-1 order-xl-2">
                            <div className="image-hover">
                                <img
                                    src={service.coverImageUrl}
                                    className="mb-1-9 rounded wow fadeInUp"
                                    data-wow-delay="100ms"
                                    alt=""
                                    title=""
                                />
                            </div>
                            <div className="wow fadeInUp" data-wow-delay="100ms">
                                <h2 className="mb-3">{service.title}</h2>
                                <p className="mb-1-9">{service.description}</p>

                                {service.featureList.length > 0 ? (
                                    <div className="row mb-1-9">
                                        <div className="col-md-6 wow fadeInUp" data-wow-delay="100ms">
                                            {leftFeatures.map((feature) => (
                                                <div
                                                    key={feature}
                                                    className={`d-flex align-items-center${feature !== leftFeatures[0] ? ' mt-4' : ''}`}
                                                >
                                                    <i className="ti-check display-26 text-primary"></i>
                                                    <span className="ms-3 text-dark fw-bold">{feature}</span>
                                                </div>
                                            ))}
                                        </div>
                                        <div className="col-md-6 wow fadeInUp" data-wow-delay="100ms">
                                            {rightFeatures.map((feature, index) => (
                                                <div
                                                    key={feature}
                                                    className={`d-flex align-items-center${index === 0 ? ' mt-4 mt-md-0' : ' mt-4'}`}
                                                >
                                                    <i className="ti-check display-26 text-primary"></i>
                                                    <span className="ms-3 text-dark fw-bold">{feature}</span>
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                ) : null}

                                {service.gallery.length > 0 ? (
                                    <div className="row mb-2-3 mt-n4">
                                        {service.gallery.map((imageUrl) => (
                                            <div key={imageUrl} className="col-md-4 mt-4 wow fadeInUp image-hover" data-wow-delay="100ms">
                                                <img src={imageUrl} alt="" title="" className="rounded" />
                                            </div>
                                        ))}
                                    </div>
                                ) : null}

                                {benefits.items.length > 0 ? (
                                    <div className="wow fadeInUp" data-wow-delay="100ms">
                                        <h2 className="mb-4">{benefits.title}</h2>
                                        {benefits.summary ? <p className="mb-1-9">{benefits.summary}</p> : null}

                                        <div className="progress-style1 wow fadeInUp" data-wow-delay="100ms">
                                            {benefits.items.map((benefit) => (
                                                <div key={benefit.label}>
                                                    <div className="progress-text">
                                                        <div className="row">
                                                            <div className="col-6">{benefit.label}</div>
                                                            <div className="col-6 text-end">{benefit.percentage}%</div>
                                                        </div>
                                                    </div>
                                                    <div className="custom-progress progress rounded mb-4">
                                                        <div
                                                            className="animated custom-bar progress-bar slideInLeft bg-primary"
                                                            style={{ width: `${benefit.percentage}%` }}
                                                            role="progressbar"
                                                        ></div>
                                                    </div>
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                ) : null}
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}