import React, { useMemo, useState } from 'react';
import { QRCodeSVG } from 'qrcode.react';
import momImage from '../assets/mom.jpg';
import dadImage from '../assets/dad.jpg';
import {
  IonButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonIcon,
  IonPage,
  IonSkeletonText,
  IonTitle,
  IonToolbar,
  useIonViewWillEnter,
} from '@ionic/react';
import {
  callOutline,
  cashOutline,
  chevronBackOutline,
  flashOutline,
  medkitOutline,
  paperPlaneOutline,
  phonePortraitOutline,
  repeatOutline,
  shareOutline,
  storefrontOutline,
} from 'ionicons/icons';
import basketIcon from '../assets/basket.png';
import { useHistory, useParams } from 'react-router-dom';
import { supabase } from '../supabase';
import { useAuth } from '../contexts/AuthContext';
import '../styles/support.css';

type Params = { id: string };

type Merchant = {
  id: string;
  name: string;
  branch_name: string | null;
  city: string;
  country: string;
};

type RecipientSummary = {
  first_name: string;
  last_name: string;
  city: string;
  country: string;
  mobile_number?: string | null;
  photo_path?: string | null;
};

type OrderDetail = {
  id: string;
  service_type: string;
  amount: number;
  platform_fee: number;
  total_amount: number;
  currency: string;
  status: string;
  network: string | null;
  meter_number: string | null;
  payment_method: string | null;
  created_at: string;
  recipient_id: string;
  merchant_id: string | null;
  recipients?: RecipientSummary | null;
  merchants?: Merchant | null;
};

type VoucherRedemption = {
  id: string;
  redeemed_amount: number | null;
  redeemed_at: string | null;
  merchant_id: string | null;
  merchant_name?: string | null;
};

type Voucher = {
  id: string;
  voucher_code: string;
  status: string;
  expires_at: string;
  redeemed_at: string | null;
  redeemed_merchant_id: string | null;
  voucher_redemptions?: VoucherRedemption[] | null;
};

const previewUserId = '00000000-0000-0000-0000-000000000000';

type ServiceTheme = {
  icon?: string;
  iconImageSrc?: string;
  headerIcon?: string;
  headerIconImageSrc?: string;
  iconClassName: string;
  cardClassName: string;
  accent: string;
  soft: string;
  label: string;
  explicitTitle: string;
};

const getServiceTheme = (type: string): ServiceTheme => {
  if (type === 'medication') {
    return {
      icon: medkitOutline,
      headerIcon: medkitOutline,
      iconClassName: 'support-service-image support-service-image-medication',
      cardClassName: 'order-service-card order-service-card-medication',
      accent: '#16a34a',
      soft: 'rgba(22, 163, 74, 0.1)',
      label: 'Medication voucher',
      explicitTitle: 'Medication support',
    };
  }

  if (type === 'airtime') {
    return {
      icon: phonePortraitOutline,
      headerIcon: phonePortraitOutline,
      iconClassName: 'support-service-icon-vector',
      cardClassName: 'order-service-card order-service-card-airtime',
      accent: '#2563eb',
      soft: 'rgba(37, 99, 235, 0.1)',
      label: 'Airtime & Data',
      explicitTitle: 'Airtime support',
    };
  }

  if (type === 'electricity') {
    return {
      icon: flashOutline,
      headerIcon: flashOutline,
      iconClassName: 'support-service-icon-vector',
      cardClassName: 'order-service-card order-service-card-electricity',
      accent: '#d97706',
      soft: 'rgba(245, 158, 11, 0.12)',
      label: 'Electricity',
      explicitTitle: 'Electricity support',
    };
  }

  return {
    iconImageSrc: basketIcon,
    headerIcon: storefrontOutline,
    headerIconImageSrc: basketIcon,
    iconClassName:
      'support-service-image support-service-image-grocery order-detail-basket-image',
    cardClassName: 'order-service-card order-service-card-grocery',
    accent: '#6d28d9',
    soft: 'rgba(109, 40, 217, 0.1)',
    label: 'Grocery voucher',
    explicitTitle: 'Grocery support',
  };
};

const isVoucherService = (serviceType: string) =>
  serviceType === 'grocery' || serviceType === 'medication';

