import { useEffect, useMemo, useRef, useState } from "react";
import {
  ArrowLeft,
  ArrowRight,
  ChevronRight,
  MapPin,
  Search,
  Truck,
  X,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import type { RegionalInventoryStats } from "../types";
import { Picker, unique } from "./shared";
import { VehicleDetails } from "./VehicleDetails";
import {
  INVENTORY_TYPES,
  inventoryModel,
  inventoryTotals,
  scopedInventorySelection,
} from "./inventory-view";
import {
  inventoryBrowseRows,
  inventoryBrowseUrl,
  inventoryModels,
  inventoryPlaces,
  inventoryTypeRows,
  readInventoryBrowse,
  type InventoryBrowseState,
} from "./inventory-explorer";

const fmt = (value: number) => value.toLocaleString();
const regionName = (value: string | null) => value || "未归属地区";
const cityName = (value: string | null) => value || "未归属城市";

export function InventoryExplorer({
  inventory,
  subject,
}: {
  inventory: RegionalInventoryStats[];
  subject: string | null;
}) {
  const [state, setState] = useState(() =>
    readInventoryBrowse(window.location.search),
  );
  const sectionRef = useRef<HTMLElement>(null);
  const headingRef = useRef<HTMLHeadingElement>(null);
  const positions = useRef(
    new Map<
      string,
      { scroll: [Element, number][]; y: number; focus?: string }
    >(),
  );
  const currentUrl = useRef(window.location.href);
  const locationKey = JSON.stringify([state.region, state.city]);
  const lastLocation = useRef(locationKey);

  const remember = () => {
    const scroll: [Element, number][] = [];
    let element = sectionRef.current?.parentElement;
    while (element) {
      if (element.scrollHeight > element.clientHeight)
        scroll.push([element, element.scrollTop]);
      element = element.parentElement;
    }
    positions.current.set(currentUrl.current, {
      scroll,
      y: window.scrollY,
      focus: (document.activeElement as HTMLElement | null)?.dataset
        .inventoryKey,
    });
  };
  useEffect(() => {
    const onBack = () => {
      currentUrl.current = window.location.href;
      setState(readInventoryBrowse(window.location.search));
    };
    window.addEventListener("popstate", onBack);
    return () => window.removeEventListener("popstate", onBack);
  }, []);
  useEffect(() => {
    if (lastLocation.current === locationKey) return;
    lastLocation.current = locationKey;
    const saved = positions.current.get(currentUrl.current);
    if (saved) {
      const target = saved.focus
        ? Array.from(
            sectionRef.current?.querySelectorAll<HTMLElement>(
              "[data-inventory-key]",
            ) || [],
          ).find((element) => element.dataset.inventoryKey === saved.focus)
        : null;
      (target || headingRef.current)?.focus({ preventScroll: true });
      saved.scroll.forEach(([element, top]) => {
        element.scrollTop = top;
      });
      window.scrollTo({ top: saved.y, behavior: "instant" });
    } else {
      headingRef.current?.focus({ preventScroll: true });
      headingRef.current?.scrollIntoView({
        block: "nearest",
        behavior: "instant",
      });
    }
  }, [locationKey]);

  const navigate = (change: Partial<InventoryBrowseState>, replace = false) => {
    remember();
    const next = { ...state, ...change };
    const url = inventoryBrowseUrl(window.location.href, next);
    if (url === window.location.href) return;
    if (replace) window.history.replaceState(window.history.state, "", url);
    else
      window.history.pushState(
        { ...window.history.state, inventoryParent: window.location.href },
        "",
        url,
      );
    currentUrl.current = url;
    setState(next);
  };
  const goBack = () => {
    const next =
      state.model !== null
        ? { model: null }
        : state.city !== null
          ? { city: null, model: null }
          : { region: null, city: null, model: null };
    const url = inventoryBrowseUrl(window.location.href, { ...state, ...next });
    if (window.history.state?.inventoryParent === url) window.history.back();
    else navigate(next);
  };

  const scoped = useMemo(
    () => inventoryBrowseRows(inventory, state),
    [inventory, state],
  );
  const rows = useMemo(
    () => inventoryTypeRows(scoped, state.type),
    [scoped, state.type],
  );
  const total = inventoryTotals(rows);
  const places = inventoryPlaces(
    scoped,
    state.region === null ? "region" : "city",
    state.type,
  );
  const models = useMemo(() => inventoryModels(rows), [rows]);
  const chosenModel = models.find((model) => model.key === state.model);
  const label = [
    state.region === null ? "全部地区" : regionName(state.region),
    state.city === null ? "" : cityName(state.city),
    state.type || "全部车型",
  ]
    .filter(Boolean)
    .join(" / ");
  const selection = useMemo(
    () =>
      chosenModel
        ? scopedInventorySelection({
            rows: chosenModel.rows,
            label: `${label} / ${chosenModel.brand || "未标注品牌"} / ${chosenModel.model}`,
          })
        : null,
    [chosenModel, label],
  );
  const level = state.region === null ? 0 : state.city === null ? 1 : 2;
  const hasFilters = Boolean(state.query || state.brand);

  return (
    <section
      ref={sectionRef}
      className="inventory-matrix inventory-explorer"
      aria-label="库存找车"
    >
      <header className="finder-header">
        <div>
          <h2>库存找车</h2>
          <p>选地区、选城市，快速找到对应车辆</p>
        </div>
        <MapPin aria-hidden="true" />
      </header>
      <ol className="finder-steps" aria-label="找车步骤">
        {["选地区", "选城市", "查车辆"].map((title, index) => (
          <li key={title} aria-current={index === level ? "step" : undefined}>
            <span>{index + 1}</span>
            {title}
            {index < 2 && <ChevronRight aria-hidden="true" />}
          </li>
        ))}
      </ol>
      <nav className="finder-breadcrumb" aria-label="库存位置">
        {state.region === null ? (
          <span aria-current="page">全部地区</span>
        ) : (
          <button
            onClick={() => navigate({ region: null, city: null, model: null })}
          >
            全部地区
          </button>
        )}
        {state.region !== null && (
          <>
            <ChevronRight aria-hidden="true" />
            {state.city === null ? (
              <span aria-current="page">{regionName(state.region)}</span>
            ) : (
              <button onClick={() => navigate({ city: null, model: null })}>
                {regionName(state.region)}
              </button>
            )}
          </>
        )}
        {state.city !== null && (
          <>
            <ChevronRight aria-hidden="true" />
            <span aria-current="page">{cityName(state.city)}</span>
          </>
        )}
      </nav>
      <div className="finder-scope">
        {level > 0 && (
          <button
            className="finder-back"
            aria-label={level === 2 ? "返回城市列表" : "返回地区列表"}
            onClick={goBack}
          >
            <ArrowLeft aria-hidden="true" />
          </button>
        )}
        <div>
          <h3 ref={headingRef} tabIndex={-1}>
            {state.city !== null
              ? cityName(state.city)
              : state.region !== null
                ? regionName(state.region)
                : "地区库存"}
          </h3>
          <p>
            {state.type || "全部车型"}
            {hasFilters ? " · 已筛选" : ""} ·{" "}
            {state.city !== null
              ? `${models.length} 种型号`
              : `${places.filter((place) => place.total.quantity > 0).length} 个${level === 0 ? "地区" : "城市"}有库存`}
          </p>
        </div>
        <div className="finder-scope-total" aria-live="polite">
          <strong>{fmt(total.quantity)}</strong>
          <span>库存 / 台</span>
        </div>
      </div>
      <div className="finder-type-heading">
        <strong>找什么车型</strong>
        <span>数量为当前范围库存</span>
      </div>
      <div className="matrix-mobile-types finder-types" aria-label="库存车型">
        {["", ...INVENTORY_TYPES].map((type) => (
          <button
            key={type}
            aria-pressed={state.type === type}
            onClick={() => navigate({ type, model: null })}
          >
            {type || "全部车型"}
            <span>
              {fmt(inventoryTotals(inventoryTypeRows(scoped, type)).quantity)}
            </span>
          </button>
        ))}
      </div>
      <div className="finder-search-row">
        <label className="matrix-search">
          <Search aria-hidden="true" />
          <Input
            value={state.query}
            placeholder={
              level === 0
                ? "搜索地区、城市、品牌或型号"
                : "搜索当前范围的城市、品牌或型号"
            }
            aria-label="搜索当前范围库存"
            onChange={(event) =>
              navigate({ query: event.target.value, model: null }, true)
            }
          />
          {state.query && (
            <button
              aria-label="清空库存搜索"
              onClick={() => navigate({ query: "", model: null }, true)}
            >
              <X aria-hidden="true" />
            </button>
          )}
        </label>
        <Picker
          label="品牌"
          value={state.brand}
          values={unique(inventory.map((row) => row.brand))}
          change={(brand) => navigate({ brand, model: null })}
        />
      </div>
      <div className="finder-results-heading">
        <strong>
          {level === 0
            ? "选择地区"
            : level === 1
              ? "选择城市"
              : "选择型号查看车辆"}
        </strong>
        {hasFilters ? (
          <button
            onClick={() => navigate({ query: "", brand: "", model: null })}
          >
            清除筛选
          </button>
        ) : (
          <span>{level < 2 ? "按库存从多到少" : "点击进入车辆明细"}</span>
        )}
      </div>
      {total.quantity === 0 && (
        <div className="finder-empty" role="status">
          <Truck aria-hidden="true" />
          <strong>
            {hasFilters
              ? "当前范围没有匹配车辆"
              : state.type
                ? `当前范围暂无${state.type}库存`
                : "当前范围暂无库存"}
          </strong>
          <p>
            {hasFilters
              ? "试试清除搜索或品牌条件，也可以返回上级查找。"
              : "可切换车型，或返回上级查看其他地区、城市。"}
          </p>
          {(state.type || hasFilters) && (
            <Button
              variant="outline"
              onClick={() =>
                navigate({ type: "", query: "", brand: "", model: null })
              }
            >
              查看当前范围全部库存
            </Button>
          )}
          {level > 0 && (
            <Button variant="ghost" onClick={goBack}>
              返回{level === 2 ? "城市" : "地区"}列表
            </Button>
          )}
        </div>
      )}
      {level < 2 ? (
        <div className="finder-list">
          {places.map((place) => (
            <button
              key={place.key}
              className="finder-place"
              data-inventory-key={place.key}
              disabled={!place.total.quantity}
              aria-label={`${place.name}，${state.type || "全部车型"}库存 ${place.total.quantity} 台，${level === 0 ? "选择城市" : "查看车型"}`}
              onClick={() =>
                navigate(
                  level === 0
                    ? { region: place.value, city: null, model: null }
                    : { city: place.value, model: null },
                )
              }
            >
              <span className="finder-place-top">
                <strong>{place.name}</strong>
                <span className="finder-place-count">
                  {fmt(place.total.quantity)}
                  <small>台</small>
                  {place.total.quantity > 0 && (
                    <ChevronRight aria-hidden="true" />
                  )}
                </span>
              </span>
              {place.total.quantity > 0 ? (
                <>
                  <span className="finder-place-status">
                    {level === 0 && <span>{place.cities} 个城市有库存</span>}
                    <span>可运营 {fmt(place.total.available)}</span>
                    <span>待运营 {fmt(place.total.awaiting)}</span>
                  </span>
                  <span className="finder-type-tags">
                    {(state.type
                      ? place.types.filter((item) => item.name === state.type)
                      : place.types
                    ).map((item) => (
                      <span key={item.name}>
                        {item.name}
                        <b>{fmt(item.quantity)}</b>
                      </span>
                    ))}
                  </span>
                </>
              ) : (
                <span className="finder-place-status">
                  {state.type ? "该车型暂无库存" : "暂无库存"}
                </span>
              )}
            </button>
          ))}
        </div>
      ) : (
        <div className="finder-list">
          {models.map((model) => (
            <button
              key={model.key}
              className="finder-place finder-model"
              data-inventory-key={model.key}
              onClick={() => navigate({ model: model.key })}
            >
              <span className="finder-place-top">
                <strong>{inventoryModel(model.model, model.brand).name}</strong>
                <span className="finder-place-count">
                  {fmt(model.total.quantity)}
                  <small>台</small>
                </span>
              </span>
              <span className="finder-model-meta">
                {model.brand || "未标注品牌"} · {model.type}
                {inventoryModel(model.model, model.brand).operator &&
                  ` · ${inventoryModel(model.model, model.brand).operator}`}
              </span>
              <span className="finder-place-status">
                <span>可运营 {fmt(model.total.available)}</span>
                <span>待运营 {fmt(model.total.awaiting)}</span>
                {model.total.unclassified > 0 && (
                  <span>待核实 {fmt(model.total.unclassified)}</span>
                )}
              </span>
              <span className="finder-model-footer">
                <span>
                  {[
                    model.total.pending
                      ? `待交车 ${fmt(model.total.pending)}`
                      : "",
                    model.total.abnormal
                      ? `异动 ${fmt(model.total.abnormal)}`
                      : "",
                  ]
                    .filter(Boolean)
                    .join(" · ")}
                </span>
                <span>
                  查看车辆
                  <ArrowRight aria-hidden="true" />
                </span>
              </span>
            </button>
          ))}
        </div>
      )}
      {state.model !== null && !chosenModel && (
        <div className="finder-empty" role="status">
          <strong>该型号已不在当前库存范围</strong>
          <Button variant="outline" onClick={goBack}>
            返回选择型号
          </Button>
        </div>
      )}
      <footer className="matrix-footer">
        <span>库存包含待交车、异动车辆，不代表均可立即交付。</span>
        <span>「其他」包含挂车及未单列车型。</span>
      </footer>
      <VehicleDetails
        selection={selection}
        subject={subject}
        close={goBack}
        returnLabel="返回找车结果"
      />
    </section>
  );
}