<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dateiverwaltung</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div id="app">
        <!-- Header -->
        <header class="header">
            <div class="header-left">
                <h1>Dateiverwaltung</h1>
            </div>
            <div class="header-right">
                <span id="status-indicator"></span>
            </div>
        </header>

        <!-- Main Content -->
        <div class="main-container">
            <!-- Bereich 1: Mail-Abruf -->
            <section class="bereich">
                <div class="bereich-header">
                    <h2>📧 Mail-Abruf</h2>
                    <p class="bereich-desc">Attachments aus Postfächern in Ordner speichern</p>
                </div>

                <div class="bereich-content">
                    <!-- Postfächer Liste -->
                    <div class="card">
                        <div class="card-header">
                            <h3>Postfächer</h3>
                            <button class="btn btn-sm btn-primary" onclick="zeigePostfachModal()">+ Hinzufügen</button>
                        </div>
                        <div class="card-body">
                            <div id="postfaecher-liste">
                                <p class="empty-state">Keine Postfächer konfiguriert</p>
                            </div>
                        </div>
                    </div>

                    <!-- Abruf starten -->
                    <div class="action-bar">
                        <button class="btn btn-success btn-large" onclick="allePostfaecherAbrufen()">
                            ▶ Alle Postfächer abrufen
                        </button>
                    </div>

                    <!-- Letzter Abruf Log -->
                    <div class="card">
                        <div class="card-header">
                            <h3>Letzter Abruf</h3>
                        </div>
                        <div class="card-body">
                            <div id="abruf-log" class="log-output">
                                <p class="empty-state">Noch kein Abruf durchgeführt</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Bereich 2: Datei-Sortierung -->
            <section class="bereich">
                <div class="bereich-header">
                    <h2>📁 Datei-Sortierung</h2>
                    <p class="bereich-desc">Dateien nach Regeln umbenennen und verschieben</p>
                </div>

                <div class="bereich-content">
                    <!-- Quell-Ordner -->
                    <div class="card">
                        <div class="card-header">
                            <h3>Quell-Ordner</h3>
                            <button class="btn btn-sm btn-primary" onclick="zeigeOrdnerModal()">+ Hinzufügen</button>
                        </div>
                        <div class="card-body">
                            <div id="ordner-liste">
                                <p class="empty-state">Keine Ordner konfiguriert</p>
                            </div>
                        </div>
                    </div>

                    <!-- Regeln -->
                    <div class="card">
                        <div class="card-header">
                            <h3>Sortier-Regeln</h3>
                            <button class="btn btn-sm btn-primary" onclick="zeigeRegelModal()">+ Hinzufügen</button>
                        </div>
                        <div class="card-body">
                            <div id="regeln-liste">
                                <p class="empty-state">Keine Regeln definiert</p>
                            </div>
                        </div>
                    </div>

                    <!-- Sortierung starten -->
                    <div class="action-bar">
                        <button class="btn btn-success btn-large" onclick="sortierungStarten()">
                            ▶ Sortierung starten
                        </button>
                    </div>

                    <!-- Sortierungs-Log -->
                    <div class="card">
                        <div class="card-header">
                            <h3>Verarbeitete Dateien</h3>
                        </div>
                        <div class="card-body">
                            <div id="sortierung-log" class="log-output">
                                <p class="empty-state">Noch keine Dateien verarbeitet</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <!-- Modal: Postfach hinzufügen -->
        <div id="postfach-modal" class="modal hidden">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>Postfach hinzufügen</h3>
                    <button class="modal-close" onclick="schliesseModal('postfach-modal')">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" id="pf-name" placeholder="z.B. Firma Rechnungen">
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label>IMAP Server</label>
                            <input type="text" id="pf-server" placeholder="imap.example.com">
                        </div>
                        <div class="form-group">
                            <label>Port</label>
                            <input type="number" id="pf-port" value="993">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>E-Mail</label>
                        <input type="email" id="pf-email" placeholder="mail@example.com">
                    </div>
                    <div class="form-group">
                        <label>Passwort</label>
                        <input type="password" id="pf-passwort">
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label>IMAP-Ordner</label>
                            <input type="text" id="pf-ordner" value="INBOX">
                        </div>
                        <div class="form-group">
                            <label>Alle Ordner durchsuchen</label>
                            <select id="pf-alle-ordner">
                                <option value="false">Nein (nur angegebenen Ordner)</option>
                                <option value="true">Ja (alle Ordner)</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Welche Mails durchsuchen</label>
                        <select id="pf-nur-ungelesen">
                            <option value="false" selected>Alle Mails</option>
                            <option value="true">Nur ungelesene Mails</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Ziel-Ordner</label>
                        <div class="input-with-btn">
                            <input type="text" id="pf-ziel" value="/srv/http/dateiverwaltung/data/inbox/">
                            <button class="btn" type="button" onclick="oeffneBrowser('pf-ziel')">📁</button>
                        </div>
                        <small>Hier landen die Attachments</small>
                    </div>
                    <div class="form-group">
                        <label>Erlaubte Dateitypen</label>
                        <div class="checkbox-group" id="pf-typen-gruppe">
                            <label class="checkbox-item"><input type="checkbox" value=".pdf" checked> PDF</label>
                            <label class="checkbox-item"><input type="checkbox" value=".jpg"> JPG</label>
                            <label class="checkbox-item"><input type="checkbox" value=".jpeg"> JPEG</label>
                            <label class="checkbox-item"><input type="checkbox" value=".png"> PNG</label>
                            <label class="checkbox-item"><input type="checkbox" value=".gif"> GIF</label>
                            <label class="checkbox-item"><input type="checkbox" value=".tiff"> TIFF</label>
                            <label class="checkbox-item"><input type="checkbox" value=".doc"> DOC</label>
                            <label class="checkbox-item"><input type="checkbox" value=".docx"> DOCX</label>
                            <label class="checkbox-item"><input type="checkbox" value=".xls"> XLS</label>
                            <label class="checkbox-item"><input type="checkbox" value=".xlsx"> XLSX</label>
                            <label class="checkbox-item"><input type="checkbox" value=".csv"> CSV</label>
                            <label class="checkbox-item"><input type="checkbox" value=".txt"> TXT</label>
                            <label class="checkbox-item"><input type="checkbox" value=".zip"> ZIP</label>
                            <label class="checkbox-item"><input type="checkbox" value=".xml"> XML</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Max. Größe (MB)</label>
                        <input type="number" id="pf-max-groesse" value="25" style="width: 100px;">
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn" onclick="schliesseModal('postfach-modal')">Abbrechen</button>
                    <button class="btn btn-primary" onclick="speicherePostfach()">Speichern</button>
                </div>
            </div>
        </div>

        <!-- Modal: Ordner hinzufügen -->
        <div id="ordner-modal" class="modal hidden">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>Quell-Ordner hinzufügen</h3>
                    <button class="modal-close" onclick="schliesseModal('ordner-modal')">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" id="ord-name" placeholder="z.B. Firma Inbox">
                    </div>
                    <div class="form-group">
                        <label>Quell-Pfad (wo liegen die Dateien?)</label>
                        <div class="input-with-btn">
                            <input type="text" id="ord-pfad" value="/srv/http/dateiverwaltung/data/inbox/">
                            <button class="btn" type="button" onclick="oeffneBrowser('ord-pfad')">📁</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Ziel-Ordner (wohin nach Sortierung?)</label>
                        <div class="input-with-btn">
                            <input type="text" id="ord-ziel" value="/srv/http/dateiverwaltung/data/archiv/">
                            <button class="btn" type="button" onclick="oeffneBrowser('ord-ziel')">📁</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Dateitypen</label>
                        <div class="checkbox-group" id="ord-typen-gruppe">
                            <label class="checkbox-item"><input type="checkbox" value=".pdf" checked> PDF</label>
                            <label class="checkbox-item"><input type="checkbox" value=".jpg" checked> JPG</label>
                            <label class="checkbox-item"><input type="checkbox" value=".jpeg" checked> JPEG</label>
                            <label class="checkbox-item"><input type="checkbox" value=".png" checked> PNG</label>
                            <label class="checkbox-item"><input type="checkbox" value=".gif"> GIF</label>
                            <label class="checkbox-item"><input type="checkbox" value=".tiff" checked> TIFF</label>
                            <label class="checkbox-item"><input type="checkbox" value=".bmp"> BMP</label>
                            <label class="checkbox-item"><input type="checkbox" value=".doc"> DOC</label>
                            <label class="checkbox-item"><input type="checkbox" value=".docx"> DOCX</label>
                            <label class="checkbox-item"><input type="checkbox" value=".xls"> XLS</label>
                            <label class="checkbox-item"><input type="checkbox" value=".xlsx"> XLSX</label>
                            <label class="checkbox-item"><input type="checkbox" value=".csv"> CSV</label>
                            <label class="checkbox-item"><input type="checkbox" value=".txt"> TXT</label>
                            <label class="checkbox-item"><input type="checkbox" value=".xml"> XML</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Unterordner einschließen</label>
                        <select id="ord-rekursiv">
                            <option value="true" selected>Ja (rekursiv)</option>
                            <option value="false">Nein (nur dieser Ordner)</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn" onclick="schliesseModal('ordner-modal')">Abbrechen</button>
                    <button class="btn btn-primary" onclick="speichereOrdner()">Speichern</button>
                </div>
            </div>
        </div>

        <!-- Modal: Regel hinzufügen -->
        <div id="regel-modal" class="modal hidden">
            <div class="modal-content modal-large">
                <div class="modal-header">
                    <h3 id="regel-modal-title">Regel hinzufügen</h3>
                    <button class="modal-close" onclick="schliesseModal('regel-modal')">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-row">
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" id="regel-name" placeholder="z.B. Sonepar Rechnung">
                        </div>
                        <div class="form-group">
                            <label>Priorität (niedriger = wichtiger)</label>
                            <input type="number" id="regel-prioritaet" value="100">
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Erkennungsmuster (JSON)</label>
                        <textarea id="regel-muster" class="code-input" rows="4">{
  "text_match_any": ["sonepar"],
  "text_match": ["rechnung"]
}</textarea>
                        <small>text_match_any: mindestens eins | text_match: alle müssen passen</small>
                    </div>

                    <div class="form-group">
                        <label>Feld-Extraktion (JSON)</label>
                        <textarea id="regel-extraktion" class="code-input" rows="6">{
  "datum": {"regex": "(\\d{2}[./]\\d{2}[./]\\d{4})", "format": "%d.%m.%Y"},
  "rechnungsnummer": {"regex": "Rechnungsnummer[:\\s]*(\\d+)"},
  "betrag": {"regex": "Gesamtbetrag[:\\s]*([\\d.,]+)", "typ": "betrag"},
  "ersteller": {"wert": "Sonepar"}
}</textarea>
                    </div>

                    <div class="form-group">
                        <label>Dateiname-Schema</label>
                        <input type="text" id="regel-schema"
                               value="{datum} - Rechnung - {ersteller} - {rechnungsnummer} - {betrag} EUR.pdf">
                    </div>

                    <div class="form-group">
                        <label>Ziel-Unterordner (optional)</label>
                        <input type="text" id="regel-unterordner" placeholder="sonepar">
                        <small>Wird an den Ziel-Ordner des Quell-Ordners angehängt</small>
                    </div>

                    <!-- Tester -->
                    <div class="form-group">
                        <label>Regel testen</label>
                        <textarea id="regel-test-text" rows="3" placeholder="Text zum Testen einfügen..."></textarea>
                        <button class="btn btn-sm" onclick="testeRegel()">Testen</button>
                        <div id="regel-test-ergebnis" class="test-result hidden"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn" onclick="schliesseModal('regel-modal')">Abbrechen</button>
                    <button class="btn btn-primary" onclick="speichereRegel()">Speichern</button>
                </div>
            </div>
        </div>

        <!-- Modal: Verzeichnis-Browser -->
        <div id="browser-modal" class="modal hidden">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>Verzeichnis wählen</h3>
                    <button class="modal-close" onclick="schliesseModal('browser-modal')">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="file-browser">
                        <div class="file-browser-path">
                            <span id="browser-current-path">/</span>
                        </div>
                        <ul class="file-browser-list" id="browser-list"></ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn" onclick="schliesseModal('browser-modal')">Abbrechen</button>
                    <button class="btn btn-primary" onclick="browserAuswahl()">Auswählen</button>
                </div>
            </div>
        </div>

        <!-- Loading Overlay -->
        <div id="loading-overlay" class="loading-overlay hidden">
            <div class="spinner"></div>
            <div class="loading-text" id="loading-text">Wird geladen...</div>
        </div>
    </div>

    <script src="/static/js/app.js"></script>
</body>
</html>
