/**
 * MotherShip 登录后二级右侧报价栏
 * 对齐官网 Choose your carrier + coverage + checkout 信息密度
 */
"use client";

import { useEffect, useMemo, useState } from "react";
import { CheckCircle, Warning } from "@phosphor-icons/react";
import type { MothershipLoggedInShipmentPayload } from "@/components/mothership/mothership-logged-in-shipment-form";
import type {
  QuoteDetail,
  QuoteItem,
  QuotePageStatus,
} from "@/lib/frontend/types";
import {
  getMotherShipRateOptionLabel,
  getMotherShipServiceLevelLabel,
} from "@/lib/constants/mothership-ui-tiers";
import { LoadingSpinner } from "@/components/ui/loading-spinner";
import { formatUSD } from "@/lib/frontend/format";

function parseTransitDays(item: QuoteItem): number | null {
  const raw = `${item.transit_days ?? ""} ${item.transit_description ?? ""}`;
  const m = raw.match(/(\d+)/);
  if (!m) return null;
  return Number(m[1]);
}

function addBusinessDays(isoDate: string, days: number): Date | null {
  const start = new Date(`${isoDate}T12:00:00`);
  if (Number.isNaN(start.getTime())) return null;
  let left = Math.max(0, days);
  const d = new Date(start);
  while (left > 0) {
    d.setDate(d.getDate() + 1);
    const wd = d.getDay();
    if (wd !== 0 && wd !== 6) left -= 1;
  }
  return d;
}

function formatLongDate(d: Date): string {
  return d.toLocaleDateString("zh-CN", {
    weekday: "short",
    month: "short",
    day: "numeric",
    year: "numeric",
  });
}

function rateKey(item: QuoteItem): string {
  return `${item.service_level}|${item.rate_option}|${item.carrier}`;
}

function isGuaranteed(item: QuoteItem): boolean {
  return /guaranteed/i.test(item.service_level);
}

function isStandard(item: QuoteItem): boolean {
  return /standard/i.test(item.service_level) || !isGuaranteed(item);
}

function carrierTitle(item: QuoteItem): string {
  const name = item.carrier?.trim();
  if (name) {
    return /direct/i.test(name) ? name : `${name}`;
  }
  return "MotherShip";
}

function findGuaranteeUpsell(
  base: QuoteItem,
  all: QuoteItem[],
): QuoteItem | null {
  if (isGuaranteed(base)) return null;
  const sameCarrier = all.filter(
    (q) =>
      isGuaranteed(q) &&
      (q.carrier || "").trim().toLowerCase() ===
        (base.carrier || "").trim().toLowerCase(),
  );
  if (sameCarrier.length > 0) {
    return sameCarrier.sort((a, b) => a.final_total - b.final_total)[0] ?? null;
  }
  // 无同承运商保证档时：取最低保证送达价作加价提示
  const anyG = all
    .filter(isGuaranteed)
    .sort((a, b) => a.final_total - b.final_total);
  return anyG[0] ?? null;
}

export interface MothershipLoggedInQuoteSidebarProps {
  payload: MothershipLoggedInShipmentPayload;
  quote: QuoteDetail | null;
  status: QuotePageStatus;
  error: string | null;
}

