"use client";

import { useEffect, useMemo, useState } from "react";
import { ChevronDown, Crosshair, LocateFixed, RotateCcw, X } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  LAYER_GROUP_GEOMETRIES,
  type LayerGroupId,
  type LayerGroupStylePatch
} from "../map/layer-group-style";
import { getNumericFeatureProperties } from "../map/value-label";
import type {
  FeatureTarget,
  WorkbenchMapCommands,
  WorkbenchMapControllerState
} from "../map/workbench-map-controller";
import { WATER_NETWORK_SOURCE_IDS, type WaterNetworkSourceId } from "../map/sources";
import type { DetailFeature } from "../types";

type MapDevPanelProps = {
  commands: WorkbenchMapCommands;
  controllerState: WorkbenchMapControllerState;
  detailFeature: DetailFeature | null;
  onClose: () => void;
};

const GROUP_LABELS: Record<WaterNetworkSourceId, string> = {
  conduits: "管渠",
  junctions: "检查井",
  orifices: "孔口",
  outfalls: "排放口",
  pumps: "泵",
  scada: "SCADA"
};

const ERROR_LABELS: Record<string, string> = {
  MAP_NOT_READY: "地图尚未就绪",
  FEATURE_NOT_FOUND: "目标要素不存在",
  WFS_UNAVAILABLE: "WFS 查询暂不可用",
  FLOW_UNAVAILABLE: "水流图层初始化失败",
  INVALID_STYLE_PATCH: "参数不符合受控范围"
};

