'use client';

import { lazy, Suspense } from 'react';
import { HydratedIsland } from '@/components/HydratedIsland';
import { StatusBadge } from '@/components/ui/domain/StatusBadge';
import type { Locale } from '@/lib/i18n';
import { RETURN_STATUS_MAP, type ReturnStatus } from '@/features/returns/ReturnTimeline';
import { OpenReturnDialogIsland } from '@/features/returns/OpenReturnDialogIsland';
import type { PurchaseDetailProps } from './PurchaseDetail';
import type { ShipmentForCard } from '@/features/item-purchase/ItemPurchaseStateCard';

const PurchaseDetail = lazy(() =>
  import('./PurchaseDetail').then(({ PurchaseDetailInner: Component }) => ({ default: Component })),
);
const ItemPurchaseStateCard = lazy(() =>
  import('@/features/item-purchase/ItemPurchaseStateCard').then(
    ({ ItemPurchaseStateCard: Component }) => ({
      default: Component,
    }),
  ),
);
const PurchaseMessageThread = lazy(() =>
  import('./PurchaseMessageThread').then(({ PurchaseMessageThreadInner: Component }) => ({
    default: Component,
  })),
);

export interface PurchaseRouteIslandProps extends PurchaseDetailProps {
  shipment?: ShipmentForCard | null;
  openReturn?: { id: string; status: string } | null;
  returnEligible: boolean;
  returnIneligibleReason?: string | null;
  returnLabels: {
    viewReturn: string;
    openButton: string;
    getHelp: string;
    ineligibleWindow: string;
    ineligibleNotReturnable: string;
    ineligibleNotDelivered: string;
  };
  locale: Locale;
}

function PurchaseRouteContent({
  shipment,
  openReturn,
  returnEligible,
  returnIneligibleReason,
  returnLabels,
  purchaseId,
  ...purchaseProps
}: PurchaseRouteIslandProps) {
  return (
    <main id="main">
      <Suspense fallback={null}>
        <PurchaseDetail purchaseId={purchaseId} {...purchaseProps} />
      </Suspense>
      {shipment && (
        <div className="mx-auto mt-4 max-w-sm px-4">
          <Suspense fallback={null}>
            <ItemPurchaseStateCard shipment={shipment} purchaseId={purchaseId} />
          </Suspense>
        </div>
      )}
      <Suspense fallback={null}>
        <PurchaseMessageThread purchaseId={purchaseId} />
      </Suspense>
      {openReturn && (
        <section aria-label={returnLabels.viewReturn} className="mx-auto mt-4 max-w-sm px-4 pb-6">
          <a
            href={`/purchases/${purchaseId}/return`}
            className="border-border-default bg-surface-raised text-text-primary hover:bg-surface-subtle flex items-center justify-between gap-3 rounded-xl border px-4 py-3 transition-colors"
            aria-label={returnLabels.viewReturn}
          >
            <span className="text-sm font-medium">{returnLabels.viewReturn}</span>
            <StatusBadge
              state={openReturn.status as ReturnStatus}
              map={RETURN_STATUS_MAP}
              ns="returns"
            />
          </a>
        </section>
      )}
      {!openReturn && returnEligible && (
        <section aria-label={returnLabels.openButton} className="mx-auto mt-4 max-w-sm px-4 pb-6">
          <OpenReturnDialogIsland purchaseId={purchaseId} />
        </section>
      )}
      {!openReturn && !returnEligible && returnIneligibleReason && (
        <section aria-label={returnLabels.openButton} className="mx-auto mt-4 max-w-sm px-4 pb-2">
          <p className="text-text-muted text-sm">
            {returnIneligibleReason === 'window_passed' && returnLabels.ineligibleWindow}
            {returnIneligibleReason === 'not_returnable' && returnLabels.ineligibleNotReturnable}
            {returnIneligibleReason === 'not_delivered' && returnLabels.ineligibleNotDelivered}
          </p>
        </section>
      )}
      <section aria-label={returnLabels.getHelp} className="mx-auto mt-4 max-w-sm px-4 pb-6">
        <a
          href={`/support/tickets/new?purchaseId=${purchaseId}&agentDef=customer-support`}
          className="border-border-default bg-surface-raised text-text-primary hover:bg-surface-subtle flex items-center justify-center rounded-xl border px-4 py-3 text-sm font-medium transition-colors"
        >
          {returnLabels.getHelp}
        </a>
      </section>
    </main>
  );
}

export function PurchaseRouteIsland(props: PurchaseRouteIslandProps) {
  return (
    <HydratedIsland locale={props.locale}>
      <PurchaseRouteContent {...props} />
    </HydratedIsland>
  );
}