<?php

/**
 * Developer Console — Database Page (DX002A)
 *
 * Displays:
 *   1. Full MySQL Inspector (MySqlInspectorService)
 *   2. Supabase Mirror section (live if configured, "Not Configured" if not)
 *
 * Variables:
 *   $mysql_info    — array from MySqlInspectorService::inspect()
 *   $supabase_info — array from SupabaseService::getProjectInfo()
 *
 * @package Inveetaire
 * @ref     DX001, DX002A
 */

/** @var array $mysql_info */
/** @var array $supabase_info */
$mysql_info    = $mysql_info    ?? [];
$supabase_info = $supabase_info ?? [];

$mysqlConnected   = (bool)($mysql_info['connected'] ?? false);
$sbConfigured     = (bool)($supabase_info['configured'] ?? false);

?>

<!-- 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>database</span>
    </div>
    <h1 style="font-size: 1.5rem; font-weight: 800; color: var(--dev-text); margin-bottom: 0.25rem;">
        Database
    </h1>
    <p style="font-size: 0.8125rem; color: var(--dev-text-muted);">
        MySQL Inspector and Supabase Mirror status.
    </p>
</div>

<!-- ══════════════════════════════════════════════════════════════════════════ -->
<!-- SECTION 1 — MySQL Inspector                                               -->
<!-- ══════════════════════════════════════════════════════════════════════════ -->

<div class="dev-section-title" style="margin-bottom: 1rem;">
    <i class="fa-solid fa-database" style="color:var(--dev-accent); margin-right:0.375rem;"></i>
    MySQL Inspector
</div>

<!-- Summary Stats Row -->
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">

    <div class="dev-card" style="padding: 1.25rem;">
        <div class="dev-stat-label">Connection</div>
        <div style="margin-top: 0.5rem;">
            <?php if ($mysqlConnected): ?>
                <span class="badge-ok"><i class="fa-solid fa-circle" style="font-size:0.45rem;"></i> Connected</span>
            <?php else: ?>
                <span class="badge-err"><i class="fa-solid fa-circle" style="font-size:0.45rem;"></i> Failed</span>
            <?php endif; ?>
        </div>
        <div class="dev-stat-sub" style="margin-top:0.375rem;"><?= escape_html($mysql_info['db_name'] ?? '—') ?></div>
    </div>

    <div class="dev-card" style="padding: 1.25rem;">
        <div class="dev-stat-label">Version</div>
        <div class="dev-stat-value" style="font-size: 1rem; margin-top: 0.375rem;">
            <?= escape_html($mysql_info['db_version_short'] ?? '—') ?>
        </div>
        <div class="dev-stat-sub">MySQL / MariaDB</div>
    </div>

    <div class="dev-card" style="padding: 1.25rem;">
        <div class="dev-stat-label">Tables</div>
        <div class="dev-stat-value" style="margin-top: 0.375rem;"><?= (int)($mysql_info['total_tables'] ?? 0) ?></div>
        <div class="dev-stat-sub">in current database</div>
    </div>

    <div class="dev-card" style="padding: 1.25rem;">
        <div class="dev-stat-label">Total Rows</div>
        <div class="dev-stat-value" style="margin-top: 0.375rem; font-size: 1.25rem;">
            <?= number_format((int)($mysql_info['total_rows'] ?? 0)) ?>
        </div>
        <div class="dev-stat-sub">estimated</div>
    </div>

    <div class="dev-card" style="padding: 1.25rem;">
        <div class="dev-stat-label">Columns</div>
        <div class="dev-stat-value" style="margin-top: 0.375rem; color:var(--dev-accent);"><?= (int)($db_overview['total_columns'] ?? 0) ?></div>
        <div class="dev-stat-sub">across all tables</div>
    </div>

    <div class="dev-card" style="padding: 1.25rem;">
        <div class="dev-stat-label">Foreign Keys</div>
        <div class="dev-stat-value" style="margin-top: 0.375rem; color:var(--dev-purple);"><?= (int)($db_overview['total_foreign_keys'] ?? 0) ?></div>
        <div class="dev-stat-sub">relational constraints</div>
    </div>

    <div class="dev-card" style="padding: 1.25rem;">
        <div class="dev-stat-label">DB Size</div>
        <div class="dev-stat-value" style="font-size: 1rem; margin-top: 0.375rem; color: var(--dev-accent2);">
            <?= escape_html($db_overview['db_size_mb'] ?? $mysql_info['db_size_mb'] ?? '0.00 MB') ?>
        </div>
        <div class="dev-stat-sub">data + indexes</div>
    </div>

    <div class="dev-card" style="padding: 1.25rem;">
        <div class="dev-stat-label">Doc Version</div>
        <div class="dev-stat-value" style="font-size: 1rem; color: var(--dev-rose); margin-top: 0.375rem;">
            <?= escape_html($db_overview['doc_version'] ?? 'v1.0.0') ?>
        </div>
        <div class="dev-stat-sub">Last: <?= escape_html($db_overview['last_generated'] ?? '—') ?></div>
    </div>

