aaaaaaaaaaaaaa

import React from "react";
import PropTypes from 'prop-types';
import Dialog from '@mui/material/Dialog';
import { makeStyles } from '@mui/styles';
import { Link } from 'react-router-dom';
import Tooltip from '@mui/material/Tooltip';
import GenericSkeleton from '../../../../components/genericComponents/Skeletons/GenericSkeleton';
import { Input } from '../../../../components/genericComponents/Input';
import NewChip from "../../../../components/newChip/NewChip";
import RerunAfterFailure from '../../listing/component/RerunAfterFailure';
import FillApprovalQuestions from './FillApprovalQuestions';
import BpOllyDialog from '../../../bpOlly';
import Button from '../../../../components/genericComponents/Button';


const getStatusChip = (status) => {
    if (!status) return "N/A";
    const variant = status === "FAILED" ? "error" : status === "SUCCESS" ? "success" : "light";
    return <NewChip label={status} variant={variant} shape="standard" />;
};

const getTableConfig = (taskType, depType, status) => {
    if (!taskType) return { columns: [], title: "Execution details for Failed Job" };
    if ((taskType === "DEPLOY" || taskType === "ANDROID_DEPLOY") && status === "DONT_RUN")
        return { columns: ["Service", "Status", "Reason"], title: "Execution Details for Deploy Job" };
    if (taskType === "BUILD" || taskType === "GLOBAL_BUILD")
        return { columns: ["Service", "Env", "Branch", "Status", "Logs"], title: "Execution Details for Build Job" };
    if (taskType === "ANDROID_BUILD")
        return { columns: ["Service", "Env", "Status"], title: "Execution Details for Android Build Job" };
    if ((taskType === "DEPLOY" || taskType === "GLOBAL_DEPLOY") && depType === "canary")
        return { columns: ["Service", "Env", "Status"], title: "Execution Details for Canary Deploy" };
    if (taskType === "DEPLOY" || taskType === "GLOBAL_DEPLOY")
        return { columns: ["Service", "Env", "Status"], title: "Execution Details for Deploy Job" };
    if (taskType === "ANDROID_DEPLOY")
        return { columns: ["Service", "Env", "Status"], title: "Execution Details for Deploy to Playstore" };
    if (taskType === "CRONJOB")
        return { columns: ["Service", "Env", "Status"], title: "Execution Details for Cronjob" };
    if (taskType === "PROMOTE" || taskType === "GLOBAL_PROMOTE")
        return { columns: ["Service", "Source Env", "Target Env", "Status"], title: "Execution Details for Promote Job" };
    if (taskType === "JIRA_INTEGRATION")
        return { columns: ["Operation", "Issue Type", "Issue Key", "Status", "Logs"], title: "Execution Details for Jira Integration" };
    if (taskType === "REST_API")
        return { columns: ["Method", "URL", "Timeout", "Status", "Logs"], title: "Execution Details for REST API" };
    if (taskType === "CANARY_ANALYSIS")
        return { columns: ["Task Type", "Duration", "Status", "Logs"], title: "Execution Details for Canary Analysis" };
    if (taskType === "independent_job" || taskType === "dependent_job")
        return { columns: ["Service", "Duration", "Status", "Logs"], title: "Execution Details for Job" };
    if (taskType === "SNOW_INTEGRATION")
        return { columns: ["Operation", "Issue Key", "Status", "Logs"], title: "Execution Details for ServiceNow" };
    if (taskType === "ATTACH_DOCUMENTS")
        return { columns: ["Operation", "Status", "Logs"], title: "Execution Details for Documents" };
    if (taskType === "CONFIGMAP_DEPLOYMENT")
        return { columns: ["Config Map", "Env", "Status"], title: "Execution Details for Config Map" };
    if (taskType === "DB_UPGRADE")
        return { columns: ["Service", "Env", "Status"], title: "Execution Details for Database Upgrade" };
    if (taskType === "INTEGRATION")
        return { columns: ["Service", "Env", "Status"], title: "Execution Details for Integration Testing" };
    if (taskType === "ROLLBACK")
        return { columns: ["Service", "Env", "Status"], title: "Execution details for Rollback Job" };
    return { columns: ["Service", "Status"], title: "Execution details for Failed Job" };
};


const getJobDisplayName = (taskType) => {
    const names = {
        BUILD: "Build", GLOBAL_BUILD: "Build", ANDROID_BUILD: "Build",
        DEPLOY: "Deploy", GLOBAL_DEPLOY: "Deploy", ANDROID_DEPLOY: "Deploy to Playstore",
        CRONJOB: "Cronjob",
        PROMOTE: "Promote", GLOBAL_PROMOTE: "Promote",
        JIRA_INTEGRATION: "Jira Integration",
        REST_API: "REST API",
        CANARY_ANALYSIS: "Canary Analysis",
        SNOW_INTEGRATION: "ServiceNow Integration",
        ATTACH_DOCUMENTS: "Attach Document",
        CONFIGMAP_DEPLOYMENT: "Config Map",
        DB_UPGRADE: "Database Upgrade",
        ROLLBACK: "Rollback",
        INTEGRATION: "Integration",
        independent_job: "Job",
        dependent_job: "Job",
    };
    return names[taskType] || "Job";
};

const getSubJobName = (data) => {
    if (!data || data.length === 0) return null;
    const item = data[0];
    if (item.operation) {
        return item.operation.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
    }
    if (item.service_name) return item.service_name;
    if (item.task_name) return item.task_name;
    return null;
};

