'use client';
// apps/web/src/features/item-purchase/ShipmentTimeline.tsx
import type { ReactNode } from 'react';
import { Package, Truck, PackageCheck, Store, AlertCircle, XCircle } from 'lucide-react';
import { Image } from '@/components/ui/primitives/Image';
import { Button } from '@/components/ui/primitives/Button';
import { useT } from '@/lib/i18n/react';
import { formatDate, formatDateTime } from '@/lib/format';
import { interpolate } from '@/lib/i18n/interpolate';
import { getCsrfToken } from '@/lib/csrf';
import { shipmentNoteLabel } from './shipmentNoteLabel';
import type { ShipmentForTracking, TrackingEvent } from './types';
import type { ShipmentStatus } from './ItemPurchaseStateCard';

// ─── Happy-path order constants ───────────────────────────────────────────────

const SHIPPING_PATH: ShipmentStatus[] = [
  'pending',
  'awaiting_ship',
  'shipped',
  'in_transit',
  'out_for_delivery',
  'delivered',
  'confirmed',
];

const PICKUP_PATH: ShipmentStatus[] = [
  'pending',
  'awaiting_ship',
  'pickup_ready',
  'picked_up',
  'confirmed',
];

const TERMINAL: ShipmentStatus[] = ['failed_delivery', 'lost', 'cancelled'];

// ─── Helpers ──────────────────────────────────────────────────────────────────

function isTerminal(s: string): boolean {
  return (TERMINAL as string[]).includes(s);
}

function getPath(events: TrackingEvent[]): ShipmentStatus[] {
  return events.some((e) => e.toStatus === 'pickup_ready') ? PICKUP_PATH : SHIPPING_PATH;
}

function getFutureSteps(events: TrackingEvent[], path: ShipmentStatus[]): ShipmentStatus[] {
  const last = events[events.length - 1];
  if (!last || isTerminal(last.toStatus)) return [];
  const idx = path.indexOf(last.toStatus as ShipmentStatus);
  if (idx === -1) return [];
  return path.slice(idx + 1);
}

function statusIcon(status: string): ReactNode {
  switch (status) {
    case 'confirmed':
    case 'delivered':
    case 'picked_up':
      return <PackageCheck size={16} aria-hidden />;
    case 'shipped':
    case 'in_transit':
    case 'out_for_delivery':
      return <Truck size={16} aria-hidden />;
    case 'pickup_ready':
      return <Store size={16} aria-hidden />;
    case 'failed_delivery':
    case 'lost':
      return <AlertCircle size={16} aria-hidden />;
    case 'cancelled':
      return <XCircle size={16} aria-hidden />;
    default:
      return <Package size={16} aria-hidden />;
  }
}

// ─── Props ────────────────────────────────────────────────────────────────────

export interface ShipmentTimelineProps {
  shipment: ShipmentForTracking;
  events: TrackingEvent[];
  locale: 'he' | 'en';
  purchaseId?: string;
}

// ─── Component ────────────────────────────────────────────────────────────────

