@extends('layouts.portal.app')

@section('title', 'Data Processing — InsightsReady')

@push('styles')
    <link rel="stylesheet" href="{{ asset('portal-assets/portal.css') }}" />
    <style>
        /* ===== Page chrome ===== */
        .hbar{display:flex;align-items:center;gap:.75rem}
        .hbar .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
        .chip{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--border);
            border-radius:999px;padding:.3rem .55rem;background:#fff;font-weight:700;font-size:12px}
        .chip--muted{background:#f9fafb;border-color:#e5e7eb;color:#374151}

        /* ===== Tiles ===== */
        .dp-grid{display:grid;gap:12px;grid-template-columns:repeat(5,1fr)}
        @media (max-width:1200px){.dp-grid{grid-template-columns:repeat(3,1fr)}}
        @media (max-width:760px){.dp-grid{grid-template-columns:1fr 1fr}}
        @media (max-width:520px){.dp-grid{grid-template-columns:1fr}}

        .dp-step{
            background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px
        }
        .dp-step h4{margin:0;font-size:14px;font-weight:800}
        .dp-row{display:flex;align-items:center;gap:8px}
        .dp-icon{
            width:34px;height:34px;border-radius:10px;border:1px solid var(--border);background:#f8fafc;
            display:flex;align-items:center;justify-content:center;color:var(--brand-700)
        }
        .dp-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid var(--border);font:800 11px/1 Inter}
        .dp-ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
        .dp-run{background:#fff8da;border-color:#f1e4b3;color:#7a5f00}
        .dp-err{background:#fff2f2;border-color:#fecaca;color:#991b1b}
        .dp-wait{background:#f3f6fb;border-color:#e5e7eb;color:#334155}

        .dp-progress{height:8px;border-radius:999px;background:#f0f2f6;border:1px solid var(--border);overflow:hidden}
        .dp-bar{height:100%;width:0;background:linear-gradient(90deg,#bfe7e1,#4ea3a1);transition:width .4s ease}
        .is-running .dp-bar{
            background:
                repeating-linear-gradient(45deg, rgba(78,163,161,.35) 0 10px, rgba(78,163,161,.55) 10px 20px),
                linear-gradient(90deg, rgba(78,163,161,.2), rgba(78,163,161,.5));
            animation: stripes 1.1s linear infinite
        }
        @keyframes stripes{from{background-position:0 0,0 0}to{background-position:40px 0,0 0}}

        .dp-meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--ink-700);font-size:12px}
        .dp-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
        .btn-xs{padding:8px 10px;border-radius:10px;font-weight:700}

        /* ===== KPIs ===== */
        .kpi-row{display:grid;gap:12px;grid-template-columns:repeat(4,1fr)}
        @media (max-width:980px){.kpi-row{grid-template-columns:repeat(2,1fr)}}
        @media (max-width:640px){.kpi-row{grid-template-columns:1fr}}
        .kpi{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px}
        .kpi h4{margin:0 0 6px;font-size:12px;color:var(--ink-700);font-weight:700;letter-spacing:.02em}
        .kpi .val{font:800 22px/1.1 Inter,system-ui}
        .kpi .trend{font-size:12px;color:var(--ink-700)}

        /* ===== Tables ===== */
        .dp-table{width:100%;border-collapse:separate;border-spacing:0 8px}
        .dp-table th{font-size:12px;color:var(--ink-700);text-align:left;padding:0 10px}
        .dp-table td{background:#fff;border:1px solid var(--border);padding:10px;border-radius:10px}
        .dp-table td:last-child{text-align:right}
    </style>
@endpush

@section('content')
    <main class="container page">

        {{-- Header --}}
        <section class="hbar">
            <h1>Data Processing</h1>
            <div class="actions">
                <a class="btn" href="#">Run All</a>
                <a class="btn" href="#">Schedules</a>
                <a class="btn" href="#">Lineage</a>
            </div>
        </section>

        {{-- Filters / search (dummy) --}}
        <section class="panel" style="margin-top:12px">
            <div class="grid-2">
                <div><input type="search" placeholder="Search pipelines, jobs, datasets…"></div>
                <div style="display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap">
                    <span class="chip chip--muted">All steps</span>
                    <span class="chip chip--muted">All statuses</span>
                    <span class="chip chip--muted">Last 24h</span>
                </div>
            </div>

            {{-- KPIs --}}
            <div class="kpi-row" style="margin-top:12px">
                <div class="kpi"><h4>Pipelines</h4><div class="val">8</div><div class="trend">+1 this week</div></div>
                <div class="kpi"><h4>Running</h4><div class="val">3</div><div class="trend">2 queued</div></div>
                <div class="kpi"><h4>Failed (24h)</h4><div class="val" style="color:#991b1b">2</div><div class="trend">Check logs & retries</div></div>
                <div class="kpi"><h4>Avg duration</h4><div class="val">54s</div><div class="trend">last 20 runs</div></div>
            </div>

            {{-- Step tiles --}}
            @php
                $pipeline = [
                  ['title'=>'Ingest','icon'=>'fa-file-import','status'=>'running','pct'=>55,'meta'=>['Magento','Batch 5/12','00:38 elapsed']],
                  ['title'=>'Model','icon'=>'fa-diagram-project','status'=>'ok','pct'=>100,'meta'=>['Dims/Facts up to date']],
                  ['title'=>'Quality','icon'=>'fa-shield-halved','status'=>'ok','pct'=>100,'meta'=>['12 checks','0 failed']],
                  ['title'=>'Marts','icon'=>'fa-table','status'=>'queued','pct'=>8,'meta'=>['Sales / Inventory']],
                  ['title'=>'Publish','icon'=>'fa-cloud-arrow-up','status'=>'err','pct'=>72,'meta'=>['Power BI dataset','contract error']],
                ];
                $chip = fn($s)=>['ok'=>'dp-chip dp-ok','running'=>'dp-chip dp-run','err'=>'dp-chip dp-err','queued'=>'dp-chip dp-wait'][$s] ?? 'dp-chip dp-wait';
                $ico  = fn($s)=>['ok'=>'fa-circle-check','running'=>'fa-rotate','err'=>'fa-triangle-exclamation','queued'=>'fa-clock'][$s] ?? 'fa-circle';
                $label= fn($s)=>ucfirst(match($s){'ok'=>'completed','running'=>'running','err'=>'failed','queued'=>'queued',default=>$s});
            @endphp

            <div class="dp-grid" style="margin-top:14px">
                @foreach($pipeline as $step)
                    <article class="dp-step {{ $step['status']==='running' ? 'is-running':'' }}">
                        <div class="dp-row">
                            <div class="dp-icon"><i class="fa-solid {{ $step['icon'] }}"></i></div>
                            <h4>{{ $step['title'] }}</h4>
                            <span class="{{ $chip($step['status']) }}" style="margin-left:auto">
              <i class="fa-solid {{ $ico($step['status']) }}"></i> {{ $label($step['status']) }}
            </span>
                        </div>

                        <div class="dp-progress"><div class="dp-bar" style="width: {{ $step['pct'] }}%"></div></div>

                        <div class="dp-meta">
                            @foreach($step['meta'] as $m)
                                <span><i class="fa-regular fa-dot-circle" style="opacity:.5"></i> {{ $m }}</span>
                            @endforeach
                        </div>

                        <div class="dp-actions">
                            <a class="btn btn-xs" href="#"><i class="fa-solid fa-play"></i> Run</a>
                            <a class="btn btn-xs" href="#"><i class="fa-regular fa-eye"></i> Preview</a>
                            <a class="btn btn-xs" href="#"><i class="fa-solid fa-gear"></i> Settings</a>
                        </div>
                    </article>
                @endforeach
            </div>
        </section>

        {{-- Recent runs --}}
        <section class="panel" style="margin-top:12px">
            <div style="display:flex;align-items:center;gap:10px;margin-bottom:6px">
                <strong>Recent runs</strong>
                <span class="chip">Last 24h</span>
                <div style="margin-left:auto"><a class="btn" href="#">View logs</a></div>
            </div>

            <table class="dp-table">
                <thead>
                <tr>
                    <th>Job</th><th>Started</th><th>Duration</th><th>Rows</th><th>Status</th><th></th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>ingest-magento-orders</td>
                    <td>{{ now()->subMinutes(8)->format('M d, Y H:i') }}</td>
                    <td>38s</td>
                    <td>8,430</td>
                    <td><span class="dp-chip dp-run"><i class="fa-solid fa-rotate"></i> Running</span></td>
                    <td><a class="btn btn-xs" href="#">Logs</a></td>
                </tr>
                <tr>
                    <td>mart-sales-daily</td>
                    <td>{{ now()->subMinutes(16)->format('M d, Y H:i') }}</td>
                    <td>12s</td>
                    <td>421,204</td>
                    <td><span class="dp-chip dp-ok"><i class="fa-solid fa-circle-check"></i> Completed</span></td>
                    <td><a class="btn btn-xs" href="#">Logs</a></td>
                </tr>
                <tr>
                    <td>publish-powerbi-dataset-sales</td>
                    <td>{{ now()->subMinutes(19)->format('M d, Y H:i') }}</td>
                    <td>47s</td>
                    <td>—</td>
                    <td><span class="dp-chip dp-err"><i class="fa-solid fa-triangle-exclamation"></i> Failed</span></td>
                    <td><a class="btn btn-xs" href="#">Retry</a></td>
                </tr>
                </tbody>
            </table>
        </section>

    </main>
@endsection

@push('scripts')
@endpush