const getNoteContent = (taskType, data, failed_task_dep_type, isStageFailure, failedTask, failedTaskDefinition, rollingPercentage) => {
    const jobName = getJobDisplayName(taskType);
    const subJobName = getSubJobName(data);

    let description;

    if (taskType === "REST_API" && data && data.length > 0) {
        const method = data[0].method || "API";
        const url = data[0].url || "";
        description = (
            <p>A pipeline failure has occurred in the <b>{method}</b> operation{url ? <> for the URL: <b>{url}</b></> : null}, impacting the execution of the &quot;<b>API Call</b>&quot; job.</p>
        );
    } else if ((taskType === "DEPLOY" || taskType === "GLOBAL_DEPLOY") && failed_task_dep_type === "canary") {
        const podShift = failedTaskDefinition?.pod_shift_percentage || failedTask?.pod_shift_percentage;
        description = (
            <p>A pipeline failure has occurred in the &quot;<b>Deploy</b>&quot; job during the <b>canary</b> execution{podShift ? <> for pod shift percentage <b>{podShift}%</b></> : null}.</p>
        );
    } else if (taskType === "ANDROID_DEPLOY") {
        const envName = data && data[0] ? data[0].env_name : null;
        description = (
            <p>A pipeline failure has occurred in the &quot;<b>Deploy to Play Store</b>&quot; job{envName ? <> for environment <b>{envName}</b></> : null} during the deployment execution{rollingPercentage ? <> for release rollout percentage <b>{rollingPercentage}%</b></> : null}.</p>
        );
    } else if ((taskType === "DEPLOY" || taskType === "GLOBAL_DEPLOY") && failed_task_dep_type !== "canary") {
        description = (
            <p>A pipeline failure has occurred in the &quot;<b>Deploy</b>&quot; job during the <b>Rolling</b> execution.</p>
        );
    } else if (taskType === "CONFIGMAP_DEPLOYMENT") {
        const envName = data && data[0] ? data[0].env_name : null;
        description = (
            <p>A pipeline failure has occurred in the &quot;<b>Config Map</b>&quot; job{envName ? <> for <b>{envName}</b> environment</> : null}.</p>
        );

    }
    else if (taskType === "CRONJOB") {
        const envName = data && data[0] ? data[0].env_name : null;
        description = (
            <p>A pipeline failure has occurred in the &quot;<b>Cron</b>&quot; job{envName ? <> for environment <b>{envName}</b></> : null}.</p>
        );

    }
    else if (taskType === "DB_UPGRADE") {
        const envName = data && data[0] ? data[0].env_name : null;
        description = (
            <p>A pipeline failure has occurred in the &quot;<b>Database Upgrade</b>&quot; job{envName ? <> for <b>{envName}</b> environment </> : null}.</p>
        );

    }
    else if (taskType === "ROLLBACK") {
        const envName = data && data[0] ? data[0].env_name : null;
        description = (
            <p>A pipeline failure has occurred in the &quot;<b>Rollback</b>&quot; job{envName ? <> for <b>{envName}</b> environment</> : null}.</p>
        );

    }
    else if (taskType === "INTEGRATION") {
        const envName = data && data[0] ? data[0].env_name : null;
        description = (
            <p>A pipeline failure has occurred in the &quot;<b>Integration Testing</b>&quot; job{envName ? <> for <b>{envName}</b> environment </> : null}.</p>
        );

    }
    else if (taskType === "BUILD" || taskType === "GLOBAL_BUILD") {
        const envName = data && data[0] ? data[0].env_name : null;
        description = (
            <p>A pipeline failure has occurred in the &quot;<b>Build</b>&quot; job{envName ? <> for <b>{envName}</b> environment</> : null}.</p>
        );
    }

    else if (taskType === "ANDROID_BUILD") {
        const envName = data && data[0] ? data[0].env_name : null;
        description = (
            <p>A pipeline failure has occurred in the &quot;<b>Android Build</b>&quot; job{envName ? <> for <b>{envName}</b> environment</> : null}.</p>
        );
    }
    else if (taskType === "PROMOTE" || taskType === "GLOBAL_PROMOTE") {
        const sourceEnv = data && data[0] ? data[0].env_name : null;
        const targetEnv = data && data[0] ? data[0].target_env_name : null;
        description = (
            <p>A pipeline failure has occurred in the &quot;<b>Promote</b>&quot; job{sourceEnv ? <> from source environment <b>{sourceEnv}</b></> : null}{targetEnv ? <> to target environment <b>{targetEnv}</b></> : null}.</p>
        );
    }
    else {
        description = subJobName
            ? (
                <p>A pipeline failure occurred in the &quot;<b>{subJobName}</b>&quot; operation, impacting the execution of the &quot;<b>{jobName}</b>&quot; job.</p>
            )
            : (
                <p>A pipeline failure occurred in the &quot;<b>{jobName}</b>&quot; job.</p>
            );
    }

    // Determine which recovery options are available
    const hasRerun = true;
    const hasContinue = taskType !== "CANARY_ANALYSIS" && !isStageFailure;
    const hasRollback = failed_task_dep_type === "canary" || taskType === "CANARY_ANALYSIS";

    const options = [];
    if (hasRerun) options.push("Re-run the failed job");
    if (hasContinue) options.push("Skip failed jobs and continue(Failed jobs will be rolled back to baseline).");
    if (hasRollback) options.push("Complete Rollback to baseline");

    return { description, options };
};

const truncateService = (name) => {
    if (!name) return "N/A";
    if (name.length > 20) return <Tooltip title={name}><span>{name.substring(0, 20)}...</span></Tooltip>;
    return name;
};

const renderRowCells = (item) => {
    const tt = item.task_type;
    if ((tt === "DEPLOY" || tt === "ANDROID_DEPLOY") && item.status === "DONT_RUN") {
        return (
            <>
                <td>{truncateService(item.service_name)}</td>
                <td>{getStatusChip(item.status)}</td>
                <td>
                    {item.manage_failure_json?.conflict_meta_data ? (
                        <>
                            <div>Canary is Already Running</div>
                            <div>Via Pipeline:{" "}
                                <Link to={`/application/${item.manage_failure_json.conflict_meta_data.project_id}/pipeline/${item.manage_failure_json.conflict_meta_data.pipeline_id}/execution/${item.manage_failure_json.conflict_meta_data.pipeline_instance_id}`}
                                    target="_blank" className="text-anchor-blue">
                                    {item.manage_failure_json.conflict_meta_data.pipeline_name}
                                </Link>
                            </div>
                        </>
                    ) : "-"}
                </td>
            </>
        );
    }
    if (tt === "BUILD" || tt === "GLOBAL_BUILD") {
        return (
            <>
                <td>{truncateService(item.service_name)}</td>
                <td>{item.env_name || "N/A"}</td>
                <td>{item.branch_name || "N/A"}</td>
                <td>{getStatusChip(item.status)}</td>
                <td><Link to={`/logs?global_task_id=${item.logs_url}`} target="_blank" className='text-anchor-blue' >View Logs</Link></td>
            </>
        );
    }
    if (tt === "ANDROID_BUILD") {
        return (
            <>
                <td>{truncateService(item.service_name)}</td>
                <td>{item.env_name || "N/A"}</td>
                <td>{getStatusChip(item.status)}</td>
            </>
        );
    }
    if (tt === "DEPLOY" || tt === "GLOBAL_DEPLOY" || tt === "ANDROID_DEPLOY" || tt === "CRONJOB") {
        return (
            <>
                <td>{truncateService(item.service_name)}</td>
                <td>{item.env_name || "N/A"}</td>
                <td>{getStatusChip(item.status)}</td>
            </>
        );
    }
    if (tt === "PROMOTE" || tt === "GLOBAL_PROMOTE") {
        return (
            <>
                <td>{truncateService(item.service_name)}</td>
                <td>{item.env_name || "N/A"}</td>
                <td>{item.target_env_name || "N/A"}</td>
                <td>{getStatusChip(item.status)}</td>
                {/* <td><Link to={`/logs?global_task_id=${item.logs_url}`} target="_blank" className='text-anchor-blue' >View Logs</Link></td> */}
            </>
        );
    }
    if (tt === "JIRA_INTEGRATION") {
        return (
            <>
                <td>{item.operation || "N/A"}</td>
                <td>{item.issue_type || "N/A"}</td>
                <td><Tooltip title={item.issue_key}><p className='text-ellipsis-80'>{item.issue_key || "N/A"}</p></Tooltip></td>
                <td>{getStatusChip(item.status)}</td>
                <td><Link to={`/logs?global_task_id=${item.logs_url}`} target="_blank" className='text-anchor-blue' >View Logs</Link></td>
            </>
        );
    }
    if (tt === "REST_API") {
        return (
            <>
                <td>{item.method || "N/A"}</td>
                <td><Tooltip title={item.url}><p className='text-ellipsis-80'>{item.url || "N/A"}</p></Tooltip></td>
                <td>{item.timeout || "N/A"}</td>
                <td>{getStatusChip(item.status)}</td>
                <td><Link to={`/logs?global_task_id=${item.logs_url}`} target="_blank" className='text-anchor-blue' >View Logs</Link></td>
            </>
        );
    }
    if (tt === "CANARY_ANALYSIS") {
        return (
            <>
                <td>{item.task_type || "N/A"}</td>
                <td>{item.duration || "N/A"}</td>
                <td>{getStatusChip(item.status)}</td>
                <td><Link to={`/logs?global_task_id=${item.logs_url}`} target="_blank" className='text-anchor-blue' >View Logs</Link></td>
            </>
        );
    }
    if (item.dynamic_job || tt === "independent_job" || tt === "dependent_job") {
        return (
            <>
                <td>{truncateService(item.service_name || item.task_type)}</td>
                <td>{item.duration || "N/A"}</td>
                <td>{getStatusChip(item.status)}</td>
                <td><Link to={`/logs?global_task_id=${item.logs_url}`} target="_blank" className='text-anchor-blue' >View Logs</Link></td>
            </>
        );
    }
    if (tt === "SNOW_INTEGRATION") {
        return (
            <>
                <td>{item.operation || "N/A"}</td>
                <td><Tooltip title={item.issue_key}><p className='text-ellipsis-80'>{item.issue_key || "N/A"}</p></Tooltip></td>
                <td>{getStatusChip(item.status)}</td>
                <td><Link to={`/logs?global_task_id=${item.logs_url}`} target="_blank" className='text-anchor-blue' >View Logs</Link></td>
            </>
        );
    }
    if (tt === "ATTACH_DOCUMENTS") {
        return (
            <>
                <td>{item.operation || "N/A"}</td>
                <td>{getStatusChip(item.status)}</td>
                <td><Link to={`/logs?global_task_id=${item.logs_url}`} target="_blank" className='text-anchor-blue' >View Logs</Link></td>
            </>
        );
    }
    if (tt === "CONFIGMAP_DEPLOYMENT") {
        return (
            <>
                <td>{truncateService(item.service_name)}</td>
                <td>{item.env_name || "N/A"}</td>
                <td>{getStatusChip(item.status)}</td>
                {/* <td><Link to={`/logs?global_task_id=${item.logs_url}`} target="_blank" className='text-anchor-blue' >View Logs</Link></td> */}
            </>
        );
    }
    if (tt === "DB_UPGRADE") {
        return (
            <>
                <td>{truncateService(item.service_name)}</td>
                <td>{item.env_name || "N/A"}</td>
                <td>{getStatusChip(item.status)}</td>
            </>
        );
    }
    if (tt === "INTEGRATION") {
        return (
            <>
                <td>{truncateService(item.service_name)}</td>
                <td>{item.env_name || "N/A"}</td>
                <td>{getStatusChip(item.status)}</td>
            </>
        );
    }
    if (tt === "ROLLBACK") {
        return (
            <>
                <td>{truncateService(item.service_name)}</td>
                <td>{item.env_name || "N/A"}</td>
                <td>{getStatusChip(item.status)}</td>
            </>
        );
    }
    return (
        <>
            <td>{truncateService(item.service_name)}</td>
            <td>{getStatusChip(item.status)}</td>
        </>
    );
};

