import type { HeadersFunction, LoaderFunctionArgs } from "react-router";
import { Link, useLoaderData } from "react-router";
import { boundary } from "@shopify/shopify-app-react-router/server";
import { authenticate } from "../shopify.server";
import db from "../db.server";
import { getSettings, moneyInr } from "../utils";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const { session } = await authenticate.admin(request);
  const [settings, pending, collected, waived, brochureCount, recent] = await Promise.all([
    getSettings(session.shop),
    db.deliveryOrder.aggregate({
      _sum: { chargePaise: true },
      _count: true,
      where: { shop: session.shop, status: "PENDING" },
    }),
    db.deliveryOrder.aggregate({
      _sum: { chargePaise: true },
      _count: true,
      where: { shop: session.shop, status: "COLLECTED" },
    }),
    db.deliveryOrder.aggregate({
      _sum: { chargePaise: true },
      _count: true,
      where: { shop: session.shop, status: "WAIVED" },
    }),
    db.brochureOrderRequest.count({ where: { shop: session.shop } }),
    db.deliveryOrder.findMany({
      where: { shop: session.shop },
      orderBy: { createdAt: "desc" },
      take: 8,
    }),
  ]);

  return { settings, pending, collected, waived, brochureCount, recent };
};

export default function Dashboard() {
  const { settings, pending, collected, waived, brochureCount, recent } = useLoaderData<typeof loader>();

  return (
    <div className="sb-page">
      <s-page heading="SweetBengal Delivery Charge">
        <s-banner tone={settings.enabled ? "success" : "warning"}>
          {settings.enabled
            ? "Delivery-charge-on-handover workflow is enabled. Shopify checkout shipping should remain ₹0."
            : "The delivery-charge workflow is disabled. Enable it in Settings before syncing orders."}
        </s-banner>

        <div className="sb-grid sb-grid-4" style={{ marginTop: 16 }}>
          <Link className="sb-card sb-card-link" to="/app/orders?status=PENDING">
            <div className="sb-label">Pending collection</div>
            <div className="sb-kpi">{moneyInr(pending._sum.chargePaise || 0)}</div>
            <div className="sb-muted">{pending._count} orders</div>
          </Link>
          <Link className="sb-card sb-card-link" to="/app/orders?status=COLLECTED">
            <div className="sb-label">Collected</div>
            <div className="sb-kpi">{moneyInr(collected._sum.chargePaise || 0)}</div>
            <div className="sb-muted">{collected._count} orders</div>
          </Link>
          <Link className="sb-card sb-card-link" to="/app/orders?status=WAIVED">
            <div className="sb-label">Waived</div>
            <div className="sb-kpi">{moneyInr(waived._sum.chargePaise || 0)}</div>
            <div className="sb-muted">{waived._count} orders</div>
          </Link>
          <div className="sb-card">
            <div className="sb-label">Default handover charge</div>
            <div className="sb-kpi">{moneyInr(settings.defaultChargePaise)}</div>
            <div className="sb-muted">Used when no PIN rule matches</div>
          </div>
          <Link className="sb-card sb-card-link" to="/app/brochure-orders">
            <div className="sb-label">Brochure order requests</div>
            <div className="sb-kpi">{brochureCount}</div>
            <div className="sb-muted">Requests submitted from the brochure page</div>
          </Link>
        </div>

        <div className="sb-card" style={{ marginTop: 16 }}>
          <div className="sb-toolbar">
            <div>
              <h3>Recent delivery-charge orders</h3>
              <p className="sb-muted">The delivery fee is tracked separately from the Shopify payment.</p>
            </div>
            <Link className="sb-button" to="/app/orders">View all</Link>
          </div>
          {recent.length === 0 ? (
            <p className="sb-muted">No applicable orders have been synced yet.</p>
          ) : (
            <table className="sb-table">
              <thead>
                <tr><th>Order</th><th>Customer</th><th>PIN</th><th>Charge</th><th>Status</th></tr>
              </thead>
              <tbody>
                {recent.map((order) => (
                  <tr key={order.id}>
                    <td><Link to={`/app/orders/${order.id}`}>{order.orderName}</Link></td>
                    <td>{order.customerName || "—"}</td>
                    <td>{order.pincode || "—"}</td>
                    <td>{moneyInr(order.chargePaise)}</td>
                    <td><span className={`sb-badge sb-${order.status.toLowerCase()}`}>{order.status}</span></td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </s-page>
    </div>
  );
}

export const headers: HeadersFunction = (headersArgs) => boundary.headers(headersArgs);