export function ShipmentTimeline({ shipment, events, locale, purchaseId }: ShipmentTimelineProps) {
  const t = useT('item_purchase');

  const visibleEvents = events.filter((e) => !(e.fromStatus && e.fromStatus === e.toStatus));

  const path = getPath(visibleEvents);
  const futureSteps = getFutureSteps(visibleEvents, path);

  const canConfirm = shipment.status === 'delivered' || shipment.status === 'out_for_delivery';
  const isTerminalFailure = ['failed_delivery', 'lost', 'cancelled'].includes(shipment.status);

  async function handleConfirm() {
    const res = await fetch(`/api/shipments/${shipment.id}/confirm-receipt`, {
      method: 'POST',
      headers: { 'x-csrf-token': getCsrfToken() },
    });
    if (res.ok) location.reload();
  }

  // Carrier label for the tracking CTA — dynamic key lookup via namespace object
  type ItemPurchaseKey = Parameters<typeof t>[0];
  const carrierKey = `carrier_${shipment.carrier}` as ItemPurchaseKey;
  const carrierLabel: string = shipment.carrier
    ? (t as (k: string) => string)(carrierKey) || t('track_with_carrier')
    : t('track_with_carrier');
  const trackCtaLabel = `${t('track_at_carrier_prefix')}${carrierLabel}`;

  // Source label
  function sourceLabel(source: string): string {
    const map: Record<string, string> = {
      system: t('timeline_source_system'),
      vendor: t('timeline_source_vendor'),
      buyer: t('timeline_source_buyer'),
      admin: t('timeline_source_admin'),
      carrier_webhook: t('timeline_source_carrier_webhook'),
      vendor_pickup: t('timeline_source_vendor_pickup'),
      cron: t('timeline_source_cron'),
    };
    return map[source] ?? t('timeline_source_system');
  }

  // Status label
  function statusLabel(toStatus: string): string {
    const key = `status_${toStatus}` as ItemPurchaseKey;
    return (t as (k: string) => string)(key) || toStatus;
  }

  return (
    <section
      aria-label={t('tracking_page_title')}
      className="border-border-default bg-surface-raised rounded-xl border px-4 py-4"
    >
      {/* Carrier tracking CTA — only render for safe http/https URLs */}
      {/^https?:\/\//i.test(shipment.trackingUrl ?? '') && (
        <a
          href={shipment.trackingUrl!}
          target="_blank"
          rel="noopener noreferrer"
          className="text-link mb-4 block text-sm underline"
        >
          {trackCtaLabel}
          {shipment.trackingNumber && (
            <span className="text-text-secondary ms-1">({shipment.trackingNumber})</span>
          )}
        </a>
      )}

      {/* Timeline */}
      <ol className="relative">
        {visibleEvents.map((event, idx) => {
          const isActive = idx === visibleEvents.length - 1 && !isTerminal(event.toStatus);
          const noteText = event.note ? shipmentNoteLabel(event.note, t) : null;
          const showAutoConfirm =
            event.toStatus === 'delivered' &&
            shipment.autoConfirmAt &&
            shipment.status === 'delivered';
          return (
            <li key={event.id} className="flex gap-3 pb-4 last:pb-0">
              {/* Connector + icon */}
              <div className="relative flex flex-col items-center">
                <span
                  className={[
                    'flex size-7 shrink-0 items-center justify-center rounded-full',
                    isActive
                      ? 'bg-brand-subtle text-brand-primary'
                      : 'bg-surface-subtle text-text-secondary',
                  ].join(' ')}
                >
                  {statusIcon(event.toStatus)}
                </span>
                {(idx < visibleEvents.length - 1 || futureSteps.length > 0) && (
                  <div
                    aria-hidden
                    className="border-border-default mt-1 flex-1 border-s-2"
                    style={{ minHeight: '1rem' }}
                  />
                )}
              </div>

              {/* Text */}
              <div className="pb-4">
                <p
                  className={[
                    'text-sm',
                    isActive ? 'text-text-primary font-medium' : 'text-text-secondary',
                  ].join(' ')}
                >
                  {statusLabel(event.toStatus)}
                </p>
                <p className="text-text-muted text-xs">
                  {formatDateTime(event.createdAt, locale)}
                  {' · '}
                  {sourceLabel(event.source)}
                </p>
                {noteText && <p className="text-text-secondary mt-1 text-xs">{noteText}</p>}
                {showAutoConfirm && (
                  <p className="text-text-secondary mt-1 text-xs">
                    {interpolate(t('auto_confirmed_on'), {
                      date: formatDate(shipment.autoConfirmAt!, locale),
                    })}
                  </p>
                )}
              </div>
            </li>
          );
        })}

        {/* Future faded steps */}
        {futureSteps.map((status, idx) => (
          <li key={status} className="flex gap-3 pb-4 opacity-40 last:pb-0">
            <div className="relative flex flex-col items-center">
              <span className="bg-surface-subtle text-text-secondary flex size-7 shrink-0 items-center justify-center rounded-full">
                {statusIcon(status)}
              </span>
              {idx < futureSteps.length - 1 && (
                <div
                  aria-hidden
                  className="border-border-default mt-1 flex-1 border-s-2"
                  style={{ minHeight: '1rem' }}
                />
              )}
            </div>
            <div className="pb-4">
              <p className="text-text-secondary text-sm">{statusLabel(status)}</p>
              <span className="sr-only">{t('upcoming_step')}</span>
            </div>
          </li>
        ))}
      </ol>

      {canConfirm && (
        <div className="mt-4 space-y-2">
          <Button variant="primary" size="md" onClick={handleConfirm} className="w-full">
            {t('confirm_receipt')}
          </Button>
          <p className="text-text-secondary text-xs">{t('confirm_receipt_helper')}</p>
        </div>
      )}

      {isTerminalFailure && purchaseId && (
        <div className="border-border-default mt-4 rounded-lg border p-3">
          <p className="text-text-secondary text-sm">{t('terminal_failure_helper')}</p>
          <a
            href={`/support/tickets/new?purchaseId=${purchaseId}&agentDef=customer-support`}
            className="text-link mt-2 inline-block text-sm font-medium underline"
          >
            {t('terminal_failure_cta')}
          </a>
        </div>
      )}

      {/* Pickup QR (if applicable) */}
      {shipment.status === 'pickup_ready' && shipment.pickupCode && (
        <div className="mt-4">
          <p className="text-text-secondary mb-2 text-sm">{t('pickup_instructions')}</p>
          <Image
            src={`/api/qr?data=${encodeURIComponent(shipment.pickupCode)}`}
            alt={t('pickup_qr_alt')}
            width={192}
            height={192}
            className="rounded-lg"
          />
        </div>
      )}
    </section>
  );
}