@extends('layout.app')
@section('title', 'Part History / Lifecycle')

@push('header_script')
    <link rel="stylesheet" href="{{ asset('theme/assets/select2/select2.min.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
    <style>
        .page-title { font-size: 22px; font-weight: 700; color: #0f172a; margin: 0; }
        .page-subtitle { font-size: 13px; color: #64748b; margin: 4px 0 0; }
        
        /* Part select card */
        .part-select-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px 24px; }
        .part-select-label { font-size: 12px; font-weight: 600; color: #475569; display: block; margin-bottom: 6px; }

        /* Info card - the main card showing part details */
        .part-info-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px 24px; }
        .part-name { font-size: 18px; font-weight: 700; color: #0f172a; margin: 0; }
        .part-meta { font-size: 13px; color: #64748b; margin: 4px 0 0; }

        /* Stat blocks */
        .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
        .stat-block { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; }
        .stat-label { font-size: 11px; color: #64748b; margin: 0 0 4px; }
        .stat-value { font-size: 15px; font-weight: 700; color: #0f172a; margin: 0; }

        /* Status badge */
        .status-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 500; border: 1px solid; }
        .status-pill .dot { width: 7px; height: 7px; border-radius: 50%; }
        .status-Available    { background: #f0f9ff; color: #0369a1; border-color: #bae6fd; }
        .dot-Available       { background: #0ea5e9; }
        .status-Assigned     { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
        .dot-Assigned        { background: #22c55e; }
        .status-Reusable     { background: #f0fdfa; color: #0f766e; border-color: #99f6e4; }
        .dot-Reusable        { background: #14b8a6; }
        .status-Claimable    { background: #fffbeb; color: #92400e; border-color: #fde68a; }
        .dot-Claimable       { background: #f59e0b; }
        .status-Repairing    { background: #f5f3ff; color: #5b21b6; border-color: #ddd6fe; }
        .dot-Repairing       { background: #8b5cf6; }
        .status-Scrap        { background: #fff1f2; color: #9f1239; border-color: #fecdd3; }
        .dot-Scrap           { background: #f43f5e; }

        /* Timeline */
        .timeline { margin-top: 20px; }
        .timeline-item { display: flex; gap: 14px; margin-bottom: 20px; }
        .tl-icon-wrap { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
        .tl-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
        .tl-line  { width: 2px; flex: 1; background: #e2e8f0; margin-top: 6px; }
        .tl-body  { flex: 1; padding-bottom: 16px; border-bottom: 1px solid #f1f5f9; }
        .tl-date  { font-size: 11px; color: #94a3b8; margin-bottom: 4px; }
        .tl-title { font-size: 14px; font-weight: 700; color: #0f172a; margin: 0; }
        .tl-note  { font-size: 13px; color: #475569; margin: 3px 0 0; }
        .tl-km-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 5px; padding: 2px 8px; font-size: 12px; color: #334155; }

        /* Event type icon colors */
        .icon-purchase { background: #f1f5f9; color: #475569; }
        .icon-assign   { background: #dcfce7; color: #16a34a; }
        .icon-unassign { background: #fef3c7; color: #d97706; }
        .icon-repair   { background: #ede9fe; color: #7c3aed; }
        .icon-available { background: #e0f2fe; color: #0284c7; }
        .icon-reusable { background: #ccfbf1; color: #0d9488; }
        .icon-claimable { background: #fef3c7; color: #d97706; }
        .icon-repairing { background: #ede9fe; color: #7c3aed; }
        .icon-scrap    { background: #ffe4e6; color: #e11d48; }

        /* Empty state */
        .empty-state { text-align: center; padding: 40px 20px; color: #94a3b8; }

        /* Select2 custom width fix */
        .select2-container { width: 100% !important; }
    </style>
@endpush

@section('content')
    <div class="app-hero-header d-flex align-items-center mb-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Fleet Management</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0);">Truck Parts & Inventory</a></li>
            <li class="breadcrumb-item active">Part History</li>
        </ol>
    </div>

    <div class="app-body">
        <div class="mb-4">
            <h1 class="page-title">Part History / Lifecycle</h1>
            <p class="page-subtitle">Every cycle a physical part has been through — nothing here is ever edited or removed.</p>
        </div>

        <div class="row">
            <div class="col-lg-8 mx-auto">

                <!-- Part Selector -->
                <div class="part-select-card mb-3">
                    <span class="part-select-label">Part</span>
                    <select id="history_part_id" class="form-select select2">
                        <option value="">Loading parts...</option>
                    </select>
                </div>

                <!-- Part Detail + Timeline -->
                <div id="historyContent" style="display: none;">
                    <!-- Populated via JS -->
                </div>

                <div id="historyEmpty" class="part-info-card empty-state" style="display: none;">
                    <i class="ri-history-line" style="font-size: 40px; display: block; margin-bottom: 12px;"></i>
                    No parts found. Please add stock and assign parts first.
                </div>

            </div>
        </div>
    </div>
@endsection

@push('footer_script')
    <script src="{{ asset('theme/assets/select2/select2.min.js') }}"></script>
    <script>
    $(document).ready(function() {
        // Initialize Select2
        $('#history_part_id').select2({ width: '100%', placeholder: 'Select any part...' });

        // Load parts dropdown
        $.get('{{ route("parts-inventory.getData") }}', function(res) {
            if (res && res.data && res.data.length > 0) {
                let html = '<option value="">Select any part...</option>';
                res.data.forEach(function(part) {
                    // Format: "ProductName — SerialCode"
                    html += `<option value="${part.id}">${part.item_name} — ${part.item_code}</option>`;
                });
                $('#history_part_id').html(html).trigger('change.select2');
            } else {
                $('#history_part_id').html('<option value="">No parts found.</option>').trigger('change.select2');
                $('#historyEmpty').show();
            }
        }).fail(function() {
            $('#history_part_id').html('<option value="">Error loading parts.</option>').trigger('change.select2');
        });

        // When part is selected, load timeline
        $('#history_part_id').on('change', function() {
            const id = $(this).val();
            if (id) {
                loadTimeline(id);
            } else {
                $('#historyContent').hide();
            }
        });
    });

    function statusClass(status) {
        const map = { Available: 'Available', Assigned: 'Assigned', Reusable: 'Reusable', Claimable: 'Claimable', Repairing: 'Repairing', Scrap: 'Scrap' };
        return map[status] || 'Available';
    }

    function eventIcon(type) {
        const icons = {
            purchase:  { icon: 'ri-box-3-line',           cls: 'icon-purchase' },
            assign:    { icon: 'ri-truck-line',            cls: 'icon-assign'   },
            unassign:  { icon: 'ri-tools-line',            cls: 'icon-unassign' },
            repair:    { icon: 'ri-service-line',          cls: 'icon-repair'   },
            available: { icon: 'ri-checkbox-circle-line',  cls: 'icon-available'},
            reusable:  { icon: 'ri-refresh-line',          cls: 'icon-reusable' },
            claimable: { icon: 'ri-shield-check-line',     cls: 'icon-claimable'},
            repairing: { icon: 'ri-tools-fill',            cls: 'icon-repairing'},
            scrap:     { icon: 'ri-delete-bin-6-line',     cls: 'icon-scrap'    },
        };
        return icons[type] || icons.available;
    }

    function friendlyEventTitle(type) {
        const map = {
            purchase:  'Purchased',
            assign:    'Assigned',
            unassign:  'Unassigned',
            repair:    'Repair Completed',
            available: 'Currently Available',
            reusable:  'Marked Reusable',
            claimable: 'Warranty Claim',
            repairing: 'Sent for Repair',
            scrap:     'Scrapped',
        };
        return map[type] || type;
    }

    function formatDateIn(dateStr) {
        if (!dateStr) return '—';
        const d = new Date(dateStr);
        return d.toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' });
    }

    function formatNum(n) {
        if (n == null || isNaN(n)) return '—';
        return Number(n).toLocaleString('en-IN');
    }

    function loadTimeline(id) {
        $('#historyContent').html(`
            <div class="part-info-card text-center py-5 text-muted">
                <div class="spinner-border spinner-border-sm me-2" role="status"></div> Loading...
            </div>
        `).show();
        $('#historyEmpty').hide();

        $.get('{{ url("parts-inventory/history") }}/' + id, function(res) {
            if (!res.success) {
                $('#historyContent').html('<div class="part-info-card text-danger p-4">Failed to load part details.</div>');
                return;
            }

            const part   = res.part;
            const events = res.events || [];

            // Compute stats
            let assignCount = 0, totalKm = 0, totalDays = 0, totalRepair = 0;
            events.forEach(function(ev) {
                if (ev.event_type === 'assign')  assignCount++;
                if (ev.km_used)                  totalKm    += Number(ev.km_used);
                if (ev.days_used)                totalDays  += Number(ev.days_used);
                if (ev.event_type === 'repair' && ev.cost) totalRepair += Number(ev.cost);
            });

            const purchaseCost = Number(part.purchase_cost || 0);
            const effectiveCost = purchaseCost + totalRepair;
            const sc = statusClass(part.status);
            const catName = part.category ? part.category.category_name : '—';
            const brandName = part.brand ? part.brand.brand_name : '—';
            const itemCode = part.item_code || '—';
            const productName = part.product ? part.product.product_name : itemCode;

            // Build card HTML
            let html = `
                <div class="part-info-card">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div>
                            <p class="part-name">${productName}</p>
                            <p class="part-meta">${itemCode} · ${catName} · ${brandName}</p>
                        </div>
                        <span class="status-pill status-${sc}">
                            <span class="dot dot-${sc}"></span> ${part.status}
                        </span>
                    </div>

                    <div class="stat-grid">
                        <div class="stat-block">
                            <p class="stat-label">Assignments</p>
                            <p class="stat-value">${assignCount}</p>
                        </div>
                        <div class="stat-block">
                            <p class="stat-label">Total KM Covered</p>
                            <p class="stat-value">${totalKm > 0 ? formatNum(totalKm) + ' km' : '0 km'}</p>
                        </div>
                        <div class="stat-block">
                            <p class="stat-label">Days in Service</p>
                            <p class="stat-value">${totalDays}</p>
                        </div>
                        <div class="stat-block">
                            <p class="stat-label">Purchase Cost</p>
                            <p class="stat-value">₹${formatNum(purchaseCost)}</p>
                        </div>
                        <div class="stat-block">
                            <p class="stat-label">Total Repair Cost</p>
                            <p class="stat-value">₹${formatNum(totalRepair)}</p>
                        </div>
                        <div class="stat-block" style="border-color: #1e293b; background: #f8fafc;">
                            <p class="stat-label">Effective Cost</p>
                            <p class="stat-value">₹${formatNum(effectiveCost)}</p>
                        </div>
                    </div>
            `;

            // Timeline
            if (events.length > 0) {
                html += `<div class="timeline">`;
                events.forEach(function(ev, idx) {
                    const meta = eventIcon(ev.event_type);
                    const isLast = idx === events.length - 1;
                    const noteText = ev.note || '';
                    const kmBadge = ev.km_at_event
                        ? `<span class="tl-km-badge"><i class="ri-dashboard-3-line"></i> ${formatNum(ev.km_at_event)} KM</span>`
                        : '';

                    html += `
                        <div class="timeline-item">
                            <div class="tl-icon-wrap">
                                <div class="tl-icon ${meta.cls}"><i class="${meta.icon}"></i></div>
                                ${!isLast ? '<div class="tl-line"></div>' : ''}
                            </div>
                            <div class="tl-body">
                                <div class="tl-date">${formatDateIn(ev.event_date)}</div>
                                <p class="tl-title">${friendlyEventTitle(ev.event_type)}</p>
                                ${noteText ? `<p class="tl-note">${noteText}</p>` : ''}
                                ${kmBadge}
                            </div>
                        </div>
                    `;
                });
                html += `</div>`;
            } else {
                // Generate default events based on part status
                html += generateDefaultTimeline(part);
            }

            html += `</div>`; // close part-info-card
            $('#historyContent').html(html).show();
        }).fail(function() {
            $('#historyContent').html('<div class="part-info-card text-danger p-4">Error loading timeline.</div>');
        });
    }

    function generateDefaultTimeline(part) {
        const sc = statusClass(part.status);
        let events = [];

        // Always add purchase event
        events.push({
            type: 'purchase',
            date: part.purchase_date,
            title: 'Purchased',
            note: 'Purchase cost ₹' + formatNum(part.purchase_cost)
        });

        // Add current status event
        if (part.status === 'Assigned' && part.current_vehicle) {
            events.push({
                type: 'assign',
                date: part.assigned_date,
                title: 'Assigned — ' + (part.current_vehicle.vehicle_no || ''),
                note: part.km_at_assignment ? 'Truck KM ' + formatNum(part.km_at_assignment) : 'Currently active'
            });
        } else if (part.status === 'Available') {
            events.push({ type: 'available', date: part.purchase_date, title: 'Currently Available', note: 'Awaiting its next assignment.' });
        } else {
            events.push({ type: part.status.toLowerCase(), date: part.purchase_date, title: 'Currently ' + part.status, note: 'Status set at last update.' });
        }

        let html = '<div class="timeline">';
        events.forEach(function(ev, idx) {
            const meta = eventIcon(ev.type);
            const isLast = idx === events.length - 1;
            html += `
                <div class="timeline-item">
                    <div class="tl-icon-wrap">
                        <div class="tl-icon ${meta.cls}"><i class="${meta.icon}"></i></div>
                        ${!isLast ? '<div class="tl-line"></div>' : ''}
                    </div>
                    <div class="tl-body">
                        <div class="tl-date">${formatDateIn(ev.date)}</div>
                        <p class="tl-title">${ev.title}</p>
                        ${ev.note ? `<p class="tl-note">${ev.note}</p>` : ''}
                    </div>
                </div>
            `;
        });
        html += '</div>';
        return html;
    }
    </script>
@endpush