"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import HeaderEditPopup from "./HeaderEditPopup";
import { useSessionStore } from "@core/Store/Sesion.Store";
import { checkOrgAdmin } from "@services/Header.Edit.Service";

interface OrganizationHeaderEditProps {
    companyId: string;
    headerColor?: string;
    headerFontColor?: string;
    headerFontShadowColor?: string;
    headerImage?: string;
}

export default function OrganizationHeaderEdit({
    companyId,
    headerColor = "",
    headerFontColor = "",
    headerFontShadowColor = "",
    headerImage = "",
}: OrganizationHeaderEditProps) {
    const router = useRouter();
    const SessionInfo = useSessionStore();
    const [isOrgAdmin, setIsOrgAdmin] = useState(false);
    const [showEditPopup, setShowEditPopup] = useState(false);

    useEffect(() => {
        if (!SessionInfo.userId || !companyId) {
            setIsOrgAdmin(false);
            const existing = document.getElementById("edit-header-btn");
            if (existing) existing.remove();
            return;
        }

        let cancelled = false;

        checkOrgAdmin(companyId, SessionInfo.userId)
            .then((isAdmin) => {
                if (cancelled) return;
                setIsOrgAdmin(isAdmin);

                const wrapper = document.getElementById("header-wrapper");
                if (!wrapper) return;

                if (isAdmin) {
                    const existingBtn = document.getElementById("edit-header-btn");
                    if (existingBtn) existingBtn.remove();

                    const btn = document.createElement("div");
                    btn.id = "edit-header-btn";
                    btn.innerHTML = `
                        <button style="
                            position: absolute;
                            top: 12px;
                            right: 12px;
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            background: rgba(0,0,0,0.45);
                            color: white;
                            border: none;
                            cursor: pointer;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            z-index: 100;
                            transition: background 0.2s;
                        " onmouseover="this.style.background='rgba(0,0,0,0.7)'" onmouseout="this.style.background='rgba(0,0,0,0.45)'">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
                        </button>
                    `;
                    btn.querySelector("button")!.addEventListener("click", () =>
                        setShowEditPopup(true),
                    );
                    wrapper.appendChild(btn);
                } else {
                    const existingBtn = document.getElementById("edit-header-btn");
                    if (existingBtn) existingBtn.remove();
                }
            })
            .catch(() => {
                if (cancelled) return;
                setIsOrgAdmin(false);

                const existingBtn = document.getElementById("edit-header-btn");
                if (existingBtn) existingBtn.remove();
            });

        return () => {
            cancelled = true;
            const existing = document.getElementById("edit-header-btn");
            if (existing) existing.remove();
        };
    }, [SessionInfo.userId, companyId]);

    return (
        <>
            {isOrgAdmin && (
                <HeaderEditPopup
                    open={showEditPopup}
                    onClose={() => setShowEditPopup(false)}
                    companyId={companyId}
                    headerColor={headerColor}
                    headerFontColor={headerFontColor}
                    headerFontShadowColor={headerFontShadowColor}
                    headerImage={headerImage}
                    onSaved={() => {
                        setShowEditPopup(false);
                    }}
                    onRefresh={() => router.refresh()}
                />
            )}
        </>
    );
}