import networkx as nx
import pandas as pd
from pyvis.network import Network
import os
from urllib.parse import quote

# CSVファイルを読み込む
df_rikaim = pd.read_csv("rikaim.csv")
df_graph = pd.read_csv("ori.csv")


username="1111"

user_row = df_rikaim[df_rikaim["username"] == username]
print(user_row)
user_data = user_row.drop(columns=["username"]).values.flatten().tolist()
print(user_data)

# ノード名、ノード番号、前提条件の列を抽出
nodes_data = df_graph["単元名"].tolist()
node_numbers = df_graph["単元番号"].tolist()
conditions = df_graph["前単元"].tolist()

G = nx.DiGraph()  # 有向グラフに変更

# ノード名を変更するための辞書を作成
node_names = {node_numbers[i]: f"{node_numbers[i]} - {nodes_data[i]}" for i in range(len(node_numbers))}


# ノードの色を設定
color_mapping = {
    0: 'crimson',
    1: 'orange',
    2: 'khaki',
    3: 'palegreen',
    4: 'forestgreen',
    5: 'deepskyblue',
}

# ノード間に逆向きの有向エッジ（逆向きの矢印）を作成
for i in range(len(nodes_data)):
    condition = conditions[i]

    if pd.isna(condition) or condition == 99999:  # NaNや99999に対応
        continue
    else:
        # conditionがfloat型の場合は整数に変換
        if isinstance(condition, float):
            condition = int(condition)
        
        # 条件が複数の場合も考慮してリストに変換
        dependent_nodes = [str(condition)] if isinstance(condition, int) else [str(int(c)) for c in condition.split(',')]

        for dependent_node in dependent_nodes:
            dependent_node = int(dependent_node)
            if dependent_node in node_numbers:
                G.add_edge(node_names[dependent_node], node_names[node_numbers[i]])

# Networkインスタンスを作成
net = Network(notebook=True)

# ノードと有向エッジをネットワークに追加
for node in G.nodes:
    node_number = int(node.split(" - ")[0])
    if node_number in node_numbers:
        index = node_numbers.index(node_number)
        color = color_mapping.get(user_data[index], 'gray')
        link = f'Kyouzai/{node_number}.html'
        net.add_node(node, color=color, originalColor=color, title=f'<a href="{link}" target="_blank">{node.split(" - ")[1]}</a>')

    else:
        net.add_node(node, color='gray')

for edge in G.edges:
    net.add_edge(edge[0], edge[1], arrows='to')
    

# ネットワークグラフを表示
net.show('link_network.html')

# ノードの検索とリセットのJavaScriptコードと検索ボックスを追加
search_script = """
<script>
function searchNodes() {
    var searchText = document.getElementById('searchBox').value;
    var nodes = network.body.data.nodes.get();
    var foundNodes = nodes.filter(function(node) {
        return node.label.includes(searchText);
    });
    if (foundNodes.length > 0) {
        var foundNodeIds = foundNodes.map(function(node) {
            return node.id;
        });
        network.selectNodes(foundNodeIds);
        network.focus(foundNodeIds[0], {animation: true});
        // Found nodes are colored gray
        network.body.data.nodes.update(foundNodeIds.map(function(nodeId) {
            return {id: nodeId, color: 'gray'};
        }));
    } else {
        alert('ノードが見つかりませんでした。');
    }
}

function resetSearch() {
    document.getElementById('searchBox').value = '';
    network.unselectAll();
    // Reset node colors
    network.body.data.nodes.update(nodes.map(function(node) {
        return {id: node.id, color: node.originalColor};
    }));
}
</script>

<div style="position: absolute; top: 10px; right: 10px;">
    <input type="text" id="searchBox" placeholder="単元を検索">
    <button onclick="searchNodes()">検索</button>
    <button onclick="resetSearch()">リセット</button>
</div>
"""

# HTMLファイルにノード検索のJavaScriptコードと検索ボックスを追加
with open('link_network.html', 'a', encoding='utf-8') as html_file:
    html_file.write(search_script)
