"use client";

import { useState } from "react";
import { FLOCK_UI } from "@/lib/flock/ui-labels";
import type { FlockDisplayLine } from "@/modules/flock/quote-storage";
import type {
  FlockCarrierOption,
  FlockCheckoutTier,
  FlockFlexibilityKey,
  FlockFlexibilityOption,
  FlockPricingOptionsType,
} from "@/lib/flock/flock-checkout-selection";
import { flockFlexibilityKeyLabel } from "@/lib/flock/flock-checkout-selection";
import { ErrorBanner } from "@/components/ui/error-banner";
import { LoadingSpinner } from "@/components/ui/loading-spinner";

export type FlockLoggedInQuoteSidebarStep = "select" | "details";

export type FlockFlexibilityByTier = Partial<
  Record<FlockCheckoutTier, FlockFlexibilityOption[]>
>;

export type FlockCarriersByTier = Partial<
  Record<FlockCheckoutTier, FlockCarrierOption[]>
>;

export interface FlockLoggedInQuoteSidebarProps {
  lines: FlockDisplayLine[];
  reference?: string | null;
  /** 首价同步的两侧灵活性价 */
  flexibilityByTier?: FlockFlexibilityByTier;
  /** 首价同步的承运商列表（Standard LTL） */
  carriersByTier?: FlockCarriersByTier;
  selectedTier: FlockCheckoutTier | null;
  selectedFlexibility?: FlockFlexibilityKey | null;
  selectedCarrier?: string | null;
  flexBusy?: boolean;
  flexMessage?: string | null;
  checkoutBusy?: boolean;
  checkoutMessage?: string | null;
  /** 已确认继续填写二级（或无 hold）后可结账 */
  detailsUnlocked?: boolean;
  onSelectTier: (tier: FlockCheckoutTier) => void;
  onSelectFlexibility: (key: FlockFlexibilityKey) => void;
  onSelectCarrier: (carrierName: string) => void;
  onCheckout: () => void;
  onReset?: () => void;
}

function formatUsd(n: number): string {
  return n.toLocaleString("en-US", {
    style: "currency",
    currency: "USD",
    maximumFractionDigits: 0,
  });
}

function formatUsdExact(n: number): string {
  return n.toLocaleString("en-US", {
    style: "currency",
    currency: "USD",
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });
}

function FeatureRow({
  ok,
  text,
}: {
  ok: boolean;
  text: string;
}) {
  return (
    <li className="flex gap-2 text-sm leading-snug text-text-primary">
      <span
        className={
          "mt-0.5 shrink-0 text-base font-bold " +
          (ok ? "text-emerald-600" : "text-text-disabled")
        }
        aria-hidden
      >
        {ok ? "✓" : "×"}
      </span>
      <span className={ok ? "" : "text-text-secondary"}>{text}</span>
    </li>
  );
}