export function MothershipLoggedInQuoteSidebar({
  payload,
  quote,
  status,
  error,
}: MothershipLoggedInQuoteSidebarProps) {
  const rates = useMemo(() => {
    const list = [...(quote?.quotes ?? [])];
    return list.sort((a, b) => a.final_total - b.final_total);
  }, [quote]);

  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [preferGuaranteed, setPreferGuaranteed] = useState(false);
  const [coverage, setCoverage] = useState<"basic" | "full">("basic");
  const [cargoValue, setCargoValue] = useState("");

  useEffect(() => {
    if (rates.length === 0) {
      setSelectedId(null);
      return;
    }
    setSelectedId((prev) => {
      if (prev && rates.some((r) => rateKey(r) === prev)) return prev;
      const preferred =
        rates.find(isStandard) ?? rates[0]!;
      return rateKey(preferred);
    });
    setPreferGuaranteed(false);
  }, [rates]);

  const selectedBase =
    rates.find((r) => rateKey(r) === selectedId) ?? rates[0] ?? null;
  const upsell = selectedBase
    ? findGuaranteeUpsell(selectedBase, rates)
    : null;
  const selected =
    preferGuaranteed && upsell ? upsell : selectedBase;

  const loading =
    status === "validating" ||
    status === "processing" ||
    status === "resolving_address";

  const pickupEta = useMemo(() => {
    if (!payload.readyDate) return "—";
    const d = new Date(`${payload.readyDate}T12:00:00`);
    if (Number.isNaN(d.getTime())) return payload.readyDate;
    const datePart = formatLongDate(d);
    const timePart = payload.readyTime ? ` ${payload.readyTime} 之后` : " 当日结束前";
    return `${datePart}${timePart}`;
  }, [payload.readyDate, payload.readyTime]);

  const deliveryEta = useMemo(() => {
    if (!selected) return "以所选费率时效为准";
    const days = parseTransitDays(selected);
    if (days == null || !payload.readyDate) {
      return (
        selected.transit_description ||
        (selected.transit_days
          ? `预计 ${selected.transit_days} 个工作日`
          : "以所选费率时效为准")
      );
    }
    const end = addBusinessDays(payload.readyDate, days);
    if (!end) return `预计 ${days} 个工作日`;
    return `${formatLongDate(end)} 当日结束前`;
  }, [selected, payload.readyDate]);

  const unavailableHint = useMemo(() => {
    if (loading || error) return null;
    if (rates.length === 0) return null;
    const looksMarketplace = rates.every(
      (r) =>
        /tforce|daylight|echo/i.test(r.carrier ?? "") ||
        !/direct/i.test(r.carrier ?? ""),
    );
    if (looksMarketplace && rates.length > 0) {
      return "当前价源非登录态 Direct 承运商列表。请确认客户已配置 MotherShip 账密且 Worker 可打开 dashboard。";
    }
    if (rates.length < 3) {
      return "部分承运商无法服务此票货；完整不可用列表以官网为准。";
    }
    return null;
  }, [rates, loading, error]);

  return (
    <aside className="space-y-5 rounded-lg border border-border bg-surface p-4 shadow-card md:p-5">
      {/* 预计时效 */}
      <div className="space-y-3 border-b border-border pb-4">
        <div>
          <p className="text-xs font-medium text-text-secondary">预计提货</p>
          <p className="mt-0.5 text-sm font-semibold text-text-primary">
            {pickupEta}
          </p>
          <p className="mt-1 break-words text-xs text-text-secondary">
            {payload.pickupQuery}
          </p>
        </div>
        <div>
          <p className="text-xs font-medium text-text-secondary">预计送达</p>
          <p className="mt-0.5 text-sm font-semibold text-text-primary">
            {deliveryEta}
          </p>
          <p className="mt-1 break-words text-xs text-text-secondary">
            {payload.deliveryQuery}
          </p>
        </div>
      </div>

      {/* 承运商报价 */}
      <div>
        <div className="mb-3 flex items-center justify-between gap-2">
          <p className="text-sm font-semibold text-text-primary">选择承运商</p>
          {quote?.source_type && (
            <span className="rounded-full bg-bg px-2 py-0.5 text-[10px] text-text-secondary">
              {quote.source_type === "rpa"
                ? "实时报价"
                : quote.source_type === "cache"
                  ? "缓存"
                  : quote.source_type === "stale"
                    ? "降级"
                    : quote.source_type}
            </span>
          )}
        </div>

        {loading && (
          <div className="flex items-center gap-2 rounded-md border border-border px-3 py-5 text-sm text-text-secondary">
            <LoadingSpinner size={18} />
            正在查询 MotherShip 报价…
          </div>
        )}

        {!loading && error && (
          <p className="rounded-md border border-error/30 bg-error/5 px-3 py-2 text-sm text-error">
            {error}
          </p>
        )}

        {!loading && !error && rates.length === 0 && (
          <p className="rounded-md border border-border bg-bg px-3 py-3 text-sm text-text-secondary">
            暂无可用承运商报价
          </p>
        )}

        {!loading && rates.length > 0 && (
          <div className="space-y-2">
            {rates.map((rate) => {
              const id = rateKey(rate);
              const active = selectedBase ? rateKey(selectedBase) === id : false;
              const days = parseTransitDays(rate);
              const levelLabel = getMotherShipServiceLevelLabel(rate.service_level);
              const optLabel = getMotherShipRateOptionLabel(
                rate.service_level,
                rate.rate_option,
              );
              return (
                <button
                  key={id}
                  type="button"
                  onClick={() => {
                    setSelectedId(id);
                    setPreferGuaranteed(false);
                  }}
                  className={`w-full rounded-lg border px-3 py-3 text-left transition-colors ${
                    active
                      ? "border-text-primary bg-bg ring-1 ring-text-primary/20"
                      : "border-border hover:border-primary/40"
                  }`}
                >
                  <div className="flex items-start justify-between gap-3">
                    <div className="min-w-0">
                      <div className="flex flex-wrap items-center gap-2">
                        {active && (
                          <span className="inline-flex items-center gap-0.5 rounded bg-text-primary px-1.5 py-0.5 text-[10px] font-medium text-white">
                            <CheckCircle size={10} weight="fill" />
                            已选
                          </span>
                        )}
                        <p className="truncate text-sm font-semibold text-text-primary">
                          {carrierTitle(rate)}
                        </p>
                      </div>
                      <p className="mt-1 text-xs text-text-secondary">
                        {days != null
                          ? `预计 ${days} 个工作日`
                          : rate.transit_description ||
                            rate.transit_days ||
                            "时效待定"}
                      </p>
                      <p className="mt-0.5 text-[11px] text-text-disabled">
                        {/direct/i.test(carrierTitle(rate))
                          ? days != null
                            ? `直连承运 · 预计 ${days} 个工作日`
                            : "直连承运"
                          : `${levelLabel} · ${optLabel}`}
                        {rate.raw_freight > 0 && (
                          <> · 运费 {formatUSD(rate.raw_freight)}</>
                        )}
                        {rate.surcharges > 0 && (
                          <> · 附加费 {formatUSD(rate.surcharges)}</>
                        )}
                      </p>
                    </div>
                    <p className="shrink-0 text-base font-semibold tabular-nums text-text-primary">
                      {formatUSD(rate.final_total)}
                    </p>
                  </div>
                </button>
              );
            })}
          </div>
        )}

        {selectedBase && upsell && !isGuaranteed(selectedBase) && (
          <button
            type="button"
            onClick={() => setPreferGuaranteed((v) => !v)}
            className={`mt-2 w-full rounded-md border px-3 py-2 text-left text-xs ${
              preferGuaranteed
                ? "border-primary bg-primary/5 text-primary"
                : "border-border text-primary hover:bg-bg"
            }`}
          >
            {preferGuaranteed ? "已选保证送达 · " : "加价 "}
            {formatUSD(Math.max(0, upsell.final_total - selectedBase.final_total))}
            {preferGuaranteed ? "（点击取消）" : " 使用保证送达"}
            <span className="mt-0.5 block text-[11px] text-text-secondary">
              {carrierTitle(upsell)} · {formatUSD(upsell.final_total)}
            </span>
          </button>
        )}

        {unavailableHint && (
          <p className="mt-3 flex items-start gap-1.5 text-[11px] text-text-disabled">
            <Warning size={12} className="mt-0.5 shrink-0 text-warning" />
            {unavailableHint}
          </p>
        )}
      </div>

      {/* 保障 */}
      <div className="space-y-2 border-t border-border pt-4">
        <p className="text-sm font-semibold text-text-primary">选择保障方案</p>
        <label
          className={`flex cursor-pointer items-start gap-3 rounded-lg border p-3 ${
            coverage === "basic" ? "border-text-primary bg-bg" : "border-border"
          }`}
        >
          <input
            type="radio"
            name="ms-coverage"
            checked={coverage === "basic"}
            onChange={() => setCoverage("basic")}
            className="mt-1"
          />
          <span>
            <span className="block text-sm font-medium text-text-primary">
              承运商基础保障
            </span>
            <span className="mt-1 block text-xs leading-relaxed text-text-secondary">
              仅依赖承运商自有保险，可能存在免责条款；典型理赔窗口约 120
              天。额度有限，重大货损时补偿可能不足。
            </span>
          </span>
        </label>
        <label
          className={`flex cursor-pointer items-start gap-3 rounded-lg border p-3 ${
            coverage === "full" ? "border-text-primary bg-bg" : "border-border"
          }`}
        >
          <input
            type="radio"
            name="ms-coverage"
            checked={coverage === "full"}
            onChange={() => setCoverage("full")}
            className="mt-1"
          />
          <span className="min-w-0 flex-1">
            <span className="block text-sm font-medium text-text-primary">
              全额货运保障（FreightProtect）
            </span>
            <ul className="mt-1 list-disc space-y-0.5 pl-4 text-xs text-text-secondary">
              <li>按货值报销，最高约 $250k</li>
              <li>理赔处理约快 4 倍</li>
              <li>可覆盖补运费用</li>
            </ul>
            <span className="mt-2 block text-xs font-medium text-text-primary">
              货物价值是多少？
            </span>
            <input
              value={cargoValue}
              onChange={(e) => {
                setCargoValue(e.target.value);
                setCoverage("full");
              }}
              onFocus={() => setCoverage("full")}
              placeholder="输入货物总价值"
              className="mt-1 h-10 w-full rounded-md border border-border px-3 text-sm"
            />
            <p className="mt-1 text-[11px] text-text-disabled">
              最低约 $22.55；索赔免赔额 $100
            </p>
          </span>
        </label>
      </div>

      {/* 结账 */}
      <div className="border-t border-border pt-4">
        {selected && (
          <p className="mb-2 text-center text-xs text-success">
            当前选择：{carrierTitle(selected)} · {formatUSD(selected.final_total)}
          </p>
        )}
        <button
          type="button"
          disabled={!selected || loading}
          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"
        >
          前往结账
          {selected ? ` — ${formatUSD(selected.final_total)}` : ""}
        </button>
        <p className="mt-2 text-center text-[11px] text-text-disabled">
          结账流程后续对接。请确认右侧金额与承运商时效后再下单。
        </p>
      </div>
    </aside>
  );
}
