turnosxpress/txclient/src/app/components/OrganizationHeaderEdit/HeaderEditPopup.tsx

"use client";
import { useState, useEffect } from "react";
import { Grid2, IconButton, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import turnosXpressTheme from "@core/app/theme/turnosXpress";
import Button from "@mui/material/Button";
import { ThemeProvider } from "@emotion/react";
import { PopoverPicker } from "@components/ColorPicker/ColorPicker";
import ImagePicker from "@components/ImagePicker/ImagePicker";
import { useAlert } from "@core/Store/Alert.Store";
import { useSessionStore } from "@core/Store/Sesion.Store";
import { useOrganizationHeaderStore } from "@core/Store/OrganizationHeader.Store";
import { updateOrganizationColors, uploadHeaderImage } from "@services/Header.Edit.Service";
import { UpdateCompanyParams } from "@models/Company.model";

interface HeaderEditPopupProps {
    open: boolean;
    onClose: () => void;
    companyId: string;
    headerColor: string;
    headerFontColor: string;
    headerFontShadowColor: string;
    headerImage: string;
    onSaved: () => void;
    onRefresh?: () => void;
}

export default function HeaderEditPopup(props: HeaderEditPopupProps) {
    const { open, onClose, companyId, headerColor, headerFontColor, headerFontShadowColor, headerImage, onSaved, onRefresh } = props;
    const alert = useAlert();
    const SessionInfo = useSessionStore();
    const organizationHeader = useOrganizationHeaderStore();

    const [headerColorState, setHeaderColorState] = useState("");
    const [headerFontColorState, setHeaderFontColorState] = useState("");
    const [headerFontShadowColorState, setHeaderFontShadowColorState] = useState("");
    const [loading, setLoading] = useState(false);

    // Sync local state when values change externally
    useEffect(() => {
        if (open) {
            setHeaderColorState(headerColor || "");
            setHeaderFontColorState(headerFontColor || "");
            setHeaderFontShadowColorState(headerFontShadowColor || "");
            setLoading(false);
        }
    }, [open, headerColor, headerFontColor, headerFontShadowColor]);

    const handleSaveColors = async () => {
        setLoading(true);

        try {
            const updData: UpdateCompanyParams = {
                id: companyId,
                headerColor: headerColorState,
                headerFontColor: headerFontColorState,
                headerFontShadowColor: headerFontShadowColorState,
                sessionUser: SessionInfo.userId,
            };

            await updateOrganizationColors(updData);

            organizationHeader.setHeaderColor(headerColorState);
            organizationHeader.setHeaderFontColor(headerFontColorState);
            organizationHeader.setHeaderFontShadowColor(headerFontShadowColorState);

            alert.showSuccess("Colores actualizados");
            onSaved();
            onRefresh?.();
        } catch (error) {
            const formatted = error instanceof Error ? error.message : "Error al guardar los colores";
            alert.showError(formatted || "Error al guardar los colores");
        } finally {
            setLoading(false);
        }
    };

    const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (!file) return;

        setLoading(true);

        try {
            const formData = new FormData();
            formData.append("companyId", companyId);
            formData.append("sessionUser", SessionInfo.userId);
            formData.append("file", file);

            uploadHeaderImage(formData).then(() => {
                alert.showSuccess("Imagen actualizada");
                onSaved();
                onRefresh?.();
            }).catch((error) => {
                const formatted = error instanceof Error ? error.message : "Error al guardar la imagen";
                alert.showError(formatted || "Error al guardar la imagen");
            }).finally(() => {
                setLoading(false);
            });
        } catch (error) {
            const formatted = error instanceof Error ? error.message : "Error al guardar la imagen";
            alert.showError(formatted || "Error al guardar la imagen");
            setLoading(false);
        }
    };

    return (
        <ThemeProvider theme={turnosXpressTheme}>
            <Dialog
                open={open}
                onClose={onClose}
                maxWidth="sm"
                fullWidth
                PaperProps={{
                    sx: {
                        borderRadius: 2,
                        height: 500,
                    },
                }}
            >
                <DialogTitle sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    Personalizar
                    <IconButton onClick={onClose} size="small">
                        <CloseIcon />
                    </IconButton>
                </DialogTitle>

                <DialogContent dividers sx={{ p: 3 }}>
                    {/* Colores */}
                    <Grid2 container spacing={1} mb={3}>
                        <Grid2 size={4}>
                            <PopoverPicker
                                placeholder="Fondo"
                                color={headerColorState}
                                onChange={(color: string) => {
                                    setHeaderColorState(color);
                                }}
                            />
                        </Grid2>
                        <Grid2 size={4}>
                            <PopoverPicker
                                placeholder="Fuente"
                                color={headerFontColorState}
                                onChange={(color: string) => {
                                    setHeaderFontColorState(color);
                                }}
                            />
                        </Grid2>
                        <Grid2 size={4}>
                            <PopoverPicker
                                placeholder="Sombra"
                                color={headerFontShadowColorState}
                                onChange={(color: string) => {
                                    setHeaderFontShadowColorState(color);
                                }}
                            />
                        </Grid2>
                    </Grid2>

                    {/* Imagen */}
                    <ImagePicker
                        src={headerImage}
                        alt="Cabecera"
                        style={{ width: "100%", height: 120, borderRadius: 8 }}
                        readOnly={false}
                        onChange={handleImageChange}
                        imageSizeSrc="/org-header-size.webp"
                        mbLimit={5}
                    />
                </DialogContent>

                <DialogActions sx={{ px: 3, pb: 2 }}>
                    <Button onClick={onClose}>Cancelar</Button>
                    <Button
                        onClick={handleSaveColors}
                        autoFocus
                        color="success"
                        variant="contained"
                        disabled={loading}
                    >
                        Guardar
                    </Button>
                </DialogActions>
            </Dialog>
        </ThemeProvider>
    );
}