const getDisplayStatus = (
  order: OrderDetail | null,
  voucher: Voucher | null
) => {
  if (!order) return 'Created';
  const combinedStatus = `${order.status} ${voucher?.status ?? ''}`
    .toLowerCase()
    .replace(/_/g, ' ');

  if (isVoucherService(order.service_type)) {
    if (combinedStatus.includes('partial')) return 'Partially';
    if (
      combinedStatus.includes('redeemed') ||
      voucher?.redeemed_at ||
      voucher?.redeemed_merchant_id ||
      (voucher?.voucher_redemptions?.length ?? 0) > 0
    ) {
      return 'Redeemed';
    }
    return 'Created';
  }

  if (
    combinedStatus.includes('completed') ||
    combinedStatus.includes('delivered') ||
    combinedStatus.includes('active')
  ) {
    return 'Completed';
  }

  return 'Created';
};

const formatMoney = (amount: number, currency = 'USD') =>
  new Intl.NumberFormat(undefined, {
    style: 'currency',
    currency: currency || 'USD',
  }).format(amount);

const formatDateTime = (dateString: string | null) => {
  if (!dateString) return '—';
  const date = new Date(dateString);
  const day = date.getDate();
  const month = date.toLocaleString('en-GB', { month: 'short' });
  const year = date.getFullYear();
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  return `${day} ${month} ${year}, ${hours}:${minutes}`;
};

const getMerchantDisplayName = (merchant?: Merchant | null) => {
  if (!merchant) return null;
  return `${merchant.name}${merchant.branch_name ? ` ${merchant.branch_name}` : ''}`;
};

const getSeededRecipientImage = (
  firstName?: string | null,
  photoPath?: string | null
) => {
  const normalizedPath = photoPath?.trim().toLowerCase();
  if (normalizedPath === 'mom.jpg' || normalizedPath === 'mum.jpg') {
    return momImage;
  }
  if (normalizedPath === 'dad.jpg' || normalizedPath === 'father.jpg') {
    return dadImage;
  }

  const normalizedName = firstName?.trim().toLowerCase();
  if (normalizedName === 'mum' || normalizedName === 'mom') return momImage;
  if (normalizedName === 'dad' || normalizedName === 'father') return dadImage;
  return undefined;
};

const getRecipientAvatarUrl = async (recipient?: RecipientSummary | null) => {
  if (!recipient) return undefined;

  const seededImage = getSeededRecipientImage(
    recipient.first_name,
    recipient.photo_path
  );
  if (seededImage) return seededImage;

  if (!recipient.photo_path) return undefined;

  const { data } = await supabase.storage
    .from('recipient-photos')
    .createSignedUrl(recipient.photo_path, 3600);

  return data?.signedUrl;
};

const getInitials = (name: string) =>
  name
    .split(' ')
    .map((part) => part.charAt(0))
    .join('')
    .slice(0, 2)
    .toUpperCase();

const getMerchantLabel = (
  order: OrderDetail | null,
  voucher: Voucher | null,
  merchantsById: Map<string, Merchant>
) => {
  const latestRedemption = [...(voucher?.voucher_redemptions ?? [])].sort(
    (a, b) =>
      new Date(b.redeemed_at ?? 0).getTime() -
      new Date(a.redeemed_at ?? 0).getTime()
  )[0];

  if (latestRedemption?.merchant_name) return latestRedemption.merchant_name;

  const redemptionMerchant = latestRedemption?.merchant_id
    ? merchantsById.get(latestRedemption.merchant_id)
    : null;
  const voucherMerchant = voucher?.redeemed_merchant_id
    ? merchantsById.get(voucher.redeemed_merchant_id)
    : null;
  const orderMerchant =
    order?.merchants ??
    (order?.merchant_id ? merchantsById.get(order.merchant_id) : null);

  return (
    getMerchantDisplayName(redemptionMerchant) ??
    getMerchantDisplayName(voucherMerchant) ??
    getMerchantDisplayName(orderMerchant)
  );
};

