// Main app — shell, routing, state.

const { useState: useStateA, useEffect: useEffectA, useMemo: useMemoA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "listView": "cards",
  "showThumbs": true
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const [vehicles, setVehicles] = useStateA(window.RENTAL_DATA.INITIAL_VEHICLES);
  const [bookings, setBookings] = useStateA(window.RENTAL_DATA.INITIAL_BOOKINGS);
  const [blocks, setBlocks] = useStateA(window.RENTAL_DATA.INITIAL_BLOCKS);

  const [route, setRoute] = useStateA({ name: "fleet" }); // "fleet" | {name:"vehicle", id, tab} | "new"
  const [splitSelectedId, setSplitSelectedId] = useStateA(vehicles[0]?.id);

  const goFleet = () => setRoute({ name: "fleet" });
  const goVehicle = (id, tab = "details") => setRoute({ name: "vehicle", id, tab });
  const goNew = () => setRoute({ name: "new" });

  const upsertVehicle = (v) => {
    setVehicles((list) => {
      const exists = list.some((x) => x.id === v.id);
      return exists ? list.map((x) => (x.id === v.id ? v : x)) : [...list, v];
    });
  };

  const deleteVehicle = (id) => {
    setVehicles((list) => list.filter((v) => v.id !== id));
    setBookings((b) => { const c = { ...b }; delete c[id]; return c; });
    setBlocks((b) => { const c = { ...b }; delete c[id]; return c; });
    goFleet();
  };

  const addBlock = (vid, block) => {
    setBlocks((b) => ({
      ...b,
      [vid]: [...(b[vid] || []), block],
    }));
  };

  const removeBlock = (vid, block) => {
    setBlocks((b) => ({
      ...b,
      [vid]: (b[vid] || []).filter(
        (x) => !(x.start === block.start && x.end === block.end && x.reason === block.reason)
      ),
    }));
  };

  return (
    <div className="app-shell">
      <Sidebar route={route} goFleet={goFleet} />
      <div className="main">
        {route.name === "fleet" && (
          <FleetView
            vehicles={vehicles}
            bookings={bookings}
            view={tweaks.listView}
            setView={(v) => setTweak("listView", v)}
            onSelect={goVehicle}
            onAdd={goNew}
            splitSelectedId={splitSelectedId}
            setSplitSelectedId={setSplitSelectedId}
          />
        )}
        {route.name === "vehicle" && (() => {
          const v = vehicles.find((x) => x.id === route.id);
          if (!v) return <NotFound goFleet={goFleet} />;
          return (
            <VehicleDetail
              vehicle={v}
              tab={route.tab}
              setTab={(t) => setRoute({ ...route, tab: t })}
              bookings={bookings[v.id] || []}
              blocks={blocks[v.id] || []}
              onSave={(updated) => { upsertVehicle(updated); }}
              onDelete={() => deleteVehicle(v.id)}
              onAddBlock={(b) => addBlock(v.id, b)}
              onRemoveBlock={(b) => removeBlock(v.id, b)}
              goFleet={goFleet}
            />
          );
        })()}
        {route.name === "new" && (
          <NewVehicleView
            onCreate={(v) => { upsertVehicle(v); goVehicle(v.id); }}
            goFleet={goFleet}
          />
        )}
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection title="List style">
          <TweakRadio
            value={tweaks.listView}
            onChange={(v) => setTweak("listView", v)}
            options={[
              { value: "cards", label: "Cards" },
              { value: "table", label: "Table" },
              { value: "split", label: "Split" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

// === Sidebar ===
function Sidebar({ route, goFleet }) {
  return (
    <aside className="sidebar">
      <div className="sidebar-brand">
        <div className="sidebar-brand-mark">784</div>
        <div>
          <div className="sidebar-brand-name">784 Admin</div>
          <div className="sidebar-brand-sub">Fleet management</div>
        </div>
      </div>

      <div className="sidebar-section-label">Operations</div>
      <button className={`nav-item ${route.name === "fleet" || route.name === "vehicle" || route.name === "new" ? "active" : ""}`} onClick={goFleet}>
        <NavIcon name="fleet" />
        <span>Fleet</span>
      </button>
      <button className="nav-item disabled" disabled>
        <NavIcon name="calendar" />
        <span>All bookings</span>
        <span className="nav-pill">Soon</span>
      </button>
      <button className="nav-item disabled" disabled>
        <NavIcon name="invoice" />
        <span>Invoicing</span>
        <span className="nav-pill">Soon</span>
      </button>
      <button className="nav-item disabled" disabled>
        <NavIcon name="customer" />
        <span>Customers</span>
        <span className="nav-pill">Soon</span>
      </button>

      <div className="sidebar-section-label">Settings</div>
      <button className="nav-item disabled" disabled>
        <NavIcon name="settings" />
        <span>Site settings</span>
        <span className="nav-pill">Soon</span>
      </button>
      <button className="nav-item disabled" disabled>
        <NavIcon name="users" />
        <span>Team</span>
        <span className="nav-pill">Soon</span>
      </button>

      <div className="sidebar-footer">
        <div className="user-avatar">JM</div>
        <div>
          <div className="user-name">J. Morris</div>
          <div className="user-role">Owner</div>
        </div>
      </div>
    </aside>
  );
}

function NavIcon({ name }) {
  const paths = {
    fleet: "M3 13l1.5-4.5A2 2 0 0 1 6.4 7h7.2a2 2 0 0 1 1.9 1.5L17 13M3 13v3h2v-1h10v1h2v-3M3 13h14M6 16v1M14 16v1",
    calendar: "M3 6h14v11H3zM3 6V4h3M14 4h3v2M3 10h14M7 4v3M13 4v3",
    invoice: "M5 3h10v14l-2.5-1.5L10 17l-2.5-1.5L5 17V3zM7 7h6M7 10h6M7 13h4",
    customer: "M10 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM4 17c0-3 2.5-5 6-5s6 2 6 5",
    settings: "M10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM10 3v2M10 15v2M3 10h2M15 10h2M5 5l1.5 1.5M13.5 13.5L15 15M5 15l1.5-1.5M13.5 6.5L15 5",
    users: "M7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM2 17c0-3 2-5 5-5s5 2 5 5M14 11a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM13 17c0-2.5 1.7-4 4-4",
  };
  return (
    <span className="nav-icon">
      <svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d={paths[name]} />
      </svg>
    </span>
  );
}

// === Fleet view ===
function FleetView({ vehicles, bookings, view, setView, onSelect, onAdd, splitSelectedId, setSplitSelectedId }) {
  const counts = useMemoA(() => {
    const total = vehicles.length;
    const available = vehicles.filter((v) => (v.status || "Available") === "Available").length;
    const maintenance = vehicles.filter((v) => v.status === "Maintenance").length;
    return { total, available, maintenance };
  }, [vehicles]);

  return (
    <>
      <div className="topbar">
        <div>
          <div className="topbar-title">Fleet</div>
          <div className="topbar-sub">
            {counts.total} {counts.total === 1 ? "vehicle" : "vehicles"}
            {" · "}
            <span style={{ color: "var(--success-text)" }}>{counts.available} available</span>
            {counts.maintenance > 0 && <> · <span style={{ color: "var(--warn-text)" }}>{counts.maintenance} in maintenance</span></>}
          </div>
        </div>
        <div className="topbar-actions">
          <div className="view-toggle">
            <button className={view === "cards" ? "active" : ""} onClick={() => setView("cards")}>Cards</button>
            <button className={view === "table" ? "active" : ""} onClick={() => setView("table")}>Table</button>
            <button className={view === "split" ? "active" : ""} onClick={() => setView("split")}>Split</button>
          </div>
          <button className="btn-primary" onClick={onAdd}>+ Add vehicle</button>
        </div>
      </div>
      <div className="content">
        {view === "cards" && (
          <VehicleCardGrid vehicles={vehicles} bookings={bookings} onSelect={onSelect} onAdd={onAdd} />
        )}
        {view === "table" && (
          <VehicleTable vehicles={vehicles} bookings={bookings} onSelect={onSelect} />
        )}
        {view === "split" && (
          <VehicleSplitView
            vehicles={vehicles}
            bookings={bookings}
            onSelect={onSelect}
            selectedId={splitSelectedId}
            setSelectedId={setSplitSelectedId}
          />
        )}
      </div>
    </>
  );
}

// === Vehicle detail ===
function VehicleDetail({ vehicle, tab, setTab, bookings, blocks, onSave, onDelete, onAddBlock, onRemoveBlock, goFleet }) {
  const upcoming = bookings.filter((b) => b.end >= window.RENTAL_DATA.dateKey(new Date()));

  return (
    <>
      <div className="topbar">
        <div>
          <button className="back-link" onClick={goFleet}>← Back to fleet</button>
          <div className="topbar-title">{vehicle.year} {vehicle.make} {vehicle.model}</div>
          <div className="topbar-sub">
            {vehicle.type} · {vehicle.transmission} · ${vehicle.price}/day
            {vehicle.plate && <> · {vehicle.plate}</>}
          </div>
        </div>
        <div className="topbar-actions">
          <StatusBadge status={vehicle.status || "Available"} />
        </div>
      </div>

      <div className="content">
        <div className="tabs">
          <button className={`tab ${tab === "details" ? "active" : ""}`} onClick={() => setTab("details")}>Details &amp; photos</button>
          <button className={`tab ${tab === "calendar" ? "active" : ""}`} onClick={() => setTab("calendar")}>
            Calendar
            <span className="tab-pill">{upcoming.length + blocks.length}</span>
          </button>
        </div>

        {tab === "details" && (
          <VehicleEditor
            vehicle={vehicle}
            onSave={onSave}
            onCancel={goFleet}
            onDelete={onDelete}
            isNew={false}
          />
        )}

        {tab === "calendar" && (
          <BookingCalendar
            vehicle={vehicle}
            bookings={bookings}
            blocks={blocks}
            onAddBlock={onAddBlock}
            onRemoveBlock={onRemoveBlock}
          />
        )}
      </div>
    </>
  );
}

// === New vehicle ===
function NewVehicleView({ onCreate, goFleet }) {
  const blank = {
    id: "v" + Math.random().toString(36).slice(2, 8),
    year: new Date().getFullYear(),
    make: "",
    model: "",
    type: "Sedan",
    price: "",
    passengers: 5,
    suitcases: 2,
    transmission: "Automatic",
    plate: "",
    description: "",
    photos: [],
    coverIndex: 0,
    status: "Available",
  };

  return (
    <>
      <div className="topbar">
        <div>
          <button className="back-link" onClick={goFleet}>← Back to fleet</button>
          <div className="topbar-title">Add vehicle</div>
          <div className="topbar-sub">Fill in the basics — you can edit photos and details any time.</div>
        </div>
      </div>
      <div className="content">
        <VehicleEditor
          vehicle={blank}
          isNew
          onSave={onCreate}
          onCancel={goFleet}
          onDelete={() => {}}
        />
      </div>
    </>
  );
}

function NotFound({ goFleet }) {
  return (
    <div className="content">
      <div className="placeholder-card">
        <h3>Vehicle not found</h3>
        <p>It may have been deleted.</p>
        <button className="btn-ghost" onClick={goFleet}>← Back to fleet</button>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<App />);