const ServiceListSection = ({ title, services, color, icon, badge }) => (
    <div style={{ marginBottom: "10px", marginTop: "12px", border: "1px solid #E6E6E6", borderRadius: "6px" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px", borderBottom: "1px solid #E6E6E6" }}>
            <div style={{ display: "flex", alignItems: "center" }}>
                <div style={{ width: "20px", height: "20px", borderRadius: "50%", backgroundColor: color, display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <span className={icon} style={{ color: "#FFFFFF" }}></span>
                </div>
                <span style={{ marginLeft: "8px", fontFamily: "Montserrat", fontWeight: '600', fontSize: "14px", color: '#2F2F2F' }}>{title}</span>
            </div>
            {badge && <div style={{ padding: "6px", backgroundColor: badge.bg, color: badge.color, fontFamily: "Montserrat", fontWeight: '700', fontSize: "12px", borderRadius: "5px" }}>{badge.text}</div>}
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '9px', padding: "12px 16px" }}>
            {services.map((svc, i) => <NewChip key={i} label={svc} variant="light" shape="standard" />)}
        </div>
    </div>
);

const CanaryView = ({ failedServices, servicesContinuing }) => (
    <div>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: "24px", marginTop: "10px" }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "56px", height: "56px", borderRadius: "8px", backgroundColor: "#FFEBEB" }}>
                <span className='ri-alert-line' style={{ fontSize: "24px" }}></span>
            </div>
            <span style={{ fontFamily: "Montserrat", fontWeight: '600', fontSize: "16px", color: '#2F2F2F', marginLeft: "16px" }}>Continue with Failure to next Job</span>
        </div>
        <div style={{ backgroundColor: '#F5FAFF', padding: "6px", borderRadius: "6px", display: 'flex', alignItems: 'center', marginBottom: "16px" }}>
            <span className='ri-information-line' style={{ fontSize: "16px", color: "#0086FF" }}></span>
            <span style={{ color: "#2F2F2F", fontFamily: "Montserrat", fontWeight: "600", fontSize: "12px", marginLeft: "9px" }}>Failed Services will be rolled back to baseline version</span>
        </div>
        {failedServices && failedServices.length > 0 && <ServiceListSection title="Failed Services" services={failedServices} color="#E53737" icon="ri-close-fill" badge={{ bg: "#FFEBEB", color: "#E53737", text: "Rolling back to baseline" }} />}
        {servicesContinuing && servicesContinuing.length > 0 && <ServiceListSection title="Passed Services" services={servicesContinuing} color="#2EBE79" icon="ri-check-fill" badge={{ bg: "#E6FBEA", color: "#2EBE79", text: "Continuing with" }} />}
    </div>
);

