@extends('layouts.app')
@section('title', 'Admin — Bases de données')
@section('page-title', 'Admin — Bases de données')

@push('styles')
<style>
.db-layout { display:grid; grid-template-columns:320px 1fr; gap:20px; align-items:start; }

/* Liste gauche */
.db-list-card { background:#fff; border-radius:12px; border:1px solid var(--border); overflow:hidden; }
.db-list-header { background:#F4F6FB; padding:12px 16px; border-bottom:1.5px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.db-list-header span { font-size:11px; font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:.07em; }
.db-row { padding:12px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .12s; display:flex; align-items:center; gap:10px; }
.db-row:last-child { border-bottom:none; }
.db-row:hover { background:#F0F4FF; }
.db-row.active { background:#EEF2FF; border-left:3px solid var(--yellow); }
.db-icon { width:36px; height:36px; border-radius:8px; background:#EEF2FF; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.db-info { flex:1; min-width:0; }
.db-label { font-size:13px; font-weight:800; color:var(--text); }
.db-meta  { font-size:11px; font-weight:600; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.db-users-count { background:#EEF2FF; color:var(--navy); font-size:10px; font-weight:800; padding:2px 7px; border-radius:10px; flex-shrink:0; }
.badge-active   { background:#E6FFFA; color:#276749; font-size:10px; font-weight:800; padding:2px 7px; border-radius:4px; }
.badge-inactive { background:#FFF0F0; color:#C53030; font-size:10px; font-weight:800; padding:2px 7px; border-radius:4px; }
.db-new-btn { background:var(--navy); color:#fff; border:none; border-radius:20px; padding:5px 14px; font-family:'Nunito',sans-serif; font-size:11px; font-weight:800; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.db-new-btn:hover { background:var(--navy-light); }

/* Droite */
.db-right { display:flex; flex-direction:column; gap:16px; }

/* Fiche */
.fiche-card { background:#fff; border-radius:12px; border:1px solid var(--border); overflow:hidden; }
.fiche-header { background:linear-gradient(135deg,var(--navy),var(--navy-light)); color:#fff; padding:14px 20px; font-size:14px; font-weight:800; display:flex; align-items:center; gap:10px; }
.fiche-body { padding:20px; }
.f-label { font-size:12px; font-weight:700; color:var(--text-muted); white-space:nowrap; }
.f-input { border:1.5px solid var(--border); border-radius:7px; padding:6px 10px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:600; color:var(--text); background:#fff; outline:none; transition:border-color .2s; width:100%; box-sizing:border-box; }
.f-input:focus { border-color:var(--yellow); }
.f-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; background-size:14px; padding-right:28px; }
.frow { display:grid; gap:6px 12px; align-items:center; margin-bottom:10px; }
.frow-1 { grid-template-columns:140px 1fr; }
.frow-2 { grid-template-columns:140px 1fr 140px 1fr; }
.frow-3 { grid-template-columns:140px 1fr 80px 1fr 100px 1fr; }
.s-title { font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:1px; color:var(--navy); border-bottom:2px solid var(--yellow); padding-bottom:4px; margin-bottom:12px; }
.fiche-actions { padding:14px 20px; border-top:1.5px solid var(--border); background:#F4F6FB; display:flex; gap:10px; align-items:center; }
.btn-y { background:var(--yellow); color:var(--navy); border:none; border-radius:20px; padding:8px 22px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.btn-y:hover { background:var(--yellow-dark); }
.btn-ghost { background:#fff; color:var(--text-muted); border:1.5px solid var(--border); border-radius:20px; padding:7px 18px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; }
.btn-ghost:hover { background:#F4F6FB; }
.btn-danger { background:#fff; color:#E53E3E; border:1.5px solid #E53E3E; border-radius:20px; padding:7px 16px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.btn-danger:hover { background:#FFF5F5; }
.btn-test { background:#EBF8FF; color:#2B6CB0; border:1.5px solid #BEE3F8; border-radius:20px; padding:7px 16px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.btn-test:hover { background:#BEE3F8; }

/* Utilisateurs assignés */
.users-card { background:#fff; border-radius:12px; border:1px solid var(--border); overflow:hidden; }
.users-header { background:#F4F6FB; padding:10px 16px; border-bottom:1px solid var(--border); font-size:11px; font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:.07em; }
.user-assigned-row { padding:9px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; font-size:13px; }
.user-assigned-row:last-child { border-bottom:none; }
.ua-avatar { width:28px; height:28px; background:var(--yellow); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--navy); flex-shrink:0; }

/* Test connexion */
.test-result { display:none; padding:8px 14px; border-radius:7px; font-size:12px; font-weight:700; margin-top:8px; }
.test-result.ok  { background:#F0FFF4; border:1px solid #9AE6B4; color:#276749; }
.test-result.err { background:#FFF5F5; border:1px solid #FEB2B2; color:#C53030; }

.alert-success { background:#F0FFF4; border:1px solid #9AE6B4; color:#276749; padding:10px 16px; border-radius:8px; font-size:13px; font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.no-selection { padding:40px; text-align:center; color:var(--text-muted); font-size:13px; font-weight:600; }
.hint { font-size:11px; font-weight:600; color:var(--text-muted); margin-top:3px; }
</style>
@endpush

@section('content')

@if(session('success'))
<div class="alert-success">
    <svg viewBox="0 0 24 24" width="14" height="14" style="stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;flex-shrink:0;"><polyline points="20 6 9 17 4 12"/></svg>
    {{ session('success') }}
</div>
@endif

<div class="db-layout">

    {{-- ══ Liste gauche ══ --}}
    <div class="db-list-card">
        <div class="db-list-header">
            <span>Bases de données ({{ $databases->count() }})</span>
            <a href="{{ route('admin.bases-de-donnees.index', ['new' => 1]) }}" class="db-new-btn">
                <svg viewBox="0 0 24 24" style="width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                Nouvelle
            </a>
        </div>

        @forelse($databases as $db)
        <div class="db-row {{ ($selectedDb && $selectedDb->id == $db->id) ? 'active' : '' }}"
             onclick="window.location='{{ route('admin.bases-de-donnees.index', ['db_id' => $db->id]) }}'">
            <div class="db-icon">
                <svg viewBox="0 0 24 24" style="width:18px;height:18px;stroke:var(--navy);fill:none;stroke-width:1.8;stroke-linecap:round;">
                    <ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
                </svg>
            </div>
            <div class="db-info">
                <div class="db-label">{{ $db->label }}</div>
                <div class="db-meta">{{ $db->host }} / {{ $db->database }}</div>
            </div>
            <span class="db-users-count" title="{{ $db->users_count }} utilisateur(s)">{{ $db->users_count }} user(s)</span>
            <span class="{{ $db->statut === 'active' ? 'badge-active' : 'badge-inactive' }}">
                {{ $db->statut === 'active' ? '●' : '○' }}
            </span>
        </div>
        @empty
        <div class="no-selection" style="padding:24px;">Aucune base configurée</div>
        @endforelse
    </div>

    {{-- ══ Droite ══ --}}
    <div class="db-right">

        @if(!$selectedDb && !request('new'))
        <div class="fiche-card">
            <div class="no-selection" style="padding:60px;">
                <svg viewBox="0 0 24 24" style="width:44px;height:44px;stroke:var(--border);fill:none;stroke-width:1.5;margin:0 auto 12px;display:block;"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
                Sélectionnez une base ou créez-en une nouvelle
            </div>
        </div>

        @else

        {{-- ── Fiche ── --}}
        <div class="fiche-card">
            <div class="fiche-header">
                <svg viewBox="0 0 24 24" style="width:16px;height:16px;stroke:var(--yellow);fill:none;stroke-width:2;stroke-linecap:round;"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
                {{ $selectedDb ? 'Modifier — '.$selectedDb->label : 'Nouvelle base de données' }}
            </div>

            <form method="POST"
                  action="{{ $selectedDb ? route('admin.bases-de-donnees.update', $selectedDb) : route('admin.bases-de-donnees.store') }}"
                  id="dbForm">
                @csrf
                @if($selectedDb) @method('PUT') @endif

                <div class="fiche-body">
                    <div class="s-title">Identification</div>
                    <div class="frow frow-2">
                        <label class="f-label">Libellé *</label>
                        <input type="text" name="label" class="f-input" value="{{ $selectedDb?->label }}" required placeholder="Ex : Serveur Paris #2">
                        <label class="f-label">Statut</label>
                        <select name="statut" class="f-input f-select">
                            <option value="active"   {{ ($selectedDb?->statut ?? 'active') === 'active'   ? 'selected':'' }}>Active</option>
                            <option value="inactive" {{ ($selectedDb?->statut) === 'inactive' ? 'selected':'' }}>Inactive</option>
                        </select>
                    </div>

                    <div class="s-title" style="margin-top:14px;">Connexion</div>
                    <div class="frow frow-2">
                        <label class="f-label">Driver *</label>
                        <select name="driver" class="f-input f-select" style="max-width:140px;" onchange="updatePort(this)">
                            <option value="mysql"  {{ ($selectedDb?->driver ?? 'mysql') === 'mysql'  ? 'selected':'' }}>MySQL / MariaDB</option>
                            <option value="pgsql"  {{ ($selectedDb?->driver) === 'pgsql'  ? 'selected':'' }}>PostgreSQL</option>
                        </select>
                        <label class="f-label">Port *</label>
                        <input type="number" name="port" id="portField" class="f-input" style="max-width:90px;"
                               value="{{ $selectedDb?->port ?? 3306 }}" required min="1" max="65535">
                    </div>
                    <div class="frow frow-2">
                        <label class="f-label">Hôte *</label>
                        <input type="text" name="host" class="f-input" value="{{ $selectedDb?->host ?? 'localhost' }}" required placeholder="localhost ou IP">
                        <label class="f-label">Base de données *</label>
                        <input type="text" name="database" class="f-input" value="{{ $selectedDb?->database }}" required placeholder="nom_de_la_bdd">
                    </div>
                    <div class="frow frow-2">
                        <label class="f-label">Utilisateur *</label>
                        <input type="text" name="username" class="f-input" value="{{ $selectedDb?->username }}" required autocomplete="off">
                        <label class="f-label">Mot de passe</label>
                        <div style="position:relative;">
                            <input type="password" name="password" id="pwdField" class="f-input" autocomplete="new-password"
                                   placeholder="{{ $selectedDb ? '(laisser vide = inchangé)' : 'Mot de passe' }}" style="padding-right:36px;">
                            <button type="button" onclick="togglePwd()" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-muted);">
                                <svg id="eyeIcon" viewBox="0 0 24 24" style="width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                            </button>
                        </div>
                    </div>
                    <div class="frow frow-2">
                        <label class="f-label">Charset</label>
                        <select name="charset" class="f-input f-select" style="max-width:160px;">
                            <option value="utf8mb4" {{ ($selectedDb?->charset ?? 'utf8mb4') === 'utf8mb4' ? 'selected':'' }}>utf8mb4 (recommandé)</option>
                            <option value="utf8"    {{ ($selectedDb?->charset) === 'utf8'    ? 'selected':'' }}>utf8</option>
                            <option value="latin1"  {{ ($selectedDb?->charset) === 'latin1'  ? 'selected':'' }}>latin1</option>
                        </select>
                        <label class="f-label">Notes</label>
                        <input type="text" name="notes" class="f-input" value="{{ $selectedDb?->notes }}">
                    </div>

                    <div id="testResult" class="test-result"></div>
                </div>

                <div class="fiche-actions">
                    <button type="submit" class="btn-y">
                        <svg viewBox="0 0 24 24" style="width:13px;height:13px;stroke:var(--navy);fill:none;stroke-width:2.5;stroke-linecap:round;"><polyline points="20 6 9 17 4 12"/></svg>
                        Enregistrer
                    </button>
                    @if($selectedDb)
                    <button type="button" class="btn-test" onclick="testConnection({{ $selectedDb->id }})">
                        <svg viewBox="0 0 24 24" style="width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;"><path d="M5 12.55a11 11 0 0114.08 0"/><path d="M1.42 9a16 16 0 0121.16 0"/><path d="M8.53 16.11a6 6 0 016.95 0"/><circle cx="12" cy="20" r="1" fill="currentColor"/></svg>
                        Tester la connexion
                    </button>
                    @endif
                    <a href="{{ route('admin.bases-de-donnees.index') }}" class="btn-ghost">Annuler</a>
                    @if($selectedDb)
                    <form method="POST" action="{{ route('admin.bases-de-donnees.destroy', $selectedDb) }}" style="margin-left:auto;"
                          onsubmit="return confirm('Supprimer cette base ? Les utilisateurs seront désassignés.')">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn-danger">
                            <svg viewBox="0 0 24 24" style="width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/></svg>
                            Supprimer
                        </button>
                    </form>
                    @endif
                </div>
            </form>
        </div>

        {{-- ── Utilisateurs assignés ── --}}
        @if($selectedDb && $selectedDb->users->count() > 0)
        <div class="users-card">
            <div class="users-header">Utilisateurs sur cette base ({{ $selectedDb->users->count() }})</div>
            @foreach($selectedDb->users as $u)
            <div class="user-assigned-row">
                <div class="ua-avatar">{{ strtoupper(substr($u->name, 0, 1)) }}</div>
                <div style="flex:1;">
                    <div style="font-size:13px;font-weight:800;color:var(--text);">{{ $u->name }}</div>
                    <div style="font-size:11px;color:var(--text-muted);font-weight:600;">{{ $u->email }}</div>
                </div>
                <a href="{{ route('admin.utilisateurs.index') }}" style="font-size:11px;font-weight:700;color:var(--navy);text-decoration:none;">Modifier →</a>
            </div>
            @endforeach
        </div>
        @endif

        @endif
    </div>
</div>

@endsection

@push('scripts')
<script>
function updatePort(sel) {
    const ports = { mysql: 3306, pgsql: 5432 };
    document.getElementById('portField').value = ports[sel.value] || 3306;
}

function togglePwd() {
    const f = document.getElementById('pwdField');
    f.type = f.type === 'password' ? 'text' : 'password';
}

function testConnection(id) {
    const btn = event.target.closest('button');
    const res = document.getElementById('testResult');
    btn.disabled = true;
    btn.innerHTML = '⏳ Test en cours…';
    res.style.display = 'none';

    fetch('{{ url('admin/bases-de-donnees') }}/' + id + '/test', {
        headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
    })
    .then(r => r.json())
    .then(data => {
        res.className = 'test-result ' + (data.ok ? 'ok' : 'err');
        res.textContent = data.ok
            ? '✓ Connexion réussie — ' + (data.version || '')
            : '✗ Échec : ' + (data.error || 'erreur inconnue');
        res.style.display = 'block';
    })
    .catch(() => {
        res.className = 'test-result err';
        res.textContent = '✗ Erreur réseau';
        res.style.display = 'block';
    })
    .finally(() => {
        btn.disabled = false;
        btn.innerHTML = '<svg viewBox="0 0 24 24" style="width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;"><path d="M5 12.55a11 11 0 0114.08 0"/><path d="M1.42 9a16 16 0 0121.16 0"/><path d="M8.53 16.11a6 6 0 016.95 0"/><circle cx="12" cy="20" r="1" fill="currentColor"/></svg> Tester la connexion';
    });
}
</script>
@endpush