import React, { useState, useEffect, type FormEvent } from "react";
import { createRoot } from "react-dom/client";
import "./style.css";
type Product = {
  id: string;
  name: string;
  description: string;
  price: number;
  stock: number;
  image?: string;
  categoryId?: string;
  active: boolean;
};
type Category = { id: string; name: string };
type Order = {
  id: string;
  customerName: string;
  email: string;
  address: string;
  total: number;
  status: string;
  createdAt: string;
  items: { name: string; quantity: number; price: number }[];
};
type Tenant = {
  id: string;
  name: string;
  active: boolean;
  domains: { host: string }[];
  _count: { products: number; orders: number };
};
type User = { id: string; role: string };
async function api<T = any>(
  url: string,
  method = "GET",
  body?: unknown,
): Promise<T> {
  const r = await fetch("/api" + url, {
    method,
    headers: {
      "Content-Type": "application/json",
      "X-Requested-With": "Commerce",
    },
    ...(body ? { body: JSON.stringify(body) } : {}),
  });
  const data = await r.json();
  if (!r.ok) throw new Error(data.error || "Request failed");
  return data;
}
const money = (v: number) =>
  new Intl.NumberFormat("en-IN", { style: "currency", currency: "INR" }).format(
    v / 100,
  );
const fields = (e: FormEvent<HTMLFormElement>) =>
  Object.fromEntries(new FormData(e.currentTarget));
const route = () =>
  location.pathname.startsWith("/super")
    ? "super"
    : location.pathname.startsWith("/admin")
      ? "admin"
      : location.pathname.startsWith("/login")
        ? "login"
        : "store";
