<?php
// Temporarily remove validation
// session_start();
require_once("classes/User.php");
require_once("classes/SubjectData.php");
require_once("classes/TopicData.php");

$allSubjects = SubjectData::getAll();
$editingTopic = null;

$defaultValues = array();
$defaultValues['displayName'] = "";
$defaultValues['id'] = "";
$defaultValues['subjectId'] = "";
$defaultValues['description'] = "";
$defaultValues['icon'] = "";
$defaultValues['relatedTopics'] = "";
$defaultValues['article'] = "";

$errors = array();

if (isset($_GET['subject']) && isset($_GET['topic'])) {
    if (isset($allSubjects[$_GET['subject']]->getTopics()[$_GET['topic']])) {
        $editingTopic = $allSubjects[$_GET['subject']]->getTopics()[$_GET['topic']];

        $defaultValues['displayName'] = $editingTopic->getDisplayName();
        $defaultValues['id'] = $editingTopic->getId();
        $defaultValues['subjectId'] = $editingTopic->getSubjectId();
        $defaultValues['description'] = $editingTopic->getDescription();
        $defaultValues['icon'] = $editingTopic->getIcon();
        $defaultValues['relatedTopics'] = implode(", ", $editingTopic->getRelatedTopics());
        $defaultValues['article'] = $editingTopic->getFinishedArticle();
    }
} else if(isset($_GET['subject'])) {
    $defaultValues['subjectId'] = $_GET['subject'];
}

if($_SERVER['REQUEST_METHOD'] == 'POST') {
    foreach ($defaultValues as $key => $value) {
        $defaultValues[$key] = $_POST[$key];
    }

    if(!isset($_POST['displayName']) || trim($_POST['displayName']) == "") {
        $errors["displayName"] = "Bitte geben Sie einen Namen an.";
    }

    if(!isset($_POST['id']) || trim($_POST['id']) == "") {
        $errors["id"] = "Bitte geben Sie eine ID an.";
    }

    if(!isset($_POST['subjectId']) || trim($_POST['subjectId']) == "") {
        $errors["subjectId"] = "Bitte geben Sie ein Fach an.";
    }

    if(!isset($_POST['description']) || trim($_POST['description']) == "") {
        $errors["description"] = "Bitte geben Sie eine Beschreibung an.";
    }

    if(!isset($_POST['icon']) || trim($_POST['icon']) == "") {
        $errors["icon"] = "Bitte geben Sie ein Icon an.";
    }

    if(!isset($_POST['article']) || trim($_POST['article']) == "") {
        $errors["article"] = "Bitte geben Sie einen Erklärtext an.";
    }

    if(!isset($_POST['submit']) || !($_POST['submit'] == "Speichern" || $_POST['submit'] == "Thema löschen")) {
        $errors["submit"] = "Ungültig abgeschickt!";
    }

    if(empty($errors)) {
        $newTopic = false;

        $relatedTopics = array();
        foreach (explode(",", $_POST['relatedTopics']) as $relatedTopic) {
            $relatedTopic = trim($relatedTopic);
            if($relatedTopic == "") {
                continue;
            }
            $relatedTopics[] = $relatedTopic;
        }

        $dom = new DOMDocument();
        $dom->loadHTML($_POST['article']);
        $article = $dom->textContent;

        if(isset($allSubjects[$_POST['subjectId']]->getTopics()[$_POST['id']])) {
            $newTopic = $allSubjects[$_POST['subjectId']]->getTopics()[$_POST['id']];

            $newTopic->setDisplayName($_POST['displayName']);
            $newTopic->setSubjectId($_POST['subjectId']);
            $newTopic->setDescription($_POST['description']);
            $newTopic->setIcon($_POST['icon']);

            $newTopic->setRelatedTopics($relatedTopics);
            $newTopic->setArticle($article);
        } else {
            $newTopic = TopicData::createNew($_POST['id'], $_POST['subjectId'], $_POST['displayName'], $_POST['icon'], $_POST['description'], $relatedTopics, $article);
        }

        if(!$newTopic) {
            $errors["error"] = "Fehler beim Speichern des Themas.";
        } else {
            if($_POST['submit'] == "Thema löschen") {
                $newTopic->delete();
                header("Location: " . "subject.php?subject=" . $_POST['subjectId']);
            } else {
                $newTopic->save();
                header("Location: " . "topic.php?subject=" . $newTopic->getSubjectId() . "&topic=" . $newTopic->getId());
            }

        }
    }

}

?>
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Lehrer Dashboard</title>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="assets/css/topic.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet"/>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="assets/js/quill_mod.js"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.19/dist/katex.min.css" integrity="sha384-7lU0muIg/i1plk7MgygDUp3/bNRA65orrBub4/OSWHECgwEsY83HaS1x3bljA/XV" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.19/dist/katex.min.js" integrity="sha384-RdymN7NRJ+XoyeRY4185zXaxq9QWOOx3O7beyyrRK4KQZrPlCDQQpCu95FoCGPAE" crossorigin="anonymous"></script>
    <script src="assets/js/katex_autorender_mod.js"></script>
</head>

<body class="min-h-screen bg-gray-50">

