/**
 * # 路由 /checkout 结账页
 * 未登录：内联登录 / 注册表单（复用 ~/server/auth 的 loginFn/registerFn）。
 * 已登录：账单信息表单 → createOrder（银行转账占位支付）→ 成功页展示订单号。
 */
import { createFileRoute, Link, useRouter } from "@tanstack/react-router";
import { useState } from "react";
import { getCart, createOrder, type BillingInfo } from "~/server/commerce";
import { useT } from "~/i18n";
import { getCurrentUser, loginFn, registerFn } from "~/server/auth";
import { getLayoutData, Layout } from "~/components/website/Layout";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label";
import { Textarea } from "~/components/ui/textarea";

export const Route = createFileRoute("/checkout")({
  loader: async () => {
    const [layout, user, cart] = await Promise.all([getLayoutData(), getCurrentUser(), getCart()]);
    return { layout, user, cart };
  },
  head: () => ({ meta: [{ title: "Checkout - DusunIoT" }] }),
  component: CheckoutPage,
});

/** # 函数 组件 结账页面（外壳：公共布局） */
function CheckoutPage() {
  const { layout } = Route.useLoaderData();
  return (
    <Layout layout={layout}>
      <CheckoutInner />
    </Layout>
  );
}

/** # 函数 组件 结账表单区 */
function CheckoutInner() {
  const t = useT();
  const { user, cart } = Route.useLoaderData();
  const router = useRouter();
  const [authError, setAuthError] = useState("");
  const [orderNumber, setOrderNumber] = useState("");
  const [orderError, setOrderError] = useState("");
  const [submitting, setSubmitting] = useState(false);

  /** # 函数 登录提交（成功后 invalidate 以带会话重跑 loader） */
  async function handleLogin(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setAuthError("");
    const fd = new FormData(e.currentTarget);
    const res = await loginFn({ data: { email: String(fd.get("email") ?? ""), password: String(fd.get("password") ?? "") } });
    if (!res.ok) return setAuthError(res.error);
    router.invalidate();
  }

  /** # 函数 注册提交 */
  async function handleRegister(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setAuthError("");
    const fd = new FormData(e.currentTarget);
    const res = await registerFn({
      data: {
        email: String(fd.get("email") ?? ""),
        password: String(fd.get("password") ?? ""),
        displayName: String(fd.get("displayName") ?? "") || undefined,
      },
    });
    if (!res.ok) return setAuthError(res.error);
    router.invalidate();
  }

  /** # 函数 下单提交 */
  async function handlePlaceOrder(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setOrderError("");
    setSubmitting(true);
    const fd = new FormData(e.currentTarget);
    const billing: BillingInfo = {
      firstName: String(fd.get("firstName") ?? ""),
      lastName: String(fd.get("lastName") ?? ""),
      email: String(fd.get("email") ?? ""),
      phone: String(fd.get("phone") ?? ""),
      address: String(fd.get("address") ?? ""),
      city: String(fd.get("city") ?? ""),
      country: String(fd.get("country") ?? ""),
      postcode: String(fd.get("postcode") ?? ""),
    };
    const shippingSame = fd.get("shippingSame") === "on";
    const shipping = shippingSame
      ? undefined
      : {
          firstName: String(fd.get("shipFirstName") ?? ""),
          lastName: String(fd.get("shipLastName") ?? ""),
          email: billing.email,
          address: String(fd.get("shipAddress") ?? ""),
          city: String(fd.get("shipCity") ?? ""),
          country: String(fd.get("shipCountry") ?? ""),
          postcode: String(fd.get("shipPostcode") ?? ""),
        };
    const res = await createOrder({
      data: { billing, shippingSame, shipping, note: String(fd.get("note") ?? "") },
    });
    setSubmitting(false);
    if (!res.ok) return setOrderError(res.error);
    setOrderNumber(res.orderNumber);
    router.invalidate();
  }

  // 下单成功页
  if (orderNumber) {
    return (
      <div className="site-container">
        <h1 className="mt-5 mb-3.5 text-[26px]">Order received</h1>
        <div className="max-w-[560px] rounded-md border border-[#b5e3c4] bg-[#e7f6ec] px-4 py-3 text-[#15803d]">
          Thank you! Your order <strong>{orderNumber}</strong> has been placed.
        </div>
        <p className="mt-4">
          Payment method: bank transfer (our sales team will contact you with payment instructions).
        </p>
        <p className="flex gap-2.5">
          <Button asChild>
            <Link to="/my-account/">{t("checkout_view_orders")}</Link>
          </Button>
          <Button asChild variant="outline">
            <Link to="/shop/">{t("cart_continue")}</Link>
          </Button>
        </p>
      </div>
    );
  }

  // 未登录：内联登录 / 注册
  if (!user) {
    return (
      <div className="site-container">
        <h1 className="mt-5 mb-3.5 text-[26px]">Checkout</h1>
        <p>
          Please log in or create an account to place your order.{" "}
          {cart.count > 0 && <>{t("checkout_cart_kept", { count: cart.count })}</>}
        </p>
        {authError && (
          <p className="max-w-[420px] rounded-md border border-[#f3c1c1] bg-[#fdeaea] px-4 py-3 text-[#b91c1c]">
            {authError}
          </p>
        )}
        <div className="mt-4 grid grid-cols-1 items-start gap-7 min-[860px]:grid-cols-[minmax(0,7fr)_minmax(0,4fr)]">
          <div className="rounded-lg border border-line bg-soft p-5">
            <h3 className="mt-0">Log in</h3>
            <form className="grid grid-cols-1 gap-3.5 min-[640px]:grid-cols-2" onSubmit={handleLogin}>
              <Label className="col-span-full">
                Email
                <Input name="email" type="email" required autoComplete="email" />
              </Label>
              <Label className="col-span-full">
                Password
                <Input name="password" type="password" required autoComplete="current-password" />
              </Label>
              <div className="col-span-full">
                <Button type="submit">
                  Log in
                </Button>
              </div>
            </form>
          </div>
          <div className="rounded-lg border border-line bg-soft p-5">
            <h3 className="mt-0">Create account</h3>
            <form className="grid grid-cols-1 gap-3.5 min-[640px]:grid-cols-2" onSubmit={handleRegister}>
              <Label className="col-span-full">
                Display name (optional)
                <Input name="displayName" type="text" />
              </Label>
              <Label className="col-span-full">
                Email
                <Input name="email" type="email" required autoComplete="email" />
              </Label>
              <Label className="col-span-full">
                Password (min 8 chars)
                <Input name="password" type="password" required minLength={8} autoComplete="new-password" />
              </Label>
              <div className="col-span-full">
                <Button type="submit" variant="outline">
                  Register
                </Button>
              </div>
            </form>
          </div>
        </div>
      </div>
    );
  }

  // 购物车为空
  if (cart.items.length === 0) {
    return (
      <div className="site-container">
        <h1 className="mt-5 mb-3.5 text-[26px]">Checkout</h1>
        <div className="py-[60px] text-center text-muted-foreground">
          <p>{t("cart_empty")}</p>
          <Button asChild>
            <Link to="/shop/">{t("checkout_browse")}</Link>
          </Button>
        </div>
      </div>
    );
  }

  // 已登录：账单表单 + 订单汇总
  return (
    <div className="site-container">
      <h1 className="mt-5 mb-3.5 text-[26px]">Checkout</h1>
      {orderError ? <p className="rounded-md border border-[#f3c1c1] bg-[#fdeaea] px-4 py-3 text-[#b91c1c]">{orderError}</p> : null}
      <div className="mt-4 grid grid-cols-1 items-start gap-7 min-[860px]:grid-cols-[minmax(0,7fr)_minmax(0,4fr)]">
        <form className="grid grid-cols-1 gap-3.5 rounded-lg border border-line bg-soft p-5 min-[640px]:grid-cols-2" onSubmit={handlePlaceOrder}>
          <h2 className="col-span-full mt-0">Billing details</h2>
          <Label>
            First name *
            <Input name="firstName" required />
          </Label>
          <Label>
            Last name *
            <Input name="lastName" required />
          </Label>
          <Label>
            Email *
            <Input name="email" type="email" required defaultValue={user.email} />
          </Label>
          <Label>
            Phone
            <Input name="phone" type="tel" />
          </Label>
          <Label className="col-span-full">
            Street address *
            <Input name="address" required />
          </Label>
          <Label>
            City *
            <Input name="city" required />
          </Label>
          <Label>
            Country *
            <Input name="country" required />
          </Label>
          <Label>
            Postcode
            <Input name="postcode" />
          </Label>
          <Label className="col-span-full flex-row items-center gap-2">
            <input name="shippingSame" type="checkbox" defaultChecked />
            <span>{t("checkout_same_address")}</span>
          </Label>
          <Label className="col-span-full">
            Order notes
            <Textarea name="note" rows={3} placeholder={t("checkout_notes_ph")} />
          </Label>
          <div className="col-span-full">
            <Button type="submit" disabled={submitting}>
              {submitting ? "Placing order…" : "Place order"}
            </Button>
            <span className="text-[13px] text-muted-foreground">Payment: bank transfer (pay after confirmation)</span>
          </div>
        </form>
        <div className="rounded-lg border border-line bg-soft p-5">
          <h3 className="mt-0">Your order</h3>
          <div className="overflow-hidden rounded-md border border-line bg-white">
            {cart.items.map((line) => (
              <div className="flex justify-between gap-3 border-b border-line px-3.5 py-2.5 text-sm" key={line.id}>
                <span>
                  {line.title} × {line.qty}
                </span>
                <span>${(Number(line.price) * line.qty).toFixed(2)}</span>
              </div>
            ))}
            <div className="flex justify-between gap-3 px-3.5 py-2.5 text-sm font-bold">
              <span>{t("checkout_subtotal")}</span>
              <span>${cart.subtotal}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}