import type { BookerInfo, PassengerInfo } from "@/components/booking/booking-types";
import {
  BOOKING_TRIP_TYPE_LABEL,
  type BookingTripType,
  type MockTrip,
  type SeatClass,
} from "@/config/booking-config";
import {
  banksForUi,
  paymentCopyFromSettings,
  type PublicPaymentSettings,
} from "@/config/booking-payment";
import { formatVnd } from "@/lib/booking-search";
import { computeBookingPriceSummary, formatPriceLine } from "@/lib/booking-pricing";

type Props = {
  booker: BookerInfo;
  outbound: MockTrip | null;
  inbound: MockTrip | null;
  passengers: PassengerInfo[];
  routeLabel: string;
  seatClass: SeatClass;
  tripType: BookingTripType;
  paymentSettings: PublicPaymentSettings;
  showQr?: boolean;
  surface?: "payment" | "success";
  showPolicy?: boolean;
};

function splitLeadLine(text: string): { lead: string; body: string } {
  const colon = text.indexOf(":");
  if (colon === -1) {
    return { lead: text, body: "" };
  }
  return {
    lead: text.slice(0, colon + 1),
    body: text.slice(colon + 1).trimStart(),
  };
}

export function BookingPaymentPanel({
  booker,
  outbound,
  inbound,
  passengers,
  routeLabel,
  seatClass,
  tripType,
  paymentSettings,
  showQr = true,
  surface = "payment",
  showPolicy = true,
}: Props) {
  const pricing = computeBookingPriceSummary({
    seatClass,
    tripType,
    passengers,
    outbound,
    inbound,
  });

  if (!pricing) {
    return <p className="ferry-booking__empty">Chưa đủ thông tin để tính giá.</p>;
  }

  const copy = paymentCopyFromSettings(paymentSettings);
  const banks = banksForUi(paymentSettings);
  const tripTypeLabel = BOOKING_TRIP_TYPE_LABEL[tripType];
  const transferLine = splitLeadLine(copy.transferLead);

  return (
    <div
      className={`ferry-booking__checkout${surface === "success" ? " ferry-booking__checkout--success" : ""}`}
    >
      <section className="ferry-booking__summary ferry-booking__summary--checkout">
        <h3 className="ferry-booking__checkout-heading">Thông tin đặt vé</h3>

        <dl className="ferry-booking__checkout-dl">
          <div className="ferry-booking__checkout-row">
            <dt>Tuyến</dt>
            <dd>{routeLabel}</dd>
          </div>
          <div className="ferry-booking__checkout-row">
            <dt>Loại vé</dt>
            <dd>{tripTypeLabel}</dd>
          </div>
          {pricing.legs.map((leg) => (
            <div key={leg.legLabel} className="ferry-booking__checkout-row">
              <dt>Chuyến</dt>
              <dd>{leg.legLabel}</dd>
            </div>
          ))}
          <div className="ferry-booking__checkout-row">
            <dt>Người đặt vé</dt>
            <dd>
              {booker.fullName || "—"} · {booker.phone || "—"}
              {booker.email ? ` · ${booker.email}` : ""}
            </dd>
          </div>
          {booker.note ? (
            <div className="ferry-booking__checkout-row">
              <dt>Ghi chú</dt>
              <dd>{booker.note}</dd>
            </div>
          ) : null}
        </dl>

        <h4 className="ferry-booking__passenger-review-heading">
          Hành khách ({passengers.length})
        </h4>
        <div className="ferry-booking__passenger-review">
          {passengers.map((passenger, index) => (
            <article key={`${passenger.fullName}-${index}`} className="ferry-booking__passenger-review-card">
              <h4 className="ferry-booking__passenger-review-title">Hành khách {index + 1}</h4>
              <dl className="ferry-booking__passenger-kv-list">
                <div className="ferry-booking__passenger-kv">
                  <dt>Họ và tên:</dt>
                  <dd>{passenger.fullName || "—"}</dd>
                </div>
                <div className="ferry-booking__passenger-kv">
                  <dt>Ngày sinh:</dt>
                  <dd>{passenger.birthDate || "—"}</dd>
                </div>
                <div className="ferry-booking__passenger-kv">
                  <dt>Quốc tịch:</dt>
                  <dd>{passenger.nationality || "—"}</dd>
                </div>
                <div className="ferry-booking__passenger-kv">
                  <dt>CCCD:</dt>
                  <dd>{passenger.idNumber || "—"}</dd>
                </div>
                <div className="ferry-booking__passenger-kv">
                  <dt>Quê quán:</dt>
                  <dd>{passenger.hometown || "—"}</dd>
                </div>
              </dl>
            </article>
          ))}
        </div>
      </section>

      <section className="ferry-booking__summary ferry-booking__summary--pricing">
        <p className="ferry-booking__checkout-lead">
          {surface === "success" ? "Đơn đặt vé" : "Bạn đang đặt"}{" "}
          <strong>{pricing.ticketCount}</strong> vé <strong>{pricing.seatClassLabel}</strong> ({tripTypeLabel}), gồm{" "}
          {pricing.aggregatedLines.map((line, index) => (
            <span key={`${line.category}-${line.unitPrice}`}>
              {index > 0 ? ", " : ""}
              {formatPriceLine(line, pricing.legs.length)}
            </span>
          ))}
        </p>
        <p className="ferry-booking__checkout-total">
          Tổng thanh toán: <strong>{formatVnd(pricing.totalVnd)}</strong>
        </p>
        <p className="ferry-booking__checkout-zalo">
          Vé điện tử sẽ gửi qua Zalo <strong>{booker.phone || "—"}</strong>
          {booker.email ? (
            <>
              {" "}
              hoặc email <strong>{booker.email}</strong>
            </>
          ) : null}
          .
        </p>
      </section>

      {showQr ? (
        <section
          className={`ferry-booking__pay-info${surface === "success" ? " ferry-booking__pay-info--success" : ""}`}
          aria-labelledby="ferry-booking-pay-info-title"
        >
          <h3 className="ferry-booking__pay-info-title" id="ferry-booking-pay-info-title">
            {copy.infoTitle}
          </h3>
          <p className="ferry-booking__payment-method-line ferry-booking__payment-method-line--in-pay">
            <span className="ferry-booking__payment-method-label">Hình thức thanh toán:</span>
          </p>
          <p className="ferry-booking__pay-info-text">
            <strong className="ferry-booking__pay-info-lead">{copy.directPayLead}</strong> {copy.directPayAddress}
          </p>
          <p className="ferry-booking__pay-info-text">
            <strong className="ferry-booking__pay-info-lead">{transferLine.lead}</strong>
            {transferLine.body ? ` ${transferLine.body}` : null}
          </p>

          <div className="ferry-booking__bank-qr-row">
            {banks.map((bank) => (
              <div key={bank.id} className="ferry-booking__bank-qr-card">
                {bank.qrNote ? (
                  <p className="ferry-booking__bank-qr-note">{bank.qrNote}</p>
                ) : null}
                <figure className="ferry-booking__bank-qr-figure">
                  {bank.qrImage ? (
                    <img alt={bank.qrAlt} className="ferry-booking__bank-qr-image" src={bank.qrImage} />
                  ) : (
                    <div className="ferry-booking__bank-qr-placeholder" aria-hidden />
                  )}
                </figure>
                <p className="ferry-booking__bank-stk">
                  STK: <strong>{bank.accountNumber}</strong>
                </p>
                <p className="ferry-booking__bank-name">
                  Ngân hàng: <strong>{bank.bankName}</strong>
                </p>
              </div>
            ))}
          </div>
          <p className="ferry-booking__pay-screenshot-note">{copy.screenshotNote}</p>
        </section>
      ) : null}

      {showPolicy ? (
        <section
          className={`ferry-booking__refund-policy${surface === "success" ? " ferry-booking__refund-policy--success" : ""}`}
        >
          <hr className="ferry-booking__summary-divider" />
          <p className="ferry-booking__policy-link-line">
            {copy.policyTitle}:{" "}
            <a className="ferry-booking__policy-link" href={copy.policyLinkHref}>
              {copy.policyLinkLabel}
            </a>
          </p>
        </section>
      ) : null}
    </div>
  );
}