const ConfirmationScreen = ({ data, complete_rollback, failed_task_dep_type, failedServices, servicesContinuing, formData, formError, onChangeHandler }) => {
    const taskType = data && data[0] ? data[0].task_type : null;
    if (complete_rollback) {
        return (
            <div>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: "24px" }}>
                    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "56px", height: "56px", borderRadius: "8px", backgroundColor: "#0086FF14" }}>
                        <span className='ri-arrow-go-back-line' style={{ fontSize: "32px", color: "#0086FF" }}></span>
                    </div>
                    <span style={{ fontFamily: "Montserrat", fontWeight: '600', fontSize: "16px", color: '#2F2F2F', marginLeft: "16px" }}>Complete Rollback to baseline version</span>
                </div>
                <div style={{ backgroundColor: '#F5FAFF', padding: "6px", borderRadius: "6px", display: 'flex', alignItems: 'center', marginBottom: "16px" }}>
                    <span className='ri-information-line' style={{ fontSize: "16px", color: "#0086FF" }}></span>
                    <span style={{ color: "#2F2F2F", fontFamily: "Montserrat", fontWeight: "600", fontSize: "12px", marginLeft: "9px" }}>Rolling back all services to baseline</span>
                </div>
                {failedServices && failedServices.length > 0 && <ServiceListSection title="Failed Services" services={failedServices} color="#E53737" icon="ri-close-fill" />}
                {servicesContinuing && servicesContinuing.length > 0 && <ServiceListSection title="Passed Services" services={servicesContinuing} color="#2EBE79" icon="ri-check-fill" />}
            </div>
        );
    }
    if ((taskType === "DEPLOY" || taskType === "GLOBAL_DEPLOY") && failed_task_dep_type === "canary") {
        return <CanaryView failedServices={failedServices} servicesContinuing={servicesContinuing} />;
    }
    if (taskType === "BUILD" || taskType === "GLOBAL_BUILD" || taskType === "ANDROID_BUILD" ||
        taskType === "DEPLOY" || taskType === "GLOBAL_DEPLOY" || taskType === "ANDROID_DEPLOY" ||
        taskType === "PROMOTE" || taskType === "GLOBAL_PROMOTE") {
        return (
            <div className='div-structure'>
                <p>Continue with Failure to next Job</p>
                <p><b>Please note:</b> pipeline will skip execution for following microservices:&nbsp;
                    {data.map((item, i) => <span key={i} className='chip chip-failed'>{item.service_name}</span>)}
                </p>
                <p><b>On continue:</b> pipeline will proceed with following microservices:&nbsp;
                    {servicesContinuing.map((item, i) => <span key={i} className='chip chip-success'>{item}</span>)}
                </p>
            </div>
        );
    }
    if (taskType === "JIRA_INTEGRATION") {
        const op = data[0].operation;
        const msgs = {
            create: "Your Jira ticket creation has failed. If you want to continue, please create the ticket manually and enter the details before clicking Continue.",
            update: "The Jira ticket update failed. Please update the ticket manually if needed, then click Continue.",
            check_conflicts: "The Merge conflicts check has failed. Please verify and resolve the merge conflicts manually before proceeding.",
            create_pr: "The Pull Request could not be created automatically. Please create and merge it manually, then click Continue to resume the pipeline.",
            add_comment: "The Jira 'Add Comment' task was unsuccessful. To proceed, please add the required comment manually in Jira and click Continue."
        };
        return (
            <div className='jira-integration-flow'>
                <div className='pd-20 text-center mt-20 mb-20' style={{ backgroundColor: '#F8F8F8', borderRadius: '8px' }}>
                    <p className="font-12 text-center mb-20"><b>Please Note:</b> {msgs[op] || "Your Jira ticket status transition has failed. Please handle it manually and click Continue."}</p>
                    {op === "create" && <Input type="text" data={formData} error={formError} onChangeHandler={onChangeHandler} placeholder="ot-961" label="Enter Jira Ticket" name={data[0].issue_key} />}
                    {op === "check_conflicts" && (
                        <div className="auto-complete-dropdown auto-complete-dropdown-42 auto-complete-dropdown-ticketing" style={{ maxHeight: '120px', overflowY: 'auto' }}>
                            <Input
                                type="auto-complete-freesolo"
                                label="Enter Branch"
                                id={"branchInput"}
                                name="check_merge_confilcts_branches"
                                list={[]}
                                freeSolo={true}
                                placeholder={
                                    formData.check_merge_confilcts_branches &&
                                        formData.check_merge_confilcts_branches.length > 0
                                        ? ''
                                        : 'Enter branch name and press enter'
                                }
                                getOptionLabel={(option) => option.label || option}
                                error={formError}
                                data={formData}
                                onChangeHandler={onChangeHandler}
                            />
                        </div>
                    )}
                </div>
            </div>
        );
    }
    if (taskType === "SNOW_INTEGRATION") {
        const op = data[0].operation;
        const msgs = { snow_create: "Your ServiceNow ticket creation has failed, if you want to continue please create the ServiceNow ticket manually and enter the details after clicking the continue.", snow_add_notes: "The ServiceNow 'Add Notes' task was unsuccessful. To proceed, please add the required notes manually in ServiceNow and click Continue.", snow_update_status: "Your ServiceNow ticket status update has failed, if you want to continue please update the ServiceNow ticket status manually and click continue.", snow_update: "The ServiceNow ticket update was unsuccessful. To proceed, please update your ticket manually in ServiceNow and click Continue." };
        return (
            <div className='jira-integration-flow'>
                <div className='pd-20 text-center mt-20 mb-20' style={{ backgroundColor: '#F8F8F8', borderRadius: '8px' }}>
                    <p className="font-12 text-center mb-20"><b>Please Note:</b> {msgs[op] || null}</p>
                    {op === "snow_create" && <Input type="text" data={formData} error={formError} onChangeHandler={onChangeHandler} placeholder="ot-961" label="Enter ServiceNow Ticket" name={data[0].issue_key} />}
                </div>
            </div>
        );
    }
    if (taskType === "ATTACH_DOCUMENTS") {
        const op = data[0].operation;
        const msg = op === "download_documents"
            ? "Your Download Documents job has failed, if you want to continue please click continue."
            : op === "upload_documents"
                ? "The document upload operation has failed. If these files are not required for this execution, click 'Continue' to resume the pipeline. Note that clicking 'Continue' will roll back failed jobs to the baseline version."
                : "The Release Notes upload has failed. If these notes are not critical for this execution, click Continue to resume the pipeline. Note that clicking 'Continue' will roll back failed jobs to the baseline version.";
        return (
            <div className='pd-20 text-center mt-20 mb-20' style={{ backgroundColor: '#F8F8F8', borderRadius: '8px' }}>
                <p className="font-12 text-center"><b>Please Note:</b> {msg}</p>
            </div>
        );
    }
    if (taskType === "dependent_job") {
        return (<div className='div-structure'><p>Continue with failures:</p><p><b>Please note:</b> pipeline will skip execution for following microservices:&nbsp;{failedServices.map((item, i) => <span key={i} className='chip chip-failed'>{item}</span>)}</p></div>);
    }
    if (taskType === "REST_API") {
        const method = data[0]?.method || "API CALL";
        return (
            <div className='pd-20 text-center mt-20 mb-20' style={{ backgroundColor: '#F8F8F8', borderRadius: '8px' }}>
                <i className="ri-error-warning-line text-center" style={{ color: '#e9797e', textAlign: 'center', fontSize: '40px' }}></i>
                <p className="font-12 text-center">
                    <b>Please Note:</b> The <b>{method}</b> request for your <b>API CALL</b> has failed. Continuing will skip this failure. Do you still want to continue?
                </p>
            </div>
        );
    }
    if (taskType === "CONFIGMAP_DEPLOYMENT") {
        return (
            <div className='pd-20 text-center mt-20 mb-20' style={{ backgroundColor: '#F8F8F8', borderRadius: '8px' }}>
                <i className="ri-error-warning-line text-center" style={{ color: '#e9797e', textAlign: 'center', fontSize: '40px' }}></i>
                <p className="font-12 text-center">
                    <b>Please Note:</b> The <b>Config Map</b> deployment has failed. If you choose to continue, the latest configuration updates will not be reflected in your environment.
                </p>
                <p className="font-12 text-center">Do you still want to continue?</p>
            </div>
        );
    }
    if (taskType === "DB_UPGRADE") {
        return (
            <div className='pd-20 text-center mt-20 mb-20' style={{ backgroundColor: '#F8F8F8', borderRadius: '8px' }}>
                <i className="ri-error-warning-line text-center" style={{ color: '#e9797e', textAlign: 'center', fontSize: '40px' }}></i>
                <p className="font-12 text-center">
                    <b>Please Note:</b> The <b>Database Upgrade</b> job has failed. Continuing without a successful migration may cause application errors or data inconsistency.
                </p>
                <p className="font-12 text-center">Do you still want to continue?</p>
            </div>
        );
    }
    if (taskType === "CRONJOB") {
        return (
            <div className='pd-20 text-center mt-20 mb-20' style={{ backgroundColor: '#F8F8F8', borderRadius: '8px' }}>
                <i className="ri-error-warning-line text-center" style={{ color: '#e9797e', textAlign: 'center', fontSize: '40px' }}></i>
                <p className="font-12 text-center">
                    <b>Please Note:</b> The <b>Cron Job</b> deployment has failed. If you choose to continue, the scheduled tasks may not be correctly registered or updated in your environment.
                </p>
                <p className="font-12 text-center">Do you still want to continue?</p>
            </div>
        );
    }

    const simpleMessages = {
        INTEGRATION: "The Integration Testing job has failed. Continuing will bypass these failures. Do you still want to continue?",
        ROLLBACK: "The Rollback operation has encountered a failure. Continuing may leave your environment in an inconsistent state. We recommend verifying the deployment or re-triggering the pipeline to ensure stability.",
        CANARY_ANALYSIS: "You are about to re-run the canary analysis job."
    };
    if (simpleMessages[taskType]) {
        return (<div className='pd-20 text-center mt-20 mb-20' style={{ backgroundColor: '#F8F8F8', borderRadius: '8px' }}><i className="ri-error-warning-line text-center" style={{ color: '#e9797e', textAlign: 'center', fontSize: '40px' }}></i><p className="font-12 text-center"><b>Please Note:</b> {simpleMessages[taskType]}</p></div>);
    }
    if (taskType && data[0]?.dynamic_job) {
        return (<div className='pd-20 text-center mt-20 mb-20' style={{ backgroundColor: '#F8F8F8', borderRadius: '8px' }}><i className="ri-error-warning-line text-center" style={{ color: '#e9797e', textAlign: 'center', fontSize: '40px' }}></i><p className="font-12 text-center"><b>Please Note:</b> Current job is failed, You are about to continue the pipeline.</p></div>);
    }
    return null;
};