export function MapDevPanel({ commands, controllerState, detailFeature, onClose }: MapDevPanelProps) {
  const [sourceId, setSourceId] = useState<WaterNetworkSourceId>("conduits");
  const [featureId, setFeatureId] = useState("DWS30265WS2010031117");
  const [property, setProperty] = useState("diameter");
  const [precision, setPrecision] = useState(0);
  const [unit, setUnit] = useState("mm");
  const [groupId, setGroupId] = useState<LayerGroupId>("conduits");
  const [draft, setDraft] = useState<Record<string, string | number>>({
    color: "#0F766E",
    fillColor: "#0369A1",
    strokeColor: "#FFFFFF",
    opacity: 0.9,
    widthMultiplier: 1,
    radiusMultiplier: 1,
    strokeMultiplier: 1,
    iconMultiplier: 1,
    dash: "original"
  });

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") onClose();
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [onClose]);

  const numericProperties = useMemo(
    () => detailFeature && detailFeature.layer === sourceId && detailFeature.id === featureId
      ? getNumericFeatureProperties(detailFeature.properties)
      : [],
    [detailFeature, featureId, sourceId]
  );
  const target: FeatureTarget = { sourceId, featureId: featureId.trim() };
  const geometry = LAYER_GROUP_GEOMETRIES[groupId];

  function useSelectedFeature() {
    if (!detailFeature) return;
    setSourceId(detailFeature.layer);
    setFeatureId(detailFeature.id);
    const firstNumeric = getNumericFeatureProperties(detailFeature.properties)[0];
    if (firstNumeric) setProperty(firstNumeric[0]);
  }

  function applyDraft() {
    let patch: LayerGroupStylePatch;
    if (geometry === "line") {
      patch = {
        color: String(draft.color),
        opacity: Number(draft.opacity),
        widthMultiplier: Number(draft.widthMultiplier),
        dash: draft.dash as "original" | "solid" | "dashed"
      };
    } else {
      patch = {
        fillColor: String(draft.fillColor),
        strokeColor: String(draft.strokeColor),
        opacity: Number(draft.opacity),
        radiusMultiplier: Number(draft.radiusMultiplier),
        strokeMultiplier: Number(draft.strokeMultiplier),
        ...(geometry === "scada" ? { iconMultiplier: Number(draft.iconMultiplier) } : {})
      };
    }
    commands.applyLayerGroupStyle(groupId, patch);
  }

  return (
    <aside
      aria-label="地图开发面板"
      className="acrylic-panel pointer-events-auto absolute right-3 top-[4.5rem] z-40 hidden max-h-[calc(100dvh-5.5rem)] w-[400px] flex-col overflow-hidden rounded-2xl border border-white/70 shadow-2xl lg:flex"
      data-testid="map-dev-panel"
    >
      <div className="flex h-12 shrink-0 items-center justify-between border-b border-slate-200/70 px-4">
        <div>
          <h2 className="text-sm font-semibold text-slate-950">地图能力 Dev Panel</h2>
          <p className="text-[11px] text-slate-500">仅本次页面会话生效</p>
        </div>
        <button className="grid h-8 w-8 place-items-center rounded-lg text-slate-500 transition hover:bg-white/70 hover:text-slate-900 active:scale-95" type="button" aria-label="关闭 Dev Panel" onClick={onClose}>
          <X size={16} />
        </button>
      </div>

      <div className="min-h-0 flex-1 space-y-3 overflow-y-auto p-3">
        {controllerState.errorCode ? (
          <div role="alert" className="rounded-xl border border-red-200 bg-red-50/90 px-3 py-2 text-xs font-medium text-red-700">
            {ERROR_LABELS[controllerState.errorCode] ?? controllerState.errorCode}
          </div>
        ) : null}

        <PanelSection title="Feature" description="WFS 验证后执行独立高亮或相机定位。">
          <div className="grid grid-cols-[120px_1fr] gap-2">
            <Field label="业务源">
              <select value={sourceId} onChange={(event) => setSourceId(event.target.value as WaterNetworkSourceId)} className={inputClassName}>
                {WATER_NETWORK_SOURCE_IDS.map((id) => <option key={id} value={id}>{GROUP_LABELS[id]}</option>)}
              </select>
            </Field>
            <Field label="Feature ID">
              <input value={featureId} onChange={(event) => setFeatureId(event.target.value)} className={inputClassName} />
            </Field>
          </div>
          <button type="button" disabled={!detailFeature} onClick={useSelectedFeature} className={secondaryButtonClassName}>使用当前地图选中</button>
          <div className="grid grid-cols-2 gap-2">
            <button type="button" disabled={!target.featureId || controllerState.pending} onClick={() => void commands.highlight(target)} className={primaryButtonClassName}><Crosshair size={14} />仅高亮</button>
            <button type="button" disabled={!target.featureId || controllerState.pending} onClick={() => void commands.locateAndHighlight(target)} className={primaryButtonClassName}><LocateFixed size={14} />定位并高亮</button>
          </div>
          <button type="button" onClick={commands.clearHighlight} className={secondaryButtonClassName}>清除高亮</button>
        </PanelSection>

        <PanelSection title="全网水流" description="按管渠拓扑方向显示静态或动画流纹。">
          <div className="grid grid-cols-2 gap-2">
            <button type="button" disabled={controllerState.pending || controllerState.flowVisible} onClick={() => void commands.setFlowVisible(true)} className={primaryButtonClassName}>开启水流</button>
            <button type="button" disabled={!controllerState.flowVisible} onClick={() => void commands.setFlowVisible(false)} className={secondaryButtonClassName}>关闭水流</button>
          </div>
        </PanelSection>

        <PanelSection title="数值标注" description="仅为当前测试目标显示一个数值属性。">
          <Field label="数值属性">
            {numericProperties.length ? (
              <select value={property} onChange={(event) => setProperty(event.target.value)} className={inputClassName}>
                {numericProperties.map(([key]) => <option key={key} value={key}>{key}</option>)}
              </select>
            ) : <input value={property} onChange={(event) => setProperty(event.target.value)} className={inputClassName} />}
          </Field>
          <div className="grid grid-cols-2 gap-2">
            <Field label="精度 0-3"><input type="number" min={0} max={3} value={precision} onChange={(event) => setPrecision(Number(event.target.value))} className={inputClassName} /></Field>
            <Field label="单位"><input maxLength={16} value={unit} onChange={(event) => setUnit(event.target.value)} className={inputClassName} /></Field>
          </div>
          <div className="grid grid-cols-2 gap-2">
            <button type="button" disabled={!target.featureId || !property || controllerState.pending} onClick={() => void commands.showValueLabel({ target, property, precision, unit })} className={primaryButtonClassName}>显示标注</button>
            <button type="button" onClick={commands.clearValueLabel} className={secondaryButtonClassName}>清除标注</button>
          </div>
        </PanelSection>

        <PanelSection title="样式编辑" description="覆盖业务组样式，交互语义色保持不变。">
          <Field label="业务图层组">
            <div className="relative">
              <select value={groupId} onChange={(event) => setGroupId(event.target.value as LayerGroupId)} className={cn(inputClassName, "appearance-none pr-8")}>
                {WATER_NETWORK_SOURCE_IDS.map((id) => <option key={id} value={id}>{GROUP_LABELS[id]}</option>)}
              </select>
              <ChevronDown size={14} className="pointer-events-none absolute right-2.5 top-2.5 text-slate-400" />
            </div>
          </Field>
          {geometry === "line" ? (
            <>
              <ColorField label="颜色" value={String(draft.color)} onChange={(value) => setDraft((current) => ({ ...current, color: value }))} />
              <RangeField label="透明度" min={0} max={1} step={0.05} value={Number(draft.opacity)} onChange={(value) => setDraft((current) => ({ ...current, opacity: value }))} />
              <RangeField label="宽度倍率" min={0.5} max={3} step={0.1} value={Number(draft.widthMultiplier)} onChange={(value) => setDraft((current) => ({ ...current, widthMultiplier: value }))} />
              <Field label="线型"><select value={draft.dash} onChange={(event) => setDraft((current) => ({ ...current, dash: event.target.value }))} className={inputClassName}><option value="original">原始</option><option value="solid">实线</option><option value="dashed">虚线</option></select></Field>
            </>
          ) : (
            <>
              <div className="grid grid-cols-2 gap-2"><ColorField label="填充" value={String(draft.fillColor)} onChange={(value) => setDraft((current) => ({ ...current, fillColor: value }))} /><ColorField label="描边" value={String(draft.strokeColor)} onChange={(value) => setDraft((current) => ({ ...current, strokeColor: value }))} /></div>
              <RangeField label="透明度" min={0} max={1} step={0.05} value={Number(draft.opacity)} onChange={(value) => setDraft((current) => ({ ...current, opacity: value }))} />
              <RangeField label="半径倍率" min={0.5} max={3} step={0.1} value={Number(draft.radiusMultiplier)} onChange={(value) => setDraft((current) => ({ ...current, radiusMultiplier: value }))} />
              <RangeField label="描边倍率" min={0.5} max={3} step={0.1} value={Number(draft.strokeMultiplier)} onChange={(value) => setDraft((current) => ({ ...current, strokeMultiplier: value }))} />
              {geometry === "scada" ? <RangeField label="图标倍率" min={0.5} max={2} step={0.1} value={Number(draft.iconMultiplier)} onChange={(value) => setDraft((current) => ({ ...current, iconMultiplier: value }))} /> : null}
            </>
          )}
          <div className="grid grid-cols-2 gap-2">
            <button type="button" onClick={applyDraft} className={primaryButtonClassName}>应用</button>
            <button type="button" onClick={() => commands.resetLayerGroupStyle(groupId)} className={secondaryButtonClassName}>重置本组</button>
          </div>
        </PanelSection>
      </div>

      <div className="shrink-0 border-t border-slate-200/70 p-3">
        <button type="button" onClick={commands.resetAll} className={cn(secondaryButtonClassName, "w-full")}><RotateCcw size={14} />重置全部</button>
      </div>
    </aside>
  );
}

