/**
 * E2E fixture：MotherShip 二级 Details + 侧栏（不依赖官网 RPA）
 */
"use client";

import { useState } from "react";
import { MothershipLoggedInDetailsForm } from "@/components/mothership/mothership-logged-in-details-form";
import { MothershipLoggedInQuoteSidebar } from "@/components/mothership/mothership-logged-in-quote-sidebar";
import type { MothershipLoggedInShipmentPayload } from "@/components/mothership/mothership-logged-in-shipment-form";
import type { QuoteDetail } from "@/lib/frontend/types";

const pickup = {
  option_id: "fixture-pickup",
  display_label: "Los Angeles, CA 90001",
  formatted_address: "Los Angeles, CA 90001",
  street: "Main St",
  city: "Los Angeles",
  state: "CA",
  zip: "90001",
};

const delivery = {
  option_id: "fixture-delivery",
  display_label: "Dallas, TX 75201",
  formatted_address: "Dallas, TX 75201",
  street: "Commerce St",
  city: "Dallas",
  state: "TX",
  zip: "75201",
};

const INITIAL: MothershipLoggedInShipmentPayload = {
  pickupQuery: pickup.display_label,
  deliveryQuery: delivery.display_label,
  pickupConfirmed: pickup,
  deliveryConfirmed: delivery,
  pickupAccessorials: [],
  deliveryAccessorials: [],
  readyDate: "2026-07-31",
  readyTime: "08:00 AM",
  timezone: "America/Los_Angeles",
  cargo: [
    {
      cargoType: "pallet",
      quantity: 2,
      weightLb: 500,
      lengthIn: 48,
      widthIn: 40,
      heightIn: 48,
    },
  ],
};

const QUOTE: QuoteDetail = {
  quote_id: "QTE_FIXTURE_MS_L2",
  request_id: "req-fixture-ms-l2",
  status: "done",
  source_type: "rpa",
  is_realtime: true,
  currency: "USD",
  quotes: [
    {
      service_level: "standard",
      rate_option: "lowest",
      carrier: "TForce Freight Direct",
      transit_days: "3",
      transit_description: "Dedicated Dry Van",
      raw_freight: 420,
      surcharges: 35,
      raw_total: 455,
      markup_percent: 0,
      markup_amount: 0,
      final_total: 455,
      breakdown: [],
    },
    {
      service_level: "guaranteed",
      rate_option: "fastest",
      carrier: "TForce Freight Direct",
      transit_days: "2",
      transit_description: "Guaranteed",
      raw_freight: 510,
      surcharges: 35,
      raw_total: 545,
      markup_percent: 0,
      markup_amount: 0,
      final_total: 545,
      breakdown: [],
    },
    {
      service_level: "standard",
      rate_option: "lowest",
      carrier: "Echo Global Logistics",
      transit_days: "4",
      transit_description: "Standard LTL",
      raw_freight: 390,
      surcharges: 20,
      raw_total: 410,
      markup_percent: 0,
      markup_amount: 0,
      final_total: 410,
      breakdown: [],
    },
  ],
};

export default function MsL2UiFixturePage() {
  const [lastAction, setLastAction] = useState("idle");

  return (
    <main className="mx-auto grid max-w-6xl gap-4 p-4 md:grid-cols-[1fr_360px]">
      <div data-testid="ms-l2-details">
        <MothershipLoggedInDetailsForm
          initial={INITIAL}
          highlightRequiredGaps
          onValidSubmit={() => setLastAction("details-submit")}
        />
      </div>
      <div data-testid="ms-l2-sidebar">
        <MothershipLoggedInQuoteSidebar
          payload={INITIAL}
          quote={QUOTE}
          status="success"
          error={null}
          onCheckout={() => setLastAction("checkout-ok")}
        />
      </div>
      <p
        data-testid="last-action"
        className="md:col-span-2 text-xs text-text-secondary"
      >
        lastAction={lastAction}
      </p>
    </main>
  );
}