'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 type { Locale } from '@/lib/i18n';
import { RETURN_STATUS_MAP, type ReturnStatus, type ReturnTimelineEvent } from './ReturnTimeline';

const ReturnTimeline = lazy(() =>
  import('./ReturnTimeline').then(({ ReturnTimeline: Component }) => ({ default: Component })),
);
const AdminOverridePanel = lazy(() =>
  import('./AdminOverridePanel').then(({ AdminOverridePanel: Component }) => ({
    default: Component,
  })),
);

export interface AdminReturnRouteIslandProps {
  locale: Locale;
  returnId: string;
  status: ReturnStatus;
  details: { label: string; value: string; href?: string }[];
  photos: string[];
  timelineEvents: ReturnTimelineEvent[];
  photosTitle: string;
  photoAlt: string;
  detailSectionAria: string;
}

function AdminReturnRouteContent({
  returnId,
  status,
  details,
  photos,
  timelineEvents,
  photosTitle,
  photoAlt,
  detailSectionAria,
}: AdminReturnRouteIslandProps) {
  return (
    <div className="mx-auto flex max-w-4xl flex-col gap-6 px-4 py-8">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div className="flex flex-col gap-1">
          <p className="text-text-muted font-mono text-xs">{returnId}</p>
        </div>
        <StatusBadge
          state={status}
          map={RETURN_STATUS_MAP}
          ns="returns"
          enumName="return_status"
          audience="admin"
        />
      </div>
      <section
        aria-label={detailSectionAria}
        className="border-border-default bg-surface-base divide-border-subtle divide-y rounded-lg border"
      >
        {details.map(({ label, value, href }) => (
          <dl key={label} className="flex gap-4 px-4 py-3 text-sm">
            <dt className="text-text-secondary w-40 shrink-0 font-medium">{label}</dt>
            <dd className="text-text-primary break-all">
              {href ? (
                <a
                  href={href}
                  className="text-brand-primary-600 hover:text-brand-primary-800 font-mono text-xs underline-offset-2 hover:underline"
                >
                  {value}
                </a>
              ) : (
                value
              )}
            </dd>
          </dl>
        ))}
      </section>
      {photos.length > 0 && (
        <section aria-label={photosTitle} className="flex flex-col gap-3">
          <h2 className="text-text-secondary text-sm font-semibold">{photosTitle}</h2>
          <ul className="grid grid-cols-3 gap-3">
            {photos.map((src, index) => (
              <li key={src}>
                <a
                  href={src}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="border-border-default block overflow-hidden rounded-md border focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
                >
                  <Image
                    src={src}
                    alt={photoAlt.replace('{{n}}', String(index + 1))}
                    loading="lazy"
                    width={300}
                    height={300}
                    className="aspect-square w-full object-cover"
                  />
                </a>
              </li>
            ))}
          </ul>
        </section>
      )}
      <Suspense fallback={null}>
        <ReturnTimeline events={timelineEvents} currentStatus={status} audience="admin" />
      </Suspense>
      <Suspense fallback={null}>
        <AdminOverridePanel returnId={returnId} status={status} />
      </Suspense>
    </div>
  );
}

export function AdminReturnRouteIsland(props: AdminReturnRouteIslandProps) {
  return (
    <HydratedIsland locale={props.locale}>
      <AdminReturnRouteContent {...props} />
    </HydratedIsland>
  );
}