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, params }: LoaderFunctionArgs) => {
  const { session } = await authenticate.admin(request);
  const requestItem = await db.brochureOrderRequest.findFirst({ where: { id: params.id, shop: session.shop } });
  if (!requestItem) throw new Response("Brochure request not found", { status: 404 });
  const items = JSON.parse(requestItem.itemsJson) as Array<{name:string;variant:string;quantity:number;unitPaise:number;linePaise:number}>;
  return { requestItem, items };
};

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

export default function BrochureOrderDetail() {
  const { requestItem, items } = useLoaderData<typeof loader>();
  const action = useActionData<typeof action>();
  return (
    <div className="sb-page">
      <s-page heading={`Brochure request ${requestItem.id.slice(-8).toUpperCase()}`}>
        {action?.message ? <s-banner tone={action.ok ? "success" : "critical"}>{action.message}</s-banner> : null}
        <div style={{marginTop:16}}><Link to="/app/brochure-orders">← Back to brochure requests</Link></div>
        <div className="sb-grid sb-grid-2" style={{marginTop:16}}>
          <div className="sb-card"><h3>Customer</h3><p><strong>{requestItem.name}</strong></p><p>{requestItem.email}</p><p>{requestItem.phone}</p><p>{requestItem.company || "—"}</p></div>
          <div className="sb-card"><h3>Delivery</h3><p>{requestItem.city}, {requestItem.state}</p><p>PIN: {requestItem.pincode}</p><p>Required date: {requestItem.deliveryDate || "—"}</p><p>Notes: {requestItem.deliveryNotes || "—"}</p></div>
        </div>
        <div className="sb-card" style={{marginTop:16}}><h3>Items</h3><table className="sb-table"><thead><tr><th>Item</th><th>Variant</th><th>Qty</th><th>Unit</th><th>Total</th></tr></thead><tbody>{items.map((item, i) => <tr key={i}><td>{item.name}</td><td>{item.variant}</td><td>{item.quantity}</td><td>{moneyInr(item.unitPaise)}</td><td>{moneyInr(item.linePaise)}</td></tr>)}</tbody></table><div style={{marginTop:12,fontWeight:800}}>Grand total: {moneyInr(requestItem.subtotalPaise)}</div></div>
        <div className="sb-card" style={{marginTop:16}}><h3>Additional requirements</h3><p style={{whiteSpace:"pre-wrap"}}>{requestItem.additionalRequirements || "—"}</p></div>
        <div className="sb-card" style={{marginTop:16}}><h3>Email delivery</h3><p>Status: <strong>{requestItem.emailStatus}</strong></p><p>Sent at: {requestItem.emailedAt ? new Date(requestItem.emailedAt).toLocaleString("en-IN") : "—"}</p><p>Error: {requestItem.emailError || "—"}</p><Form method="post"><s-button type="submit" variant="primary">Send email again</s-button></Form></div>
      </s-page>
    </div>
  );
}

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