const ManageFailure = (props) => {
    const classes = useStyles();
    const [exceptionalView, setExceptionalView] = React.useState(false);
    const [exceptionalStep, setExceptionalStep] = React.useState(1);
    const [exceptionalJustification, setExceptionalJustification] = React.useState('');

    const { open, handleClose, data, loading, error, failedStageData, failedTask, failedTaskDefinition,
        failedServices, servicesContinuing, pipeline_data, rerunJob,
        postContinuePipelineData, handleCompleteRollback, failed_task_dep_type,
        showTable, complete_rollback, backClicked, continueClicked,
        formData, formError, onChangeHandler, failed_stage_instance,
        filterApprovalQuestionsStage, pipeline_id, pipeline_instance_id, postFinalData, openOlly, ollyEnabled, rollingPercentage } = props;

    const [exceptionalServices, setExceptionalServices] = React.useState([]);

    React.useEffect(() => {
        if (exceptionalView && data && data.length > 0) {
            setExceptionalServices(data.map(item => item.service_name));
        }
        if (!exceptionalView) {
            setExceptionalStep(1);
            setExceptionalJustification('');
        }
    }, [exceptionalView, data]);

    const taskType = data && data[0] ? data[0].task_type : null;
    const isStageFailure = failedStageData && Object.keys(failedStageData).length > 0;
    const tableConfig = isStageFailure
        ? { columns: ["Stage", "Status", "Logs"], title: "Execution Details for failed stage" }
        : getTableConfig(taskType, failed_task_dep_type, data && data[0] ? data[0].status : null);
    const headerText = isStageFailure
        ? <>Stage has failed with following details : <b>{failedStageData?.name}</b></>
        : <>Job has failed with following details : <b>{failedTask && failedTask.task_name ? failedTask.task_name : "N/A"}</b></>;
    const envBadge = data && data[0] ? data[0].env_name : null;

    const renderExceptionalApprovalContent = () => {
        if (exceptionalStep === 2) {
            return (
                <div style={{ padding: '0 0px' }}>
                    <div style={{ marginBottom: '24px' }}>
                        <div
                            style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', color: '#2F2F2F', fontSize: '13px', fontWeight: 600, marginBottom: '16px', gap: '4px' }}
                            onClick={() => setExceptionalStep(1)}
                        >
                            <span className="ri-arrow-left-s-line" style={{ fontSize: '18px', marginTop: '20px' }}></span>
                            <span style={{ marginTop: '20px' }}>BACK</span>
                        </div>
                        <div style={{ color: '#505050', fontSize: '13px', marginTop: '24px', marginBottom: '4px', textTransform: 'lowercase' }}>exceptional approval</div>
                        <div style={{ color: '#2F2F2F', fontSize: '18px', fontWeight: 600 }}>Justify your approval</div>
                    </div>

                    <div style={{ backgroundColor: '#FCF6E1', padding: '16px', borderRadius: '6px', marginBottom: '24px' }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
                            <span className="ri-information-line" style={{ color: '#784900', fontSize: '16px', fontWeight: 700 }}></span>
                            <div style={{ color: '#784900', fontSize: '11px', fontWeight: 700, textTransform: 'uppercase' }}>CONTINUING THE PIPELINE WITH EXCEPTION FOR FOLLOWING SERVICES</div>
                        </div>
                        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px', marginLeft: '24px' }}>
                            {exceptionalServices.map((serviceName, i) => (
                                <div key={i} style={{ color: '#784900', fontSize: '13px' }}>{serviceName}</div>
                            ))}
                        </div>
                    </div>

                    <div style={{ marginBottom: '8px', fontWeight: 600, fontSize: '12px', color: '#2F2F2F' }}>
                        Why are you approving this deployment?<span style={{ color: '#E53737' }}>*</span>
                    </div>
                    <textarea
                        className="form-control"
                        placeholder="Descriptions"
                        rows={5}
                        style={{ width: '100%', resize: 'none', borderRadius: '4px', padding: '12px', fontSize: '13px', border: '1px solid #D9D9D9' }}
                        value={exceptionalJustification}
                        onChange={(e) => setExceptionalJustification(e.target.value)}
                    ></textarea>
                </div>
            );
        }

        return (
            <div style={{ padding: '0 0px' }}>
                <div style={{ marginBottom: '24px' }}>
                    <div
                        style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', color: '#2F2F2F', fontSize: '13px', fontWeight: 600, marginBottom: '16px', gap: '4px' }}
                        onClick={() => setExceptionalView(false)}
                    >
                        <span className="ri-arrow-left-s-line" style={{ fontSize: '18px', marginTop: '20px' }}></span>
                        <span style={{ marginTop: '20px' }}>BACK</span>
                    </div>
                    <div style={{ color: '#505050', fontSize: '13px', marginTop: '24px', marginBottom: '4px', textTransform: 'lowercase' }}>exceptional approval</div>
                    <div style={{ color: '#2F2F2F', fontSize: '18px', fontWeight: 600 }}>Select services to deploy</div>
                </div>

                <div style={{ backgroundColor: '#DFEDFF', border: '1px solid #0086FF14', padding: '10px 16px', borderRadius: '6px', display: 'flex', alignItems: 'center', marginBottom: '24px', gap: '12px' }}>
                    <span className="ri-information-line" style={{ color: '#0086FF', fontSize: '20px' }}></span>
                    <span style={{ color: '#0086FF', fontSize: '12px', fontWeight: 500 }}>Choose which failed services you want to force-deploy with your approval.</span>
                </div>

                <div style={{ marginBottom: '16px', fontWeight: 600, fontSize: '14px', color: '#2F2F2F' }}>Services</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                    {data.map((item, index) => (
                        <div key={index} style={{ border: '1px solid #E6E6E6', borderRadius: '8px', padding: '14px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.12)' }}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
                                <input
                                    type="checkbox"
                                    checked={exceptionalServices.includes(item.service_name)}
                                    onChange={(e) => {
                                        if (e.target.checked) {
                                            setExceptionalServices([...exceptionalServices, item.service_name]);
                                        } else {
                                            setExceptionalServices(exceptionalServices.filter(s => s !== item.service_name));
                                        }
                                    }}
                                    style={{ width: '18px', height: '18px', cursor: 'pointer', accentColor: '#0086FF' }}
                                />
                                <div style={{ display: 'flex', flexDirection: 'column' }}>
                                    <span style={{ fontWeight: 600, fontSize: '14px', color: '#2F2F2F' }}>{item.service_name}</span>
                                    <span style={{ fontSize: '12px', color: '#828282' }}>{item.env_name}</span>
                                </div>
                            </div>
                            <NewChip label="FAILED" variant="error" shape="standard" />
                        </div>
                    ))}
                </div>
            </div>
        );
    };

    const renderRerunOrApproval = (buttonLabel = "RE-RUN FAILED JOB", isBuild = false) => {
        if (data && data.length > 0) {
            return <RerunAfterFailure pipeline={pipeline_data} data={data} rerunJob={rerunJob} buttonLabel={buttonLabel} btnClassName={`btn-primary btn-semi-bold ${isBuild ? 'flex-grow-1' : ''}`} />;
        }
        if (isStageFailure) {
            return <FillApprovalQuestions stage_instance_id={failed_stage_instance && failed_stage_instance.id} pipeline_id={pipeline_id || ""} pipeline_instance_id={pipeline_instance_id || ""} postFinalData={postFinalData} stage_name={failed_stage_instance.name} btnVariant="re_attempt" stage_instance_status={failed_stage_instance && failed_stage_instance.status} questionnaires={filterApprovalQuestionsStage && filterApprovalQuestionsStage.questionnaires} />;
        }
        return null;
    };

    const renderFooter = () => {
        const isCanary = failed_task_dep_type === "canary" || taskType === "CANARY_ANALYSIS";
        const isBuild = ["BUILD", "GLOBAL_BUILD", "DEPLOY", "GLOBAL_DEPLOY", "PROMOTE", "GLOBAL_PROMOTE", "ANDROID_BUILD"].includes(taskType) && !isCanary;
        const showActionButtons = !(error && loading);
        const footerClass = (isBuild && !exceptionalView && showTable) ? 'build-footer w-100' : 'justify-end';
        const showOlly = (ollyEnabled === "true" && showActionButtons && !exceptionalView && showTable);

        let footerButtons = null;

        if (exceptionalView) {
            if (exceptionalStep === 1) {
                footerButtons = (
                    <>
                        <button className='btn btn-semi-bold' style={{ backgroundColor: 'transparent', color: '#2F2F2F', border: 'none', boxShadow: 'none', textShadow: 'none' }} onClick={() => setExceptionalView(false)}>CANCEL</button>
                        <button className='btn btn-outlined d-flex align-center justify-center btn-semi-bold' style={{ color: '#124D9B' }} onClick={() => setExceptionalView(false)}>BACK</button>
                        <button
                            className={`btn btn-primary d-flex align-center justify-center btn-semi-bold ${exceptionalServices.length === 0 ? 'disabled' : ''}`}
                            disabled={exceptionalServices.length === 0}
                            onClick={() => setExceptionalStep(2)}
                        >
                            NEXT
                        </button>
                    </>
                );
            } else {
                footerButtons = (
                    <>
                        <button className='btn btn-semi-bold' style={{ backgroundColor: 'transparent', color: '#2F2F2F', border: 'none', boxShadow: 'none', textShadow: 'none' }} onClick={() => setExceptionalView(false)}>CANCEL</button>
                        <button className='btn btn-outlined d-flex align-center justify-center btn-semi-bold' style={{ color: '#124D9B' }} onClick={() => setExceptionalStep(1)}>BACK</button>
                        <button
                            className={`btn btn-primary d-flex align-center justify-center btn-semi-bold ${exceptionalJustification.trim().length === 0 ? 'disabled' : ''}`}
                            disabled={exceptionalJustification.trim().length === 0}
                            onClick={() => postContinuePipelineData(exceptionalServices, exceptionalJustification)}
                        >
                            APPROVE & PROCEED
                        </button>
                    </>
                );
            }
        } else if (!showTable) {
            footerButtons = (
                <>
                    <button className='btn btn-semi-bold' style={{ backgroundColor: 'transparent', color: '#2F2F2F', border: 'none', boxShadow: 'none', textShadow: 'none' }} onClick={handleClose}>CANCEL</button>
                    <button className='btn btn-outlined d-flex align-center justify-center btn-semi-bold' style={{ color: '#124D9B' }} onClick={backClicked}>BACK</button>
                    <button className='btn btn-primary d-flex align-center justify-center btn-semi-bold' onClick={() => postContinuePipelineData()}>CONTINUE</button>
                </>
            );
        } else if (showActionButtons) {
            footerButtons = (
                <>
                    {!isStageFailure && taskType !== "CANARY_ANALYSIS" && (
                        <button className='btn btn-outlined d-flex align-center justify-center btn-semi-bold' style={{ color: '#124D9B', flex: isBuild ? 1 : 'initial' }} onClick={continueClicked}>
                            {isBuild ? <>SKIP FAILED JOBS AND <br /> CONTINUE</> : "SKIP FAILED JOBS AND CONTINUE"}
                        </button>
                    )}
                    {isCanary && (
                        <button className='btn btn-secondary d-flex align-center justify-center btn-semi-bold' style={{ backgroundColor: '#FEA111', flex: isBuild ? 1 : 'initial' }} onClick={handleCompleteRollback}>COMPLETE ROLLBACK</button>
                    )}
                    {isBuild && (
                        <button className='btn btn-secondary d-flex align-center justify-center btn-semi-bold' style={{ backgroundColor: '#FEA111', flex: 1 }} onClick={() => setExceptionalView(true)}>CONTINUE WITH <br /> EXCEPTION</button>
                    )}
                    {renderRerunOrApproval(
                        isBuild
                            ? (isCanary ? <span>RE-RUN <br /> JOB</span> : <span>RE-RUN FAILED <br /> JOB</span>)
                            : (isCanary ? "RE-RUN JOB" : "RE-RUN FAILED JOB"),
                        isBuild
                    )}
                </>
            );
        }



        return (
            <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
                {(!exceptionalView && showTable && showActionButtons && isBuild) && (
                    <div style={{ paddingBottom: '0px', fontSize: '13px', fontWeight: 500, color: '#2F2F2F', textAlign: 'left' }}>
                        how do you want to recover?
                    </div>
                )}
                <div className={`footer-right-panel d-flex align-center ${footerClass}`} style={{ gap: '12px' }}>
                    {showOlly && (
                        <Tooltip title="BP Log Analyzer">
                            <span>
                                <Button
                                    variant="olly"
                                    style={{ padding: "8px 11px" }}
                                    onClick={() => {
                                        handleClose();
                                        if (openOlly) openOlly();
                                    }}
                                ></Button>
                            </span>
                        </Tooltip>
                    )}
                    {footerButtons}
                </div>
            </div>
        );
    };

    const renderManageFailureSkeleton = () => (
        <div>
            {/* Table skeleton */}
            <div style={{ border: '1px solid #e0e0e0', borderRadius: '4px', overflow: 'hidden' }}>
                {/* Table header */}
                <div style={{ padding: '12px 16px', borderBottom: '1px solid #e0e0e0', backgroundColor: '#fafafa' }}>
                    <GenericSkeleton variant="text" width="40%" height="var(--space-20)" />
                </div>
                {/* Column headers */}
                <div style={{ display: 'flex', gap: '12px', padding: '12px 16px', borderBottom: '1px solid #e0e0e0', backgroundColor: '#fafafa' }}>
                    <GenericSkeleton variant="text" width="100%" height="var(--space-16)" />
                    <GenericSkeleton variant="text" width="100%" height="var(--space-16)" />
                    <GenericSkeleton variant="text" width="100%" height="var(--space-16)" />
                    <GenericSkeleton variant="text" width="100%" height="var(--space-16)" />
                </div>
                {/* Data rows */}
                {[1, 2, 3].map((row) => (
                    <div key={row} style={{ display: 'flex', gap: '12px', padding: '14px 16px', borderBottom: row < 3 ? '1px solid #e0e0e0' : 'none' }}>
                        <GenericSkeleton variant="rect" width="100%" height="var(--space-24)" style={{ borderRadius: '4px' }} />
                        <GenericSkeleton variant="rect" width="100%" height="var(--space-24)" style={{ borderRadius: '4px' }} />
                        <GenericSkeleton variant="rect" width="100%" height="var(--space-24)" style={{ borderRadius: '4px' }} />
                        <GenericSkeleton variant="rect" width="100%" height="var(--space-24)" style={{ borderRadius: '4px' }} />
                    </div>
                ))}
            </div>
            {/* PLEASE NOTE skeleton */}
            <div style={{ border: '1px solid #e0e0e0', borderRadius: '4px', overflow: 'hidden', marginTop: '24px', background: '#DFEDFF' }}>
                {/* Note header */}
                <div style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '12px 12px 0 12px' }}>
                    <GenericSkeleton variant="circle" width="var(--space-24)" height="var(--space-24)" rootStyle={{ flex: '0 0 auto' }} />
                    <GenericSkeleton variant="text" width="100%" height="var(--space-20)" rootStyle={{ maxWidth: '30%' }} />
                </div>
                {/* Note body lines */}
                <div style={{ padding: '12px 16px 16px 41px' }}>
                    <GenericSkeleton variant="text" width="90%" height="var(--space-16)" style={{ marginBottom: '8px' }} />
                    <GenericSkeleton variant="text" width="70%" height="var(--space-16)" style={{ marginBottom: '16px' }} />
                    <GenericSkeleton variant="text" width="80%" height="var(--space-16)" style={{ marginBottom: '6px' }} />
                    <GenericSkeleton variant="text" width="65%" height="var(--space-16)" style={{ marginBottom: '6px' }} />
                    <GenericSkeleton variant="text" width="55%" height="var(--space-16)" />
                </div>
            </div>
        </div>
    );

    const renderContent = () => {
        if (loading) return renderManageFailureSkeleton();
        if (exceptionalView) return renderExceptionalApprovalContent();
        if (error) {
            return (
                <div className='pd-20 text-center mt-20 mb-20' style={{ backgroundColor: '#F8F8F8', borderRadius: '8px' }}>
                    <i className="ri-error-warning-line text-center" style={{ color: '#e9797e', textAlign: 'center', fontSize: '40px' }}></i>
                    <p className="font-12 text-center">{typeof error === "string" ? error : error.toString()}</p>
                    <p className="font-12 text-center">Something went wrong. please contact to the Super Admin</p>
                </div>
            );
        }
        if (isStageFailure) {
            return (
                <div className={classes.tableContainer}>
                    <div className={classes.tableHeader}><span className={classes.headerTitle}>{tableConfig.title}</span></div>
                    <table className={classes.table}>
                        <thead><tr>{tableConfig.columns.map((col, i) => <th key={i}>{col}</th>)}</tr></thead>
                        <tbody><tr><td>{failedStageData.name}</td><td>{getStatusChip(failedStageData.status)}</td><td>N/A</td></tr></tbody>
                    </table>
                </div>
            );
        }
        if (!data || data.length === 0) {
            return <span className='d-flex align-center justify-center'><span className='mt-12 font-16 mr-auto font-weight-500 color-icon-secondary'>No Data Found</span></span>;
        }
        if (showTable) {
            return (
                <div className={classes.tableContainer}>
                    <div className={classes.tableHeader}>
                        <span className={classes.headerTitle}>{tableConfig.title}</span>
                        {envBadge && <span className={classes.stagingBadge}><NewChip label={envBadge} variant={"highlight2"} shape="standard" /></span>}
                    </div>
                    <table className={classes.table}>
                        <thead><tr>{tableConfig.columns.map((col, i) => <th key={i}>{col}</th>)}</tr></thead>
                        <tbody>{data.map((item, index) => <tr key={index}>{renderRowCells(item)}</tr>)}</tbody>
                    </table>
                </div>
            );
        }
        return <ConfirmationScreen data={data} complete_rollback={complete_rollback} failed_task_dep_type={failed_task_dep_type} failedServices={failedServices} servicesContinuing={servicesContinuing} formData={formData} formError={formError} onChangeHandler={onChangeHandler} />;
    };

    return (
        <Dialog fullWidth={true} maxWidth={'md'} open={open} onClose={handleClose} className={`${classes.root} dialog-align-corner`} aria-labelledby="max-width-dialog-title">
            <div className='d-grid ml-auto dialog-sub-component' style={{ gridTemplateColumns: '396px 650px' }}>
                <div className={'left-panel-dialog-down'}></div>
                <div className='right-panel-dialog bg-white'>
                    <>
                        <div className='font-18 font-weight-600 color-white d-flex align-center space-between' style={{ backgroundColor: '#0086ff', padding: '13.5px 20px' }}>
                            <p>Manage Failure</p>
                            <button className='btn float-cancel-button float-cancel-button-manage-failure' style={{ left: '396px' }} onClick={handleClose}><span className='ri-close-line'></span></button>
                        </div>
                        {!exceptionalView && (
                            <div className='d-flex align-center space-between' style={{ padding: '20px 20px' }}>
                                <p>{headerText}</p>
                            </div>
                        )}
                        <div className="body-panel-wrapper" style={{ height: exceptionalView ? 'calc(100vh - 58px)' : 'calc(100vh - 120px)', display: 'flex', flexDirection: 'column' }}>
                            <div className="body-panel-new-one" style={{ padding: '0 20px 16px 20px', flex: 1, overflowY: 'auto', height: 'auto' }}>
                                {renderContent()}
                                {!loading && !exceptionalView && showTable && <div>
                                    <div className={classes.noteContainer}>
                                        <div className={classes.noteHeader}>
                                            <span className="ri-information-line font-24"></span>
                                            <span className={classes.noteTitle}>PLEASE NOTE</span>
                                        </div>
                                        <div className={classes.noteBody}>
                                            {(() => {
                                                const noteContent = getNoteContent(taskType, data, failed_task_dep_type, isStageFailure, failedTask, failedTaskDefinition, rollingPercentage);
                                                return (
                                                    <>
                                                        {noteContent.description}
                                                        {noteContent.options.length > 0 && (
                                                            <>
                                                                <p>You may use one of the following options to recover from this failure:</p>
                                                                <ol>{noteContent.options.map((opt, i) => <li key={i}>{opt}</li>)}</ol>
                                                            </>
                                                        )}
                                                    </>
                                                );
                                            })()}
                                        </div>
                                    </div>
                                </div>}
                            </div>
                            <div style={{ padding: '0 20px 16px 20px', flexShrink: 0 }}>
                                {loading ? (
                                    <div className='footer-right-panel d-flex align-center justify-end' style={{ gap: '12px', paddingTop: '16px' }}>
                                        <GenericSkeleton variant="rect" width="180px" height="40px" style={{ borderRadius: '6px' }} rootStyle={{ flex: '0 0 auto' }} />
                                        <GenericSkeleton variant="rect" width="150px" height="40px" style={{ borderRadius: '6px' }} rootStyle={{ flex: '0 0 auto' }} />
                                        <GenericSkeleton variant="rect" width="120px" height="40px" style={{ borderRadius: '6px' }} rootStyle={{ flex: '0 0 auto' }} />
                                    </div>
                                ) : renderFooter()}
                            </div>
                        </div>
                    </>
                </div>
            </div>
        </Dialog>
    );
};

