sanihome/src/app/checkout/page.tsx

"use client";

import { useState } from "react";
import { Breadcrumb } from "@/components/ui/Breadcrumb";
import { EmptyState } from "@/components/ui/EmptyState";
import { useAuth } from "@/context/AuthContext";
import { useCart } from "@/context/CartContext";
import { checkout, type Order } from "@/lib/cart";
import { formatPrice } from "@/data/sample";

type PaymentType = "cash" | "transfer";

const inputClass =
  "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none transition-colors focus:border-red";

export default function CheckoutPage() {
  const { user, openLoginModal } = useAuth();
  const { cart, businessId, refresh } = useCart();
  const [province, setProvince] = useState("");
  const [city, setCity] = useState("");
  const [address, setAddress] = useState("");
  const [postalCode, setPostalCode] = useState("");
  const [paymentType, setPaymentType] = useState<PaymentType>("cash");
  const [transferRefNumber, setTransferRefNumber] = useState("");
  const [customerNotes, setCustomerNotes] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [order, setOrder] = useState<Order | null>(null);

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    setBusy(true);
    setError(null);
    const res = await checkout(businessId, {
      shippingAddress: { province, city, address, postalCode: postalCode || undefined },
      customerNotes: customerNotes || undefined,
      payment:
        paymentType === "transfer"
          ? { type: "transfer", transferRefNumber: transferRefNumber || undefined }
          : { type: "cash" },
    });
    setBusy(false);
    if (!res.ok) {
      setError(res.message);
      return;
    }
    setOrder(res.data);
    refresh();
  };

  return (
    <div className="mx-auto max-w-3xl px-4 py-10">
      <Breadcrumb items={[{ label: "خانه", href: "/" }, { label: "تسویه حساب" }]} />
      <h1 className="mb-6 text-2xl font-bold text-red-dark">تسویه حساب</h1>

      {!user ? (
        <div className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-border bg-surface p-5">
          <span className="text-sm text-muted">برای تسویه حساب باید وارد حساب کاربری خود شوید.</span>
          <button
            type="button"
            onClick={openLoginModal}
            className="rounded-lg bg-red px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-red-dark"
          >
            ورود
          </button>
        </div>
      ) : order ? (
        <div className="rounded-xl border border-green-200 bg-green-50 p-6 text-center">
          <p className="mb-2 text-lg font-bold text-green-800">سفارش شما با موفقیت ثبت شد ✓</p>
          <p className="mb-1 text-sm text-green-700">شماره سفارش: {order.orderNumber}</p>
          <p className="text-sm text-green-700">
            مبلغ کل: {formatPrice(order.total)} تومان
          </p>
          <a href="/" className="mt-4 inline-block text-sm font-medium text-red hover:text-red-dark">
            بازگشت به فروشگاه ←
          </a>
        </div>
      ) : !cart || cart.items.length === 0 ? (
        <EmptyState message="سبد خرید شما خالی است." />
      ) : (
        <div className="grid gap-8 md:grid-cols-3">
          <form onSubmit={handleSubmit} className="space-y-4 md:col-span-2">
            <div>
              <h2 className="mb-3 text-sm font-bold">آدرس ارسال</h2>
              <div className="grid gap-3 sm:grid-cols-2">
                <input
                  required
                  placeholder="استان"
                  value={province}
                  onChange={(e) => setProvince(e.target.value)}
                  className={inputClass}
                />
                <input
                  required
                  placeholder="شهر"
                  value={city}
                  onChange={(e) => setCity(e.target.value)}
                  className={inputClass}
                />
              </div>
              <textarea
                required
                rows={2}
                placeholder="آدرس کامل"
                value={address}
                onChange={(e) => setAddress(e.target.value)}
                className={`${inputClass} mt-3`}
              />
              <input
                placeholder="کد پستی (اختیاری)"
                value={postalCode}
                onChange={(e) => setPostalCode(e.target.value)}
                className={`${inputClass} mt-3`}
              />
            </div>

            <div>
              <h2 className="mb-3 text-sm font-bold">روش پرداخت</h2>
              <div className="space-y-2">
                <label className="flex items-center gap-2 rounded-lg border border-border p-3 text-sm">
                  <input
                    type="radio"
                    name="payment"
                    checked={paymentType === "cash"}
                    onChange={() => setPaymentType("cash")}
                  />
                  پرداخت در محل (نقدی)
                </label>
                <label className="flex items-center gap-2 rounded-lg border border-border p-3 text-sm">
                  <input
                    type="radio"
                    name="payment"
                    checked={paymentType === "transfer"}
                    onChange={() => setPaymentType("transfer")}
                  />
                  کارت به کارت / واریز بانکی
                </label>
                {paymentType === "transfer" && (
                  <input
                    placeholder="شماره پیگیری واریز (اختیاری)"
                    value={transferRefNumber}
                    onChange={(e) => setTransferRefNumber(e.target.value)}
                    className={inputClass}
                  />
                )}
              </div>
            </div>

            <textarea
              rows={2}
              placeholder="توضیحات سفارش (اختیاری)"
              value={customerNotes}
              onChange={(e) => setCustomerNotes(e.target.value)}
              className={inputClass}
            />

            {error && <p className="text-sm text-red-dark">{error}</p>}

            <button
              type="submit"
              disabled={busy}
              className="w-full rounded-xl bg-red py-3 text-sm font-medium text-white transition-colors hover:bg-red-dark disabled:cursor-not-allowed disabled:opacity-60"
            >
              {busy ? "در حال ثبت سفارش..." : "ثبت نهایی سفارش"}
            </button>
          </form>

          <div className="rounded-xl border border-border bg-surface p-5">
            <h2 className="mb-4 text-sm font-bold">خلاصه سفارش</h2>
            <ul className="mb-4 space-y-2 text-sm">
              {cart.items.map((item) => (
                <li key={item.id} className="flex items-center justify-between gap-2">
                  <span className="line-clamp-1 text-muted">
                    {item.productNameFa ?? item.productTitle} × {item.quantity}
                  </span>
                  <span className="shrink-0 font-medium">{formatPrice(item.lineTotal)}</span>
                </li>
              ))}
            </ul>
            <div className="flex items-center justify-between border-t border-border pt-3 text-sm font-bold">
              <span>جمع کل</span>
              <span className="text-red-dark">
                {formatPrice(cart.subtotal)}
                <span className="mr-0.5 text-xs font-normal text-muted">تومان</span>
              </span>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}