<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Service Finder</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <style>
        body { background-color: #f0f2f5; font-family: 'Segoe UI', sans-serif; }
        .main-container { max-width: 1000px; margin: 30px auto; }
        .nav-pills .nav-link { border-radius: 50px; padding: 10px 25px; font-weight: 600; color: #6c757d; margin-right: 10px; }
        .nav-pills .nav-link.active { background-color: #0d6efd; color: white; }
        
        .garage-card { border: none; border-radius: 12px; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: transform 0.2s; cursor: pointer; height: 100%; position: relative; overflow: hidden; }
        .garage-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        .card-top-strip { height: 6px; background: #0d6efd; width: 100%; position: absolute; top: 0; left: 0; }
        .card-top-strip.danger { background: #dc3545; }
        
        .plate-badge { background: #ffcc00; color: black; border: 1px solid #e0b000; font-family: 'Courier New', monospace; font-weight: bold; padding: 2px 6px; font-size: 0.9rem; border-radius: 4px; }
        
        /* Detail View */
        .detail-header { background: white; border-radius: 15px; padding: 25px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
        .stat-box { background: #f8f9fa; border-radius: 10px; padding: 15px; text-align: center; height: 100%; transition: 0.3s; }
        .stat-value { font-size: 1.5rem; font-weight: bold; color: #212529; }
        .stat-label { font-size: 0.85rem; color: #6c757d; text-transform: uppercase; }
        .tab-content-area { background: white; border-radius: 15px; padding: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
        
        .modal-backdrop-custom { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1040; display: flex; align-items: center; justify-content: center; }
        .modal-content-custom { background: white; padding: 30px; border-radius: 15px; width: 100%; max-width: 500px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
    </style>
</head>
<body>

<div id="app">
    <nav class="navbar navbar-dark bg-primary mb-4 shadow-sm py-2">
        <div class="container"><span class="navbar-brand mb-0 h1 fs-5"><i class="bi bi-speedometer2 me-2"></i>Service Finder</span></div>
    </nav>

    <div class="container main-container">

        <div v-if="view === 'dashboard'">
            <ul class="nav nav-pills mb-4">
                <li class="nav-item"><a class="nav-link" :class="{active: activeTab === 'garage'}" href="#" @click="activeTab = 'garage'">Garázs</a></li>
                <li class="nav-item"><a class="nav-link" :class="{active: activeTab === 'team'}" href="#" @click="activeTab = 'team'">Csapat</a></li>
            </ul>

            <div v-if="activeTab === 'garage'" class="row g-3">
                <div class="col-md-6 col-lg-4" v-for="car in myCars" :key="car.vehicle_id">
                    <div class="card garage-card p-3" @click="openVehicleDetail(car.vehicle_id)">
                        <div class="card-top-strip" :class="{ 'danger': car.status !== 'OK' && car.status !== null }"></div>
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div><h5 class="fw-bold mb-0">{{ car.brand }}</h5><div class="text-muted small">{{ car.model }}</div></div>
                            <i v-if="car.status !== 'OK' && car.status !== null" class="bi bi-exclamation-triangle-fill text-danger fs-2"></i>
                            <i v-else class="bi bi-car-front fs-2 text-secondary"></i>
                        </div>
                        <div class="mt-2 d-flex justify-content-between align-items-end">
                            <div class="plate-badge">{{ car.plate }}</div>
                            <span class="badge" :class="(car.status !== 'OK' && car.status !== null) ? 'bg-danger' : 'bg-light text-dark border'">
                                {{ (car.status !== 'OK' && car.status !== null) ? 'HIBA' : car.role }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
             <div v-if="activeTab === 'team'"><h3>Csapat...</h3></div>
        </div>

        <div v-if="view === 'detail' && selectedCar">
            <button class="btn btn-outline-secondary mb-3 rounded-pill" @click="view = 'dashboard'; fetchData()"><i class="bi bi-arrow-left me-2"></i>Garázs</button>
            
            <div class="detail-header d-flex justify-content-between align-items-center flex-wrap gap-3">
                <div class="d-flex align-items-center">
                    <div class="text-white rounded-circle d-flex align-items-center justify-content-center me-3" 
                         :class="(selectedCar.status !== 'OK' && selectedCar.status !== null) ? 'bg-danger' : 'bg-primary'" style="width: 60px; height: 60px;">
                        <i class="bi" :class="(selectedCar.status !== 'OK' && selectedCar.status !== null) ? 'bi-exclamation-triangle' : 'bi-car-front'" style="font-size: 1.8rem;"></i>
                    </div>
                    <div>
                        <h2 class="fw-bold mb-0">{{ selectedCar.brand }} {{ selectedCar.model }}</h2>
                        <div class="d-flex align-items-center mt-1 gap-2">
                            <span class="plate-badge fs-6">{{ selectedCar.plate }}</span>
                            <span v-if="selectedCar.status !== 'OK' && selectedCar.status !== null" class="badge bg-danger">ÁLLAPOT: {{ selectedCar.status }}</span>
                        </div>
                    </div>
                </div>
                <button class="btn btn-outline-danger" @click="openErrorModal"><i class="bi bi-exclamation-circle-fill me-1"></i> Jelentés</button>
            </div>

            <div class="tab-content-area">
                <div class="row g-4">
                    <div class="col-md-3">
                        <div class="stat-box"><div class="stat-value">{{ selectedCar.mileage }}</div><div class="stat-label">Km</div></div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-box" :style="(selectedCar.status !== 'OK' && selectedCar.status !== null) ? 'background: #f8d7da; color: #721c24;' : 'background: #d1e7dd; color: #0f5132;'">
                            <div class="stat-value">
                                <i :class="(selectedCar.status !== 'OK' && selectedCar.status !== null) ? 'bi bi-x-circle' : 'bi bi-check-circle'"></i>
                                {{ (selectedCar.status !== 'OK' && selectedCar.status !== null) ? 'HIBA' : 'OK' }}
                            </div>
                            <div class="stat-label">Műszaki állapot</div>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                         <div v-if="selectedCar.status !== 'OK' && selectedCar.status !== null" class="alert alert-danger h-100 shadow-sm border-danger">
                             <div class="d-flex justify-content-between align-items-start">
                                 <div>
                                    <h6 class="fw-bold text-danger"><i class="bi bi-exclamation-triangle me-2"></i>Nyitott probléma:</h6>
                                    <p class="mb-2 text-dark">{{ selectedCar.current_issue }}</p>
                                 </div>
                                 <button class="btn btn-sm btn-danger" @click="resolveIssue">
                                    <i class="bi bi-wrench-adjustable me-1"></i> Megjavítva
                                 </button>
                             </div>
                             <small class="text-muted">A javítás rögzítése naplózásra kerül.</small>
                         </div>
                         
                         <div v-else class="alert alert-light border h-100 d-flex align-items-center justify-content-center text-muted">
                             <i class="bi bi-check2-all me-2"></i> Nincs nyitott hiba. Az autó útra kész.
                         </div>
                    </div>
                </div>
            </div>
        </div>

        <div v-if="showErrorModal" class="modal-backdrop-custom">
            <div class="modal-content-custom bg-danger bg-opacity-10 border border-danger">
                <h4 class="fw-bold text-danger">Hiba bejelentése</h4>
                <textarea class="form-control my-3" rows="3" v-model="errorForm.description" placeholder="Mi a gond?"></textarea>
                <div class="form-check mb-3">
                    <input class="form-check-input" type="checkbox" v-model="errorForm.is_critical">
                    <label class="form-check-label">Kritikus (Mozgásképtelen)</label>
                </div>
                <div class="d-flex justify-content-end gap-2">
                    <button class="btn btn-light" @click="showErrorModal = false">Mégse</button>
                    <button class="btn btn-danger" @click="submitError">Mentés</button>
                </div>
            </div>
        </div>

    </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const { createApp } = Vue
    createApp({
        data() { return { view: 'dashboard', activeTab: 'garage', showErrorModal: false, myCars: [], selectedCar: null, errorForm: {description: '', is_critical: false} } },
        methods: {
            async fetchData() {
                const res = await fetch('/api/my_vehicles');
                this.myCars = await res.json();
            },
            async openVehicleDetail(id) {
                const res = await fetch('/api/vehicle/' + id);
                this.selectedCar = await res.json();
                this.view = 'detail';
            },
            openErrorModal() { this.errorForm = {description: '', is_critical: false}; this.showErrorModal = true; },
            
            async submitError() {
                try {
                    const res = await fetch('/api/report_issue', {
                        method: 'POST', headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify({
                            vehicle_id: this.selectedCar.id,
                            description: this.errorForm.description,
                            is_critical: this.errorForm.is_critical
                        })
                    });
                    if (res.ok) {
                        alert("Hiba naplózva!");
                        this.showErrorModal = false;
                        this.openVehicleDetail(this.selectedCar.id);
                    }
                } catch(e) { alert("Hiba!"); }
            },
            
            // EZ A FÜGGVÉNY MOST MÁR TÉNYLEG JAVÍT ÉS NAPLÓZ!
            async resolveIssue() {
                if(!confirm("Biztosan megjavítottad az autót? A státusz visszaáll OK-ra.")) return;
                
                try {
                    const res = await fetch('/api/resolve_issue', {
                        method: 'POST', headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify({ vehicle_id: this.selectedCar.id })
                    });
                    
                    if (res.ok) {
                        alert("Siker! Az autó újra bevethető.");
                        this.openVehicleDetail(this.selectedCar.id); // Frissítés
                    }
                } catch(e) { alert("Hiba történt!"); }
            }
        },
        mounted() { this.fetchData(); }
    }).mount('#app')
</script>
</body>
</html>