ManageFailure.propTypes = {
    open: PropTypes.bool, handleClose: PropTypes.func, data: PropTypes.array, loading: PropTypes.bool,
    error: PropTypes.any, failedStageData: PropTypes.object, failedTask: PropTypes.object,
    failedServices: PropTypes.array, servicesContinuing: PropTypes.array, pipeline_data: PropTypes.object,
    rerunJob: PropTypes.func, postContinuePipelineData: PropTypes.func, handleCompleteRollback: PropTypes.func,
    failed_task_dep_type: PropTypes.string, showTable: PropTypes.bool, complete_rollback: PropTypes.bool,
    backClicked: PropTypes.func, continueClicked: PropTypes.func, formData: PropTypes.object,
    formError: PropTypes.object, onChangeHandler: PropTypes.func, failed_stage_instance: PropTypes.object,
    filterApprovalQuestionsStage: PropTypes.object, pipeline_id: PropTypes.any,
    pipeline_instance_id: PropTypes.any, postFinalData: PropTypes.func, openOlly: PropTypes.func, ollyEnabled: PropTypes.any,
};

export default ManageFailure;

const useStyles = makeStyles((theme) => ({
    root: {
        '&.dialog-align-corner': { '& .MuiPaper-root': { maxWidth: '1100px' } },
        '& .MuiBackdrop-root': { backdropFilter: 'none !important', backgroundColor: 'transparent !important' },
        '& .left-panel-dialog-down': { width: '0px', overflow: 'hidden', transition: `'width 5s', 'overflow 1s'` },
        '& .body-panel-new-one': { padding: '10px 16px', height: 'calc(100vh - 120px)', overflowY: 'auto', position: 'relative' },
        '& .footer-right-panel': {
            paddingTop: '16px',
            '& .btn-semi-bold': {
                fontFamily: 'Montserrat, sans-serif',
                fontWeight: 600,
                fontSize: '12px',
                textTransform: 'uppercase',
                lineHeight: '1',
                height: '40px',
                padding: '8px 16px',
                border: 'none',
                borderRadius: '6px',
                textShadow: '0px 2px 1px rgba(0, 0, 0, 0.25)',
                whiteSpace: 'nowrap'
            },
            '& .btn-outlined': {
                backgroundColor: '#ffffff',
                border: '1px solid #9DC0EE',
                textShadow: 'none',
                transition: 'none !important',
                '&:hover': { backgroundColor: '#ffffff !important' },
                '&:focus': { outline: 'none !important', boxShadow: 'none !important', backgroundColor: '#ffffff !important' },
                '&:active': { backgroundColor: '#ffffff !important', boxShadow: 'none !important' }
            },
            '& .btn-primary-v2': {
                height: '40px !important',
                borderRadius: '6px !important',
                padding: '8px 16px !important',
                fontFamily: 'Montserrat, sans-serif !important',
                fontSize: '12px !important',
                lineHeight: '1 !important',
                display: 'flex !important',
                alignItems: 'center !important',
                justifyContent: 'center !important',
                boxShadow: 'none !important',
                whiteSpace: 'nowrap'
            },
            '&.build-footer': {
                width: '100%',
                '& > span': {
                    flex: '0 0 auto'
                },
                '& .btn, & button, & .flex-grow-1': {
                    flex: '1 1 0%',
                    minWidth: '0',
                    height: '40px !important',
                    borderRadius: '6px !important',
                    padding: '4px 16px !important',
                    fontSize: '11px !important',
                    fontWeight: '600 !important',
                    fontFamily: 'Montserrat, sans-serif !important',
                    textTransform: 'uppercase !important',
                    lineHeight: '1.1 !important',
                    boxShadow: 'none !important',
                    display: 'flex !important',
                    alignItems: 'center !important',
                    justifyContent: 'center !important',
                    textAlign: 'center !important',
                    border: 'none',
                    whiteSpace: 'normal'
                },
                '& .btn-outlined': {
                    border: '1px solid #9DC0EE !important'
                }
            },
            '& .btn-primary': {
                backgroundColor: '#0086ff',
                color: '#fff',
                transition: 'none !important',
                '&:hover': { backgroundColor: '#0086ff !important' },
                '&:focus': { outline: 'none !important', boxShadow: 'none !important', backgroundColor: '#0086ff !important' },
                '&:active': { backgroundColor: '#0086ff !important', boxShadow: 'none !important' }
            },
        }
    },
    tableContainer: { border: '1px solid #e0e0e0', borderRadius: '4px', overflow: 'hidden' },
    noteContainer: { border: '1px solid #e0e0e0', borderRadius: '4px', overflow: 'hidden', marginTop: '24px', background: '#DFEDFF', marginBottom: '232px' },
    tableHeader: { display: 'flex', alignItems: 'center', padding: '12px 16px', borderBottom: '1px solid #e0e0e0', fontSize: '14px', fontWeight: 600 },
    noteHeader: { display: 'flex', alignItems: 'center', color: '#0086FF', padding: '12px 6px 0 12px', fontSize: '14px', fontWeight: 700 },
    headerTitle: { fontSize: '14px', fontWeight: 600, color: '#333' },
    noteTitle: { fontSize: '14px', fontWeight: 600, color: '#0086FF', marginLeft: '12px' },
    noteBody: { padding: '0 16px 16px 41px', fontSize: '13px', color: '#0086FF', marginLeft: '10px', '& p': { margin: '0 0 18px 0' }, '& ol': { paddingLeft: '16px', margin: 0 }, '& li': { marginBottom: '3px', color: '#0086FF', cursor: 'pointer' } },
    stagingBadge: { marginLeft: 'auto', fontSize: '12px', fontWeight: 700, padding: '2px 8px' },
    table: {
        width: '100%', borderCollapse: 'collapse',
        '& thead': { backgroundColor: '#fafafa', '& th': { padding: '12px 16px', textAlign: 'left', fontSize: '12px', fontWeight: 700, color: '#2F2F2F', borderBottom: '1px solid #e0e0e0' } },
        '& tbody': { '& tr': { borderBottom: '1px solid #e0e0e0', '&:last-child': { borderBottom: 'none' } }, '& td': { padding: '12px 16px', fontSize: '13px', color: '#333' } }
    },
    linkText: { color: '#0086ff', cursor: 'pointer', '&:hover': { textDecoration: 'underline' } }
}));