<form id="topicForm" method="post" class="space-y-8">
    <div class="grid grid-cols-1 xl:grid-cols-2 gap-8">
        <!-- Left column - Topic details -->
        <div class="space-y-6">
            <div>
                <label for="topicNameSelect" class="block text-sm font-medium text-gray-700">Themenname</label>
                <input id="topicNameSelect" type="text" name="displayName"
                       class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required value="<?php echo $defaultValues['displayName']; ?>">
            </div>

            <div>
                <label for="topicIdSelect" class="block text-sm font-medium text-gray-700">ID</label>
                <input id="topicIdSelect" type="text" name="id"
                       class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required value="<?php echo $defaultValues['id']; ?>">
            </div>

            <div>
                <label for="topicSubjectSelect" class="block text-sm font-medium text-gray-700">Fach</label>
                <select id="topicSubjectSelect" name="subjectId"
                        class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required>
                    <option value="">Fach auswählen...</option>
                    <?php
                    foreach ($allSubjects as $subject) {
                        $selected = "";
                        if ($defaultValues['subjectId'] === $subject->getId()) {
                            $selected = "selected";
                        }

                        echo "<option $selected value='" . $subject->getId() . "'>" . $subject->getDisplayName() . "</option>";
                    }
                    ?>
                </select>
            </div>

            <div>
                <label for="topicDescriptionSelect"
                       class="block text-sm font-medium text-gray-700">Kurzbeschreibung</label>
                <textarea id="topicDescriptionSelect" name="description" rows="5"
                          class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required><?php echo $defaultValues['description']; ?></textarea>
            </div>

            <div>
                <label for="iconSelect" class="block text-sm font-medium text-gray-700">Icon</label>
                <input class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" type="text" name="icon"
                       id="iconSelect" value="<?php echo $defaultValues['icon']; ?>">
            </div>

            <div>
                <label for="relatedTopicSelect" class="block text-sm font-medium text-gray-700">Verwandte Themen
                    als IDs und kommagetrennt</label>
                <input class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" type="text"
                       name="relatedTopics" id="relatedTopicSelect" value="<?php echo $defaultValues['relatedTopics']; ?>">
            </div>
        </div>

        <!-- Right column - Editor -->
        <div>
            <div class="mb-6">
                <div class="flex justify-between items-center mb-2">
                    <label class="block text-sm font-medium text-gray-700">Bildungsinhalt</label>
                    <div class="flex gap-2">
                        <button type="button" onclick="editor.undo()"
                                class="text-gray-500 hover:text-gray-700 p-1">
                            <i class="fas fa-undo"></i>
                        </button>
                        <button type="button" onclick="editor.redo()"
                                class="text-gray-500 hover:text-gray-700 p-1">
                            <i class="fas fa-redo"></i>
                        </button>
                    </div>
                </div>

                <div id="quillEditor" style="height: 400px;" class="bg-white border rounded-lg">
                    <?php
                    $article = $defaultValues['article'];

                    echo $article;

                    ?>
                </div>
            </div>
        </div>
    </div>

    <div class="border rounded-lg p-8 mt-8 bg-gray-50">
        <h4 class="text-lg font-medium text-gray-700 mb-4">Vorschau</h4>
        <div id="contentPreview" class="content-text prose prose-lg max-w-none bg-white p-6 rounded-lg shadow-sm"></div>
    </div>

    <div class="flow-root gap-4">
        <input type="submit" value="Thema löschen" name="submit"
               class="float-left px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-gray-200">
        <input type="submit" value="Speichern" name="submit"
               class="float-right px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
        <input type="button" value="Abbrechen" onclick="history.back()"
               class="float-right mx-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">
    </div>

    <input type="hidden" name="article" id="article-upload-field">
</form>

<script>
    function renderFormulas() {
        renderMathInElement(document.body, {
            delimiters: [
                {left: "$$", right: "$$", display: true},
                {left: "\\(", right: "\\)", display: false},
                {left: "\\begin{equation}", right: "\\end{equation}", display: true},
                {left: "\\begin{array}", right: "\\end{array}", display: true},
                {left: "\\begin{align}", right: "\\end{align}", display: true},
                {left: "\\begin{alignat}", right: "\\end{alignat}", display: true},
                {left: "\\begin{gather}", right: "\\end{gather}", display: true},
                {left: "\\begin{CD}", right: "\\end{CD}", display: true},
                {left: "\\[", right: "\\]", display: true}
            ],
            throwOnError : false
        });
    }

    renderFormulas();

    const quill = new Quill('#quillEditor', {
        modules: {
            toolbar: [
                [{'size': []}],
                ['bold', 'italic', 'underline', 'strike'],
                [{'script': 'super'}, {'script': 'sub'}],
                [{'list': 'ordered'}, {'list': 'bullet'}],
                ['link', 'image', 'formula'],
            ]
        },
        theme: 'snow'
    });

    quill.on('text-change', (delta, oldDelta, source) => {
        let html = quill.getSemanticHTML().replace(/&nbsp;/g, " ");
        html = html.replaceAll("<p></p>", "<br>");

        document.getElementById('contentPreview').innerHTML = html;
        document.getElementById('article-upload-field').value = html;
        renderFormulas();
    });
    quill.emitter.emit('text-change');

</script>

</body>
</html>