</div>

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

    <!-- Connection Details -->
    <div class="dev-card">
        <div class="dev-card-header">
            <span class="dev-card-title">
                <i class="fa-solid fa-plug" style="color:var(--dev-accent); margin-right:0.375rem;"></i>
                Connection Details
            </span>
            <?php if ($mysqlConnected): ?>
                <span class="badge-ok">● Live</span>
            <?php else: ?>
                <span class="badge-err">● Error</span>
            <?php endif; ?>
        </div>
        <div class="dev-card-body">
            <div class="dev-info-row">
                <span class="label">Host</span>
                <span class="value"><?= escape_html($mysql_info['host'] ?? '127.0.0.1') ?></span>
            </div>
            <div class="dev-info-row">
                <span class="label">Port</span>
                <span class="value"><?= escape_html($mysql_info['port'] ?? '3306') ?></span>
            </div>
            <div class="dev-info-row">
                <span class="label">Database Name</span>
                <span class="value"><?= escape_html($mysql_info['db_name'] ?? '—') ?></span>
            </div>
            <div class="dev-info-row">
                <span class="label">Full Version</span>
                <span class="value" style="font-size:0.6875rem;"><?= escape_html($mysql_info['db_version'] ?? '—') ?></span>
            </div>
            <div class="dev-info-row">
                <span class="label">Character Set</span>
                <span class="value"><?= escape_html($mysql_info['character_set'] ?? '—') ?></span>
            </div>
            <div class="dev-info-row">
                <span class="label">Collation</span>
                <span class="value" style="font-size:0.6875rem;"><?= escape_html($mysql_info['collation'] ?? '—') ?></span>
            </div>
            <div class="dev-info-row">
                <span class="label">Storage Engine</span>
                <span class="value"><?= escape_html($mysql_info['default_engine'] ?? 'InnoDB') ?></span>
            </div>
            <?php if (!$mysqlConnected && !empty($mysql_info['error'])): ?>
            <div style="margin-top:0.75rem; padding:0.75rem; background:rgba(248,81,73,0.08); border:1px solid rgba(248,81,73,0.2); border-radius:6px; font-family:var(--mono); font-size:0.6875rem; color:var(--dev-danger);">
                <?= escape_html($mysql_info['error']) ?>
            </div>
            <?php endif; ?>
        </div>
    </div>

    <!-- Documentation Status -->
    <div class="dev-card">
        <div class="dev-card-header">
            <span class="dev-card-title">
                <i class="fa-solid fa-book" style="color:var(--dev-purple); margin-right:0.375rem;"></i>
                Documentation
            </span>
            <span class="badge-ok">● Generated</span>
        </div>
        <div class="dev-card-body">
            <div class="dev-info-row">
                <span class="label">Doc Version</span>
                <span class="value" style="color:var(--dev-rose);"><?= escape_html($mysql_info['doc_version'] ?? 'v1.0.0') ?></span>
            </div>
            <div class="dev-info-row">
                <span class="label">Last Generated</span>
                <span class="value"><?= escape_html($mysql_info['last_generated'] ?? '—') ?></span>
            </div>
            <div class="dev-info-row">
                <span class="label">Sprint</span>
                <span class="value">DX001</span>
            </div>
            <div class="dev-info-row">
                <span class="label">Docs Location</span>
                <span class="value" style="font-size:0.6875rem;">docs/database/</span>
            </div>
            <div class="dev-info-row">
                <span class="label">Tables Documented</span>
                <span class="value"><?= (int)($mysql_info['total_tables'] ?? 0) ?> / 43</span>
            </div>
            <div style="margin-top: 1rem; display:flex; gap:0.75rem; flex-wrap:wrap;">
                <a href="<?= url('/app/developer/schema') ?>" style="display:inline-flex; align-items:center; gap:0.375rem; font-size:0.75rem; color:var(--dev-accent); text-decoration:none; font-family:var(--mono);">
                    <i class="fa-solid fa-file-code"></i> View Schema Docs →
                </a>
                <a href="<?= url('/app/developer/inspector') ?>" style="display:inline-flex; align-items:center; gap:0.375rem; font-size:0.75rem; color:var(--dev-purple); text-decoration:none; font-family:var(--mono);">
                    <i class="fa-solid fa-table"></i> Open Inspector →
                </a>
            </div>
        </div>
    </div>

