// Product search item type for API results
type ProductSearchItem = {
  id: number;
  name: string;
  price?: number | string | null;
  regular_price?: number | string | null;
  sale_price?: number | string | null;
  sku?: string;
  stock?: number | null;
  virtual?: boolean;
  downloadable?: boolean;
};
import * as React from 'react';
import { makeMoneyFormatter, getStoreCurrency } from '@/lib/currency';
import { useQuery } from '@tanstack/react-query';
import { api, ProductsApi, CustomersApi } from '@/lib/api';
import { cn } from '@/lib/utils';
import { __ } from '@/lib/i18n';
import { toast } from 'sonner';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Button } from '@/components/ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Checkbox } from '@/components/ui/checkbox';
import { SearchableSelect } from '@/components/ui/searchable-select';

// --- Types ------------------------------------------------------------
export type CountryOption = { code: string; name: string };
export type StatesMap = Record<string, Record<string, string>>; // { US: { CA: 'California' } }
export type PaymentChannel = { id: string; title: string; meta?: any };
export type PaymentMethod = { 
  id: string; 
  title: string; 
  enabled?: boolean;
  channels?: PaymentChannel[]; // If present, show channels instead of gateway
};
export type ShippingMethod = { id: string; title: string; cost: number };

export type LineItem = {
  line_item_id?: number; // present in edit mode to update existing line
  product_id: number;
  qty: number;
  name?: string;
  price?: number;
  virtual?: boolean;
  downloadable?: boolean;
  regular_price?: number;
  sale_price?: number | null;
};

export type ExistingOrderDTO = {
  id: number;
  status?: string;
  billing?: any;
  shipping?: any;
  items?: LineItem[];
  payment_method?: string;
  payment_method_id?: string;
  shipping_method?: string;
  shipping_method_id?: string;
  customer_note?: string;
  currency?: string;
  currency_symbol?: string;
};

export type OrderPayload = {
  status: string;
  billing: any;
  shipping?: any;
  items?: LineItem[];
  payment_method?: string;
  shipping_method?: string;
  customer_note?: string;
  register_as_member?: boolean;
  coupons?: string[];
};

type Props = {
  mode: 'create' | 'edit';
  initial?: ExistingOrderDTO | null;
  countries: CountryOption[];
  states: StatesMap;
  defaultCountry?: string;
  payments?: PaymentMethod[];
  shippings?: ShippingMethod[];
  onSubmit: (payload: OrderPayload) => Promise<void> | void;
  className?: string;
  currency?: string;
  currencySymbol?: string;
  leftTop?: React.ReactNode;
  rightTop?: React.ReactNode;
  itemsEditable?: boolean;
  showCoupons?: boolean;
  formRef?: React.RefObject<HTMLFormElement>;
  hideSubmitButton?: boolean;
};

const STATUS_LIST = ['pending','processing','on-hold','completed','cancelled','refunded','failed'];

