'use client';

import { useQuery } from '@tanstack/react-query';
import Link from 'next/link';
import { useState } from 'react';
import type { OrderDetail } from '@alqove/api-client';
import { api } from '@/lib/api';
import { useAuthStore } from '@/stores/auth';
import { useSelectedStoreId } from '@/lib/stores/store-context';
import { OrderStatusBadge } from '@/components/seller/order-status-badge';
import { ShipByCell } from '@/components/seller/ship-by-cell';
import { OrderTimeline } from '@/components/seller/order-timeline';
import { ShippingPanel } from '@/components/seller/shipping-panel';
import { CancelOrderDialog } from '@/components/seller/cancel-order-dialog';
import { MessageThread } from '@/components/messaging/message-thread';
import { SellerReturnsPanel } from '@/components/seller/seller-returns-panel';
import { ProactiveRefundModal } from '@/components/seller/proactive-refund-modal';

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

export function OrderDetailClient({ orderId }: { orderId: string }) {
  const storeId = useSelectedStoreId();
  const sellerUserId = useAuthStore((s) => s.user?.id ?? null);
  const { data, isLoading, isError } = useQuery({
    queryKey: ['seller-order', storeId, orderId],
    enabled: !!storeId,
    queryFn: () => api.orders.get(storeId!, orderId),
  });

  if (isLoading) return <div className="p-8 text-sm text-ink/60">Loading…</div>;
  if (isError || !data) return <div className="p-8 text-sm text-terracotta">Failed to load order.</div>;
  const order: OrderDetail = data.data;

  const canCancel = ['pending', 'processing'].includes(order.status);
  const buyer = [order.buyer?.first_name, order.buyer?.last_name].filter(Boolean).join(' ') || '—';
  const addr = order.shipping_address;
  const total = order.subtotal + order.shipping_cost;

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <Link href="/seller/orders" className="text-sm text-ink/60 hover:text-ink">← Orders</Link>
          <h1 className="mt-1 font-mono text-2xl font-bold text-ink">Order {order.id.slice(0, 8)}…</h1>
          <div className="mt-2 flex items-center gap-2 text-sm text-ink/70">
            <OrderStatusBadge status={order.status} />
            <span>·</span>
            <span>Placed {new Date(order.created_at).toLocaleDateString()}</span>
          </div>
        </div>
        {canCancel && <CancelOrderDialog storeId={storeId!} orderId={order.id} />}
      </div>

      <div className="grid grid-cols-1 gap-6 lg:grid-cols-[1fr_360px]">
        <section className="rounded-md border border-forest/20 bg-white p-5">
          <h2 className="text-sm font-semibold uppercase tracking-wide text-ink/60">Order summary</h2>
          <ul className="mt-3 divide-y divide-forest/10">
            {order.items.map((it) => (
              <li key={it.id} className="flex items-center gap-3 py-3">
                <OrderItemThumb src={it.image_url_snapshot} />
                <div className="flex-1 text-sm">
                  <div className="text-ink">{it.title_snapshot}</div>
                  <div className="text-ink/60">{formatDollars(it.price_snapshot)}</div>
                </div>
              </li>
            ))}
          </ul>
          <dl className="mt-4 space-y-1 text-sm">
            <Row label="Subtotal" value={formatDollars(order.subtotal)} />
            <Row label="Shipping" value={formatDollars(order.shipping_cost)} />
            <Row label="Total" value={formatDollars(total)} strong />
          </dl>
        </section>

        <section className="rounded-md border border-forest/20 bg-white p-5">
          <h2 className="text-sm font-semibold uppercase tracking-wide text-ink/60">Buyer &amp; shipping</h2>
          <p className="mt-3 text-sm text-ink">{buyer}</p>
          {addr && (
            <p className="mt-1 whitespace-pre-line text-sm text-ink/70">
              {[addr.street, `${addr.city ?? ''}, ${addr.state ?? ''} ${addr.zip ?? ''}`].filter(Boolean).join('\n')}
            </p>
          )}
          <div className="mt-4 text-sm">
            <span className="text-ink/60">Ship by: </span>
            <ShipByCell shipBy={order.ship_by} status={order.status} />
          </div>
        </section>
      </div>

      <section className="rounded-md border border-forest/20 bg-white p-5">
        <h2 className="text-sm font-semibold uppercase tracking-wide text-ink/60">Shipping label</h2>
        <div className="mt-3">
          <ShippingPanel storeId={storeId!} order={order} />
        </div>
      </section>

      <section className="rounded-md border border-forest/20 bg-white p-5">
        <h2 className="text-sm font-semibold uppercase tracking-wide text-ink/60">Timeline</h2>
        <div className="mt-3">
          <OrderTimeline order={order} />
        </div>
      </section>

      <section
        id="messages"
        className="rounded-md border border-forest/20 bg-white p-5"
      >
        <h2 className="text-sm font-semibold uppercase tracking-wide text-ink/60">
          Messages
        </h2>
        <p className="mt-1 text-xs text-ink/60">
          Conversation with the buyer about this order.
        </p>
        <div className="mt-3">
          {sellerUserId && (
            <MessageThread
              orderId={order.id}
              counterpartyName={buyer}
              viewerRole="seller"
              viewerUserId={sellerUserId}
            />
          )}
        </div>
      </section>

      {order.open_return_id ? (
        <section className="rounded-md border border-forest/20 bg-white p-5">
          <h2 className="text-sm font-semibold uppercase tracking-wide text-ink/60">
            Return
          </h2>
          <div className="mt-3">
            <SellerReturnsPanel openReturnId={order.open_return_id} />
          </div>
        </section>
      ) : (
        <ProactiveRefundSection order={order} />
      )}

      {order.shipped_at && <PayoutPanel order={order} />}
    </div>
  );
}