</div>

<!-- ══════════════════════════════════════════════════════════════════════════ -->
<!-- SECTION 2 — Supabase Mirror                                               -->
<!-- ══════════════════════════════════════════════════════════════════════════ -->

<div class="dev-section-title" style="margin-bottom: 1rem;">
    <i class="fa-solid fa-cloud" style="color: #3ecf8e; margin-right:0.375rem;"></i>
    Supabase Mirror
    <span style="margin-left: 0.75rem; font-family:var(--mono); font-size:0.5rem; font-weight:700; padding:0.15rem 0.5rem; border-radius:3px; background:rgba(62,207,142,0.1); border:1px solid rgba(62,207,142,0.25); color:#3ecf8e; text-transform:uppercase; letter-spacing:0.05em; vertical-align:middle;">DX002A</span>
</div>

<?php if (!$sbConfigured): ?>
<!-- Not Configured State -->
<div class="dev-card" style="margin-bottom: 2rem;">
    <div class="dev-card-header">
        <span class="dev-card-title">
            <i class="fa-solid fa-cloud" style="color:#444c56; margin-right:0.375rem;"></i>
            Supabase Mirror
        </span>
        <span class="badge-warn">Not Configured</span>
    </div>
    <div class="dev-card-body">
        <div style="display:flex; align-items:flex-start; gap:1rem;">
            <div style="font-size: 2rem; color: #444c56; flex-shrink:0;"><i class="fa-solid fa-cloud-slash"></i></div>
            <div>
                <p style="font-size:0.875rem; color:var(--dev-text); font-weight:600; margin-bottom:0.375rem;">
                    Supabase is not configured
                </p>
                <p style="font-size:0.8125rem; color:var(--dev-text-muted); line-height:1.6; margin-bottom:1rem;">
                    Add your Supabase credentials to the <code style="font-family:var(--mono); color:var(--dev-accent); background:var(--dev-surface2); padding:0.1rem 0.35rem; border-radius:3px;">.env</code> file to enable cloud mirror features.
                </p>
                <div style="font-family:var(--mono); font-size:0.6875rem; background:var(--dev-surface2); border:1px solid var(--dev-border); border-radius:6px; padding:0.875rem; color:var(--dev-text-muted); line-height:1.8;">
                    <span style="color:var(--dev-text-muted);"># Add to .env</span><br>
                    <span style="color:var(--dev-accent2);">SUPABASE_URL</span>=https://your-project.supabase.co<br>
                    <span style="color:var(--dev-accent2);">SUPABASE_ANON_KEY</span>=eyJ...<br>
                    <span style="color:var(--dev-accent2);">SUPABASE_SERVICE_ROLE_KEY</span>=eyJ...<br>
                    <span style="color:var(--dev-accent2);">SUPABASE_PROJECT_REF</span>=your-project-ref<br>
                    <span style="color:var(--dev-accent2);">SUPABASE_REGION</span>=ap-southeast-1
                </div>
            </div>
        </div>
        <div style="margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--dev-border2); display:flex; gap:0.75rem; flex-wrap:wrap;">
            <a href="<?= url('/app/developer/supabase') ?>" style="display:inline-flex; align-items:center; gap:0.375rem; font-size:0.75rem; color:#3ecf8e; text-decoration:none; font-family:var(--mono);">
                <i class="fa-solid fa-arrow-right"></i> Go to Supabase Inspector →
            </a>
        </div>
    </div>
