/* global React */
const { useState, useEffect } = React;

/* ===== eCoC Vehicle List Mock ===== */
function DashboardMock() {
  const vehicles = [
    { vin: 'WAUZZZ4G7EN012345', brand: 'AUDI', model: 'A6 50 e-tron quattro', status: 'ok' },
    { vin: 'WBA5E51000FG23456', brand: 'BMW', model: '320e Touring',          status: 'sent' },
    { vin: 'YV1DZ8358N2134567', brand: 'VOLVO', model: 'XC60 T6 Recharge',    status: 'ok' },
    { vin: 'JTMB33FV70D045678', brand: 'TOYOTA', model: 'RAV4 Plug-in Hybrid', status: 'draft' },
    { vin: 'KMHL14JA5NA056789', brand: 'HYUNDAI', model: 'Kona Electric',      status: 'fail' },
  ];

  const statusLabel = { ok: 'Godkjent', sent: 'Sendt', draft: 'Utkast', fail: 'Avvist' };

  return (
    <div className="dash">
      <div className="dash-topbar">
        <div className="dash-brand"><span className="dash-mark">vr</span>Leap IT AS</div>
        <div className="dash-tabs">
          <span>Oversikt</span><span>Maler</span><span className="active">Kjøretøy</span><span>Innstillinger</span>
        </div>
        <div className="dash-avatar">SI</div>
      </div>
      <div className="dash-main">
        <div className="dash-head">
          <div className="dash-title">Kjøretøy</div>
          <button className="dash-new-btn">Nytt kjøretøy</button>
        </div>
        <div className="dash-search">
          <span className="dash-search-input">Søk på understellsnummer eller merke…</span>
          <span className="dash-search-select">Alle statuser ⌄</span>
          <span className="dash-search-btn">Søk</span>
        </div>
        <div className="dash-vehicle-list">
          {vehicles.map((v) => (
            <div className="dash-vehicle-row" key={v.vin}>
              <div>
                <div className="dash-vehicle-vin">{v.vin}</div>
                <div className="dash-vehicle-model"><span className="brand">{v.brand}</span>{v.model}</div>
              </div>
              <span className={`badge ${v.status}`}>{statusLabel[v.status]}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ===== Float cards around the hero ===== */
function FloatCard({ position, label, value, icon }) {
  return (
    <div className={`float-card ${position}`}>
      <div className="ico">{icon}</div>
      <div>
        <div className="label">{label}</div>
        <div className="value">{value}</div>
      </div>
    </div>
  );
}

/* Export to window */
Object.assign(window, { DashboardMock, FloatCard });