function ProactiveRefundSection({ order }: { order: OrderDetail }) {
  const [open, setOpen] = useState(false);
  return (
    <section className="rounded-md border border-forest/20 bg-white p-5">
      <h2 className="text-sm font-semibold uppercase tracking-wide text-ink/60">
        Refunds
      </h2>
      <p className="mt-1 text-xs text-ink/60">
        Issue a refund to the buyer without waiting for them to file a return.
      </p>
      <div className="mt-3">
        <button
          type="button"
          onClick={() => setOpen(true)}
          className="rounded-md border border-forest/20 px-3 py-1.5 text-sm text-ink hover:bg-bone/40"
        >
          Issue refund
        </button>
      </div>
      <ProactiveRefundModal
        orderId={order.id}
        items={order.items}
        shippingCost={order.shipping_cost}
        open={open}
        onClose={() => setOpen(false)}
      />
    </section>
  );
}

function PayoutPanel({ order }: { order: { transfer_status?: string; stripe_transfer_id?: string | null } }) {
  const status = order.transfer_status ?? 'not_required';
  return (
    <section className="rounded-md border border-forest/20 bg-white p-5">
      <h2 className="text-sm font-semibold uppercase tracking-wide text-ink/60">Payout</h2>
      <div className="mt-3 text-sm">
        {status === 'succeeded' && (
          <p className="text-ink/70">
            Payout transferred —{' '}
            <span className="font-mono text-xs text-ink/60">{order.stripe_transfer_id}</span>
          </p>
        )}
        {status === 'pending_reconciliation' && (
          <p className="rounded bg-amber-50 p-3 text-xs text-amber-800">
            <strong>Payout pending reconciliation.</strong> The order shipped but
            the platform&apos;s payout to your Connect account didn&apos;t complete
            on the first attempt. Our team is reconciling — you don&apos;t need to
            do anything; the funds will land within 1–2 business days.
          </p>
        )}
      </div>
    </section>
  );
}

function OrderItemThumb({ src }: { src?: string | null }) {
  const [broken, setBroken] = useState(false);
  if (!src || broken) return <div className="h-12 w-12 rounded bg-bone" />;
  // eslint-disable-next-line @next/next/no-img-element
  return <img src={src} alt="" onError={() => setBroken(true)} className="h-12 w-12 rounded object-cover" />;
}

function Row({ label, value, strong }: { label: string; value: string; strong?: boolean }) {
  return (
    <div className="flex justify-between">
      <dt className="text-ink/60">{label}</dt>
      <dd className={strong ? 'font-semibold text-ink' : 'text-ink'}>{value}</dd>
    </div>
  );
}