import dash
from dash import html, dcc, callback, Input, Output
import dash_mantine_components as dmc
from dash_iconify import DashIconify

dash.register_page(__name__, path='/rac-generation-agent', name='Génération du RAC')

tasks = [
    "Récupération des offres d'emploi",
    "Récupération des statistiques de l'emploi",
    "Récupération de la fiche métier",
    "Génération de la cotation du secteur",
]

def create_stepper_step(step_id, label):
    return dmc.Group(
        [
            dmc.Box(id=f"icon-{step_id}", children=DashIconify(icon="radix-icons:dot", width=20)),
            dmc.Text(label),
        ],
        mb="sm",
    )

layout = dmc.Container(
    [
        html.Script(
            """
            document.addEventListener('DOMContentLoaded', function() {
                const socket = io.connect(window.location.protocol + '//' + document.domain + ':' + location.port);

                const startButton = document.getElementById('start-rac-button');
                
                const taskIcons = {
                    'Récupération des offres d'emploi': 'icon-step-0',
                    'Récupération des statistiques de l'emploi': 'icon-step-1',
                    'Récupération de la fiche métier': 'icon-step-2',
                    'Génération de la cotation du secteur': 'icon-step-3',
                };

                const streamingOutputs = {
                    'Récupération des offres d'emploi': 'streaming-output-0',
                    'Récupération des statistiques de l'emploi': 'streaming-output-1',
                    'Récupération de la fiche métier': 'streaming-output-2',
                    'Génération de la cotation du secteur': 'streaming-output-3',
                };
                
                let currentStep = '';
                
                socket.on('stream', function(msg) {
                    if (msg.step !== currentStep) {
                        if(currentStep) {
                            const oldIcon = document.getElementById(taskIcons[currentStep]);
                            oldIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5l1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>'; // Checkmark icon
                        }
                        currentStep = msg.step;
                        const icon = document.getElementById(taskIcons[currentStep]);
                        icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-dasharray="15" stroke-dashoffset="15" stroke-linecap="round" stroke-width="2" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></svg>';
                    }
                    const output = document.getElementById(streamingOutputs[msg.step]);
                    output.innerHTML += msg.data;
                });
                
                socket.on('stream_end', function(msg) {
                     if(msg.step === "Génération de la cotation du secteur") {
                          const icon = document.getElementById(taskIcons[msg.step]);
                          icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5l1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>';
                     }
                });

                startButton.addEventListener('click', function() {
                    fetch('/start_rac_agent', {method: 'POST'})
                        .then(response => response.json())
                        .then(data => console.log(data.status));
                });
            });
            """
        ),
        dmc.Title("Génération du Référentiel d'Activités et de Compétences (RAC)", order=2, mb="lg"),
        dmc.Button("Démarrer la génération", id="start-rac-button", mb="lg"),
        dmc.Grid(
            [
                dmc.GridCol(
                    [
                        dmc.Title("Statut des tâches", order=4, mb="md"),
                        *[create_stepper_step(f"step-{i}", task) for i, task in enumerate(tasks)]
                    ],
                    span=4
                ),
                dmc.GridCol(
                    [
                        dmc.Title("Contenu généré", order=4, mb="md"),
                        *[dmc.Paper(
                            shadow="xs", p="md", withBorder=True, mb="sm",
                            id=f"streaming-output-{i}",
                            style={"whiteSpace": "pre-line", "fontFamily": "monospace"}
                        ) for i, task in enumerate(tasks)]
                    ],
                    span=8
                ),
            ]
        )
    ],
    fluid=True,
    p="lg",
    pt="xl"
)