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

export function PortfolioDetailMain({ hero, portfolio, navigation }: PortfolioDetailPageProps) {
    const firstParagraph = portfolio.paragraphs[0] ?? '';
    const boxLetter = firstParagraph.charAt(0);
    const firstParagraphBody = firstParagraph.slice(1);
    const remainingParagraphs = portfolio.paragraphs.slice(1);

    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('portfolio')}>Portfolio</Link>
                                </li>
                                <li>{hero.breadcrumbCurrent}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>

            <section className="portfolio-details-style01">
                <div className="container">
                    <div className="col-lg-12">
                        <div>
                            <div className="row border-bottom mb-1-9 pb-1-9 pb-lg-8 align-items-center mt-n1-9">
                                <div className="col-lg-6 mt-1-9 wow fadeInUp" data-wow-delay="100ms">
                                    <div className="pe-xl-15">
                                        <h2 className="mb-0 display-5 font-weight-800 lh-1 ls-minus-2px">{portfolio.title}</h2>
                                    </div>
                                </div>
                                {firstParagraph ? (
                                    <div className="col-lg-6 mt-1-9 wow fadeInUp" data-wow-delay="100ms">
                                        <p className="mb-0">{firstParagraph}</p>
                                    </div>
                                ) : null}
                            </div>

                            {(portfolio.tag || portfolio.projectLink) && (
                                <div className="row mb-1-9 mb-md-6 mt-n4">
                                    {portfolio.tag ? (
                                        <div className="col-sm-6 col-lg-3 mt-4 wow fadeInUp" data-wow-delay="100ms">
                                            <h3 className="h5 mb-1">Category</h3>
                                            <span className="text-muted">{portfolio.tag}</span>
                                        </div>
                                    ) : null}
                                    {portfolio.projectLink ? (
                                        <div className="col-sm-6 col-lg-3 mt-4 wow fadeInUp" data-wow-delay="100ms">
                                            <h3 className="h5 mb-1">Website</h3>
                                            <span>
                                                <a
                                                    href={portfolio.projectLink}
                                                    className="text-muted text-decoration-underline"
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                >
                                                    {portfolio.projectLinkLabel ?? portfolio.projectLink}
                                                </a>
                                            </span>
                                        </div>
                                    ) : null}
                                </div>
                            )}

                            <div className="mb-1-6 mb-lg-5 image-hover wow fadeInUp" data-wow-delay="100ms">
                                <img src={portfolio.coverImageUrl} alt={portfolio.title} title={portfolio.title} className="rounded" />
                            </div>

                            {portfolio.paragraphs.length > 0 ? (
                                <div className="row mb-1-6 mb-sm-2-6 mt-n4">
                                    <div className="col-lg-4 mt-4 wow fadeInUp" data-wow-delay="100ms">
                                        <h2 className="mb-0 display-6 font-weight-800 lh-1">Project overview</h2>
                                    </div>
                                    <div className="col-lg-8 mt-4">
                                        <div className="ps-lg-1-9 ps-xxl-7">
                                            {firstParagraph ? (
                                                <p className="wow fadeInUp">
                                                    {boxLetter ? <span className="box-letter">{boxLetter}</span> : null}
                                                    {firstParagraphBody}
                                                </p>
                                            ) : null}
                                            {remainingParagraphs.map((paragraph, index) => (
                                                <p
                                                    key={paragraph}
                                                    className={
                                                        index === remainingParagraphs.length - 1 ? 'mb-0 wow fadeInUp' : 'wow fadeInUp'
                                                    }
                                                >
                                                    {paragraph}
                                                </p>
                                            ))}
                                        </div>
                                    </div>
                                </div>
                            ) : null}

                            {portfolio.gallery.length > 0 ? (
                                <div className="row mb-1-6 mb-sm-2-6">
                                    {portfolio.gallery.map((image, index) => (
                                        <div
                                            key={image}
                                            className="col-4 wow fadeInUp"
                                            data-wow-delay={`${100 + index * 50}ms`}
                                        >
                                            <div className="image-hover">
                                                <img src={image} alt="" title="" className="rounded" />
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            ) : null}

                            {portfolio.tags.length > 0 ? (
                                <div className="row mb-1-9 mb-sm-2-6 border-top pt-4">
                                    <div className="col-md-12 wow fadeInUp" data-wow-delay="100ms">
                                        <div className="portfolio-tag">
                                            {portfolio.tags.map((tag) => (
                                                <a key={tag} href="#">
                                                    {tag}
                                                </a>
                                            ))}
                                        </div>
                                    </div>
                                </div>
                            ) : null}

                            <div className="page-navigation wow fadeInUp" data-wow-delay="100ms">
                                <div className="prev-page">
                                    <div className="page-info">
                                        {navigation.prev ? (
                                            <Link href={marketingRoute('portfolio.show', { portfolio: navigation.prev.slug })}>
                                                <span className="image-prev">
                                                    <img
                                                        src={navigation.prev.imageUrl}
                                                        alt={navigation.prev.title}
                                                        className="rounded"
                                                    />
                                                </span>
                                                <div className="prev-link-page-info">
                                                    <h3 className="prev-title">{navigation.prev.title}</h3>
                                                    <span className="date-details">
                                                        <span className="create-date">{navigation.prev.date}</span>
                                                    </span>
                                                </div>
                                            </Link>
                                        ) : null}
                                    </div>
                                </div>
                                <div className="next-page">
                                    <div className="page-info">
                                        {navigation.next ? (
                                            <Link href={marketingRoute('portfolio.show', { portfolio: navigation.next.slug })}>
                                                <div className="next-link-page-info">
                                                    <h3 className="next-title">{navigation.next.title}</h3>
                                                    <span className="date-details">
                                                        <span className="create-date">{navigation.next.date}</span>
                                                    </span>
                                                </div>
                                                <span className="image-next">
                                                    <img
                                                        src={navigation.next.imageUrl}
                                                        alt={navigation.next.title}
                                                        className="rounded"
                                                    />
                                                </span>
                                            </Link>
                                        ) : null}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}