"use client";
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import ProductItem from "@core/app/components/ProductItem/ProductItem";
import { PublicServiceView } from "@models/Service.model";
import { PublicOrganizationView } from "@models/Company.model";
import ServiceImageEditPopup from "./ServiceImageEditPopup";
import { useSessionStore } from "@core/Store/Sesion.Store";
import { checkOrgAdmin } from "@services/Header.Edit.Service";

interface ServiceDetailCardProps {
    service: PublicServiceView;
    organization: PublicOrganizationView;
}

export default function ServiceDetailCard({ service, organization }: ServiceDetailCardProps) {
    const router = useRouter();
    const SessionInfo = useSessionStore();
    const [isAdmin, setIsAdmin] = useState(false);
    const [showEditPopup, setShowEditPopup] = useState(false);

    useEffect(() => {
        if (!SessionInfo.userId || !organization.id || !service.id) return;

        checkOrgAdmin(organization.id, SessionInfo.userId)
            .then((result) => {
                setIsAdmin(result);
            })
            .catch(() => {
                setIsAdmin(false);
            });
    }, [SessionInfo.userId, organization.id, service.id]);

    const handleImageSaved = () => {
        setShowEditPopup(false);
        router.refresh();
    };

    return (
        <>
            <ProductItem
                product={service}
                width="100%"
                isAdmin={isAdmin}
                onImageEdit={() => setShowEditPopup(true)}
            />
            {isAdmin && (
                <ServiceImageEditPopup
                    open={showEditPopup}
                    onClose={() => setShowEditPopup(false)}
                    serviceId={service.id}
                    companyId={organization.id}
                    currentImage={service.image}
                    onSaved={handleImageSaved}
                />
            )}
        </>
    );
}