function PanelSection({ title, description, children }: { title: string; description: string; children: React.ReactNode }) {
  return <section className="space-y-2.5 border-b border-slate-200/70 px-1 pb-4 last:border-b-0 last:pb-1"><div><h3 className="text-xs font-semibold text-slate-900">{title}</h3><p className="mt-0.5 text-[11px] leading-4 text-slate-500">{description}</p></div>{children}</section>;
}

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return <label className="block min-w-0"><span className="mb-1 block text-[11px] font-medium text-slate-600">{label}</span>{children}</label>;
}

function ColorField({ label, value, onChange }: { label: string; value: string; onChange: (value: string) => void }) {
  return <Field label={label}><div className="flex h-9 items-center gap-2 rounded-lg border border-slate-200 bg-white/80 px-2"><input type="color" value={value} onChange={(event) => onChange(event.target.value.toUpperCase())} className="h-5 w-7 cursor-pointer border-0 bg-transparent p-0" /><span className="text-xs font-medium text-slate-600">{value}</span></div></Field>;
}

function RangeField({ label, min, max, step, value, onChange }: { label: string; min: number; max: number; step: number; value: number; onChange: (value: number) => void }) {
  return <Field label={`${label} · ${value}`}><input aria-label={label} type="range" min={min} max={max} step={step} value={value} onChange={(event) => onChange(Number(event.target.value))} className="h-6 w-full accent-blue-600" /></Field>;
}

const inputClassName = "h-9 w-full rounded-lg border border-slate-200 bg-white/80 px-2.5 text-xs text-slate-800 outline-none transition focus:border-blue-400 focus:ring-2 focus:ring-blue-500/15";
const primaryButtonClassName = "inline-flex h-9 items-center justify-center gap-1.5 rounded-lg bg-blue-600 px-3 text-xs font-semibold text-white transition hover:bg-blue-700 active:scale-95 disabled:cursor-not-allowed disabled:scale-100 disabled:opacity-45";
const secondaryButtonClassName = "inline-flex h-9 items-center justify-center gap-1.5 rounded-lg border border-slate-200 bg-white/70 px-3 text-xs font-semibold text-slate-700 transition hover:bg-white active:scale-95 disabled:cursor-not-allowed disabled:scale-100 disabled:opacity-45";