"use client";

import { useState } from "react";
import { ArrowRight } from "@untitledui/icons";
import { Button, PhotoWithFallback } from '../elements';
import { cx } from '../../utils/cx';
import type { Service } from '../../types/api/service';


interface ServicesHomeProps {
    services: Service[];
    label?: string;
    title?: string;
    subtitle?: string;
    viewAllText?: string;
}

export const ServicesHome = ({
    services: servicesData,
    label = "",
    title = "",
    subtitle = "",
    viewAllText = "View all services",
}: ServicesHomeProps) => {
    const services = Array.isArray(servicesData) ? servicesData.slice(0, 6) : [];
    const viewAllHref = "/services";
    
    const [internalSelectedId, setInternalSelectedId] = useState<string | undefined>(
        services.length > 0 ? services[0].id.toString() : undefined
    );

    const handleServiceClick = (serviceId: string) => {
        setInternalSelectedId(serviceId);
    };

    const currentSelectedId = internalSelectedId || (services.length > 0 ? services[0].id.toString() : undefined);
    const selectedService = services.find(s => s.id.toString() === currentSelectedId) || services[0];
    
    const getServiceDescription = (service: Service | undefined): string => {
        if (!service) return '';
        return service.summary || service.description_markdown?.replace(/[#*\[\]()]/g, '').trim() || '';
    };

    return (
        <section className="overflow-hidden bg-primary py-16 md:py-24">
            <div className="mx-auto w-full max-w-container px-4 md:px-8">
                <div className="flex w-full flex-col lg:max-w-3xl">
                    <span className="text-sm font-semibold text-brand-secondary md:text-md">{label}</span>
                    <h2 className="mt-3 text-display-sm font-semibold text-primary md:text-display-md">
                        {title}
                    </h2>
                    {subtitle && (
                        <p className="mt-4 text-lg text-tertiary md:mt-5 md:text-xl">
                            {subtitle}
                        </p>
                    )}
                </div>

                <div className="mt-12 grid grid-cols-1 gap-12 md:mt-16 md:gap-16 lg:grid-cols-5 lg:items-start">
                    {/* Left side - Service list */}
                    <div className="lg:col-span-2">
                        <ul className="flex flex-col">
                            {services.map((service) => {
                                const serviceId = service.id.toString();
                                const isSelected = serviceId === currentSelectedId;
                                return (
                                    <li key={service.id}>
                                        <div className="relative">
                                            {isSelected && (
                                                <div className="absolute left-0 top-0 bottom-0 w-1 bg-brand-secondary rounded-r" />
                                            )}
                                            <div 
                                                className={cx(
                                                    "flex items-center py-4 pl-6 pr-4",
                                                    isSelected && "pl-5",
                                                    "hover:bg-primary_hover transition-colors cursor-pointer"
                                                )}
                                                onClick={() => handleServiceClick(serviceId)}
                                            >
                                                <h3 className={cx(
                                                    "text-lg font-semibold",
                                                    isSelected ? "text-brand-secondary" : "text-primary"
                                                )}>
                                                    {service.name}
                                                </h3>
                                            </div>
                                        </div>
                                    </li>
                                );
                            })}
                        </ul>

                        <div className="mt-4">
                            <Button
                                color="link-color"
                                size="lg"
                                href={viewAllHref}
                                iconTrailing={ArrowRight}
                            >
                                {viewAllText}
                            </Button>
                        </div>
                    </div>

                    {/* Right side - Featured service image */}
                    {selectedService && (
                        <div className="lg:col-span-3">
                            <div className="relative flex w-full items-center justify-center h-108 md:h-128">
                                <PhotoWithFallback
                                    item={selectedService}
                                    fallbackId={selectedService.id}
                                    alt={selectedService.name || "Service image"}
                                    className="absolute top-0 left-0 z-0 size-full object-cover"
                                />

                                <div className="z-10 flex w-full items-center justify-center p-3 md:p-4">
                                    <div className="w-[70%] rounded-xl bg-primary/30 px-4 pt-5 pb-6 ring-1 ring-alpha-white/30 backdrop-blur-[10px] ring-inset">
                                        <h3 className="text-xl font-semibold text-white">{selectedService.name}</h3>
                                        {getServiceDescription(selectedService) && (
                                            <p className="mt-2 text-md text-white/90">{getServiceDescription(selectedService)}</p>
                                        )}
                                    </div>
                                </div>
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </section>
    );
};
