<?php
declare(strict_types=1);

require_once dirname(__DIR__) . '/config/fileload.php';

$pageTitle = 'code.it Rack Planner';
$assetVersion = defined('ASSET_VERSION') ? (string) ASSET_VERSION : 'dev';
$publicBase = rtrim((string)($GLOBALS['app_public_base'] ?? ''), '/');
$assetBase = $publicBase === '' ? '' : $publicBase;
$apiBase = $publicBase === '' ? '' : $publicBase;
?>
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= htmlspecialchars($pageTitle, ENT_QUOTES) ?></title>
    <meta name="description" content="Visual rack planning prototype for 10-inch and 19-inch installations.">
    <link rel="stylesheet" href="<?= htmlspecialchars($assetBase . '/assets/app.css?v=' . rawurlencode($assetVersion), ENT_QUOTES) ?>">
</head>
<body>
    <div class="app-shell">
        <header class="hero">
            <div class="hero__copy">
                <p class="eyebrow">code.it concept workspace</p>
                <h1>Rack Planner</h1>
                <p class="hero__lead">
                    Browserbasierter Arbeitsstand fuer die Planung von <strong>10"</strong> und <strong>19"</strong> Racks.
                    Die aktuelle Domain ist nur Konzeptionsumgebung, nicht die spaetere Produkt-Domain.
                </p>
            </div>
            <div class="hero__meta">
                <div class="meta-card">
                    <span class="meta-card__label">Stand</span>
                    <strong>MVP Prototype</strong>
                </div>
                <div class="meta-card">
                    <span class="meta-card__label">Fokus</span>
                    <strong>Editor, BOM, Kabel</strong>
                </div>
            </div>
        </header>

        <main class="workspace">
            <section class="panel panel--dashboard">
                <div class="dashboard-grid">
                    <section class="dashboard-block dashboard-block--controls">
                        <div class="panel__heading">
                            <h2>Projekt</h2>
                            <p>Rack-Vorlage, Bibliothek und Plugin-Import.</p>
                        </div>

                        <div class="dashboard-controls">
                            <label class="field">
                                <span>Rack-Vorlage</span>
                                <select id="rack-template-select"></select>
                            </label>

                            <label class="field">
                                <span>Projektname</span>
                                <input id="project-name" type="text" value="Neues Rack-Projekt">
                            </label>

                            <label class="field">
                                <span>Rack-Farbe</span>
                                <input id="rack-color" type="color" value="#50545c">
                            </label>

                            <label class="field">
                                <span>Komponenten filtern</span>
                                <input id="component-filter" type="search" placeholder="z. B. Switch, UPS, Patch Panel">
                            </label>

                            <label class="field">
                                <span>Plugin-Pack laden</span>
                                <input id="plugin-input" type="file" accept=".json,application/json">
                            </label>

                            <div class="field field--status">
                                <span>Einsteckmodus</span>
                                <div id="selected-component-info" class="selection-info">Kein Element ausgewaehlt</div>
                            </div>
                        </div>
                    </section>

                    <section class="dashboard-block dashboard-block--stats">
                        <div class="panel__heading">
                            <h2>Auswertung</h2>
                            <p>Stueckliste, Platzreserve und Kabelschaetzung.</p>
                        </div>

                        <div class="stat-grid" id="project-stats"></div>

                        <section class="subpanel">
                            <div class="subpanel__header">
                                <h3>Stueckliste</h3>
                                <button id="export-bom" type="button">CSV kopieren</button>
                            </div>
                            <div id="bom-output" class="list-output"></div>
                        </section>

                        <section class="subpanel">
                            <div class="subpanel__header">
                                <h3>Kabel</h3>
                            </div>
                            <div class="field-row">
                                <label class="field">
                                    <span>Von</span>
                                    <select id="cable-from"></select>
                                </label>
                                <label class="field">
                                    <span>Zu</span>
                                    <select id="cable-to"></select>
                                </label>
                            </div>
                            <label class="field">
                                <span>Reserve in %</span>
                                <input id="cable-slack" type="number" min="0" max="100" step="5" value="20">
                            </label>
                            <div id="cable-output" class="notice"></div>
                        </section>

                        <section class="subpanel">
                            <div class="subpanel__header">
                                <h3>Hinweise</h3>
                            </div>
                            <ul class="notes" id="validation-output"></ul>
                        </section>
                    </section>
                </div>

                <section class="dashboard-block dashboard-block--library">
                    <div class="panel__heading">
                        <h2>Bibliothek</h2>
                        <p>Module per Drag-and-Drop direkt aus der Liste ins Rack ziehen.</p>
                    </div>
                    <div class="library library--wide" id="component-library"></div>
                </section>
            </section>

            <section class="panel panel--editor">
                <div class="panel__heading">
                    <h2>Rack-Editor</h2>
                    <p>Komponenten koennen per Drag-and-Drop verschoben werden. Jede Position referenziert eine U-Einheit.</p>
                </div>

                <div class="rack-stage">
                    <div class="rack-grid" id="rack-grid" aria-live="polite"></div>
                </div>
            </section>
        </main>
    </div>

    <script>
        window.APP_CONFIG = {
            apiBootstrapUrl: <?= json_encode($apiBase . '/api/index.php?action=bootstrap', JSON_UNESCAPED_SLASHES) ?>,
            assetVersion: <?= json_encode($assetVersion, JSON_UNESCAPED_SLASHES) ?>
        };
    </script>
    <script src="<?= htmlspecialchars($assetBase . '/assets/app.js?v=' . rawurlencode($assetVersion), ENT_QUOTES) ?>" defer></script>
</body>
</html>
