// @design-system: vendor/OrdersToShipList
// Vendor: list of pending outbound shipments with ship action and packing-slip download.

'use client';

import { useState, useEffect, useCallback } from 'react';
import { Card } from '@/components/ui/layout/Card';
import { Button } from '@/components/ui/primitives/Button';
import { Badge } from '@/components/ui/primitives/Badge';
import { ErrorState } from '@/components/ui/feedback/ErrorState/ErrorState';
import { formatDate } from '@/lib/format';
import { interpolate } from '@/lib/i18n/interpolate';
import { useLocale, useT } from '@/lib/i18n/react';
import { useToast } from '@/components/ui/overlays/Toast/useToast';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/overlays/Tooltip';
import { captureCaught } from '@/lib/observability';
import { ShipModal } from './ShipModal';
import { WoltDispatchButton } from './WoltDispatchButton';
import { VendorShell } from '@/components/ui/layout/VendorShell';
import { HydratedIsland } from '@/components/HydratedIsland';

// ─── Types ────────────────────────────────────────────────────────────────────

type ShipmentRow = {
  id: string;
  status: string;
  handleByAt: string;
  carrier: string | null;
  trackingNumber: string | null;
  trackingUrl: string | null;
  buyerId: string;
  preferredCarrier: string | null;
  dealTitleHe?: string | null;
  dealTitleEn?: string | null;
};

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

export function OrdersToShipList() {
  const t = useT('vendor_shipping');
  const { locale } = useLocale();
  const { toast } = useToast();
  const [orders, setOrders] = useState<ShipmentRow[]>([]);
  const [selected, setSelected] = useState<ShipmentRow | null>(null);
  const [loading, setLoading] = useState(true);
  const [isError, setIsError] = useState(false);

  const fetchOrders = useCallback(() => {
    setLoading(true);
    setIsError(false);
    fetch('/api/vendor/orders-to-ship')
      .then((r) => {
        if (!r.ok) throw new Error('fetch-failed');
        return r.json();
      })
      .then((data) => {
        setOrders((data as { rows: ShipmentRow[] }).rows);
        setLoading(false);
      })
      .catch((err) => {
        captureCaught(err, { scope: 'vendor/OrdersToShipList' });
        setIsError(true);
        setLoading(false);
      });
  }, []);

  useEffect(() => {
    void Promise.resolve().then(() => fetchOrders());
  }, [fetchOrders]);

  function onShipped(shipmentId: string) {
    setSelected(null);
    toast({
      title: interpolate(t('shipped_success'), { id: shipmentId.slice(0, 8) }),
      tone: 'success',
    });
    fetchOrders();
  }

  function isOverdue(handleByAt: string) {
    return new Date(handleByAt) < new Date();
  }

  return (
    <HydratedIsland>
      <VendorShell variant="dashboard" currentPath="/vendor/orders">
        <div className="flex flex-col gap-6 p-4 lg:p-6">
          {loading ? (
            <section aria-label={t('orders_list_label')}>
              <p className="text-text-muted text-sm">{t('loading_orders')}</p>
            </section>
          ) : isError ? (
            <ErrorState
              title={t('load_failed')}
              action={
                <Button variant="secondary" size="sm" onClick={fetchOrders}>
                  {t('retry')}
                </Button>
              }
            />
          ) : orders.length === 0 ? (
            <section aria-label={t('orders_list_label')}>
              <p className="text-text-muted text-sm">{t('no_pending_orders')}</p>
            </section>
          ) : (
            <section aria-label={t('orders_list_label')}>
              <ul className="flex flex-col gap-4">
                {orders.map((o) => {
                  const overdue = isOverdue(o.handleByAt);
                  const dealTitle =
                    (locale === 'en' ? o.dealTitleEn : o.dealTitleHe) ||
                    o.dealTitleHe ||
                    o.dealTitleEn;
                  return (
                    <li key={o.id}>
                      <Card padding="md">
                        <div className="flex items-start justify-between gap-4">
                          <div className="flex flex-col gap-1">
                            <p className="text-sm font-medium">
                              {t('order_id').replace('{{id}}', o.id.slice(0, 8))}
                            </p>
                            {dealTitle ? (
                              <p className="text-text-secondary text-sm">
                                <span className="text-text-muted">{t('item_label')}: </span>
                                {dealTitle}
                              </p>
                            ) : null}
                            <Badge tone={overdue ? 'danger' : 'info'} size="sm">
                              {overdue
                                ? t('overdue')
                                : t('due').replace('{{at}}', formatDate(o.handleByAt, locale))}
                            </Badge>
                          </div>
                          <TooltipProvider>
                            <div className="flex items-center gap-2">
                              <Button variant="ghost" size="sm" asChild>
                                <a
                                  href={`/api/vendor/shipments/${o.id}/packing-slip`}
                                  download
                                  aria-label={t('packing_slip_aria')}
                                >
                                  {t('packing_slip')}
                                </a>
                              </Button>
                              {o.preferredCarrier === 'wolt_drive' ? (
                                <>
                                  <Tooltip>
                                    <TooltipTrigger asChild>
                                      <span>
                                        <WoltDispatchButton
                                          shipmentId={o.id}
                                          existingTrackingNumber={o.trackingNumber}
                                          existingTrackingUrl={o.trackingUrl}
                                          onDispatched={fetchOrders}
                                          variant="primary"
                                        />
                                      </span>
                                    </TooltipTrigger>
                                    <TooltipContent>{t('wolt_dispatch_tooltip')}</TooltipContent>
                                  </Tooltip>
                                  <Tooltip>
                                    <TooltipTrigger asChild>
                                      <Button
                                        variant="ghost"
                                        size="sm"
                                        onClick={() => setSelected(o)}
                                        aria-label={t('ship_aria').replace(
                                          '{{id}}',
                                          o.id.slice(0, 8),
                                        )}
                                      >
                                        {t('ship_action')}
                                      </Button>
                                    </TooltipTrigger>
                                    <TooltipContent>
                                      {t('ship_manual_fallback_tooltip')}
                                    </TooltipContent>
                                  </Tooltip>
                                </>
                              ) : (
                                <Button
                                  size="sm"
                                  onClick={() => setSelected(o)}
                                  aria-label={t('ship_aria').replace('{{id}}', o.id.slice(0, 8))}
                                >
                                  {t('ship_action')}
                                </Button>
                              )}
                            </div>
                          </TooltipProvider>
                        </div>
                      </Card>
                    </li>
                  );
                })}
              </ul>
              {selected && (
                <ShipModal
                  shipment={selected}
                  onClose={() => setSelected(null)}
                  onShipped={() => onShipped(selected.id)}
                />
              )}
            </section>
          )}
        </div>
      </VendorShell>
    </HydratedIsland>
  );
}