function PricingOptionsModal({
  tier,
  reference,
  optionsType,
  options,
  carrierOptions,
  selectedFlexibility,
  selectedCarrier,
  busy,
  message,
  onClose,
  onSelectFlexibility,
  onSelectCarrier,
}: {
  tier: FlockCheckoutTier;
  reference?: string | null;
  optionsType: FlockPricingOptionsType;
  options: FlockFlexibilityOption[];
  carrierOptions: FlockCarrierOption[];
  selectedFlexibility?: FlockFlexibilityKey | null;
  selectedCarrier?: string | null;
  busy?: boolean;
  message?: string | null;
  onClose: () => void;
  onSelectFlexibility: (key: FlockFlexibilityKey) => void;
  onSelectCarrier: (carrierName: string) => void;
}) {
  const tierName =
    tier === "flock_direct" ? FLOCK_UI.directName : FLOCK_UI.standardName;
  const isCarriers = optionsType === "carriers";
  const empty =
    !busy &&
    (isCarriers ? carrierOptions.length === 0 : options.length === 0);

  return (
    <div
      className="fixed inset-0 z-[60] flex items-center justify-center bg-black/45 p-4"
      role="dialog"
      aria-modal="true"
      aria-labelledby="flock-pricing-options-title"
      data-testid="flock-pricing-options-modal"
    >
      <div className="max-h-[90vh] w-full max-w-3xl overflow-y-auto rounded-xl border border-border bg-white shadow-xl">
        <div className="border-b border-border px-5 py-4">
          <h2
            id="flock-pricing-options-title"
            className="text-base font-semibold text-text-primary"
          >
            {reference
              ? `#${reference} ${FLOCK_UI.pricingOptionsHeading}`
              : FLOCK_UI.pricingOptionsHeading}
          </h2>
          <button
            type="button"
            onClick={onClose}
            className="mt-3 text-sm font-medium text-text-primary underline-offset-2 hover:underline"
            data-testid="flock-pricing-go-back"
          >
            ← {FLOCK_UI.goBackToShipping}
          </button>
        </div>

        <div className="space-y-4 px-5 py-5">
          <h3 className="text-lg font-semibold text-text-primary">
            {isCarriers
              ? FLOCK_UI.selectPreferredCarrier
              : FLOCK_UI.isPickupFlexible}
          </h3>
          {!isCarriers ? (
            <div className="rounded-md bg-[#1a1a1a] px-4 py-2.5 text-sm font-semibold text-white">
              {tierName}
            </div>
          ) : null}

          {busy ? (
            <div className="flex items-center gap-2 rounded-md border border-border bg-surface px-3 py-4 text-sm text-text-secondary">
              <LoadingSpinner />
              {message ||
                (isCarriers
                  ? "正在加载承运商报价…"
                  : "正在加载灵活性报价…")}
            </div>
          ) : null}

          {empty ? (
            <p className="text-sm text-error">
              {message ||
                (isCarriers
                  ? "暂无承运商报价，请稍后重试"
                  : "暂无该档灵活性报价，请稍后重试")}
            </p>
          ) : null}

          {!busy && !isCarriers && options.length > 0 ? (
            <div className="overflow-hidden rounded-lg border border-border">
              <div className="grid grid-cols-[1.3fr_1.2fr_1fr_auto] gap-2 border-b border-border bg-surface px-3 py-2 text-[11px] font-medium uppercase tracking-wide text-text-secondary">
                <span>{FLOCK_UI.flexColFlexibility}</span>
                <span>{FLOCK_UI.flexColPickup}</span>
                <span>{FLOCK_UI.flexColDeliver}</span>
                <span className="text-right">{FLOCK_UI.flexColRate}</span>
              </div>
              <ul className="divide-y divide-border">
                {options.map((opt) => {
                  const active = selectedFlexibility === opt.key;
                  return (
                    <li key={opt.key}>
                      <button
                        type="button"
                        data-testid={`flock-flex-option-${opt.key}`}
                        onClick={() => onSelectFlexibility(opt.key)}
                        className={
                          "grid w-full grid-cols-[1.3fr_1.2fr_1fr_auto] items-center gap-2 px-3 py-3.5 text-left text-sm transition " +
                          (active
                            ? "bg-emerald-50 ring-1 ring-inset ring-emerald-400"
                            : "hover:bg-surface")
                        }
                      >
                        <span className="flex items-center gap-2 font-medium text-text-primary">
                          <span
                            className={
                              "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full border " +
                              (active
                                ? "border-emerald-600 bg-emerald-600"
                                : "border-border bg-white")
                            }
                            aria-hidden
                          >
                            {active ? (
                              <span className="h-1.5 w-1.5 rounded-full bg-white" />
                            ) : null}
                          </span>
                          {flockFlexibilityKeyLabel(opt.key)}
                        </span>
                        <span className="text-text-secondary">
                          {opt.pickupWindow || "—"}
                        </span>
                        <span className="text-text-secondary">
                          {opt.deliverBy || "—"}
                        </span>
                        <span className="justify-self-end font-bold tabular-nums text-text-primary">
                          {formatUsdExact(opt.rateUsd)}
                        </span>
                      </button>
                    </li>
                  );
                })}
              </ul>
            </div>
          ) : null}

          {!busy && isCarriers && carrierOptions.length > 0 ? (
            <div className="overflow-hidden rounded-lg border border-border">
              <div className="grid grid-cols-[1.6fr_1fr_1fr_1fr_auto_auto] gap-2 border-b border-border bg-surface px-3 py-2 text-[11px] font-medium uppercase tracking-wide text-text-secondary">
                <span>{FLOCK_UI.carrierColName}</span>
                <span>{FLOCK_UI.carrierColTransit}</span>
                <span>{FLOCK_UI.carrierColPickup}</span>
                <span>{FLOCK_UI.carrierColDeliver}</span>
                <span className="text-right">{FLOCK_UI.carrierColRate}</span>
                <span className="sr-only">{FLOCK_UI.carrierSelect}</span>
              </div>
              <ul className="divide-y divide-border" data-testid="flock-carrier-list">
                {carrierOptions.map((opt) => {
                  const active = selectedCarrier === opt.carrierName;
                  return (
                    <li key={`${opt.carrierName}-${opt.rateUsd}`}>
                      <button
                        type="button"
                        data-testid={`flock-carrier-option-${opt.carrierName}`}
                        onClick={() => onSelectCarrier(opt.carrierName)}
                        className={
                          "grid w-full grid-cols-[1.6fr_1fr_1fr_1fr_auto_auto] items-center gap-2 px-3 py-3.5 text-left text-sm transition " +
                          (active
                            ? "bg-emerald-50 ring-1 ring-inset ring-emerald-400"
                            : "hover:bg-surface")
                        }
                      >
                        <span className="font-medium text-text-primary">
                          {opt.carrierName}
                        </span>
                        <span className="text-text-secondary">
                          {opt.transitDays || "—"}
                        </span>
                        <span className="text-text-secondary">
                          {opt.pickupDate || "—"}
                        </span>
                        <span className="text-text-secondary">
                          {opt.deliveryEstimate || "—"}
                        </span>
                        <span className="justify-self-end font-bold tabular-nums text-text-primary">
                          {formatUsdExact(opt.rateUsd)}
                        </span>
                        <span className="justify-self-end text-xs font-semibold text-text-primary">
                          {FLOCK_UI.carrierSelect} →
                        </span>
                      </button>
                    </li>
                  );
                })}
              </ul>
            </div>
          ) : null}
        </div>
      </div>
    </div>
  );
}

