'use client';

import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useMemo, useState } from 'react';
import type { OrderDetail, LabelRateOption } from '@alqove/api-client';
import { api } from '@/lib/api';

function formatDollars(c: number) { return `$${(c / 100).toFixed(2)}`; }

export function ShippingPanel({ storeId, order }: { storeId: string; order: OrderDetail }) {
  const qc = useQueryClient();

  if (order.status === 'shipped' || order.status === 'delivered') {
    return (
      <div className="flex flex-wrap items-center gap-4 text-sm">
        <span className="text-ink/70">Shipped via {order.carrier} {order.service}</span>
        {order.tracking_url && (
          <a href={order.tracking_url} target="_blank" rel="noreferrer" className="text-forest underline">
            Track: {order.tracking_number}
          </a>
        )}
        {order.shipping_label_url && (
          <a href={order.shipping_label_url} target="_blank" rel="noreferrer" className="text-forest underline">
            Re-print label
          </a>
        )}
      </div>
    );
  }

  if (order.status === 'cancelled' || order.status === 'refunded') {
    return <div className="text-sm text-ink/60">Order is cancelled — no label required.</div>;
  }

  return (
    <ReadyToShip
      storeId={storeId}
      order={order}
      onPurchased={() => qc.invalidateQueries({ queryKey: ['seller-order', storeId, order.id] })}
    />
  );
}

function ReadyToShip({
  storeId,
  order,
  onPurchased,
}: {
  storeId: string;
  order: OrderDetail;
  onPurchased: () => void;
}) {
  const presetsQ = useQuery({
    queryKey: ['parcel-presets', storeId],
    queryFn: () => api.stores.parcelPresets.list(storeId),
  });

  const presets = useMemo(
    () => presetsQ.data?.data ?? [],
    [presetsQ.data],
  );
  const defaultPresetId = useMemo(() => {
    if (!presets.length) return '';
    const def = presets.find((p) => p.is_default) ?? presets[0];
    return def.id;
  }, [presets]);
  const [presetIdOverride, setPresetIdOverride] = useState<string>('');
  const presetId = presetIdOverride || defaultPresetId;

  const previewQ = useQuery({
    queryKey: ['label-preview', storeId, order.id, presetId],
    enabled: !!presetId,
    queryFn: () => api.orders.previewLabel(storeId, order.id, { parcel_preset_id: presetId }),
  });

  const rates = useMemo<LabelRateOption[]>(
    () => previewQ.data?.data ?? [],
    [previewQ.data],
  );
  const [rateIdOverride, setRateIdOverride] = useState<string>('');
  const rateId = rateIdOverride || (rates[0]?.id ?? '');

  const buyMut = useMutation({
    mutationFn: () =>
      api.orders.buyLabel(storeId, order.id, { parcel_preset_id: presetId }),
    onSuccess: onPurchased,
  });

  if (presetsQ.isLoading) return <div className="text-sm text-ink/60">Loading presets…</div>;
  if (presetsQ.isError) return <div className="text-sm text-terracotta">Failed to load parcel presets.</div>;
  if (presets.length === 0) {
    return <div className="text-sm text-ink/70">No parcel presets yet. Create one in Settings → Shipping.</div>;
  }

  const selectedRate = rates.find((r) => r.id === rateId);

  return (
    <div className="space-y-3 text-sm">
      <div className="flex flex-wrap items-end gap-3">
        <label className="flex flex-col">
          <span className="mb-1 text-xs uppercase tracking-wide text-ink/60">Parcel preset</span>
          <select
            value={presetId}
            onChange={(e) => setPresetIdOverride(e.target.value)}
            className="rounded border border-forest/20 bg-white px-2 py-1.5"
          >
            {presets.map((p) => (
              <option key={p.id} value={p.id}>{p.name}{p.is_default ? ' (default)' : ''}</option>
            ))}
          </select>
        </label>
        <label className="flex flex-col">
          <span className="mb-1 text-xs uppercase tracking-wide text-ink/60">Service</span>
          <select
            value={rateId}
            onChange={(e) => setRateIdOverride(e.target.value)}
            disabled={previewQ.isLoading || rates.length === 0}
            className="rounded border border-forest/20 bg-white px-2 py-1.5"
          >
            {rates.map((r) => (
              <option key={r.id} value={r.id}>
                {r.carrier} {r.service} — {formatDollars(r.amount_cents)}
              </option>
            ))}
          </select>
        </label>
        {selectedRate && (
          <div className="text-ink/70">
            Est. cost: <span className="font-semibold text-ink">{formatDollars(selectedRate.amount_cents)}</span>
            {selectedRate.estimated_days != null && <> · {selectedRate.estimated_days} days</>}
          </div>
        )}
      </div>

      <div className="flex items-center gap-3">
        <button
          onClick={() => buyMut.mutate()}
          disabled={buyMut.isPending || !presetId}
          className="rounded bg-forest px-4 py-2 text-sm font-semibold text-white hover:bg-forest/90 disabled:opacity-50"
        >
          {buyMut.isPending ? 'Purchasing…' : 'Buy label'}
        </button>
        {buyMut.isError && <span className="text-sm text-terracotta">Purchase failed. Try again.</span>}
      </div>

      <p className="text-xs text-ink/50">
        Note: buying the label always uses the carrier&apos;s cheapest available rate. The preview above helps you estimate.
      </p>
    </div>
  );
}