// --- Component --------------------------------------------------------
export default function OrderForm({
  mode,
  initial,
  countries,
  states,
  defaultCountry,
  payments = [],
  shippings = [],
  onSubmit,
  className,
  leftTop: _leftTop,
  rightTop,
  itemsEditable = true,
  showCoupons = true,
  currency,
  currencySymbol,
  formRef,
  hideSubmitButton = false,
}: Props) {
  const oneCountryOnly = countries.length === 1;
  const firstCountry = countries[0]?.code || 'US';
  const baseCountry = (defaultCountry && countries.find(c => c.code === defaultCountry)?.code) || firstCountry;

  // Billing
  const [bFirst, setBFirst] = React.useState(initial?.billing?.first_name || '');
  const [bLast, setBLast] = React.useState(initial?.billing?.last_name || '');
  const [bEmail, setBEmail] = React.useState(initial?.billing?.email || '');
  const [bPhone, setBPhone] = React.useState(initial?.billing?.phone || '');
  const [bAddr1, setBAddr1] = React.useState(initial?.billing?.address_1 || '');
  const [bCity, setBCity] = React.useState(initial?.billing?.city || '');
  const [bPost, setBPost] = React.useState(initial?.billing?.postcode || '');
  const [bCountry, setBCountry] = React.useState(initial?.billing?.country || baseCountry);
  const [bState, setBState] = React.useState(initial?.billing?.state || '');

  // Shipping toggle + dynamic fields
  const [shipDiff, setShipDiff] = React.useState(Boolean(initial?.shipping && !isEmptyAddress(initial?.shipping)));
  const [shippingData, setShippingData] = React.useState<Record<string, any>>(initial?.shipping || {});

  // If store sells to a single country, force-select it for billing & shipping
  React.useEffect(() => {
    if (oneCountryOnly) {
      const only = countries[0]?.code || '';
      if (only && bCountry !== only) setBCountry(only);
    }
  }, [oneCountryOnly, countries, bCountry]);

  React.useEffect(() => {
    if (oneCountryOnly) {
      const only = countries[0]?.code || '';
      if (shipDiff) {
        if (only && shippingData.country !== only) {
          setShippingData({...shippingData, country: only});
        }
      } else {
        // keep shipping synced to billing when not different
        setShippingData({...shippingData, country: bCountry});
      }
    }
  }, [oneCountryOnly, countries, shipDiff, bCountry, shippingData.country]);

  // Order meta
  const [status, setStatus] = React.useState(initial?.status || 'pending');
  const [paymentMethod, setPaymentMethod] = React.useState(initial?.payment_method_id || initial?.payment_method || '');
  const [shippingMethod, setShippingMethod] = React.useState(initial?.shipping_method_id || initial?.shipping_method || '');
  const [note, setNote] = React.useState(initial?.customer_note || '');
  const [registerAsMember, setRegisterAsMember] = React.useState(false);
  const [selectedCustomerId, setSelectedCustomerId] = React.useState<number | null>(null);
  const [submitting, setSubmitting] = React.useState(false);

  const [items, setItems] = React.useState<LineItem[]>(initial?.items || []);
  const [couponInput, setCouponInput] = React.useState('');
  const [validatedCoupons, setValidatedCoupons] = React.useState<any[]>([]);
  const [couponValidating, setCouponValidating] = React.useState(false);

  // Fetch dynamic checkout fields based on cart items
  const { data: checkoutFields } = useQuery({
    queryKey: ['checkout-fields', items.map(i => ({ product_id: i.product_id, qty: i.qty }))],
    queryFn: async () => {
      if (items.length === 0) return null;
      return api.post('/checkout/fields', {
        items: items.map(i => ({ product_id: i.product_id, qty: i.qty })),
      });
    },
    enabled: items.length > 0,
  });

  // --- Product search for Add Item ---
  const [searchQ, setSearchQ] = React.useState('');
  const [customerSearchQ, setCustomerSearchQ] = React.useState('');
  const productsQ = useQuery({
    queryKey: ['products', searchQ],
    queryFn: () => ProductsApi.search(searchQ),
    enabled: !!searchQ,
  });

  const customersQ = useQuery({
    queryKey: ['customers', customerSearchQ],
    queryFn: () => CustomersApi.search(customerSearchQ),
    enabled: !!customerSearchQ && customerSearchQ.length >= 2,
  });
  const raw = productsQ.data as any;
  const products: ProductSearchItem[] = Array.isArray(raw)
    ? raw
    : Array.isArray(raw?.data)
    ? raw.data
    : Array.isArray(raw?.rows)
    ? raw.rows
    : [];

  const customersRaw = customersQ.data as any;
  const customers: any[] = Array.isArray(customersRaw) ? customersRaw : [];

  const itemsCount = React.useMemo(
    () => items.reduce((n, it) => n + (Number(it.qty) || 0), 0),
    [items]
  );
  const itemsTotal = React.useMemo(
    () => items.reduce((sum, it) => sum + (Number(it.qty) || 0) * (Number(it.price) || 0), 0),
    [items]
  );
  
  // Calculate shipping cost
  const shippingCost = React.useMemo(() => {
    if (!shippingMethod) return 0;
    const method = shippings.find(s => s.id === shippingMethod);
    return method ? Number(method.cost) || 0 : 0;
  }, [shippingMethod, shippings]);
  
  // Calculate discount from validated coupons
  const couponDiscount = React.useMemo(() => {
    return validatedCoupons.reduce((sum, c) => sum + (c.discount_amount || 0), 0);
  }, [validatedCoupons]);
  
  // Calculate order total (items + shipping - coupons)
  const orderTotal = React.useMemo(() => {
    return Math.max(0, itemsTotal + shippingCost - couponDiscount);
  }, [itemsTotal, shippingCost, couponDiscount]);
  
  // Validate coupon
  const validateCoupon = async (code: string) => {
    if (!code.trim()) return;
    
    // Check if already added
    if (validatedCoupons.some(c => c.code.toLowerCase() === code.toLowerCase())) {
      toast.error(__('Coupon already added'));
      return;
    }
    
    setCouponValidating(true);
    try {
      const response = await api.post('/coupons/validate', {
        code: code.trim(),
        subtotal: itemsTotal,
      });
      
      if (response.valid) {
        setValidatedCoupons([...validatedCoupons, response]);
        setCouponInput('');
        toast.success(`${__('Coupon applied')}: ${response.code}`);
      } else {
        toast.error(response.error || __('Invalid coupon'));
      }
    } catch (error: any) {
      toast.error(error?.message || __('Failed to validate coupon'));
    } finally {
      setCouponValidating(false);
    }
  };
  
  const removeCoupon = (code: string) => {
    setValidatedCoupons(validatedCoupons.filter(c => c.code !== code));
  };

  // Check if cart has physical products
  const hasPhysicalProduct = React.useMemo(
    () => items.some(item => {
      // Check item's stored metadata first
      if (typeof item.virtual !== 'undefined' || typeof item.downloadable !== 'undefined') {
        return !item.virtual && !item.downloadable;
      }
      // Fallback: check products array (for search results)
      const product = products.find(p => p.id === item.product_id);
      return product ? !product.virtual && !product.downloadable : true; // Default to physical if unknown
    }),
    [items, products]
  );

  // --- Currency-aware formatting for unit prices and totals ---
  const storeCur = getStoreCurrency();
  const currencyCode = currency || initial?.currency || storeCur.currency;
  const symbol = initial?.currency_symbol ?? currencySymbol ?? storeCur.symbol;
  const money = React.useMemo(() => makeMoneyFormatter({ currency: currencyCode, symbol }), [currencyCode, symbol]);

  // Keep shipping country synced to billing when unchecked
  React.useEffect(() => {
    if (!shipDiff) setShippingData({...shippingData, country: bCountry});
  }, [shipDiff, bCountry]);

  // Clamp states when country changes
  React.useEffect(() => {
    if (bState && !states[bCountry]?.[bState]) setBState('');
  }, [bCountry]);
  React.useEffect(() => {
    if (shippingData.state && !states[shippingData.country]?.[shippingData.state]) {
      setShippingData({...shippingData, state: ''});
    }
  }, [shippingData.country]);

  const countryOptions = countries.map(c => ({ value: c.code, label: `${c.name} (${c.code})` }));
  const bStateOptions = Object.entries(states[bCountry] || {}).map(([code, name]) => ({ value: code, label: name }));

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    
    // For virtual-only products, don't send address fields
    const billingData: any = {
      first_name: bFirst,
      last_name: bLast,
      email: bEmail,
      phone: bPhone,
    };
    
    // Only add address fields for physical products
    if (hasPhysicalProduct) {
      billingData.address_1 = bAddr1;
      billingData.city = bCity;
      billingData.state = bState;
      billingData.postcode = bPost;
      billingData.country = bCountry;
    }
    
    const payload: OrderPayload = {
      status,
      billing: billingData,
      shipping: shipDiff && hasPhysicalProduct ? shippingData : undefined,
      payment_method: paymentMethod || undefined,
      shipping_method: shippingMethod || undefined,
      customer_note: note || undefined,
      register_as_member: registerAsMember,
      items: itemsEditable ? items : undefined,
      coupons: showCoupons ? validatedCoupons.map(c => c.code) : undefined,
    };

    try {
      setSubmitting(true);
      await onSubmit(payload);
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <form ref={formRef} onSubmit={handleSubmit} className={cn('grid grid-cols-1 lg:grid-cols-3 gap-6', className)}>
      {/* Left: Order details */}
      <div className="lg:col-span-2 space-y-6">
        {/* Items and Coupons */}
        {(mode === 'create' || showCoupons || itemsEditable) && (
          <div className="space-y-4">
            {/* Items */}
            <div className="rounded border p-4 space-y-3">
              <div className="font-medium flex items-center justify-between">
                <span>{__('Items')}</span>
                {itemsEditable ? (
                  <div className="flex items-center gap-2">
                    <SearchableSelect
                      options={
                        products.map((p: ProductSearchItem) => ({
                          value: String(p.id),
                          label: (
                            <div className="leading-tight">
                              <div className="font-medium">{p.name}</div>
                              {(typeof p.price !== 'undefined' && p.price !== null && !Number.isNaN(Number(p.price))) && (
                                <div className="text-xs text-muted-foreground">
                                  {p.sale_price ? (
                                    <>
                                      {money(Number(p.sale_price))} <span className="line-through">{money(Number(p.regular_price))}</span>
                                    </>
                                  ) : money(Number(p.price))}
                                </div>
                              )}
                            </div>
                          ),
                          searchText: p.name,
                          product: p,
                        }))
                      }
                      value={undefined}
                      onChange={(val: string) => {
                        const p = products.find((prod: ProductSearchItem) => String(prod.id) === val);
                        if (!p) return;
                        if (items.find(x => x.product_id === p.id)) return;
                        setItems(prev => [
                          ...prev,
                          {
                            product_id: p.id,
                            name: p.name,
                            price: Number(p.price) || 0,
                            qty: 1,
                            virtual: p.virtual,
                            downloadable: p.downloadable,
                          }
                        ]);
                        setSearchQ('');
                      }}
                      placeholder={__('Search products…')}
                      search={searchQ}
                      onSearch={setSearchQ}
                      disabled={!itemsEditable}
                      showCheckIndicator={false}
                    />
                  </div>
                ) : (
                  <span className="text-xs opacity-70">({__('locked')})</span>
                )}
              </div>

              {/* Desktop/table view */}
              <div className="hidden md:block">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="text-left border-b">
                      <th className="px-2 py-1">{__('Product')}</th>
                      <th className="px-2 py-1 w-24">{__('Qty')}</th>
                      <th className="px-2 py-1 w-16"></th>
                    </tr>
                  </thead>
                  <tbody>
                    {items.map((it, idx) => (
                      <tr key={it.product_id} className="border-b last:border-0">
                        <td className="px-2 py-1">
                          <div>
                            <div>{it.name || `Product #${it.product_id}`}</div>
                            {typeof it.price === 'number' && (
                              <div className="text-xs opacity-60">
                                {/* Show strike-through regular price if on sale */}
                                {(() => {
                                  // Check item's own data first (for edit mode)
                                  if (it.sale_price && it.regular_price && it.sale_price < it.regular_price) {
                                    return (
                                      <>
                                        <span className="line-through text-gray-400 mr-1">{money(Number(it.regular_price))}</span>
                                        <span className="text-red-600 font-semibold">{money(Number(it.sale_price))}</span>
                                      </>
                                    );
                                  }
                                  // Fallback: check products array (for create mode)
                                  const product = products.find(p => p.id === it.product_id);
                                  if (product && product.sale_price && product.regular_price && product.sale_price < product.regular_price) {
                                    return (
                                      <>
                                        <span className="text-red-600 font-semibold">{money(Number(product.sale_price))}</span>
                                        <span className="line-through text-gray-400 ml-1">{money(Number(product.regular_price))}</span>
                                      </>
                                    );
                                  }
                                  return money(Number(it.price));
                                })()}
                              </div>
                            )}
                          </div>
                        </td>
                        <td className="px-2 py-1">
                          <Input
                            inputMode="numeric"
                            pattern="[0-9]*"
                            min={1}
                            className="ui-ctrl w-24 text-center"
                            value={String(it.qty)}
                            onChange={(e) => {
                              if (!itemsEditable) return;
                              const raw = e.target.value.replace(/[^0-9]/g, '');
                              const v = Math.max(1, parseInt(raw || '1', 10));
                              setItems(prev => prev.map((x, i) => i === idx ? { ...x, qty: v } : x));
                            }}
                            disabled={!itemsEditable}
                          />
                        </td>
                        <td className="px-2 py-1 text-right">
                          {itemsEditable && (
                            <button
                              className="text-red-600"
                              type="button"
                              onClick={() => setItems(prev => prev.filter((x) => x.product_id !== it.product_id))}
                            >
                              {__('Remove')}
                            </button>
                          )}
                        </td>
                      </tr>
                    ))}
                    {items.length === 0 && (
                      <tr>
                        <td className="px-2 py-4 text-center opacity-70" colSpan={3}>{__('No items yet')}</td>
                      </tr>
                    )}
                  </tbody>
                </table>
              </div>

              {/* Mobile/card view */}
              <div className="md:hidden divide-y">
                {items.length ? (
                  items.map((it, idx) => (
                    <div key={it.product_id} className="py-3">
                      <div className="px-1 flex items-start justify-between gap-3">
                        <div className="min-w-0">
                          <div className="font-medium truncate">{it.name || `Product #${it.product_id}`}</div>
                          {typeof it.price === 'number' && (
                            <div className="text-xs opacity-60">{money(Number(it.price))}</div>
                          )}
                        </div>
                        <div className="text-right">
                          {itemsEditable && (
                            <button
                              className="text-red-600 text-xs"
                              type="button"
                              onClick={() => setItems(prev => prev.filter((x) => x.product_id !== it.product_id))}
                            >
                              {__('Remove')}
                            </button>
                          )}
                        </div>
                      </div>
                      <div className="mt-2 px-1 grid grid-cols-3 gap-2 items-center">
                        <div className="col-span-2 text-sm opacity-70">{__('Quantity')}</div>
                        <div>
                          <Input
                            inputMode="numeric"
                            pattern="[0-9]*"
                            min={1}
                            className="ui-ctrl w-full text-center"
                            value={String(it.qty)}
                            onChange={(e) => {
                              if (!itemsEditable) return;
                              const raw = e.target.value.replace(/[^0-9]/g, '');
                              const v = Math.max(1, parseInt(raw || '1', 10));
                              setItems(prev => prev.map((x, i) => i === idx ? { ...x, qty: v } : x));
                            }}
                            disabled={!itemsEditable}
                          />
                        </div>
                      </div>
                    </div>
                  ))
                ) : (
                  <div className="px-2 py-4 text-center opacity-70">{__('No items yet')}</div>
                )}
              </div>
              <div className="rounded-md border px-3 py-2 text-sm bg-white/60 space-y-1.5">
                <div className="flex justify-between">
                  <span className="opacity-70">{__('Items')}</span>
                  <span>{itemsCount}</span>
                </div>
                <div className="flex justify-between">
                  <span className="opacity-70">{__('Subtotal')}</span>
                  <span>
                    {itemsTotal ? money(itemsTotal) : '—'}
                  </span>
                </div>
                {shippingCost > 0 && (
                  <div className="flex justify-between">
                    <span className="opacity-70">{__('Shipping')}</span>
                    <span>{money(shippingCost)}</span>
                  </div>
                )}
                {couponDiscount > 0 && (
                  <div className="flex justify-between text-green-700">
                    <span>{__('Discount')}</span>
                    <span>-{money(couponDiscount)}</span>
                  </div>
                )}
                <div className="flex justify-between pt-1.5 border-t font-medium">
                  <span>{__('Total')}</span>
                  <span>{money(orderTotal)}</span>
                </div>
              </div>
            </div>

            {/* Coupons */}
            {showCoupons && (
              <div className="rounded border p-4 space-y-3">
                <div className="font-medium flex items-center justify-between">
                  <span>{__('Coupons')}</span>
                  {!itemsEditable && (
                    <span className="text-xs opacity-70">({__('locked')})</span>
                  )}
                </div>
                
                {/* Coupon Input */}
                <div className="flex gap-2">
                  <Input
                    value={couponInput}
                    onChange={(e) => setCouponInput(e.target.value)}
                    onKeyDown={(e) => {
                      if (e.key === 'Enter') {
                        e.preventDefault();
                        validateCoupon(couponInput);
                      }
                    }}
                    placeholder={__('Enter coupon code')}
                    disabled={!itemsEditable || couponValidating}
                    className="flex-1"
                  />
                  <Button
                    type="button"
                    onClick={() => validateCoupon(couponInput)}
                    disabled={!itemsEditable || !couponInput.trim() || couponValidating}
                    size="sm"
                  >
                    {couponValidating ? __('Validating...') : __('Apply')}
                  </Button>
                </div>
                
                {/* Applied Coupons */}
                {validatedCoupons.length > 0 && (
                  <div className="space-y-2">
                    {validatedCoupons.map((coupon) => (
                      <div key={coupon.code} className="flex items-center justify-between p-2 bg-green-50 border border-green-200 rounded text-sm">
                        <div className="flex-1">
                          <div className="font-medium text-green-800">{coupon.code}</div>
                          {coupon.description && (
                            <div className="text-xs text-green-700 opacity-80">{coupon.description}</div>
                          )}
                          <div className="text-xs text-green-700 mt-1">
                            {coupon.discount_type === 'percent' && `${coupon.amount}% off`}
                            {coupon.discount_type === 'fixed_cart' && `${money(coupon.amount)} off`}
                            {coupon.discount_type === 'fixed_product' && `${money(coupon.amount)} off per item`}
                            {' · '}
                            <span className="font-medium">{__('Discount')}: {money(coupon.discount_amount)}</span>
                          </div>
                        </div>
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                          onClick={() => removeCoupon(coupon.code)}
                          disabled={!itemsEditable}
                          className="text-red-600 hover:text-red-700 hover:bg-red-50"
                        >
                          {__('Remove')}
                        </Button>
                      </div>
                    ))}
                  </div>
                )}
                
                <div className="text-[11px] opacity-70">
                  {__('Enter coupon code and click Apply to validate and calculate discount')}
                </div>
              </div>
            )}
          </div>
        )}
        {/* Billing address - only show full address for physical products */}
        <div className="rounded border p-4 space-y-3">
          <div className="flex items-center justify-between mb-3">
            <h3 className="text-sm font-medium">{__('Billing address')}</h3>
            {mode === 'create' && (
              <SearchableSelect
                options={customers.map((c: any) => ({
                  value: String(c.id),
                  label: (
                    <div className="leading-tight">
                      <div className="font-medium">{c.name || c.email}</div>
                      <div className="text-xs text-muted-foreground">{c.email}</div>
                    </div>
                  ),
                  searchText: `${c.name} ${c.email}`,
                  customer: c,
                }))}
                value={undefined}
                onChange={async (val: string) => {
                  const customer = customers.find((c: any) => String(c.id) === val);
                  if (!customer) return;
                  
                  // Fetch full customer data
                  try {
                    const data = await CustomersApi.searchByEmail(customer.email);
                    if (data.found && data.billing) {
                      // Always fill name, email, phone
                      setBFirst(data.billing.first_name || data.first_name || '');
                      setBLast(data.billing.last_name || data.last_name || '');
                      setBEmail(data.email || '');
                      setBPhone(data.billing.phone || '');
                      
                      // Only fill address fields if cart has physical products
                      if (hasPhysicalProduct) {
                        setBAddr1(data.billing.address_1 || '');
                        setBCity(data.billing.city || '');
                        setBPost(data.billing.postcode || '');
                        setBCountry(data.billing.country || bCountry);
                        setBState(data.billing.state || '');
                        
                        // Autofill shipping if available
                        if (data.shipping && data.shipping.address_1) {
                          setShipDiff(true);
                          setShippingData({
                            first_name: data.shipping.first_name || '',
                            last_name: data.shipping.last_name || '',
                            address_1: data.shipping.address_1 || '',
                            city: data.shipping.city || '',
                            postcode: data.shipping.postcode || '',
                            country: data.shipping.country || bCountry,
                            state: data.shipping.state || '',
                          });
                        }
                      }
                      
                      // Mark customer as selected (hide register checkbox)
                      setSelectedCustomerId(data.user_id);
                      setRegisterAsMember(false);
                    }
                  } catch (e) {
                    console.error('Customer autofill error:', e);
                  }
                  
                  setCustomerSearchQ('');
                }}
                onSearch={setCustomerSearchQ}
                placeholder={__('Search customer...')}
                className="w-64"
              />
            )}
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div>
              <Label>{__('First name')}</Label>
              <Input className="rounded-md border px-3 py-2" value={bFirst} onChange={e=>setBFirst(e.target.value)} />
            </div>
            <div>
              <Label>{__('Last name')}</Label>
              <Input className="rounded-md border px-3 py-2" value={bLast} onChange={e=>setBLast(e.target.value)} />
            </div>
            <div>
              <Label>{__('Email')}</Label>
              <Input 
                inputMode="email" 
                autoComplete="email" 
                className="rounded-md border px-3 py-2 appearance-none" 
                value={bEmail} 
                onChange={e=>setBEmail(e.target.value)}
              />
            </div>
            <div>
              <Label>{__('Phone')}</Label>
              <Input className="rounded-md border px-3 py-2" value={bPhone} onChange={e=>setBPhone(e.target.value)} />
            </div>
            {/* Only show full address fields for physical products */}
            {hasPhysicalProduct && (
              <>
                <div className="md:col-span-2">
                  <Label>{__('Address')}</Label>
                  <Input className="rounded-md border px-3 py-2" value={bAddr1} onChange={e=>setBAddr1(e.target.value)} />
                </div>
                <div>
                  <Label>{__('City')}</Label>
                  <Input className="rounded-md border px-3 py-2" value={bCity} onChange={e=>setBCity(e.target.value)} />
                </div>
                <div>
                  <Label>{__('Postcode')}</Label>
                  <Input className="rounded-md border px-3 py-2" value={bPost} onChange={e=>setBPost(e.target.value)} />
                </div>
                <div>
                  <Label>{__('Country')}</Label>
                  <SearchableSelect
                    options={countryOptions}
                    value={bCountry}
                    onChange={setBCountry}
                    placeholder={countries.length ? __('Select country') : __('No countries')}
                    disabled={oneCountryOnly}
                  />
                </div>
                <div>
                  <Label>{__('State/Province')}</Label>
                  <Select value={bState} onValueChange={setBState}>
                    <SelectTrigger className="w-full"><SelectValue placeholder={__('Select state')} /></SelectTrigger>
                    <SelectContent className="max-h-64">
                      {bStateOptions.length ? bStateOptions.map(o => (
                        <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
                      )) : (
                        <SelectItem value="__none__" disabled>{__('N/A')}</SelectItem>
                      )}
                    </SelectContent>
                  </Select>
                </div>
              </>
            )}
          </div>
        </div>

        {/* Conditional: Only show address fields and shipping for physical products */}
        {!hasPhysicalProduct && (
          <div className="rounded border border-blue-200 bg-blue-50 p-3 text-sm text-blue-800">
            {__('Digital products only - shipping not required')}
          </div>
        )}

        {/* Shipping toggle */}
        {hasPhysicalProduct && (
          <div className="pt-2 mt-4">
            <div className="flex items-center gap-2 text-sm">
              <Checkbox id="shipDiff" checked={shipDiff} onCheckedChange={(v)=> setShipDiff(Boolean(v))} />
              <Label htmlFor="shipDiff" className="leading-none">{__('Ship to a different address')}</Label>
            </div>
          </div>
        )}

        {/* Shipping address - Dynamic Fields */}
        {hasPhysicalProduct && shipDiff && checkoutFields?.fields && (
          <div className="rounded border p-4 space-y-3 mt-4">
            <h3 className="text-sm font-medium">{__('Shipping address')}</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              {checkoutFields.fields
                .filter((f: any) => f.fieldset === 'shipping' && !f.hidden)
                .sort((a: any, b: any) => (a.priority || 0) - (b.priority || 0))
                .map((field: any) => {
                  const isWide = ['address_1', 'address_2'].includes(field.key.replace('shipping_', ''));
                  const fieldKey = field.key.replace('shipping_', '');
                  
                  return (
                    <div key={field.key} className={isWide ? 'md:col-span-2' : ''}>
                      <Label>
                        {field.label}
                        {field.required && <span className="text-destructive ml-1">*</span>}
                      </Label>
                      {field.type === 'select' && field.options ? (
                        <Select 
                          value={shippingData[fieldKey] || ''} 
                          onValueChange={(v) => setShippingData({...shippingData, [fieldKey]: v})}
                        >
                          <SelectTrigger className="w-full">
                            <SelectValue placeholder={field.placeholder || field.label} />
                          </SelectTrigger>
                          <SelectContent className="max-h-64">
                            {Object.entries(field.options).map(([value, label]: [string, any]) => (
                              <SelectItem key={value} value={value}>{label}</SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      ) : field.key === 'shipping_country' ? (
                        <SearchableSelect
                          options={countryOptions}
                          value={shippingData.country || ''}
                          onChange={(v) => setShippingData({...shippingData, country: v})}
                          placeholder={field.placeholder || __('Select country')}
                          disabled={oneCountryOnly}
                        />
                      ) : field.type === 'textarea' ? (
                        <Textarea
                          value={shippingData[fieldKey] || ''}
                          onChange={(e) => setShippingData({...shippingData, [fieldKey]: e.target.value})}
                          placeholder={field.placeholder}
                          required={field.required}
                        />
                      ) : (
                        <Input
                          type={field.type === 'email' ? 'email' : field.type === 'tel' ? 'tel' : 'text'}
                          value={shippingData[fieldKey] || ''}
                          onChange={(e) => setShippingData({...shippingData, [fieldKey]: e.target.value})}
                          placeholder={field.placeholder}
                          required={field.required}
                        />
                      )}
                    </div>
                  );
                })}
            </div>
          </div>
        )}
      </div>

      {/* Right: Settings + Actions */}
      <aside className="lg:col-span-1">
        <div className="sticky top-4 space-y-4">
          {rightTop}
          <div className="rounded border p-4 space-y-3">
            <div className="font-medium">{__('Order Settings')}</div>
            <div>
              <Label>{__('Status')}</Label>
              <Select value={status} onValueChange={setStatus}>
                <SelectTrigger className="w-full"><SelectValue /></SelectTrigger>
                <SelectContent>
                  {STATUS_LIST.map((s) => (
                    <SelectItem key={s} value={s}>{s.charAt(0).toUpperCase() + s.slice(1)}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label>{__('Payment method')}</Label>
              <Select value={paymentMethod} onValueChange={setPaymentMethod}>
                <SelectTrigger className="w-full"><SelectValue placeholder={payments.length ? __('Select payment') : __('No methods')} /></SelectTrigger>
                <SelectContent>
                  {payments.map(p => {
                    // If gateway has channels, show channels instead of gateway
                    if (p.channels && p.channels.length > 0) {
                      return p.channels.map((channel: any) => (
                        <SelectItem key={channel.id} value={channel.id}>
                          {channel.title}
                        </SelectItem>
                      ));
                    }
                    // Otherwise show gateway
                    return (
                      <SelectItem key={p.id} value={p.id}>{p.title}</SelectItem>
                    );
                  })}
                </SelectContent>
              </Select>
            </div>
            {/* Only show shipping method for physical products */}
            {hasPhysicalProduct && (
              <div>
                <Label>{__('Shipping method')}</Label>
                <Select value={shippingMethod} onValueChange={setShippingMethod}>
                  <SelectTrigger className="w-full"><SelectValue placeholder={shippings.length ? __('Select shipping') : __('No methods')} /></SelectTrigger>
                  <SelectContent>
                    {shippings.map(s => (
                      <SelectItem key={s.id} value={s.id}>{s.title}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            )}
          </div>

          <div className="rounded border p-4 space-y-2">
            <Label>{__('Customer note (optional)')}</Label>
            <Textarea value={note} onChange={e=>setNote(e.target.value)} placeholder={__('Write a note for this order…')} />
          </div>

          {/* Register as member checkbox (only for new orders and when no existing customer selected) */}
          {mode === 'create' && !selectedCustomerId && (
            <div className="rounded border p-4">
              <div className="flex items-start gap-2">
                <Checkbox 
                  id="register_member" 
                  checked={registerAsMember}
                  onCheckedChange={(v) => setRegisterAsMember(Boolean(v))}
                />
                <div className="flex-1">
                  <Label htmlFor="register_member" className="cursor-pointer">
                    {__('Register customer as site member')}
                  </Label>
                  <p className="text-xs text-muted-foreground mt-1">
                    {__('Customer will receive login credentials via email and can track their orders.')}
                  </p>
                </div>
              </div>
            </div>
          )}

          {!hideSubmitButton && (
            <Button type="submit" disabled={submitting} className="w-full">
              {submitting ? (mode === 'edit' ? __('Saving…') : __('Creating…')) : (mode === 'edit' ? __('Save changes') : __('Create order'))}
            </Button>
          )}
        </div>
      </aside>
    </form>
  );
}

function isEmptyAddress(a: any) {
  if (!a) return true;
  const keys = ['first_name','last_name','address_1','city','state','postcode','country'];
  return keys.every(k => !a[k]);
}