/** 右栏：对齐官网 — 双卡「查看报价选项」→ 弹窗选灵活价或承运商 */
export function FlockLoggedInQuoteSidebar({
  lines,
  reference,
  flexibilityByTier = {},
  carriersByTier = {},
  selectedTier,
  selectedFlexibility = null,
  selectedCarrier = null,
  flexBusy = false,
  flexMessage = null,
  checkoutBusy = false,
  checkoutMessage = null,
  detailsUnlocked = false,
  onSelectTier,
  onSelectFlexibility,
  onSelectCarrier,
  onCheckout,
  onReset,
}: FlockLoggedInQuoteSidebarProps) {
  const [pricingModalTier, setPricingModalTier] =
    useState<FlockCheckoutTier | null>(null);

  const direct = lines.find((l) => l.tier === "flock_direct");
  const standard = lines.find((l) => l.tier === "standard");
  const selectedFlexOptions =
    (selectedTier && flexibilityByTier[selectedTier]) || [];
  const selectedCarrierOptions =
    (selectedTier && carriersByTier[selectedTier]) || [];
  const selectedFlex = selectedFlexOptions.find(
    (o) => o.key === selectedFlexibility,
  );
  const selectedCarrierOpt = selectedCarrierOptions.find(
    (o) => o.carrierName === selectedCarrier,
  );
  const checkoutAmount =
    selectedFlex?.rateUsd ??
    selectedCarrierOpt?.rateUsd ??
    (selectedTier === "flock_direct"
      ? direct?.final_total_usd
      : selectedTier === "standard"
        ? standard?.final_total_usd
        : undefined);

  const hasSelection = Boolean(selectedFlexibility || selectedCarrier);
  const canCheckout =
    detailsUnlocked && !!selectedTier && hasSelection && !checkoutBusy;

  const openPricing = (tier: FlockCheckoutTier) => {
    onSelectTier(tier);
    setPricingModalTier(tier);
  };

  const modalFlexOptions =
    pricingModalTier != null
      ? (flexibilityByTier[pricingModalTier] ?? [])
      : [];
  const modalCarrierOptions =
    pricingModalTier != null
      ? (carriersByTier[pricingModalTier] ?? [])
      : [];
  const modalOptionsType: FlockPricingOptionsType =
    modalCarrierOptions.length > 0 && modalFlexOptions.length === 0
      ? "carriers"
      : "flexibility";

  return (
    <aside className="space-y-4">
      <div className="flex flex-wrap items-end justify-between gap-2">
        <div>
          <h2 className="text-lg font-semibold text-text-primary">
            {reference
              ? `#${reference} ${FLOCK_UI.pricingOptionsHeading}`
              : FLOCK_UI.resultTitle}
          </h2>
          <p className="mt-1 text-xs text-text-secondary">
            {FLOCK_UI.selectShippingBelow}
          </p>
        </div>
        {onReset ? (
          <button
            type="button"
            onClick={onReset}
            className="rounded-md border border-border bg-surface px-3 py-1.5 text-sm text-text-primary"
          >
            {FLOCK_UI.buildAnother}
          </button>
        ) : null}
      </div>

      <div className="grid gap-3 sm:grid-cols-2">
        {direct ? (
          <article
            className="flex flex-col overflow-hidden rounded-xl border border-border bg-white shadow-card"
            data-testid="flock-tier-card-flock_direct"
          >
            <div className="bg-[#1a1a1a] px-4 py-3">
              <h3 className="text-base font-semibold text-white">
                {FLOCK_UI.directName}
              </h3>
            </div>
            <div className="flex flex-1 flex-col gap-3 p-4">
              <p className="text-sm text-text-secondary">
                {FLOCK_UI.pricesFrom}{" "}
                <span className="text-xl font-bold text-text-primary">
                  {formatUsd(direct.final_total_usd)}
                </span>
              </p>
              <p className="text-sm text-text-secondary">
                {FLOCK_UI.transit}
                <span className="ml-1 font-semibold text-text-primary">
                  {direct.transitDescription || direct.transitDays}
                </span>
              </p>
              <ul className="space-y-2">
                {FLOCK_UI.directFeatures.map((t) => (
                  <FeatureRow key={t} ok text={t} />
                ))}
              </ul>
              <div className="rounded-md border border-sky-200 bg-sky-50 px-3 py-2 text-xs leading-relaxed text-sky-950">
                {FLOCK_UI.directCallout}
              </div>
              <button
                type="button"
                data-testid="flock-see-pricing-flock_direct"
                onClick={() => openPricing("flock_direct")}
                className="mt-auto w-full rounded-full bg-[#1a1a1a] px-4 py-2.5 text-sm font-semibold text-white hover:bg-black"
              >
                {FLOCK_UI.seePricingOptions}
              </button>
            </div>
          </article>
        ) : null}

        {standard ? (
          <article
            className="flex flex-col overflow-hidden rounded-xl border border-border bg-white shadow-card"
            data-testid="flock-tier-card-standard"
          >
            <div className="bg-[#e8e8e8] px-4 py-3">
              <h3 className="text-base font-semibold text-text-primary">
                {FLOCK_UI.standardName}
              </h3>
            </div>
            <div className="flex flex-1 flex-col gap-3 p-4">
              <p className="text-sm text-text-secondary">
                {FLOCK_UI.pricesFrom}{" "}
                <span className="text-xl font-bold text-text-primary">
                  {formatUsd(standard.final_total_usd)}
                </span>
              </p>
              <p className="text-sm text-text-secondary">
                {FLOCK_UI.transit}
                <span className="ml-1 font-semibold text-text-primary">
                  {standard.transitDescription || standard.transitDays}
                </span>
              </p>
              <ul className="space-y-2">
                {FLOCK_UI.standardFeatures.map((t) => (
                  <FeatureRow key={t} ok={false} text={t} />
                ))}
              </ul>
              <p className="text-xs text-text-secondary">{FLOCK_UI.standardNote}</p>
              <button
                type="button"
                data-testid="flock-see-pricing-standard"
                onClick={() => openPricing("standard")}
                className="mt-auto w-full rounded-full border-2 border-[#1a1a1a] bg-white px-4 py-2.5 text-sm font-semibold text-text-primary hover:bg-surface"
              >
                {FLOCK_UI.seePricingOptions}
              </button>
            </div>
          </article>
        ) : null}
      </div>

      <div className="space-y-3 border-t border-border pt-4">
        {selectedFlex ? (
          <p className="text-center text-xs text-success">
            {FLOCK_UI.checkoutSelected}：
            {selectedTier === "flock_direct"
              ? FLOCK_UI.directName
              : FLOCK_UI.standardName}{" "}
            · {flockFlexibilityKeyLabel(selectedFlex.key)} ·{" "}
            {formatUsdExact(selectedFlex.rateUsd)}
          </p>
        ) : null}
        {selectedCarrierOpt ? (
          <p className="text-center text-xs text-success">
            {FLOCK_UI.checkoutSelected}：
            {selectedTier === "flock_direct"
              ? FLOCK_UI.directName
              : FLOCK_UI.standardName}{" "}
            · {selectedCarrierOpt.carrierName} ·{" "}
            {formatUsdExact(selectedCarrierOpt.rateUsd)}
          </p>
        ) : null}
        {!detailsUnlocked ? (
          <p className="text-center text-xs text-text-secondary">
            {FLOCK_UI.holdThenPickFlex}
          </p>
        ) : !hasSelection ? (
          <p className="text-center text-xs text-text-secondary">
            {FLOCK_UI.pickFlexThenDetails}
          </p>
        ) : null}
        {checkoutMessage ? <ErrorBanner>{checkoutMessage}</ErrorBanner> : null}
        <button
          type="button"
          disabled={!canCheckout}
          onClick={onCheckout}
          className="flex h-12 w-full items-center justify-center rounded-md bg-success px-4 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-50"
        >
          {checkoutBusy
            ? FLOCK_UI.checkoutSyncing
            : checkoutAmount != null
              ? `${FLOCK_UI.checkoutCta} — ${formatUsd(checkoutAmount)}`
              : FLOCK_UI.checkoutCta}
        </button>
        <p className="text-center text-[11px] text-text-disabled">
          {FLOCK_UI.checkoutFootnote}
        </p>
      </div>

      {pricingModalTier ? (
        <PricingOptionsModal
          tier={pricingModalTier}
          reference={reference}
          optionsType={modalOptionsType}
          options={modalFlexOptions}
          carrierOptions={modalCarrierOptions}
          selectedFlexibility={
            selectedTier === pricingModalTier ? selectedFlexibility : null
          }
          selectedCarrier={
            selectedTier === pricingModalTier ? selectedCarrier : null
          }
          busy={flexBusy && selectedTier === pricingModalTier}
          message={flexMessage}
          onClose={() => setPricingModalTier(null)}
          onSelectFlexibility={(key) => {
            onSelectFlexibility(key);
            setPricingModalTier(null);
          }}
          onSelectCarrier={(name) => {
            onSelectCarrier(name);
            setPricingModalTier(null);
          }}
        />
      ) : null}
    </aside>
  );
}