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

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const { session } = await authenticate.admin(request);
  const requests = await db.brochureOrderRequest.findMany({
    where: { shop: session.shop },
    orderBy: { createdAt: "desc" },
    take: 100,
  });
  return { requests };
};

export const action = async ({ request }: ActionFunctionArgs) => {
  const { session } = await authenticate.admin(request);
  const form = await request.formData();
  const intent = String(form.get("intent") || "");
  if (intent === "resend") {
    try {
      await resendBrochureOrderEmail(String(form.get("id") || ""), session.shop);
      return { ok: true, message: "Order request email sent again." };
    } catch (error) {
      return { ok: false, message: error instanceof Error ? error.message : "Unable to resend email." };
    }
  }
  return { ok: false, message: "Unknown action." };
};

export default function BrochureOrders() {
  const { requests } = useLoaderData<typeof loader>();
  const action = useActionData<typeof action>();
  return (
    <div className="sb-page">
      <s-page heading="Brochure order requests">
        {action?.message ? <s-banner tone={action.ok ? "success" : "critical"}>{action.message}</s-banner> : null}
        <div className="sb-card" style={{ marginTop: 16 }}>
          <div className="sb-toolbar">
            <div><h3>Requests received from the brochure page</h3><p className="sb-muted">These requests are stored in the app even when an email fails, so no enquiry is silently lost.</p></div>
          </div>
          {requests.length === 0 ? <p className="sb-muted">No brochure order requests yet.</p> : (
            <table className="sb-table">
              <thead><tr><th>Date</th><th>Customer</th><th>Location</th><th>Items</th><th>Amount</th><th>Email</th><th></th></tr></thead>
              <tbody>
                {requests.map((item) => (
                  <tr key={item.id}>
                    <td>{new Date(item.createdAt).toLocaleString("en-IN")}</td>
                    <td><Link to={`/app/brochure-orders/${item.id}`}>{item.name}</Link><div className="sb-muted">{item.phone}</div></td>
                    <td>{item.city}, {item.state}<div className="sb-muted">{item.pincode}</div></td>
                    <td>{item.itemCount}</td>
                    <td>{moneyInr(item.subtotalPaise)}</td>
                    <td><span className={`sb-badge ${item.emailStatus === "SENT" ? "sb-collected" : item.emailStatus === "FAILED" ? "sb-waived" : "sb-pending"}`}>{item.emailStatus}</span></td>
                    <td><Form method="post"><input type="hidden" name="intent" value="resend" /><input type="hidden" name="id" value={item.id} /><s-button type="submit" variant="tertiary">Resend</s-button></Form></td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </s-page>
    </div>
  );
}

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