const OrderDetailPage: React.FC = () => {
  const { id } = useParams<Params>();
  const history = useHistory();
  const { user } = useAuth();
  const [order, setOrder] = useState<OrderDetail | null>(null);
  const [voucher, setVoucher] = useState<Voucher | null>(null);
  const [voucherLoadState, setVoucherLoadState] = useState<
    'idle' | 'loaded' | 'missing' | 'error'
  >('idle');
  const [voucherError, setVoucherError] = useState<string | null>(null);
  const [voucherRedemptions, setVoucherRedemptions] = useState<
    VoucherRedemption[]
  >([]);
  const [merchantsById, setMerchantsById] = useState<Map<string, Merchant>>(
    () => new Map()
  );
  const [loading, setLoading] = useState(true);
  const [message, setMessage] = useState<string | null>(null);
  const [recipientAvatarUrl, setRecipientAvatarUrl] = useState<string | null>(
    null
  );

  const recipientName = order?.recipients
    ? `${order.recipients.first_name} ${order.recipients.last_name}`
    : 'Loved one';
  const recipientLocation = order?.recipients
    ? `${order.recipients.city}, ${order.recipients.country}`
    : '—';
  const serviceTheme = getServiceTheme(order?.service_type ?? 'grocery');
  const serviceName = order ? serviceTheme.label : 'Support';
  const explicitServiceTitle = order
    ? serviceTheme.explicitTitle
    : 'Support summary';
  const voucherWithRedemptions = voucher
    ? { ...voucher, voucher_redemptions: voucherRedemptions }
    : null;
  const displayStatus = getDisplayStatus(order, voucherWithRedemptions);
  const merchantLabel = getMerchantLabel(
    order,
    voucherWithRedemptions,
    merchantsById
  );
  const latestRedemption = [...voucherRedemptions].sort(
    (a, b) =>
      new Date(b.redeemed_at ?? 0).getTime() -
      new Date(a.redeemed_at ?? 0).getTime()
  )[0];
  const createdOnLabel = order ? formatDateTime(order.created_at) : '—';
  const redeemedOnLabel = latestRedemption?.redeemed_at
    ? formatDateTime(latestRedemption.redeemed_at)
    : null;
  const supportRouteRows = useMemo(
    () => [
      { label: 'Recipient', value: recipientName },
      { label: 'Location', value: recipientLocation },
      ...(order?.recipients?.mobile_number
        ? [{ label: 'Mobile number', value: order.recipients.mobile_number }]
        : []),
      { label: 'Created on', value: createdOnLabel },
      ...(merchantLabel
        ? [
            {
              label:
                order?.service_type === 'grocery' ||
                order?.service_type === 'medication'
                  ? 'Merchant'
                  : 'Provider',
              value: merchantLabel,
            },
          ]
        : []),
      ...(redeemedOnLabel
        ? [{ label: 'Redeemed on', value: redeemedOnLabel }]
        : []),
      ...(order?.network ? [{ label: 'Network', value: order.network }] : []),
      ...(order?.meter_number
        ? [{ label: 'Meter number', value: order.meter_number }]
        : []),
    ],
    [
      createdOnLabel,
      merchantLabel,
      order?.meter_number,
      order?.network,
      order?.recipients?.mobile_number,
      order?.service_type,
      recipientLocation,
      recipientName,
      redeemedOnLabel,
    ]
  );

  const showVoucherArtifact = order
    ? isVoucherService(order.service_type)
    : false;

  const voucherQrValue = useMemo(() => {
    if (!order || !voucher || !isVoucherService(order.service_type)) {
      return null;
    }

    const partnerGroup =
      order.service_type === 'grocery' ? 'grocery' : 'pharmacy';

    return JSON.stringify({
      type: 'kumusha-voucher',
      voucherId: voucher.id,
      voucherCode: voucher.voucher_code,
      supportType: order.service_type,
      supportLabel: serviceName,
      recipientName,
      partnerGroup,
      status: displayStatus,
      expiresAt: voucher.expires_at,
    });
  }, [displayStatus, order, recipientName, serviceName, voucher]);

  const voucherRedeemCopy = useMemo(() => {
    if (!order || !showVoucherArtifact) return '';
    return `Voucher redeemable at Kumusha ${
      order.service_type === 'grocery' ? 'grocery' : 'pharmacy'
    } partners.`;
  }, [order, showVoucherArtifact]);

  useIonViewWillEnter(() => {
    void loadOrderDetail();
  });

  const showMessage = (text: string) => {
    setMessage(text);
    setTimeout(() => setMessage(null), 4000);
  };

  const loadOrderDetail = async () => {
    setLoading(true);
    setMessage(null);
    setVoucherLoadState('idle');
    setVoucherError(null);

    const activeUserId = user?.id ?? previewUserId;

    let orderResult = await supabase
      .from('support_orders')
      .select(
        'id,service_type,amount,platform_fee,total_amount,currency,status,network,meter_number,payment_method,created_at,recipient_id,merchant_id,recipients(first_name,last_name,city,country,mobile_number,photo_path),merchants(id,name,branch_name,city,country)'
      )
      .eq('id', id)
      .eq('user_id', activeUserId)
      .maybeSingle();

    if (!orderResult.error && !orderResult.data && user?.id) {
      orderResult = await supabase
        .from('support_orders')
        .select(
          'id,service_type,amount,platform_fee,total_amount,currency,status,network,meter_number,payment_method,created_at,recipient_id,merchant_id,recipients(first_name,last_name,city,country,mobile_number,photo_path),merchants(id,name,branch_name,city,country)'
        )
        .eq('id', id)
        .eq('user_id', previewUserId)
        .maybeSingle();
    }

    if (orderResult.error || !orderResult.data) {
      showMessage(orderResult.error?.message ?? 'Order not found');
      setOrder(null);
      setVoucher(null);
      setVoucherRedemptions([]);
      setLoading(false);
      return;
    }

    const nextOrder = orderResult.data as unknown as OrderDetail;

    const [voucherResult, merchantsResult, redemptionsResult] =
      await Promise.all([
        supabase
          .from('vouchers')
          .select(
            'id,voucher_code,status,expires_at,redeemed_at,redeemed_merchant_id'
          )
          .eq('order_id', id)
          .maybeSingle(),
        supabase.from('merchants').select('id,name,branch_name,city,country'),
        supabase
          .from('voucher_redemptions')
          .select('id,redeemed_amount,redeemed_at,merchant_id')
          .eq('order_id', id),
      ]);

    if (voucherResult.error) {
      setVoucherLoadState('error');
      setVoucherError(voucherResult.error.message);
    } else if (
      !voucherResult.data &&
      isVoucherService(nextOrder.service_type)
    ) {
      setVoucherLoadState('missing');
    } else if (voucherResult.data) {
      setVoucherLoadState('loaded');
    }

    let nextRedemptions = (redemptionsResult.data ?? []) as VoucherRedemption[];

    // If order-based redemptions are empty but we have a voucher, check by voucher_id
    if (nextRedemptions.length === 0 && voucherResult.data) {
      const fallbackRedemptions = await supabase
        .from('voucher_redemptions')
        .select('id,redeemed_amount,redeemed_at,merchant_id')
        .eq('voucher_id', voucherResult.data.id);
      if (fallbackRedemptions.data) {
        nextRedemptions = fallbackRedemptions.data as VoucherRedemption[];
      }
    }

    if (merchantsResult.error || redemptionsResult.error) {
      showMessage(
        merchantsResult.error?.message ||
          redemptionsResult.error?.message ||
          'Some order details could not be loaded'
      );
    }

    setOrder(nextOrder);
    setVoucher((voucherResult.data ?? null) as Voucher | null);
    setVoucherRedemptions(nextRedemptions);
    setMerchantsById(
      new Map(
        ((merchantsResult.data ?? []) as Merchant[]).map((merchant) => [
          merchant.id,
          merchant,
        ])
      )
    );

    const nextAvatarUrl = await getRecipientAvatarUrl(
      nextOrder.recipients ?? null
    );
    setRecipientAvatarUrl(nextAvatarUrl ?? null);
    setLoading(false);
  };

  const handleShare = async () => {
    const text = voucher
      ? `Kumusha voucher ${voucher.voucher_code}`
      : `Kumusha order ${id}`;
    if (navigator.share) {
      await navigator.share({ text });
    } else {
      await navigator.clipboard.writeText(text);
      showMessage('Copied to clipboard');
    }
  };

  return (
    <IonPage style={{ backgroundColor: '#fafafa' }}>
      <IonHeader className="ion-no-border">
        <IonToolbar
          style={
            {
              '--background': '#fafafa',
              '--border-width': '0px',
            } as React.CSSProperties
          }
        >
          <IonButtons slot="start">
            <IonButton
              fill="clear"
              onClick={() =>
                history.length > 1
                  ? history.goBack()
                  : history.replace('/activity')
              }
              aria-label="Go back"
            >
              <IonIcon icon={chevronBackOutline} slot="icon-only" />
            </IonButton>
          </IonButtons>
          <IonTitle
            className="ion-text-center support-summary-toolbar-title"
            style={{ fontSize: 23, fontWeight: 700 }}
          >
            <span>{explicitServiceTitle}</span>
          </IonTitle>
          {voucher && (
            <IonButtons slot="end">
              <IonButton
                fill="clear"
                onClick={handleShare}
                aria-label="Share order"
              >
                <IonIcon icon={shareOutline} slot="icon-only" />
              </IonButton>
            </IonButtons>
          )}
        </IonToolbar>
      </IonHeader>

      <IonContent
        style={
          {
            '--background': '#fafafa',
            '--padding-bottom': '40px',
          } as React.CSSProperties
        }
      >
        {loading ? (
          <div className="order-status-summary">
            <IonSkeletonText
              animated
              style={{ width: 64, height: 64, borderRadius: 20 }}
            />
            <IonSkeletonText animated style={{ width: '55%', height: 20 }} />
          </div>
        ) : order ? (
          <>
            {message && (
              <p
                style={{ margin: '12px 20px', color: '#6d28d9', fontSize: 13 }}
              >
                {message}
              </p>
            )}
            <div
              className="order-status-summary order-status-summary-modern"
              style={
                {
                  '--service-accent': serviceTheme.accent,
                  '--service-soft': serviceTheme.soft,
                } as React.CSSProperties
              }
            >
              <div className="order-status-summary-glow" />
              <div className="order-status-summary-topline">
                <span
                  className="order-status-badge"
                  style={{
                    background: serviceTheme.soft,
                    color: serviceTheme.accent,
                  }}
                >
                  {displayStatus}
                </span>
                <span className="order-status-recipient">
                  Support for {recipientName}
                </span>
              </div>

              <div className="order-status-summary-core order-status-summary-core-refined">
                <div className="order-status-summary-hero-copy">
                  <p className="order-status-summary-label">Support type</p>
                  <div className="order-status-summary-title-row order-status-summary-title-row-refined">
                    <div
                      className={`order-status-summary-service-badge order-status-summary-service-badge-large ${serviceTheme.cardClassName}`}
                    >
                      {serviceTheme.iconImageSrc ? (
                        <img
                          src={serviceTheme.iconImageSrc}
                          alt=""
                          className={serviceTheme.iconClassName}
                        />
                      ) : (
                        <IonIcon
                          icon={serviceTheme.icon}
                          className={serviceTheme.iconClassName}
                        />
                      )}
                    </div>
                    <div className="order-status-summary-title-copy">
                      <h1 className="oss-title">{serviceName}</h1>
                    </div>
                  </div>
                  <p className="oss-subtitle">
                    {displayStatus === 'Redeemed' && merchantLabel
                      ? `Redeemed at ${merchantLabel}`
                      : order?.service_type === 'grocery'
                        ? 'Ready to use at participating grocery merchants'
                        : order?.service_type === 'medication'
                          ? 'Ready to use at participating medication merchants'
                          : 'Successfully delivered to recipient'}
                  </p>
                </div>

                <div className="order-status-summary-hero-art">
                  <div className="order-detail-recipient-hero-avatar-shell">
                    {recipientAvatarUrl ? (
                      <img
                        src={recipientAvatarUrl}
                        alt={recipientName}
                        className="order-detail-recipient-hero-avatar"
                      />
                    ) : (
                      <div className="order-detail-recipient-hero-avatar-fallback">
                        {getInitials(recipientName)}
                      </div>
                    )}
                    <div
                      className={`order-detail-recipient-hero-badge ${serviceTheme.cardClassName}`}
                    >
                      {serviceTheme.iconImageSrc ? (
                        <img
                          src={serviceTheme.iconImageSrc}
                          alt=""
                          className={serviceTheme.iconClassName}
                        />
                      ) : (
                        <IonIcon
                          icon={serviceTheme.icon}
                          className={serviceTheme.iconClassName}
                        />
                      )}
                    </div>
                  </div>
                </div>
              </div>

              <div className="order-status-summary-finance-row">
                <div className="order-status-summary-finance-block">
                  <span className="order-status-summary-finance-label">
                    Total paid
                  </span>
                  <strong>
                    {formatMoney(Number(order.total_amount), order.currency)}
                  </strong>
                </div>
                <div className="order-status-summary-finance-divider" />
                <div className="order-status-summary-finance-block align-end">
                  <span className="order-status-summary-finance-label">
                    Support amount
                  </span>
                  <strong>
                    {formatMoney(Number(order.amount), order.currency)}
                  </strong>
                </div>
              </div>
            </div>

            <div
              className="order-detail-card order-detail-card-modern"
              style={
                {
                  '--service-accent': serviceTheme.accent,
                  '--service-soft': serviceTheme.soft,
                } as React.CSSProperties
              }
            >
              <div className="order-detail-section-header modern order-detail-section-header-summary">
                <div>
                  <p className="order-detail-section-kicker">Order summary</p>
                  <h2 className="order-detail-section-title">
                    Payment and support details
                  </h2>
                </div>
              </div>

              {showVoucherArtifact &&
                voucherLoadState !== 'missing' &&
                voucherLoadState !== 'error' && (
                  <div className="order-detail-inline-voucher-slot">
                    <div className="order-detail-inline-voucher-body">
                      <div className="order-detail-inline-voucher-frame">
                        {voucherQrValue ? (
                          <QRCodeSVG
                            value={voucherQrValue}
                            size={252}
                            level="M"
                            marginSize={1}
                            bgColor="#ffffff"
                            fgColor="#171827"
                          />
                        ) : (
                          <IonSkeletonText
                            animated
                            style={{
                              width: '100%',
                              height: '100%',
                              borderRadius: 16,
                            }}
                          />
                        )}
                      </div>

                      <div className="order-detail-inline-voucher-copy">
                        <p className="order-detail-inline-voucher-code-label">
                          Voucher code
                        </p>
                        <p className="order-detail-inline-voucher-code">
                          {voucher ? voucher.voucher_code : '...'}
                        </p>
                      </div>
                    </div>

                    <div className="order-detail-inline-voucher-footer">
                      <button
                        type="button"
                        className="order-detail-inline-voucher-share"
                        onClick={handleShare}
                        aria-label="Send voucher to recipient"
                      >
                        <IonIcon icon={paperPlaneOutline} />
                      </button>
                    </div>
                  </div>
                )}

              <div className="order-detail-receipt-block">
                <div className="money-breakdown-list order-detail-breakdown modern">
                  <div className="mbl-row">
                    <span>Support amount</span>
                    <strong>
                      {formatMoney(Number(order.amount), order.currency)}
                    </strong>
                  </div>
                  <div className="mbl-row">
                    <span>Platform fee</span>
                    <strong>
                      {formatMoney(Number(order.platform_fee), order.currency)}
                    </strong>
                  </div>
                  <div className="mbl-row total">
                    <span>Total paid</span>
                    <strong>
                      {formatMoney(Number(order.total_amount), order.currency)}
                    </strong>
                  </div>
                </div>
              </div>
            </div>

            <div className="order-detail-card order-detail-card-route">
              <div className="order-detail-section-header modern compact">
                <div>
                  <p className="order-detail-section-kicker">Support route</p>
                  <h2 className="order-detail-section-title">
                    Who received it and where
                  </h2>
                </div>
              </div>

              <div className="order-detail-list modern-route-list">
                {supportRouteRows.map((row) => (
                  <div className="order-detail-list-row" key={row.label}>
                    <span>{row.label}</span>
                    <strong>{row.value}</strong>
                  </div>
                ))}
              </div>
            </div>

            <IonButton
              expand="block"
              onClick={() =>
                history.push('/support/new', {
                  recipientId: order.recipient_id,
                  serviceType: order.service_type,
                })
              }
              className={`order-detail-send-again-button order-tone-${order.service_type}`}
              style={
                {
                  margin: '4px 20px 20px',
                  '--border-radius': '999px',
                  '--box-shadow': 'none',
                  minHeight: '52px',
                  fontWeight: 700,
                } as React.CSSProperties
              }
            >
              <span
                className="order-detail-send-again-button__icon"
                aria-hidden="true"
              >
                {serviceTheme.iconImageSrc ? (
                  <img
                    src={serviceTheme.iconImageSrc}
                    alt=""
                    className="home-custom-icon is-basket"
                  />
                ) : (
                  <IonIcon icon={serviceTheme.icon ?? repeatOutline} />
                )}
              </span>
              <span className="order-detail-send-again-button__label">
                Send again
              </span>
            </IonButton>
          </>
        ) : null}
      </IonContent>
    </IonPage>
  );
};

export default OrderDetailPage;
