<?php

/**
 * Developer Console — Application Information & Metadata (DX003)
 *
 * Displays structured metadata about the INVEETAIRE application, framework,
 * runtime environment, developer console version, database, and documentation status.
 *
 * Variables:
 *   $app_info — array from DeveloperService::getApplicationInfo()
 *
 * @package Inveetaire
 * @ref     DX003
 */

/** @var array $app_info */
$app_info = $app_info ?? [];

?>

<!-- Page Header -->
<div style="margin-bottom: 2rem;">
    <div style="font-family: var(--mono); font-size: 0.6875rem; color: var(--dev-text-muted); margin-bottom: 0.5rem;">
        <a href="<?= url('/app/developer') ?>" style="color:var(--dev-accent); text-decoration:none;">developer</a>
        <span style="color:#444c56;"> / </span>
        <span>information</span>
    </div>
    <h1 style="font-size: 1.5rem; font-weight: 800; color: var(--dev-text); margin-bottom: 0.25rem;">
        Application Information
    </h1>
    <p style="font-size: 0.8125rem; color: var(--dev-text-muted);">
        System specification, framework details, developer console build information, and documentation version.
    </p>
</div>

<!-- Main System Metadata Cards -->
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem;">

    <!-- Core App Info -->
    <div class="dev-card">
        <div class="dev-card-header">
            <span class="dev-card-title">
                <i class="fa-solid fa-cube" style="color:var(--dev-accent); margin-right:0.375rem;"></i>
                Application Specification
            </span>
            <span class="badge-ok">Active</span>
        </div>
        <div class="dev-card-body">
            <div class="dev-info-row">
                <span class="label">Project Name</span>
                <span class="value" style="font-weight:700; color:var(--dev-rose);"><?= escape_html($app_info['project_name'] ?? 'INVEETAIRE') ?></span>
            </div>
            <div class="dev-info-row">
                <span class="label">Application Version</span>
                <span class="value"><?= escape_html($app_info['app_version'] ?? '1.0.0') ?></span>
            </div>
            <div class="dev-info-row">
                <span class="label">Developer Console</span>
                <span class="value" style="color:var(--dev-purple); font-weight:700;"><?= escape_html($app_info['dev_version'] ?? 'DX003 v1.0.0') ?></span>
            </div>
            <div class="dev-info-row">
                <span class="label">Runtime Environment</span>
                <span class="value"><?= escape_html($app_info['environment'] ?? 'local') ?></span>
            </div>
            <div class="dev-info-row">
                <span class="label">Developer Mode</span>
                <span class="value" style="color:var(--dev-accent2);"><?= escape_html($app_info['developer_mode'] ?? 'Enabled') ?></span>
            </div>
            <div class="dev-info-row">
                <span class="label">Build Date</span>
                <span class="value"><?= escape_html($app_info['build_date'] ?? '2026-07-21') ?></span>
            </div>
        </div>
    </div>

    <!-- Tech Stack Info -->
    <div class="dev-card">
        <div class="dev-card-header">
            <span class="dev-card-title">
                <i class="fa-solid fa-layer-group" style="color:var(--dev-purple); margin-right:0.375rem;"></i>
                Technology Stack
            </span>
        </div>
        <div class="dev-card-body">
            <div class="dev-info-row">
                <span class="label">Framework</span>
                <span class="value"><?= escape_html($app_info['framework'] ?? 'Inveetaire Custom MVC Core v1.0') ?></span>
            </div>
            <div class="dev-info-row">
                <span class="label">PHP Version</span>
                <span class="value" style="color:var(--dev-accent);"><?= escape_html($app_info['php_version'] ?? PHP_VERSION) ?></span>
            </div>
            <div class="dev-info-row">
                <span class="label">PHP SAPI</span>
                <span class="value"><?= escape_html($app_info['php_sapi'] ?? PHP_SAPI) ?></span>
            </div>
            <div class="dev-info-row">
                <span class="label">Operating System</span>
                <span class="value" style="font-size:0.75rem;"><?= escape_html($app_info['os'] ?? PHP_OS_FAMILY) ?></span>
            </div>
            <div class="dev-info-row">
                <span class="label">Source of Truth DB</span>
                <span class="value"><?= escape_html($app_info['database_engine'] ?? 'MySQL / MariaDB (InnoDB)') ?></span>
            </div>
            <div class="dev-info-row">
                <span class="label">Supabase Cloud Mirror</span>
                <span class="value" style="font-size:0.6875rem; color:#3ecf8e;"><?= escape_html($app_info['supabase_mirror'] ?? 'Cloud PostgreSQL Mirror') ?></span>
            </div>
        </div>
    </div>

</div>

<!-- Architecture & Documentation Section -->
<div class="dev-section-title" style="margin-bottom: 1rem;">System Architecture & Documentation</div>
<div class="dev-card" style="margin-bottom: 2rem;">
    <div class="dev-card-body">
        <div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:1.25rem;">

            <div style="padding:1rem; background:var(--dev-surface2); border:1px solid var(--dev-border2); border-radius:6px;">
                <div style="font-family:var(--mono); font-size:0.6875rem; font-weight:700; color:var(--dev-accent); text-transform:uppercase; margin-bottom:0.5rem;">
                    <i class="fa-solid fa-database" style="margin-right:0.25rem;"></i> Database Docs (DX001)
                </div>
                <div style="font-size:0.75rem; color:var(--dev-text-muted); line-height:1.5;">
                    Comprehensive Markdown documentation system for all 43 MySQL database tables located in <code style="font-family:var(--mono); color:var(--dev-accent);">/docs/database/</code>.
                </div>
            </div>

            <div style="padding:1rem; background:var(--dev-surface2); border:1px solid var(--dev-border2); border-radius:6px;">
                <div style="font-family:var(--mono); font-size:0.6875rem; font-weight:700; color:#3ecf8e; text-transform:uppercase; margin-bottom:0.5rem;">
                    <i class="fa-solid fa-cloud" style="margin-right:0.25rem;"></i> Supabase Mirror (DX002A)
                </div>
                <div style="font-size:0.75rem; color:var(--dev-text-muted); line-height:1.5;">
                    Cloud PostgreSQL mirror configuration, credential masking, read-only inspection, and connection diagnostics.
                </div>
            </div>

            <div style="padding:1rem; background:var(--dev-surface2); border:1px solid var(--dev-border2); border-radius:6px;">
                <div style="font-family:var(--mono); font-size:0.6875rem; font-weight:700; color:var(--dev-warn); text-transform:uppercase; margin-bottom:0.5rem;">
                    <i class="fa-solid fa-arrows-rotate" style="margin-right:0.25rem;"></i> Sync Engine (DX002B)
                </div>
                <div style="font-size:0.75rem; color:var(--dev-text-muted); line-height:1.5;">
                    Manual schema comparison engine, PostgreSQL DDL generator, Management API push, dry run, and mirror verifier.
                </div>
            </div>

            <div style="padding:1rem; background:var(--dev-surface2); border:1px solid var(--dev-border2); border-radius:6px;">
                <div style="font-family:var(--mono); font-size:0.6875rem; font-weight:700; color:var(--dev-rose); text-transform:uppercase; margin-bottom:0.5rem;">
                    <i class="fa-solid fa-gauge-high" style="margin-right:0.25rem;"></i> Developer Experience (DX003)
                </div>
                <div style="font-size:0.75rem; color:var(--dev-text-muted); line-height:1.5;">
                    Production-grade Developer Dashboard, System Health Suite, Log Center, metrics monitoring, and security guard.
                </div>
            </div>

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