import { formatMoney } from "@salixcommerce/core";
import {
  AdminInventoryControls,
  AdminOrderControls,
  AdminProductControls,
  AdminRefundControls,
  AdminVariantControls,
} from "@/components/admin-controls";
import { StatusBadge } from "@/components/ui";
import { publicConfiguration } from "@/config/public";
import { adminRepository } from "@/server/admin/admin";
import { requireAdmin } from "@/server/admin/authorization";

export const dynamic = "force-dynamic";

export default async function AdministrationPage() {
  const authorization = await requireAdmin("admin.access");
  if (!authorization.ok) return null;
  const admin = authorization.data;
  const dashboard = await adminRepository.loadDashboard(admin);
  const canCatalog = admin.capabilities.includes("admin.catalog.write");
  const canInventory = admin.capabilities.includes("admin.inventory.adjust");
  const canFulfill = admin.capabilities.includes("admin.order.fulfill");
  const canRefund = admin.capabilities.includes("admin.payment.refund");
  const canAudit = admin.capabilities.includes("admin.audit.read");

  return (
    <div className="page-stack">
      <header className="hero" id="overview">
        <p className="hero__eyebrow">Single-business operations</p>
        <h1 className="section__heading">Commerce administration</h1>
        <p className="hero__description">
          Catalog, inventory, fulfillment, payments, and immutable operational evidence.
        </p>
        <StatusBadge>{admin.role}</StatusBadge>
      </header>

      <section className="section" id="catalog">
        <h2 className="section__heading">Products</h2>
        <div className="page-stack">
          {dashboard.products.map((product) => (
            <article className="surface page-stack" key={product.id}>
              <div className="cluster">
                <h3>{product.name}</h3>
                <StatusBadge>{product.status}</StatusBadge>
              </div>
              {canCatalog ? <AdminProductControls product={product} /> : null}
              {product.variants.map((variant) => (
                <div className="surface page-stack" key={variant.id}>
                  <p>
                    {variant.name} ·{" "}
                    {formatMoney(
                      { amountMinor: variant.priceMinor, currency: variant.currency },
                      publicConfiguration.business.locale,
                    )}
                  </p>
                  {canCatalog ? <AdminVariantControls variant={variant} /> : null}
                </div>
              ))}
            </article>
          ))}
        </div>
      </section>

      <section className="section" id="inventory">
        <h2 className="section__heading">Inventory</h2>
        <div className="admin-table">
          <table>
            <caption>Current physical and reserved inventory</caption>
            <thead>
              <tr>
                <th scope="col">Item</th>
                <th scope="col">Mode</th>
                <th scope="col">On hand</th>
                <th scope="col">Reserved</th>
                <th scope="col">Adjustment</th>
              </tr>
            </thead>
            <tbody>
              {dashboard.inventory.map((item) => (
                <tr key={item.id}>
                  <th scope="row">
                    {item.productName} · {item.variantName}
                  </th>
                  <td>{item.mode}</td>
                  <td>{item.onHand}</td>
                  <td>{item.reserved}</td>
                  <td>
                    {canInventory && item.mode === "tracked" ? (
                      <AdminInventoryControls itemId={item.id} />
                    ) : (
                      "Not available"
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>

      <section className="section" id="orders">
        <h2 className="section__heading">Orders and fulfillment</h2>
        <div className="admin-table">
          <table>
            <caption>Latest orders</caption>
            <thead>
              <tr>
                <th scope="col">Order</th>
                <th scope="col">Customer</th>
                <th scope="col">Total</th>
                <th scope="col">Status</th>
                <th scope="col">Operation</th>
              </tr>
            </thead>
            <tbody>
              {dashboard.orders.map((order) => (
                <tr key={order.reference}>
                  <th scope="row">{order.reference}</th>
                  <td>{order.contactEmail}</td>
                  <td>
                    {formatMoney(
                      {
                        amountMinor: order.merchandiseSubtotalMinor,
                        currency: order.currency,
                      },
                      publicConfiguration.business.locale,
                    )}
                  </td>
                  <td>{order.status}</td>
                  <td>{canFulfill ? <AdminOrderControls order={order} /> : "View only"}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>

      <section className="section" id="payments">
        <h2 className="section__heading">Payments and refunds</h2>
        <div className="admin-table">
          <table>
            <caption>Captured payment state and refund controls</caption>
            <thead>
              <tr>
                <th scope="col">Order</th>
                <th scope="col">Provider</th>
                <th scope="col">Captured</th>
                <th scope="col">Refunded</th>
                <th scope="col">Status</th>
                <th scope="col">Refund</th>
              </tr>
            </thead>
            <tbody>
              {dashboard.payments.map((payment) => (
                <tr key={payment.providerPaymentReference}>
                  <th scope="row">{payment.orderReference}</th>
                  <td>{payment.provider}</td>
                  <td>
                    {formatMoney(
                      { amountMinor: payment.amountMinor, currency: payment.currency },
                      publicConfiguration.business.locale,
                    )}
                  </td>
                  <td>
                    {formatMoney(
                      {
                        amountMinor: payment.refundedAmountMinor,
                        currency: payment.currency,
                      },
                      publicConfiguration.business.locale,
                    )}
                  </td>
                  <td>{payment.status}</td>
                  <td>{canRefund ? <AdminRefundControls payment={payment} /> : "View only"}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="admin-table">
          <table>
            <caption>Refund request visibility</caption>
            <thead>
              <tr>
                <th scope="col">Order</th>
                <th scope="col">Refund</th>
                <th scope="col">Amount</th>
                <th scope="col">Status</th>
                <th scope="col">Reason</th>
              </tr>
            </thead>
            <tbody>
              {dashboard.refunds.length === 0 ? (
                <tr>
                  <td colSpan={5}>No refund requests.</td>
                </tr>
              ) : (
                dashboard.refunds.map((refund) => (
                  <tr key={refund.providerRefundReference}>
                    <th scope="row">{refund.orderReference}</th>
                    <td>{refund.providerRefundReference}</td>
                    <td>
                      {formatMoney(
                        { amountMinor: refund.amountMinor, currency: refund.currency },
                        publicConfiguration.business.locale,
                      )}
                    </td>
                    <td>{refund.status}</td>
                    <td>{refund.reason}</td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </section>

      {canAudit ? (
        <section className="section" id="activity">
          <h2 className="section__heading">Administrative activity</h2>
          <div className="admin-table">
            <table>
              <caption>Immutable non-lifecycle audit entries</caption>
              <thead>
                <tr>
                  <th scope="col">Time</th>
                  <th scope="col">Action</th>
                  <th scope="col">Entity</th>
                </tr>
              </thead>
              <tbody>
                {dashboard.activity.length === 0 ? (
                  <tr>
                    <td colSpan={3}>No administrative activity.</td>
                  </tr>
                ) : (
                  dashboard.activity.map((entry) => (
                    <tr key={`${entry.createdAt}:${entry.entityType}:${entry.entityId}`}>
                      <td>{new Date(entry.createdAt).toLocaleString()}</td>
                      <td>{entry.action}</td>
                      <td>
                        {entry.entityType} {entry.entityId}
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </section>
      ) : null}
    </div>
  );
}