</div>

<?php else: ?>
<!-- Configured State -->
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem;">

    <!-- Supabase Connection Info -->
    <div class="dev-card">
        <div class="dev-card-header">
            <span class="dev-card-title">
                <i class="fa-solid fa-cloud" style="color:#3ecf8e; margin-right:0.375rem;"></i>
                Supabase Connection
            </span>
            <span class="badge-ok">● Configured</span>
        </div>
        <div class="dev-card-body">
            <div class="dev-info-row">
                <span class="label">Project URL</span>
                <span class="value" style="font-size:0.6875rem;"><?= escape_html($supabase_info['url_masked'] ?? '—') ?></span>
            </div>
            <div class="dev-info-row">
                <span class="label">Project Ref</span>
                <span class="value"><?= escape_html($supabase_info['project_ref_masked'] ?? '—') ?></span>
            </div>
            <div class="dev-info-row">
                <span class="label">Region</span>
                <span class="value"><?= escape_html($supabase_info['region'] ?? '—') ?></span>
            </div>
            <div class="dev-info-row">
                <span class="label">Anon Key</span>
                <span class="value" style="font-size:0.6875rem; letter-spacing:0.05em;"><?= escape_html($supabase_info['anon_key_masked'] ?? '—') ?></span>
            </div>
            <div class="dev-info-row">
                <span class="label">Service Role Key</span>
                <span class="value" style="letter-spacing:0.1em;">
                    <?= ($supabase_info['has_service_role'] ?? false) ? '••••••••••••••••' : 'Not set' ?>
                </span>
            </div>
            <div style="margin-top:1rem;">
                <a href="<?= url('/app/developer/supabase') ?>" style="display:inline-flex; align-items:center; gap:0.375rem; font-size:0.75rem; color:#3ecf8e; text-decoration:none; font-family:var(--mono);">
                    <i class="fa-solid fa-arrow-right"></i> Open Supabase Inspector →
                </a>
            </div>
        </div>
    </div>

    <!-- Mirror Status -->
    <div class="dev-card">
        <div class="dev-card-header">
            <span class="dev-card-title">
                <i class="fa-solid fa-arrows-rotate" style="color:#444c56; margin-right:0.375rem;"></i>
                Mirror Status
            </span>
            <span class="badge-warn">Not Synced</span>
        </div>
        <div class="dev-card-body">
            <div class="dev-info-row">
                <span class="label">Mirror Status</span>
                <span class="value" style="color:var(--dev-warn);"><?= escape_html($supabase_info['mirror_status'] ?? 'Not Synced') ?></span>
            </div>
            <div class="dev-info-row">
                <span class="label">Last Sync</span>
                <span class="value" style="color:#444c56;">Never</span>
            </div>
            <div class="dev-info-row">
                <span class="label">Sync Status</span>
                <span class="value" style="color:var(--dev-purple); font-size:0.75rem;"><?= escape_html($supabase_info['sync_status'] ?? 'Coming in DX002B') ?></span>
            </div>
            <div style="margin-top:0.75rem; padding:0.625rem; background:rgba(188,140,255,0.06); border:1px solid rgba(188,140,255,0.15); border-radius:6px; font-size:0.6875rem; color:var(--dev-text-muted);">
                Synchronization features (Push, Pull, Verify Mirror) will be implemented in <span style="color:var(--dev-purple);">DX002B</span>.
            </div>
        </div>
    </div>

</div>
<?php endif; ?>
