import { useCallback, useState } from 'react';
import { View, Text, Image } from '@tarojs/components';
import Taro, { useDidShow, useRouter } from '@tarojs/taro';
import PageShell from '../../components/PageShell';
import SubPageHeader from '../../components/SubPageHeader';
import { request, toast } from '../../lib/api';
import { getProductMainImage } from '../../lib/product-images';
import { confirmOrderReceive, type WechatConfirmPayload } from '../../lib/wechat-order-confirm';

const isWeapp = process.env.TARO_ENV === 'weapp';

type OrderDetail = {
  id: string;
  orderNo?: string;
  status?: string;
  payAmount?: number | string;
  productName?: string;
  productSpec?: string;
  quantity?: number;
  product?: {
    name?: string;
    spec?: string;
    mainImageUrl?: string | null;
    carouselUrls?: string[] | null;
  };
  items?: Array<{
    productName?: string;
    productSpec?: string;
    productImage?: string;
    quantity?: number;
  }>;
  imageUrl?: string | null;
  mainImageUrl?: string | null;
  wechatConfirm?: WechatConfirmPayload | null;
};

const ORDERS_ALL_URL = '/pages/orders/index?tab=all';

export default function PickupReceivePage() {
  const router = useRouter();
  const orderId = router.params.id ?? router.params.orderId ?? '';
  const [order, setOrder] = useState<OrderDetail | null>(null);
  const [loading, setLoading] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  const load = useCallback(() => {
    if (!orderId) return;
    setLoading(true);
    request<OrderDetail>(`/trade/orders/${orderId}`)
      .then((data) => setOrder(data))
      .catch((e) => toast(e instanceof Error ? e.message : '加载失败'))
      .finally(() => setLoading(false));
  }, [orderId]);

  useDidShow(() => {
    load();
  });

  async function confirmReceive() {
    if (!orderId || !order || submitting) return;

    if (isWeapp) {
      const { confirm } = await Taro.showModal({
        title: '确认收货？',
        content: '将打开微信确认收货，完成后订单即完结，无需再点服务通知。',
        confirmText: '确认收货',
        cancelText: '再想想',
      });
      if (!confirm) return;
    }

    setSubmitting(true);
    try {
      const mode = await confirmOrderReceive({
        orderId,
        wechatConfirm: order.wechatConfirm,
        onSitePickup: true,
        redirectUrl: ORDERS_ALL_URL,
        onLocalSuccess: async () => {
          toast('确认收货成功', 'success');
          setTimeout(() => {
            Taro.redirectTo({ url: ORDERS_ALL_URL });
          }, 500);
        },
      });
      if (mode === 'wechat') return;
    } catch (e) {
      toast(e instanceof Error ? e.message : '确认失败');
    } finally {
      setSubmitting(false);
    }
  }

  const item = order?.items?.[0];
  const name = item?.productName || order?.productName || order?.product?.name || '商品';
  const spec = item?.productSpec || order?.productSpec || order?.product?.spec;
  const image =
    (item?.productImage || '').trim() ||
    order?.mainImageUrl ||
    order?.imageUrl ||
    (order?.product ? getProductMainImage(order.product) : '') ||
    '';
  const amount = Number(order?.payAmount ?? 0);
  const canConfirm = order?.status === 'PENDING_RECEIVE' || order?.status === 'DELIVERED';

  return (
    <PageShell variant="sub" className="order-confirm-page" hasFixedFooter>
      <SubPageHeader title="确认收货" />
      <View className="sub-page-body">
        <View className="order-card">
          <Text className="order-card-title">现场取货</Text>
          <Text className="u-muted">请确认已在现场拿到商品后再点击确认收货</Text>
        </View>

        {loading && !order ? (
          <View className="order-card">
            <Text className="u-muted">加载中…</Text>
          </View>
        ) : null}

        {order ? (
          <>
            <View className="order-card">
              <View className="order-row">
                <Text className="order-row-label">订单号</Text>
                <Text className="order-row-value">{order.orderNo || '—'}</Text>
              </View>
              <View className="order-product-row" style={{ marginTop: 12 }}>
                <View className="order-product-thumb">
                  {image ? (
                    <Image className="order-product-thumb-img" src={image} mode="aspectFill" />
                  ) : null}
                </View>
                <View style={{ flex: 1 }}>
                  <Text className="order-product-name">{name}</Text>
                  {spec ? <Text className="u-muted">{spec}</Text> : null}
                  <Text className="u-muted">×{order.quantity ?? 1}</Text>
                </View>
              </View>
            </View>

            <View className="order-card">
              <View className="order-row">
                <Text className="order-row-label">实付金额</Text>
                <Text className="order-row-value order-pay-amount">
                  ¥{Number.isFinite(amount) ? amount.toFixed(2) : '—'}
                </Text>
              </View>
            </View>
          </>
        ) : null}
      </View>
      <View className="pay-bar">
        <View
          className="order-confirm-submit"
          style={{ flex: 1, opacity: canConfirm && !submitting ? 1 : 0.6 }}
          onClick={() => {
            if (!canConfirm || submitting) return;
            void confirmReceive();
          }}
        >
          <Text>{submitting ? '提交中…' : canConfirm ? '确认收货' : '订单状态不可确认'}</Text>
        </View>
      </View>
    </PageShell>
  );
}