@extends('layouts.portal.app')

@section('title', 'Datasets — InsightsReady')

@push('styles')
    <link rel="stylesheet" href="{{ asset('portal-assets/portal.css') }}" />
    <style>
        /* ===== Page chrome ===== */
        .hbar{display:flex;align-items:center;gap:.75rem}
        .hbar .btn{margin-left:auto}
        .search{position:relative;flex:1}
        .search input[type="search"]{width:100%}
        .filters{display:flex;gap:.5rem;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:600;font-size:12px}
        .chip--muted{background:#f9fafb;border-color:#e5e7eb;color:#374151}

        /* ===== 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)}

        /* ===== Card Grid ===== */
        .ds-grid{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
        @media (max-width:1160px){ .ds-grid{grid-template-columns:repeat(2,1fr)} }
        @media (max-width:760px){ .ds-grid{grid-template-columns:1fr} }

        .ds-card{position:relative;background:#fff;border:1px solid var(--border);
            border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px}
        .ds-head{display:flex;align-items:center;gap:10px}
        .ds-title{font-weight:800}
        .ds-meta{color:var(--ink-700);font-size:13px}
        .spacer{flex:1}
        .btn--sm{padding:8px 10px;border-radius:10px;font-size:13px;font-weight:700}
        .btn--ghost{background:#fff;border:1px solid var(--border)}
        .status{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;
            font-weight:800;font-size:12px;border:1px solid var(--border);background:#f6f7fb;color:#4b5563}
        .status--ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
        .status--warn{background:#fffbeb;border-color:#fde68a;color:#92400e}
        .status--err{background:#fff2f2;border-color:#fecaca;color:#991b1b}

        /* health bar (7 tiny bars) */
        .health{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;align-items:end;height:20px}
        .hbar-col{height:16px;border-radius:4px;background:#e5e7eb;position:relative;overflow:hidden}
        .hbar-col.ok{background:#c7f3e7}
        .hbar-col.err{background:#ffd2d2}
        .hbar-col.run{background:linear-gradient(45deg,#fff6b3 25%, #ffe57a 25%, #ffe57a 50%, #fff6b3 50%, #fff6b3 75%, #ffe57a 75%, #ffe57a 100%);
            background-size:12px 12px}

        /* chips (sources / destinations) */
        .chip-mini{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
            border:1px solid var(--border);background:#fff;font-weight:700;font-size:12px}
        .row-chips{display:flex;gap:8px;flex-wrap:wrap}

        /* ===== Kebab (top-right) ===== */
        .kebab.kebab--top{position:absolute;top:10px;right:10px;display:inline-block;z-index:5}
        .kebab.kebab--top summary{list-style:none;display:inline-flex}
        .kebab.kebab--top summary::-webkit-details-marker{display:none}
        .icon-btn{
            display:inline-flex;align-items:center;justify-content:center;
            width:28px;height:28px;border-radius:8px;border:1px solid var(--border);
            background:#fff;cursor:pointer;color:var(--ink-700)
        }
        .icon-btn:hover{box-shadow:var(--shadow)}
        .kebab[open] .icon-btn{box-shadow:var(--shadow)}

        .kebab.kebab--top .menu{
            position:absolute;top:115%;right:0;min-width:200px;background:#fff;
            border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);
            padding:6px;display:grid;gap:4px
        }
        .kebab .menu .menu-item{
            display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;
            font-weight:600;color:var(--ink-800);text-decoration:none
        }
        .kebab .menu .menu-item:hover{background:#f6faf9;color:var(--brand-700)}
        .kebab .menu hr{border:0;border-top:1px solid var(--border);margin:6px 0}
        .kebab .menu .danger{color:#9b1c1c}
        .kebab .menu .danger:hover{background:#fff2f2;color:#7f1d1d}

        /* Optional: hide inline action buttons if you only want kebab */
        /* .ds-head > .btn{display:none} */
    </style>
@endpush

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

        <!-- Header -->
        <section class="hbar">
            <h1>Datasets</h1>
            <a class="btn btn--brand" href="{{ route('portal.datasets.create') }}">+ Add Dataset</a>
        </section>

        <!-- Filters + KPIs + Cards -->
        <section class="panel" style="margin-top:12px">

            <!-- KPIs -->
            <div class="kpi-row" style="margin-top:12px">
                <div class="kpi"><h4>Total datasets</h4><div class="val">128</div><div class="trend">+6 this week</div></div>
                <div class="kpi"><h4>Published</h4><div class="val">89</div><div class="trend">2 pending publish</div></div>
                <div class="kpi"><h4>Attention needed</h4><div class="val">4</div><div class="trend">2 failed runs today</div></div>
                <div class="kpi"><h4>Volume (24h)</h4><div class="val">38.2M</div><div class="trend">rows processed</div></div>
            </div>

            <!-- Card Grid -->
            <div class="ds-grid" style="margin-top:14px">

                {{-- Card 1: Published --}}
                <article class="ds-card">
                    <!-- Kebab -->
                    <details class="kebab kebab--top">
                        <summary class="icon-btn" aria-label="Open dataset actions">
                            <!-- inline SVG (no icon font dependency) -->
                            <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
                                <circle cx="5"  cy="12" r="2"></circle>
                                <circle cx="12" cy="12" r="2"></circle>
                                <circle cx="19" cy="12" r="2"></circle>
                            </svg>
                        </summary>
                        <div class="menu" role="menu">
                            <a class="menu-item" href="#"><i class="fa-solid fa-cloud-arrow-down"></i> Start Data Loading</a>
                            <a class="menu-item" href="#"><i class="fa-regular fa-eye"></i> Preview</a>
                            <a class="menu-item" href="#"><i class="fa-solid fa-gear"></i> Settings</a>
                            <a class="menu-item" href="#"><i class="fa-solid fa-bolt"></i> Run ETL Now</a>
                            <hr>
                            <a class="menu-item" href="#"><i class="fa-solid fa-ban"></i> Unpublish</a>
                            <a class="menu-item danger" href="#"><i class="fa-solid fa-trash"></i> Delete</a>
                        </div>
                    </details>

                    <div class="ds-head">
                        <div class="ds-title">Ecommerce Orders</div>
                        <span class="status status--ok">Published</span>
                    </div>
                    <div class="ds-meta">Type: Mixed</div>
                    <div class="row-chips">
                        <span class="chip-mini">Shopify</span>
                        <span class="chip-mini">GA4</span>
                        <span class="chip-mini">Google Ads</span>
                        <span class="chip-mini">→ Power BI</span>
                    </div>
                </article>

                {{-- Card 2: Draft --}}
                <article class="ds-card">
                    <details class="kebab kebab--top">
                        <summary class="icon-btn" aria-label="Open dataset actions">
                            <!-- inline SVG (no icon font dependency) -->
                            <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
                                <circle cx="5"  cy="12" r="2"></circle>
                                <circle cx="12" cy="12" r="2"></circle>
                                <circle cx="19" cy="12" r="2"></circle>
                            </svg>
                        </summary>
                        <div class="menu" role="menu">
                            <a class="menu-item" href="#"><i class="fa-solid fa-bullhorn"></i> Publish</a>
                            <a class="menu-item" href="#"><i class="fa-regular fa-pen-to-square"></i> Edit</a>
                            <a class="menu-item" href="#"><i class="fa-regular fa-eye"></i> Preview</a>
                            <hr>
                            <a class="menu-item danger" href="#"><i class="fa-solid fa-trash"></i> Delete</a>
                        </div>
                    </details>

                    <div class="ds-head">
                        <div class="ds-title">Customers Dim</div>
                        <span class="status">Draft</span>
                    </div>
                    <div class="ds-meta">Type: Time-series</div>
                    <div class="row-chips">
                        <span class="chip-mini">Google Ads</span>
                        <span class="chip-mini">Meta Ads</span>
                        <span class="chip-mini">→ Power BI</span>
                    </div>
                </article>

                {{-- Card 3: Published --}}
                <article class="ds-card">
                    <details class="kebab kebab--top">
                        <summary class="icon-btn" aria-label="Open dataset actions">
                            <!-- inline SVG (no icon font dependency) -->
                            <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
                                <circle cx="5"  cy="12" r="2"></circle>
                                <circle cx="12" cy="12" r="2"></circle>
                                <circle cx="19" cy="12" r="2"></circle>
                            </svg>
                        </summary>
                        <div class="menu" role="menu">
                            <a class="menu-item" href="#"><i class="fa-solid fa-cloud-arrow-down"></i> Start Data Loading</a>
                            <a class="menu-item" href="#"><i class="fa-regular fa-eye"></i> Preview</a>
                            <a class="menu-item" href="#"><i class="fa-solid fa-gear"></i> Settings</a>
                            <hr>
                            <a class="menu-item" href="#"><i class="fa-solid fa-ban"></i> Unpublish</a>
                            <a class="menu-item danger" href="#"><i class="fa-solid fa-trash"></i> Delete</a>
                        </div>
                    </details>

                    <div class="ds-head">
                        <div class="ds-title">Web Sessions</div>
                        <span class="status status--ok">Published</span>
                    </div>
                    <div class="ds-meta">Type: Events</div>
                    <div class="row-chips">
                        <span class="chip-mini">GA4</span>
                        <span class="chip-mini">→ Power BI</span>
                    </div>
                </article>

                {{-- Card 4: Failed --}}
                <article class="ds-card">
                    <details class="kebab kebab--top">
                        <summary class="icon-btn" aria-label="Open dataset actions">
                            <!-- inline SVG (no icon font dependency) -->
                            <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
                                <circle cx="5"  cy="12" r="2"></circle>
                                <circle cx="12" cy="12" r="2"></circle>
                                <circle cx="19" cy="12" r="2"></circle>
                            </svg>
                        </summary>
                        <div class="menu" role="menu">
                            <a class="menu-item" href="#"><i class="fa-solid fa-arrow-rotate-right"></i> Retry</a>
                            <a class="menu-item" href="#"><i class="fa-solid fa-list"></i> View logs</a>
                            <a class="menu-item" href="#"><i class="fa-solid fa-gear"></i> Settings</a>
                            <hr>
                            <a class="menu-item danger" href="#"><i class="fa-solid fa-trash"></i> Delete</a>
                        </div>
                    </details>

                    <div class="ds-head">
                        <div class="ds-title">Returns & Refunds</div>
                        <span class="status status--err">Failed</span>
                    </div>
                    <div class="ds-meta">Type: Facts</div>
                    <div class="row-chips">
                        <span class="chip-mini">Shopify</span>
                        <span class="chip-mini">→ Power BI</span>
                    </div>
                </article>

                {{-- Card 5: Draft (never run) --}}
                <article class="ds-card">
                    <details class="kebab kebab--top">
                        <summary class="icon-btn" aria-label="Open dataset actions">
                            <!-- inline SVG (no icon font dependency) -->
                            <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
                                <circle cx="5"  cy="12" r="2"></circle>
                                <circle cx="12" cy="12" r="2"></circle>
                                <circle cx="19" cy="12" r="2"></circle>
                            </svg>
                        </summary>
                        <div class="menu" role="menu">
                            <a class="menu-item" href="#"><i class="fa-solid fa-bullhorn"></i> Publish</a>
                            <a class="menu-item" href="#"><i class="fa-regular fa-pen-to-square"></i> Edit</a>
                            <hr>
                            <a class="menu-item danger" href="#"><i class="fa-solid fa-trash"></i> Delete</a>
                        </div>
                    </details>

                    <div class="ds-head">
                        <div class="ds-title">Customers Dim</div>
                        <span class="status">Draft</span>
                    </div>
                    <div class="ds-meta">Type: Dimension</div>
                    <div class="row-chips">
                        <span class="chip-mini">Salesforce</span>
                    </div>
                </article>

            </div>
        </section>

    </main>
@endsection

@push('scripts')
@endpush