'use client';

import { lazy, Suspense } from 'react';
import { HydratedIsland } from '@/components/HydratedIsland';
import { StatusBadge } from '@/components/ui/domain/StatusBadge';
import { Image } from '@/components/ui/primitives/Image/Image';
import { useT } from '@/lib/i18n/react';
import type { Locale } from '@/lib/i18n';
import { RETURN_STATUS_MAP, type ReturnStatus, type ReturnTimelineEvent } from './ReturnTimeline';
import type { ReturnPolicy } from './ReturnPolicyCard';

const TrackingEntryForm = lazy(() =>
  import('./TrackingEntryFormIsland').then(({ TrackingEntryFormIsland: Component }) => ({
    default: Component,
  })),
);
const ReturnTimeline = lazy(() =>
  import('./ReturnTimeline').then(({ ReturnTimeline: Component }) => ({ default: Component })),
);
const ReturnPolicyCard = lazy(() =>
  import('./ReturnPolicyCard').then(({ ReturnPolicyCard: Component }) => ({ default: Component })),
);
const CancelReturnButton = lazy(() =>
  import('./CancelReturnButtonIsland').then(({ CancelReturnButtonIsland: Component }) => ({
    default: Component,
  })),
);

type ReturnAddress = {
  line1: string;
  line2?: string | null;
  city: string;
  postal?: string | null;
  country?: string | null;
};

export interface ReturnDetailRouteIslandProps {
  locale: Locale;
  purchaseId: string;
  returnId: string;
  shortId: string;
  status: ReturnStatus;
  vendorName?: string | null;
  returnAddress?: ReturnAddress | null;
  trackingNumber?: string | null;
  refundAmountAgorot: number;
  refundAmountLabel: string;
  timelineEvents: ReturnTimelineEvent[];
  policy?: ReturnPolicy | null;
  photos: { cfImageId: string }[];
  returnForDealLine?: string | null;
  respondByNote?: string | null;
  shipByNote?: string | null;
  statusHelp?: string | null;
}

function ReturnDetailRouteContent(props: ReturnDetailRouteIslandProps) {
  const t = useT('returns');
  const {
    purchaseId,
    returnId,
    shortId,
    status,
    vendorName,
    returnAddress,
    refundAmountAgorot,
    refundAmountLabel,
    timelineEvents,
    policy,
    photos,
    returnForDealLine,
    respondByNote,
    shipByNote,
    statusHelp,
  } = props;

  return (
    <main id="main" className="bg-surface-base min-h-screen">
      <div className="mx-auto max-w-sm space-y-6 px-4 py-6">
        <header className="flex items-start justify-between gap-3">
          <div>
            <a
              href={`/purchases/${purchaseId}`}
              className="text-text-secondary hover:text-text-primary mb-1 block text-sm transition-colors"
              aria-label={t('back_to_purchase_label')}
            >
              {t('back_to_purchase_link')}
            </a>
            <h1 className="text-text-primary text-xl font-extrabold">
              {t('returnDetailTitle')} #{shortId}
            </h1>
            {returnForDealLine && (
              <p className="text-text-secondary mt-1 text-sm">{returnForDealLine}</p>
            )}
          </div>
          <div className="flex flex-col items-end gap-1">
            <StatusBadge state={status} map={RETURN_STATUS_MAP} ns="returns" />
            {statusHelp && (
              <p className="text-text-muted max-w-[10rem] text-end text-xs">{statusHelp}</p>
            )}
          </div>
        </header>
        {respondByNote && (
          <p className="text-text-secondary bg-surface-subtle rounded-xl px-4 py-3 text-sm">
            {respondByNote}
          </p>
        )}
        {refundAmountAgorot > 0 && (
          <section className="border-border-default bg-surface-raised rounded-xl border px-4 py-3">
            <div className="flex items-center justify-between gap-2 text-sm">
              <span className="text-text-secondary">{t('refundAmountLabel')}</span>
              <span className="text-text-primary font-semibold">{refundAmountLabel}</span>
            </div>
          </section>
        )}
        {returnAddress && (
          <section
            aria-label={t('shipToLabel')}
            className="border-border-default bg-surface-raised rounded-xl border p-4"
          >
            <h2 className="text-text-primary mb-2 text-sm font-semibold">{t('shipToLabel')}</h2>
            <address className="text-text-secondary space-y-0.5 text-sm not-italic">
              <div>{vendorName}</div>
              <div>{returnAddress.line1}</div>
              {returnAddress.line2 && <div>{returnAddress.line2}</div>}
              <div>
                {returnAddress.city}
                {returnAddress.postal ? ` ${returnAddress.postal}` : ''}
              </div>
              {returnAddress.country && <div>{returnAddress.country}</div>}
            </address>
          </section>
        )}
        {status === 'approved' && !props.trackingNumber && (
          <section className="space-y-3">
            {shipByNote && (
              <p className="text-text-secondary bg-surface-subtle rounded-xl px-4 py-3 text-sm">
                {shipByNote}
              </p>
            )}
            <Suspense fallback={null}>
              <TrackingEntryForm returnId={returnId} />
            </Suspense>
          </section>
        )}
        {timelineEvents.length > 0 && (
          <Suspense fallback={null}>
            <ReturnTimeline events={timelineEvents} currentStatus={status} />
          </Suspense>
        )}
        {policy && (
          <Suspense fallback={null}>
            <ReturnPolicyCard policy={policy} />
          </Suspense>
        )}
        {status === 'requested' && (
          <Suspense fallback={null}>
            <CancelReturnButton returnId={returnId} purchaseId={purchaseId} />
          </Suspense>
        )}
        {photos.length > 0 && (
          <section aria-label={t('photosTitle')}>
            <h2 className="text-text-primary mb-3 text-sm font-semibold">{t('photosTitle')}</h2>
            <ul className="grid grid-cols-3 gap-2">
              {photos.map((photo, index) => (
                <li key={photo.cfImageId}>
                  <Image
                    src={photo.cfImageId}
                    alt={t('detailPhotosAlt').replace('{{n}}', String(index + 1))}
                    variant="card"
                    width={120}
                    height={120}
                    loading="lazy"
                    className="aspect-square w-full rounded-lg object-cover"
                  />
                </li>
              ))}
            </ul>
          </section>
        )}
      </div>
    </main>
  );
}

export function ReturnDetailRouteIsland(props: ReturnDetailRouteIslandProps) {
  return (
    <HydratedIsland locale={props.locale}>
      <ReturnDetailRouteContent {...props} />
    </HydratedIsland>
  );
}