function App() {
  const [user, setUser] = useState<User | null>(null),
    [ready, setReady] = useState(false),
    [error, setError] = useState(""),
    [notice, setNotice] = useState(""),
    [page, setPage] = useState(route()),
    [tab, setTab] = useState("overview");
  const [store, setStore] = useState({
      name: "Commerce",
      logo: "",
      currency: "INR",
    }),
    [products, setProducts] = useState<Product[]>([]),
    [categories, setCategories] = useState<Category[]>([]),
    [orders, setOrders] = useState<Order[]>([]),
    [tenants, setTenants] = useState<Tenant[]>([]),
    [stats, setStats] = useState<Record<string, number>>({}),
    [search, setSearch] = useState(""),
    [category, setCategory] = useState(""),
    [cart, setCart] = useState<Record<string, number>>({}),
    [cartOpen, setCartOpen] = useState(false),
    [selected, setSelected] = useState<Product | null>(null),
    [editing, setEditing] = useState<Product | null>(null),
    [register, setRegister] = useState(false);
  const task = async (fn: () => Promise<void>) => {
    setError("");
    setNotice("");
    try {
      await fn();
    } catch (e) {
      setError((e as Error).message);
    }
  };
  async function load(u: User | null = user) {
    if (u?.role === "SUPER_ADMIN") {
      const [t, s] = await Promise.all([
        api<Tenant[]>("/super/tenants"),
        api("/super/dashboard"),
      ]);
      setTenants(t);
      setStats(s);
    } else {
      const [s, p, c] = await Promise.all([
        api("/store"),
        api<Product[]>("/products"),
        api<Category[]>("/categories"),
      ]);
      setStore(s);
      setProducts(p);
      setCategories(c);
      if (u) {
        setOrders(await api("/orders"));
        if (u.role === "TENANT_ADMIN") setStats(await api("/admin/dashboard"));
      }
    }
  }
  useEffect(() => {
    void task(async () => {
      const u = await api<User | null>("/auth/me");
      setUser(u);
      const context = await api("/context");
      if (context.platform) {
        setPage(u?.role === "SUPER_ADMIN" ? "super" : "login");
        if (u) await load(u);
      } else await load(u);
    }).finally(() => setReady(true));
  }, []);
  useEffect(() => {
    const onBack = () => setPage(route());
    window.addEventListener("popstate", onBack);
    return () => window.removeEventListener("popstate", onBack);
  }, []);
  function navigate(p: string) {
    setPage(p);
    setTab("overview");
    history.pushState({}, "", p === "store" ? "/" : `/${p}`);
  }
  const run = (fn: () => Promise<void>) => void task(fn);
  const submit =
    (
      fn: (
        data: Record<string, FormDataEntryValue>,
        form: HTMLFormElement,
      ) => Promise<void>,
    ) =>
    (e: FormEvent<HTMLFormElement>) => {
      e.preventDefault();
      const form = e.currentTarget;
      const data = fields(e);
      run(() => fn(data, form));
    };
  const login = submit(async (d) => {
    if (register) {
      await api("/auth/register", "POST", d);
      setRegister(false);
      setNotice("Account created. Please sign in.");
      return;
    }
    await api("/auth/login", "POST", d);
    const u = await api<User>("/auth/me");
    setUser(u);
    await load(u);
    navigate(
      u.role === "SUPER_ADMIN"
        ? "super"
        : u.role === "TENANT_ADMIN"
          ? "admin"
          : "store",
    );
  });
  const logout = () =>
    run(async () => {
      await api("/auth/logout", "POST");
      setUser(null);
      setCart({});
      navigate("store");
      location.reload();
    });
  const cartItems = products.filter((p) => cart[p.id]);
  const total = cartItems.reduce((s, p) => s + p.price * cart[p.id], 0);
  const visible = products.filter(
    (p) =>
      p.active &&
      p.name.toLowerCase().includes(search.toLowerCase()) &&
      (!category || p.categoryId === category),
  );
  const add = (p: Product) => {
    setCart((c) => ({
      ...c,
      [p.id]: Math.min(p.stock, 99, (c[p.id] || 0) + 1),
    }));
    setNotice("Added to your bag");
  };
  const [busy, setBusy] = useState(false);
  const checkout = submit(async (d) => {
    if (busy) return;
    setBusy(true);
    try {
      const result = await api("/orders", "POST", {
        ...d,
        items: cartItems.map((p) => ({
          productId: p.id,
          quantity: cart[p.id],
        })),
      });
      setCart({});
      setCartOpen(false);
      await load();
      setNotice(
        `Order ${result.id} placed. Cash on delivery · ${money(result.total)}`,
      );
    } finally {
      setBusy(false);
    }
  });
  return (
    <>
      <header>
        <a className="brand" href="/">
          {store.logo && <img src={store.logo} alt="" />}
          <span className="brandmark">N</span>
          {user?.role === "SUPER_ADMIN" ? "Commerce OS" : store.name}
        </a>
        <nav>
          {user?.role !== "SUPER_ADMIN" && (
            <button onClick={() => navigate("store")}>Storefront</button>
          )}
          {user?.role === "TENANT_ADMIN" && (
            <button onClick={() => navigate("admin")}>Store admin</button>
          )}
          {user?.role === "SUPER_ADMIN" && (
            <button onClick={() => navigate("super")}>Platform</button>
          )}
          {user ? (
            <button onClick={logout}>Sign out</button>
          ) : (
            <button onClick={() => navigate("login")}>Sign in</button>
          )}
          {user?.role !== "SUPER_ADMIN" && (
            <button className="dark" onClick={() => setCartOpen(true)}>
              Bag ({Object.values(cart).reduce((a, b) => a + b, 0)})
            </button>
          )}
        </nav>
      </header>
      {error && (
        <div role="alert" className="alert error">
          {error}
          <button onClick={() => setError("")}>×</button>
        </div>
      )}
      {notice && (
        <div role="status" className="alert success">
          {notice}
          <button onClick={() => setNotice("")}>×</button>
        </div>
      )}
      {!ready ? (
        <main>Loading your store…</main>
      ) : page === "login" ||
        ((page === "admin" || page === "super") && !user) ? (
        <main className="auth">
          <p className="eyebrow">WELCOME TO COMMERCE</p>
          <h1>{register ? "Create an account" : "Good to see you."}</h1>
          <p>Use your account on this store’s domain.</p>
          <form onSubmit={login}>
            <label>
              Email
              <input name="email" type="email" required autoComplete="email" />
            </label>
            <label>
              Password
              <input
                name="password"
                type="password"
                required
                minLength={register ? 12 : 1}
                maxLength={72}
                autoComplete={register ? "new-password" : "current-password"}
              />
            </label>
            <button className="primary">
              {register ? "Create account" : "Sign in →"}
            </button>
          </form>
          <button onClick={() => setRegister(!register)}>
            {register
              ? "Already have an account?"
              : "Create a customer account"}
          </button>
        </main>
      ) : (page === "admin" && user?.role === "TENANT_ADMIN") ||
        (page === "super" && user?.role === "SUPER_ADMIN") ? (
        <div className="workspace">
          <aside>
            <p className="eyebrow">
              {page === "super" ? "PLATFORM CONTROL" : "YOUR BUSINESS"}
            </p>
            {(page === "super"
              ? ["overview", "stores"]
              : ["overview", "products", "categories", "orders", "settings"]
            ).map((t) => (
              <button
                className={tab === t ? "active" : ""}
                key={t}
                onClick={() => setTab(t)}
              >
                {t[0].toUpperCase() + t.slice(1)}
              </button>
            ))}
            <small>
              Commerce by Narayan
              <br />
              One workspace. Every possibility.
            </small>
          </aside>
          <main className="dashboard">
            <div className="title">
              <div>
                <p className="eyebrow">
                  {page === "super" ? "SUPER ADMIN" : "STORE ADMIN"} /{" "}
                  {tab.toUpperCase()}
                </p>
                <h1>
                  {tab === "overview"
                    ? "Your business, at a glance."
                    : tab[0].toUpperCase() + tab.slice(1)}
                </h1>
              </div>
              <span className="pill">● Live workspace</span>
            </div>
            {tab === "overview" && (
              <>
                <div className="metrics">
                  {Object.entries(stats)
                    .filter(([k]) => k !== "currency")
                    .map(([k, v]) => (
                      <article key={k}>
                        <p>
                          {k === "orderValue"
                            ? "Order value · excludes cancelled"
                            : k}
                        </p>
                        <strong>{k === "orderValue" ? money(v) : v}</strong>
                      </article>
                    ))}
                </div>
                <section className="panel">
                  <p className="eyebrow">BUILT FOR YOUR NEXT CHAPTER</p>
                  <h2>
                    {page === "super"
                      ? "Grow your store network."
                      : "Make room for your next bestseller."}
                  </h2>
                  <p>
                    {page === "super"
                      ? "Create stores, connect domains and manage access from one place."
                      : "Manage products, track orders and keep your storefront up to date."}
                  </p>
                  <button
                    className="primary"
                    onClick={() =>
                      setTab(page === "super" ? "stores" : "products")
                    }
                  >
                    {page === "super" ? "Manage stores" : "Manage catalog"} →
                  </button>
                </section>
              </>
            )}
            {tab === "stores" && (
              <>
                <section className="panel">
                  <h2>Create a store</h2>
                  <form
                    className="gridform"
                    onSubmit={submit(async (d, f) => {
                      await api("/super/tenants", "POST", d);
                      f.reset();
                      await load();
                      setNotice("Store created. Point its DNS to this server.");
                    })}
                  >
                    <label>
                      Store name
                      <input name="name" required />
                    </label>
                    <label>
                      Domain / subdomain
                      <input
                        name="domain"
                        placeholder="shop.example.com"
                        required
                      />
                    </label>
                    <label>
                      Owner email
                      <input name="email" type="email" required />
                    </label>
                    <label>
                      Owner password
                      <input
                        name="password"
                        type="password"
                        minLength={12}
                        maxLength={72}
                        required
                      />
                    </label>
                    <button className="primary">Create store</button>
                  </form>
                </section>
                {tenants.map((t) => (
                  <section className="panel" key={t.id}>
                    <div className="title">
                      <h2>{t.name}</h2>
                      <button
                        onClick={() =>
                          run(async () => {
                            await api("/super/tenants/" + t.id, "PATCH", {
                              active: !t.active,
                            });
                            await load();
                          })
                        }
                      >
                        {t.active ? "Suspend store" : "Activate store"}
                      </button>
                    </div>
                    <p>
                      {t._count.products} products · {t._count.orders} orders ·{" "}
                      {t.active ? "Active" : "Suspended"}
                    </p>
                    {t.domains.map((d) => (
                      <div className="domain" key={d.host}>
                        <a
                          href={`${location.protocol}//${d.host}${location.port ? ":" + location.port : ""}`}
                        >
                          {d.host}
                        </a>
                        <button
                          onClick={() =>
                            run(async () => {
                              await api(
                                `/super/tenants/${t.id}/domains/${d.host}`,
                                "DELETE",
                              );
                              await load();
                            })
                          }
                        >
                          Remove
                        </button>
                      </div>
                    ))}
                    <form
                      className="inline"
                      onSubmit={submit(async (d, f) => {
                        await api(`/super/tenants/${t.id}/domains`, "POST", d);
                        f.reset();
                        await load();
                      })}
                    >
                      <input
                        name="host"
                        required
                        placeholder="Add a domain you control"
                      />
                      <button>Add domain</button>
                    </form>
                  </section>
                ))}
              </>
            )}
            {tab === "products" && (
              <>
                <section className="panel">
                  <h2>{editing ? "Edit product" : "Add a product"}</h2>
                  <form
                    key={editing?.id || "new"}
                    className="gridform"
                    onSubmit={submit(async (d, f) => {
                      const data = {
                        ...d,
                        price: Math.round(Number(d.price) * 100),
                        stock: Number(d.stock),
                        categoryId: d.categoryId || null,
                        image: d.image || null,
                        active: d.active === "true",
                      };
                      await api(
                        "/admin/products" + (editing ? "/" + editing.id : ""),
                        editing ? "PATCH" : "POST",
                        data,
                      );
                      setEditing(null);
                      f.reset();
                      await load();
                      setNotice("Product saved");
                    })}
                  >
                    <label>
                      Name
                      <input
                        name="name"
                        defaultValue={editing?.name}
                        required
                      />
                    </label>
                    <label>
                      Price (₹)
                      <input
                        name="price"
                        type="number"
                        min="0"
                        step="0.01"
                        max="1000000"
                        defaultValue={editing ? editing.price / 100 : undefined}
                        required
                      />
                    </label>
                    <label>
                      Stock
                      <input
                        name="stock"
                        type="number"
                        min="0"
                        max="1000000"
                        defaultValue={editing?.stock ?? 0}
                        required
                      />
                    </label>
                    <label>
                      Category
                      <select
                        name="categoryId"
                        defaultValue={editing?.categoryId || ""}
                      >
                        <option value="">Uncategorized</option>
                        {categories.map((c) => (
                          <option value={c.id} key={c.id}>
                            {c.name}
                          </option>
                        ))}
                      </select>
                    </label>
                    <label>
                      Image URL (HTTPS)
                      <input
                        name="image"
                        type="url"
                        defaultValue={editing?.image || ""}
                      />
                    </label>
                    <label>
                      Visibility
                      <select
                        name="active"
                        defaultValue={String(editing?.active ?? true)}
                      >
                        <option value="true">Published</option>
                        <option value="false">Archived</option>
                      </select>
                    </label>
                    <label className="wide">
                      Description
                      <textarea
                        name="description"
                        defaultValue={editing?.description}
                      />
                    </label>
                    <button className="primary">Save product</button>
                    {editing && (
                      <button type="button" onClick={() => setEditing(null)}>
                        Cancel edit
                      </button>
                    )}
                  </form>
                </section>
                <div className="tablewrap">
                  <table>
                    <thead>
                      <tr>
                        <th>Product</th>
                        <th>Price</th>
                        <th>Stock</th>
                        <th>Status</th>
                        <th>Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      {products.map((p) => (
                        <tr key={p.id}>
                          <td>{p.name}</td>
                          <td>{money(p.price)}</td>
                          <td>{p.stock}</td>
                          <td>{p.active ? "Published" : "Archived"}</td>
                          <td>
                            <button
                              onClick={() => {
                                setEditing(p);
                                window.scrollTo({ top: 0, behavior: "smooth" });
                              }}
                            >
                              Edit
                            </button>
                            <button
                              onClick={() =>
                                run(async () => {
                                  await api(
                                    "/admin/products/" + p.id,
                                    "DELETE",
                                  );
                                  await load();
                                })
                              }
                            >
                              Archive
                            </button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                  {!products.length && (
                    <p className="empty">
                      Your catalog starts here. Add your first product above.
                    </p>
                  )}
                </div>
              </>
            )}
            {tab === "categories" && (
              <section className="panel">
                <h2>Organize your catalog</h2>
                <form
                  className="inline"
                  onSubmit={submit(async (d, f) => {
                    await api("/admin/categories", "POST", d);
                    f.reset();
                    await load();
                  })}
                >
                  <input name="name" placeholder="New category" required />
                  <button className="primary">Add category</button>
                </form>
                {categories.map((c) => (
                  <form
                    key={c.id}
                    className="inline"
                    onSubmit={submit(async (d) => {
                      await api("/admin/categories/" + c.id, "PATCH", d);
                      await load();
                    })}
                  >
                    <input name="name" defaultValue={c.name} required />
                    <button>Rename</button>
                    <button
                      type="button"
                      onClick={() =>
                        run(async () => {
                          await api("/admin/categories/" + c.id, "DELETE");
                          await load();
                        })
                      }
                    >
                      Delete
                    </button>
                  </form>
                ))}
              </section>
            )}
            {tab === "orders" && (
              <OrderList
                orders={orders}
                admin
                onStatus={(id, status) =>
                  run(async () => {
                    await api("/admin/orders/" + id, "PATCH", { status });
                    await load();
                  })
                }
              />
            )}
            {tab === "settings" && (
              <section className="panel">
                <h2>Store identity</h2>
                <form
                  onSubmit={submit(async (d) => {
                    await api("/admin/store", "PATCH", {
                      ...d,
                      logo: d.logo || null,
                    });
                    await load();
                    setNotice("Store settings saved");
                  })}
                >
                  <label>
                    Store name
                    <input name="name" defaultValue={store.name} required />
                  </label>
                  <label>
                    Logo URL (HTTPS)
                    <input name="logo" type="url" defaultValue={store.logo} />
                  </label>
                  <p>
                    Currency: INR. Contact your platform administrator to
                    connect a domain.
                  </p>
                  <button className="primary">Save settings</button>
                </form>
              </section>
            )}
          </main>
        </div>
      ) : (
        <main className="storefront">
          <section className="hero">
            <div>
              <p className="eyebrow">THE EVERYDAY, ELEVATED</p>
              <h1>
                Good things.
                <br />
                Great finds.
              </h1>
              <p>
                Discover thoughtful picks from {store.name}.<br />A little
                something for your everyday.
              </p>
              <a className="primary" href="#collection">
                Explore the collection ↗
              </a>
            </div>
            <div className="hero-art">
              <span className="orb" />
              <div className="art-card">
                <span>CURATED WITH CARE</span>
                <strong>{store.name}</strong>
                <small>Discover your next favorite.</small>
              </div>
              <span className="art-tag">Made for everyday moments.</span>
            </div>
          </section>
          <div className="benefits">
            <span>✦ Carefully curated</span>
            <span>◇ Cash on delivery</span>
            <span>↗ Your neighborhood, online</span>
          </div>
          <section id="collection">
            <div className="title">
              <div>
                <p className="eyebrow">THE COLLECTION</p>
                <h2>Find your new favorites.</h2>
              </div>
              <span>{visible.length} products</span>
            </div>
            <div className="filters">
              <input
                aria-label="Search products"
                placeholder="Search the collection…"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
              />
              <select
                aria-label="Category"
                value={category}
                onChange={(e) => setCategory(e.target.value)}
              >
                <option value="">All categories</option>
                {categories.map((c) => (
                  <option key={c.id} value={c.id}>
                    {c.name}
                  </option>
                ))}
              </select>
            </div>
            <div className="products">
              {visible.map((p, i) => (
                <article className="product" key={p.id}>
                  <button
                    className={"product-image tone" + (i % 3)}
                    onClick={() => setSelected(p)}
                  >
                    {p.image ? (
                      <img src={p.image} alt={p.name} />
                    ) : (
                      <span>{p.name[0]}</span>
                    )}
                    {!p.stock && <small>Sold out</small>}
                  </button>
                  <div className="product-info">
                    <button onClick={() => setSelected(p)}>
                      <h3>{p.name}</h3>
                    </button>
                    <p>{money(p.price)}</p>
                  </div>
                  <button
                    className="add"
                    disabled={!p.stock}
                    onClick={() => add(p)}
                  >
                    {p.stock ? "Add to bag +" : "Out of stock"}
                  </button>
                </article>
              ))}
            </div>
            {!visible.length && (
              <p className="empty">No products here yet. Check back soon.</p>
            )}
          </section>
          {user?.role === "CUSTOMER" && (
            <section>
              <h2>Your orders</h2>
              <OrderList orders={orders} />
            </section>
          )}
          <footer>
            <strong>{store.name}</strong>
            <span>Powered by Commerce by Narayan</span>
          </footer>
        </main>
      )}
      {selected && (
        <div className="overlay">
          <section className="modal">
            <button className="close" onClick={() => setSelected(null)}>
              Close ×
            </button>
            {selected.image && (
              <img
                className="detail-image"
                src={selected.image}
                alt={selected.name}
              />
            )}
            <p className="eyebrow">PRODUCT DETAILS</p>
            <h2>{selected.name}</h2>
            <p>{selected.description}</p>
            <h3>{money(selected.price)}</h3>
            <p>{selected.stock} available</p>
            <button
              className="primary"
              disabled={!selected.stock}
              onClick={() => {
                add(selected);
                setSelected(null);
              }}
            >
              Add to bag
            </button>
          </section>
        </div>
      )}
      {cartOpen && (
        <div className="overlay">
          <section className="modal">
            <button className="close" onClick={() => setCartOpen(false)}>
              Close ×
            </button>
            <p className="eyebrow">YOUR PICKS</p>
            <h2>Shopping bag</h2>
            {cartItems.length ? (
              <>
                <div>
                  {cartItems.map((p) => (
                    <div className="cartrow" key={p.id}>
                      <div>
                        <strong>{p.name}</strong>
                        <p>{money(p.price)}</p>
                      </div>
                      <input
                        aria-label={"Quantity for " + p.name}
                        type="number"
                        min="1"
                        max={Math.min(99, p.stock)}
                        value={cart[p.id]}
                        onChange={(e) =>
                          setCart({
                            ...cart,
                            [p.id]: Math.max(
                              1,
                              Math.min(
                                p.stock,
                                99,
                                Number(e.target.value) || 1,
                              ),
                            ),
                          })
                        }
                      />
                      <button
                        onClick={() =>
                          setCart((c) => {
                            const n = { ...c };
                            delete n[p.id];
                            return n;
                          })
                        }
                      >
                        Remove
                      </button>
                    </div>
                  ))}
                </div>
                <h3>Total {money(total)}</h3>
                <p>
                  Cash on delivery. Final prices and availability verified at
                  checkout.
                </p>
                <form onSubmit={checkout}>
                  <label>
                    Full name
                    <input name="customerName" required minLength={2} />
                  </label>
                  <label>
                    Email
                    <input name="email" type="email" required />
                  </label>
                  <label>
                    Delivery address
                    <textarea name="address" required minLength={10} />
                  </label>
                  <button className="primary" disabled={busy}>
                    {busy ? "Placing order…" : "Place order · " + money(total)}
                  </button>
                </form>
              </>
            ) : (
              <p>Your bag is waiting for something good.</p>
            )}
          </section>
        </div>
      )}
    </>
  );
}
function OrderList({
  orders,
  admin = false,
  onStatus,
}: {
  orders: Order[];
  admin?: boolean;
  onStatus?: (id: string, status: string) => void;
}) {
  return (
    <>
      {!orders.length && <p className="empty">No orders yet.</p>}
      {orders.map((o) => (
        <section className="panel" key={o.id}>
          <div className="title">
            <div>
              <strong>#{o.id.slice(0, 8)}</strong>
              <p>
                {new Date(o.createdAt).toLocaleDateString()} · {o.customerName}
              </p>
            </div>
            <span className="pill">{o.status}</span>
          </div>
          <p>{o.items.map((i) => `${i.name} × ${i.quantity}`).join(" · ")}</p>
          {admin && (
            <p>
              {o.email}
              <br />
              {o.address}
            </p>
          )}
          <strong>{money(o.total)}</strong>
          {admin && (
            <div className="inline">
              {(o.status === "PENDING"
                ? ["SHIPPED", "CANCELLED"]
                : o.status === "SHIPPED"
                  ? ["DELIVERED"]
                  : []
              ).map((s) => (
                <button key={s} onClick={() => onStatus?.(o.id, s)}>
                  Mark {s.toLowerCase()}
                </button>
              ))}
            </div>
          )}
        </section>
      ))}
    </>
  );
}
createRoot(document.getElementById("root")!).render(<App />);