'use client';

/**
 * ItemPurchaseStateCard — buyer-facing shipment status panel.
 *
 * Renders shipment status badge, tracking number, pickup QR code,
 * and confirm-receipt CTA for ITEM deal purchases.
 */

import { Badge } from '@/components/ui/primitives/Badge';
import { Button } from '@/components/ui/primitives/Button';
import { Image } from '@/components/ui/primitives/Image';
import { useT } from '@/lib/i18n/react';
import { interpolate } from '@/lib/i18n/interpolate';
import { formatDate } from '@/lib/format';
import { useLocale } from '@/lib/i18n/react';
import { getCsrfToken } from '@/lib/csrf';
import type { BadgeProps } from '@/components/ui/primitives/Badge';
import type { StringBundle } from '@/lib/i18n';
import type { ShipmentStatus } from '@/lib/enums/shipment-status';

export type { ShipmentStatus };

export type ShipmentForCard = {
  id: string;
  status: ShipmentStatus;
  carrier: string | null;
  trackingNumber: string | null;
  trackingUrl: string | null;
  deliveredAt: string | null;
  autoConfirmAt: string | null;
  pickupCode: string | null;
};

export interface ItemPurchaseStateCardProps {
  shipment: ShipmentForCard;
  purchaseId: string;
}

function statusTone(status: ShipmentStatus): BadgeProps['tone'] {
  switch (status) {
    case 'confirmed':
    case 'delivered':
    case 'picked_up':
      return 'success';
    case 'failed_delivery':
    case 'lost':
      return 'danger';
    case 'cancelled':
      return 'danger';
    case 'out_for_delivery':
    case 'in_transit':
    case 'shipped':
      return 'info';
    case 'pickup_ready':
      return 'brand';
    case 'pending':
    case 'awaiting_ship':
    default:
      return 'neutral';
  }
}

type StatusKey = keyof StringBundle['item_purchase'];

function statusKey(status: ShipmentStatus): StatusKey {
  const map: Record<ShipmentStatus, StatusKey> = {
    pending: 'status_pending',
    awaiting_ship: 'status_awaiting_ship',
    shipped: 'status_shipped',
    in_transit: 'status_in_transit',
    out_for_delivery: 'status_out_for_delivery',
    delivered: 'status_delivered',
    pickup_ready: 'status_pickup_ready',
    picked_up: 'status_picked_up',
    confirmed: 'status_confirmed',
    failed_delivery: 'status_failed_delivery',
    lost: 'status_lost',
    cancelled: 'status_cancelled',
  };
  return map[status];
}

export function ItemPurchaseStateCard({ shipment, purchaseId }: ItemPurchaseStateCardProps) {
  const t = useT('item_purchase');
  const { locale } = useLocale();

  const canConfirm = shipment.status === 'delivered';

  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();
    }
  }

  return (
    <section
      aria-label={t('title')}
      className="border-border-default bg-surface-raised rounded-xl border px-4 py-4"
    >
      <h2 className="text-text-primary mb-3 text-base font-semibold">{t('title')}</h2>

      <div aria-live="polite">
        <Badge tone={statusTone(shipment.status)}>{t(statusKey(shipment.status))}</Badge>
      </div>

      {shipment.trackingNumber && (
        <p className="text-text-secondary mt-3 text-sm">
          <span className="font-medium">{t('tracking')}:</span> {shipment.trackingNumber}
        </p>
      )}

      {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>
      )}

      {canConfirm && (
        <>
          <p className="text-text-muted mt-3 text-xs">{t('confirm_receipt_helper')}</p>
          <Button
            variant="primary"
            size="md"
            className="mt-3"
            onClick={handleConfirm}
            aria-label={t('confirm_receipt')}
          >
            {t('confirm_receipt')}
          </Button>
        </>
      )}

      {shipment.autoConfirmAt && shipment.status === 'delivered' && (
        <p className="text-text-secondary mt-2 text-xs">
          {interpolate(t('auto_confirmed_on'), {
            date: formatDate(shipment.autoConfirmAt, locale),
          })}
        </p>
      )}

      <a
        href={`/purchases/${purchaseId}/tracking`}
        className="text-link mt-3 block text-sm underline"
      >
        {t('view_timeline')}
      </a>
    </section>
  );
}