@extends('layouts.app')
@section('title', 'System Architecture Governance')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/dashboard-final.css') }}">
<style>
    .settings-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
        gap: 24px;
        margin-bottom: 32px;
    }
    @media (max-width: 640px) {
        .settings-grid { grid-template-columns: 1fr; }
    }
    .setting-group {
        padding: 24px;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .setting-label {
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--text-secondary);
        margin-bottom: 8px;
        display: block;
    }
    .setting-row {
        margin-bottom: 20px;
    }
    .setting-row:last-child {
        margin-bottom: 0;
    }
    .config-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        margin-bottom: 16px;
        background: rgba(255,255,255,0.03);
        border: 1px solid var(--border-color);
    }
</style>
@endpush

@section('content')

@include('components.page-header', [
    'title' => 'System Architecture Governance',
    'description' => 'Manage architectural parameters, AI engine integrations, communication channels, and automated governance protocols.',
    'breadcrumbs' => ['Home' => route('admin.dashboard'), 'System Configuration' => '#']
])

<form action="{{ route('settings.update') }}" method="POST">
    @csrf
    <div class="settings-grid">
        
        <!-- General Architecture -->
        <div class="final-card setting-group">
            <div class="config-card-icon"><i class="bi bi-buildings" style="color: var(--accent-color)"></i></div>
            <h3 class="final-card-title">General Platform Identity</h3>
            <div style="margin-top: 8px;">
                <div class="setting-row">
                    <label class="setting-label">Organizational Name</label>
                    <input type="text" name="settings[brand_name]" value="{{ setting('brand_name', 'Flowieons') }}" class="final-input" placeholder="Enterprise Name">
                </div>
                <div class="setting-row">
                    <label class="setting-label">Global Temporal Alignment (Timezone)</label>
                    <select name="settings[brand_timezone]" class="final-input">
                        <option value="UTC" @selected(setting('brand_timezone') == 'UTC')>UTC (Universal)</option>
                        <option value="Asia/Kolkata" @selected(setting('brand_timezone') == 'Asia/Kolkata')>Asia/Kolkata (IST)</option>
                        <option value="America/New_York" @selected(setting('brand_timezone') == 'America/New_York')>America/New_York (EST)</option>
                    </select>
                </div>
                <div class="setting-row">
                    <label class="setting-label">Platform Logo URI</label>
                    <input type="text" name="settings[brand_logo]" value="{{ setting('brand_logo') }}" class="final-input" placeholder="/assets/img/logo-premium.png">
                </div>
            </div>
        </div>

        <!-- Security Architecture -->
        <div class="final-card setting-group">
            <div class="config-card-icon"><i class="bi bi-shield-lock" style="color: #f43f5e"></i></div>
            <h3 class="final-card-title">Security & Access Protocols</h3>
            <div style="margin-top: 8px;">
                <div class="setting-row">
                    <label class="setting-label">Session Persistence (Minutes)</label>
                    <input type="number" name="settings[security_session_timeout]" value="{{ setting('security_session_timeout', 120) }}" class="final-input">
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(255,255,255,0.02); border-radius: 12px; border: 1px solid var(--border-color); margin-bottom: 16px;">
                    <div>
                        <div style="font-size: 13px; font-weight: 800;">Multi-Factor Authentication</div>
                        <div style="font-size: 10px; color: var(--text-secondary);">Enforce MFA for administrative nodes</div>
                    </div>
                    <select name="settings[security_mfa_required]" class="final-input" style="width: 100px;">
                        <option value="1" @selected(setting('security_mfa_required') == '1')>YES</option>
                        <option value="0" @selected(setting('security_mfa_required', '0') == '0')>NO</option>
                    </select>
                </div>
                <div class="setting-row">
                    <label class="setting-label">Failed Auth Lockout Threshold</label>
                    <input type="number" name="settings[security_lockout_attempts]" value="{{ setting('security_lockout_attempts', 5) }}" class="final-input">
                </div>
            </div>
        </div>

        <!-- SMTP Settings -->
        <div class="final-card setting-group">
            <div class="config-card-icon"><i class="bi bi-envelope-at" style="color: #60a5fa"></i></div>
            <h3 class="final-card-title">Notification Channels (SMTP)</h3>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px;">
                <div class="setting-row">
                    <label class="setting-label">Intelligence Host</label>
                    <input type="text" name="settings[mail_host]" value="{{ setting('mail_host', 'smtp.mailtrap.io') }}" class="final-input">
                </div>
                <div class="setting-row">
                    <label class="setting-label">Access Port</label>
                    <input type="text" name="settings[mail_port]" value="{{ setting('mail_port', '2525') }}" class="final-input">
                </div>
                <div class="setting-row">
                    <label class="setting-label">Identity Username</label>
                    <input type="text" name="settings[mail_username]" value="{{ setting('mail_username') }}" class="final-input">
                </div>
                <div class="setting-row">
                    <label class="setting-label">Identity Credential</label>
                    <input type="password" name="settings[mail_password]" value="{{ setting('mail_password') }}" class="final-input">
                </div>
            </div>
        </div>

        <!-- WhatsApp API Settings -->
        <div class="final-card setting-group">
            <div class="config-card-icon"><i class="bi bi-whatsapp" style="color: var(--accent-color)"></i></div>
            <h3 class="final-card-title">Enterprise Messaging (WhatsApp)</h3>
            <div style="margin-top: 8px;">
                <div class="setting-row">
                    <label class="setting-label">Architecture Access Token</label>
                    <input type="password" name="settings[whatsapp_token]" value="{{ setting('whatsapp_token') }}" class="final-input" placeholder="Bearer Token">
                </div>
                <div class="setting-row">
                    <label class="setting-label">Business Identity ID</label>
                    <input type="text" name="settings[whatsapp_business_id]" value="{{ setting('whatsapp_business_id') }}" class="final-input">
                </div>
            </div>
        </div>

        <!-- OpenAI / AI Engine -->
        <div class="final-card setting-group">
            <div class="config-card-icon"><i class="bi bi-cpu" style="color: #a855f7"></i></div>
            <h3 class="final-card-title">AI Intelligence Engine (OpenAI)</h3>
            <div style="margin-top: 8px;">
                <div class="setting-row">
                    <label class="setting-label">Neural Network API Key</label>
                    <input type="password" name="settings[openai_key]" value="{{ setting('openai_key') }}" class="final-input">
                </div>
                <div class="setting-row">
                    <label class="setting-label">Default Processing Model</label>
                    <select name="settings[openai_model]" class="final-input">
                        <option value="gpt-4o" @selected(setting('openai_model', 'gpt-4o') == 'gpt-4o')>GPT-4o (Premium)</option>
                        <option value="gpt-4-turbo" @selected(setting('openai_model') == 'gpt-4-turbo')>GPT-4 Turbo</option>
                        <option value="gpt-3.5-turbo" @selected(setting('openai_model') == 'gpt-3.5-turbo')>GPT-3.5 Turbo</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Data Backups -->
        <div class="final-card setting-group">
            <div class="config-card-icon"><i class="bi bi-database-check" style="color: #f43f5e"></i></div>
            <h3 class="final-card-title">Data Redundancy Protocols</h3>
            <div style="margin-top: 8px;">
                <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(255,255,255,0.02); border-radius: 12px; border: 1px solid var(--border-color); margin-bottom: 20px;">
                    <div>
                        <div style="font-size: 13px; font-weight: 800;">Automated Snapshotting</div>
                        <div style="font-size: 10px; color: var(--text-secondary);">Daily architectural data backups</div>
                    </div>
                    <select name="settings[backup_enabled]" class="final-input" style="width: 120px;">
                        <option value="1" @selected(setting('backup_enabled') == '1')>ENABLED</option>
                        <option value="0" @selected(setting('backup_enabled', '0') == '0')>DISABLED</option>
                    </select>
                </div>
                <div class="setting-row">
                    <label class="setting-label">Retention Horizon (Days)</label>
                    <input type="number" name="settings[backup_retention]" value="{{ setting('backup_retention', 30) }}" class="final-input">
                </div>
            </div>
        </div>

        <!-- Operational Hooks -->
        <div class="final-card setting-group">
            <div class="config-card-icon"><i class="bi bi-link-45deg" style="color: #f59e0b"></i></div>
            <h3 class="final-card-title">External Systems & Queues</h3>
            <div style="margin-top: 8px;">
                <div class="setting-row">
                    <label class="setting-label">Outbound Intelligence Hook URL</label>
                    <input type="url" name="settings[webhook_url]" value="{{ setting('webhook_url') }}" class="final-input" placeholder="https://hooks.example.com">
                </div>
                <div class="setting-row">
                    <label class="setting-label">Queue Concurrency Retries</label>
                    <input type="number" name="settings[queue_retries]" value="{{ setting('queue_retries', 3) }}" class="final-input">
                </div>
            </div>
        </div>

    </div>

    <div style="display: flex; justify-content: flex-end; margin-top: 32px; padding-bottom: 40px;">
        <button type="submit" class="final-btn final-btn-primary" style="padding: 16px 48px; font-size: 14px;">
            <i class="bi bi-shield-check"></i> Commit Architecture Changes
        </button>
    </div>
</form>
@endsection