import { useState } from 'react';
import {
  BadgeCheck,
  CheckCircle2,
  Layers3,
  MapPinned,
  Mountain,
  Plus,
  RotateCcw,
  Trash2,
  Zap,
} from 'lucide-react';
import { Button, Select } from '../components/ui';
import {
  CERTIFIED_MAP_ASSETS,
  encodeMapLibraryDragPayload,
  MAP_LIBRARY_DRAG_MIME,
} from './editor/assetCatalog';
import {
  MAP_OBJECT_PLACEMENT_LABELS,
  type EditableMapDocument,
  type EditableMapObjectType,
  type MapObjectPlacementMode,
} from './editor/types';
import type { MapEntry } from '../project/types';
import {
  PHYSICAL_MAP_PRESET_LABELS,
  SYSTEM_TERRAIN_PRESETS,
  type PlacedMapAsset,
  type SystemTerrainPreset,
} from './types';

function AssetPreview({ type, color }: { type: EditableMapObjectType; color: string }) {
  const shape =
    type === 'cylinder'
      ? 'h-9 w-9 rounded-full'
      : type === 'capsule'
        ? 'h-10 w-6 rounded-full'
        : type === 'ramp'
          ? 'h-0 w-0 border-b-[34px] border-l-[48px] border-l-transparent'
          : type === 'stairs'
            ? 'h-9 w-11 [clip-path:polygon(0_100%,0_66%,34%_66%,34%_33%,67%_33%,67%_0,100%_0,100%_100%)]'
            : 'h-9 w-9 rounded-sm';
  return (
    <div className="flex h-16 items-center justify-center rounded bg-black/10" aria-hidden="true">
      <div
        className={`${shape} shadow-[0_6px_14px_rgba(0,0,0,0.22)]`}
        style={type === 'ramp' ? { borderBottomColor: color } : { backgroundColor: color }}
      />
    </div>
  );
}

function TerrainPreview({ preset }: { preset: SystemTerrainPreset }) {
  const grid = (
    <g stroke="currentColor" strokeWidth="0.45" opacity="0.18">
      <path d="M14 50 60 23l46 27-46 27z" />
      <path d="m26 57 46-27m-34 34 46-27m-58 6 46 27m-34-34 46 27" />
    </g>
  );
  let shape;
  if (preset === 'discrete_obstacles')
    shape = (
      <g fill="currentColor" fillOpacity="0.16" stroke="currentColor">
        <path d="m31 48 9-5 9 5-9 5zM40 53V39l9-5v14M40 39l-9-5v14" />
        <path d="m55 39 8-5 8 5-8 5zM63 44V27l8-5v17M63 27l-8-5v17" />
        <path d="m77 51 10-6 10 6-10 6zM87 57V38l10-6v19M87 38l-10-6v19" />
      </g>
    );
  else if (preset === 'gap')
    shape = (
      <g fill="currentColor" fillOpacity="0.12" stroke="currentColor">
        <path d="m21 48 31-18 15 9-31 18zM69 40l15 9 17-10-15-9z" />
        <path d="m36 57 31-18v8L36 65zM69 40l17-10v8L69 48z" fillOpacity="0.24" />
      </g>
    );
  else if (preset === 'inverted_pyramid_stairs' || preset === 'pit')
    shape = (
      <g fill="currentColor" fillOpacity="0.08" stroke="currentColor">
        <path d="m22 47 38-22 38 22-38 22z" />
        <path d="m32 47 28-16 28 16-28 16z" />
        <path d="m43 47 17-10 17 10-17 10z" fillOpacity="0.2" />
        {preset === 'inverted_pyramid_stairs' && (
          <path d="M32 47v7m11-7v10m17-10v16m17-16v10m11-10v7" />
        )}
      </g>
    );
  else if (preset === 'pyramid_stairs')
    shape = (
      <g fill="currentColor" stroke="currentColor" strokeLinejoin="round">
        <path d="m25 52 12 7 52-30-12-7z" fillOpacity="0.1" />
        <path d="m37 45 12 7 40-23-12-7z" fillOpacity="0.17" />
        <path d="m49 38 12 7 28-16-12-7z" fillOpacity="0.24" />
        <path d="m61 31 12 7 16-9-12-7z" fillOpacity="0.32" />
      </g>
    );
  else if (preset === 'rails')
    shape = (
      <g fill="none" stroke="currentColor" strokeLinecap="round">
        <path d="m26 58 53-31m15 40 12-7" strokeWidth="2.3" opacity="0.25" />
        <path d="m26 58 53-31m15 40 12-7M33 58V45m14 5V37m30 12V27m20 39V53" strokeWidth="1.2" />
      </g>
    );
  else if (preset === 'rough')
    shape = (
      <path
        d="m20 54 10-18 9 9 10-22 11 17 10-13 10 20 10-8 10 15-40 18z"
        fill="currentColor"
        fillOpacity="0.16"
        stroke="currentColor"
        strokeLinejoin="round"
      />
    );
  else if (preset === 'stepping_stones')
    shape = (
      <g fill="currentColor" fillOpacity="0.2" stroke="currentColor">
        <path d="m27 52 10-6 10 6-10 6zM46 39l10-6 10 6-10 6zM66 54l10-6 10 6-10 6zM83 36l10-6 10 6-10 6z" />
      </g>
    );
  else
    shape = (
      <g fill="none" stroke="currentColor" strokeLinecap="round">
        <path d="M19 48c10-17 20-17 30 0s20 17 30 0 20-17 29-2" strokeWidth="5" opacity="0.16" />
        <path d="M19 48c10-17 20-17 30 0s20 17 30 0 20-17 29-2" strokeWidth="1.4" />
        <path d="M25 59c10-17 20-17 30 0s20 17 30 0 15-13 23-7" opacity="0.55" />
      </g>
    );
  return (
    <svg viewBox="0 0 120 80" className="h-[76px] w-full text-accent" aria-hidden="true">
      {grid}
      {shape}
    </svg>
  );
}

function AddAction({ label }: { label: string }) {
  return (
    <span className="inline-flex items-center gap-1 text-[11px] font-medium text-accent">
      {label}
      <span className="flex h-5 w-5 items-center justify-center rounded-full bg-accent text-white">
        <Plus className="h-3.5 w-3.5" aria-hidden="true" />
      </span>
    </span>
  );
}

export function MapAssetLibrary({
  disabled,
  terrainSize,
  document,
  documents,
  maps = [],
  placedMaps = [],
  activeMapId,
  pendingSceneChangeCount = 0,
  pendingSceneIds = [],
  onAdd,
  onAddProjectMap,
  onSelectTerrain,
  onApplyScene,
  onDiscardScene,
  onSelectMap,
  onRemoveMap,
  onSelectObject,
}: {
  disabled: boolean;
  terrainSize: number;
  document?: EditableMapDocument | null;
  documents?: ReadonlyMap<string, EditableMapDocument>;
  maps?: MapEntry[];
  placedMaps?: PlacedMapAsset[];
  activeMapId?: string;
  pendingSceneChangeCount?: number;
  pendingSceneIds?: string[];
  onAdd: (
    type: EditableMapObjectType,
    placementMode: MapObjectPlacementMode,
  ) => void | Promise<void>;
  onAddProjectMap?: (descriptorPath: string) => void;
  onSelectTerrain: (preset: SystemTerrainPreset) => void;
  onApplyScene?: () => void;
  onDiscardScene?: () => void;
  onSelectMap?: (id: string) => void;
  onRemoveMap?: (id: string) => void;
  onSelectObject?: (mapId: string, objectId: string) => void;
}) {
  const [placementMode, setPlacementMode] = useState<MapObjectPlacementMode>('auto_ground');
  const pendingSceneIdSet = new Set(pendingSceneIds);
  const placedObjectCount = placedMaps.reduce(
    (total, map) =>
      total +
      (map.selection.kind === 'project'
        ? (documents?.get(map.selection.descriptorPath)?.objects.length ?? 0)
        : 0),
    0,
  );
  return (
    <section aria-label="地图资产库" className="space-y-3 p-3">
      <header>
        <div className="flex items-center gap-1.5 text-xs font-semibold text-text-primary">
          <MapPinned className="h-3.5 w-3.5 text-accent" aria-hidden="true" />
          统一地图资产库
        </div>
        <p className="mt-1 text-[10px] leading-relaxed text-text-tertiary">
          工程地图、认证资产和程序地形统一执行“放置 → 预览 → 一次应用”，不会因资产类型切换编译边界。
        </p>
      </header>
      <div
        className="rounded-lg border border-border-subtle bg-panel-muted/50 p-2.5"
        aria-label="场景资产树"
      >
        <div className="flex items-center justify-between text-xs font-medium text-text-primary">
          <span className="flex items-center gap-1.5">
            <Layers3 className="h-3.5 w-3.5 text-accent" aria-hidden="true" />
            已放置地图
          </span>
          <span className="technical-value text-[10px] text-text-tertiary">
            {placedMaps.length} 个实例
            {placedObjectCount ? ` · ${placedObjectCount} 个对象` : ''}
          </span>
        </div>
        {placedMaps.length ? (
          <div className="mt-2 max-h-52 space-y-0.5 overflow-auto panel-scroll" role="tree">
            {placedMaps.map((map) => {
              const active = map.id === activeMapId;
              const mapDocument =
                map.selection.kind === 'project'
                  ? (documents?.get(map.selection.descriptorPath) ?? (active ? document : null))
                  : null;
              return (
                <div key={map.id} role="treeitem" aria-selected={active}>
                  <div
                    className={`flex items-center gap-1 rounded ${active ? 'bg-accent-soft text-accent' : 'text-text-secondary hover:bg-element-hover'}`}
                  >
                    <button
                      type="button"
                      className="flex min-w-0 flex-1 items-center gap-2 px-2 py-1.5 text-left text-[11px] disabled:cursor-not-allowed disabled:opacity-50"
                      aria-label={`选择地图实例 ${map.name}`}
                      disabled={disabled}
                      onClick={() => onSelectMap?.(map.id)}
                    >
                      <MapPinned className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
                      <span className="min-w-0 flex-1 truncate">{map.name}</span>
                      <span className="text-[9px] text-text-tertiary">
                        {pendingSceneIdSet.has(map.id)
                          ? '待应用'
                          : map.selection.kind === 'builtin'
                            ? '参数地形'
                            : '工程地图'}
                      </span>
                    </button>
                    <button
                      type="button"
                      className="mr-1 rounded p-1 text-text-tertiary hover:bg-danger/10 hover:text-danger"
                      aria-label={`删除地图实例 ${map.name}`}
                      disabled={disabled}
                      onClick={() => onRemoveMap?.(map.id)}
                    >
                      <Trash2 className="h-3 w-3" aria-hidden="true" />
                    </button>
                  </div>
                  {mapDocument?.objects.length ? (
                    <div className="ml-4 border-l border-border pl-1" role="group">
                      {mapDocument.objects.map((object) => (
                        <button
                          key={object.id}
                          type="button"
                          className={`flex w-full items-center gap-2 rounded px-2 py-1 text-left text-[10px] hover:bg-element-hover hover:text-text-primary ${active ? 'text-text-secondary' : 'text-text-tertiary'}`}
                          onClick={() => onSelectObject?.(map.id, object.id)}
                        >
                          <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-accent" />
                          <span className="min-w-0 flex-1 truncate">{object.name}</span>
                          <span className="text-[9px] text-text-tertiary">{object.type}</span>
                        </button>
                      ))}
                    </div>
                  ) : null}
                </div>
              );
            })}
          </div>
        ) : (
          <p className="mt-2 text-[10px] leading-relaxed text-text-tertiary">
            尚未放置地图。从下方工程地图、认证资产或参数地形添加，实例会在这里统一管理。
          </p>
        )}
      </div>

      {pendingSceneChangeCount > 0 && (
        <div
          role="status"
          className="rounded-lg border border-accent/30 bg-accent-soft p-2.5 text-[10px] text-text-secondary"
        >
          <div className="flex items-center gap-1.5 font-medium text-accent">
            <Zap className="h-3.5 w-3.5" aria-hidden="true" />
            {pendingSceneChangeCount} 项场景更改待应用
          </div>
          <p className="mt-1 leading-relaxed">
            工程地图、认证资产与参数地形共享同一草稿；继续编辑不会触发 MuJoCo 编译。
          </p>
          <div className="mt-2 flex gap-2">
            <Button
              variant="primary"
              className="min-w-0 flex-1"
              disabled={disabled}
              onClick={onApplyScene}
            >
              一次编译应用
            </Button>
            <Button
              variant="ghost"
              aria-label="放弃场景更改"
              disabled={disabled}
              onClick={onDiscardScene}
            >
              <RotateCcw className="mr-1 h-3 w-3" aria-hidden="true" />
              放弃
            </Button>
          </div>
        </div>
      )}

      {maps.length > 0 && (
        <div className="rounded-lg border border-border-subtle bg-panel-muted/50 p-2.5">
          <div className="text-xs font-medium text-text-primary">工程地图源</div>
          <p className="mt-1 text-[10px] text-text-tertiary">
            点击添加或拖到画布定位；实例位姿独立，源内容由同源实例共享。
          </p>
          <div className="mt-2 space-y-1">
            {maps.map((map) => (
              <div
                key={map.descriptorPath}
                draggable={!disabled}
                data-project-map={map.descriptorPath}
                className={`flex items-center gap-2 rounded border border-border-subtle px-2 py-1.5 ${disabled ? 'opacity-50' : 'cursor-grab hover:border-accent active:cursor-grabbing'}`}
                onDragStart={(event) => {
                  if (disabled) {
                    event.preventDefault();
                    return;
                  }
                  event.dataTransfer.effectAllowed = 'copy';
                  event.dataTransfer.setData(
                    MAP_LIBRARY_DRAG_MIME,
                    encodeMapLibraryDragPayload({
                      kind: 'project',
                      descriptorPath: map.descriptorPath,
                    }),
                  );
                  event.dataTransfer.setData('text/plain', map.name);
                }}
              >
                <MapPinned className="h-3.5 w-3.5 shrink-0 text-accent" aria-hidden="true" />
                <span className="min-w-0 flex-1 truncate text-[11px] text-text-secondary">
                  {map.name}
                </span>
                <Button
                  disabled={disabled}
                  aria-label={`放置工程地图 ${map.name}`}
                  onClick={() => onAddProjectMap?.(map.descriptorPath)}
                >
                  添加
                </Button>
              </div>
            ))}
          </div>
        </div>
      )}

      <div className="flex items-end justify-between gap-3">
        <div className="min-w-0">
          <div className="flex items-center gap-1.5 text-xs font-medium text-text-primary">
            <BadgeCheck className="h-3.5 w-3.5 text-accent" aria-hidden="true" />
            认证资产
          </div>
          <p className="mt-1 text-[10px] leading-relaxed text-text-tertiary">
            点击添加，或按住资产拖到画布落位。
          </p>
        </div>
        <label className="w-36 shrink-0 text-[10px] text-text-secondary">
          放置方式
          <Select
            aria-label="新增资产放置方式"
            className="mt-1 w-full"
            value={placementMode}
            disabled={disabled}
            onChange={(event) => setPlacementMode(event.target.value as MapObjectPlacementMode)}
          >
            {(Object.keys(MAP_OBJECT_PLACEMENT_LABELS) as MapObjectPlacementMode[]).map((mode) => (
              <option key={mode} value={mode}>
                {MAP_OBJECT_PLACEMENT_LABELS[mode]}
              </option>
            ))}
          </Select>
        </label>
      </div>
      <div className="grid grid-cols-2 gap-2">
        {CERTIFIED_MAP_ASSETS.map((asset) => (
          <article
            key={asset.type}
            draggable={!disabled}
            data-map-asset={asset.type}
            className={`overflow-hidden rounded-lg border border-border-subtle bg-panel-muted shadow-sm transition-colors ${disabled ? 'opacity-50' : 'cursor-grab hover:border-accent active:cursor-grabbing'}`}
            onDragStart={(event) => {
              if (disabled) {
                event.preventDefault();
                return;
              }
              event.dataTransfer.effectAllowed = 'copy';
              event.dataTransfer.setData(
                MAP_LIBRARY_DRAG_MIME,
                encodeMapLibraryDragPayload({
                  kind: 'certified',
                  type: asset.type,
                  placementMode,
                }),
              );
              event.dataTransfer.setData('text/plain', asset.name);
            }}
          >
            <div className="p-2 pb-0">
              <AssetPreview type={asset.type} color={asset.color} />
            </div>
            <div className="border-t border-border-subtle p-2">
              <div className="truncate text-[11px] font-semibold text-text-primary">
                {asset.name}
              </div>
              <div className="mt-0.5 truncate text-[9px] text-text-tertiary">
                {asset.description}
              </div>
              <Button
                className="mt-2 w-full"
                disabled={disabled}
                aria-label={`添加${asset.name}`}
                onClick={() => void onAdd(asset.type, placementMode)}
              >
                <Plus className="mr-1 h-3 w-3" aria-hidden="true" />
                添加
              </Button>
            </div>
          </article>
        ))}
      </div>

      <div className="border-t border-border-subtle pt-3">
        <div className="flex items-center gap-1.5 text-xs font-medium text-text-primary">
          <Mountain className="h-3.5 w-3.5 text-accent" aria-hidden="true" />
          系统参数化地形
        </div>
        <p className="mt-1 text-[10px] leading-relaxed text-text-tertiary">
          点击添加或拖到画布定位。新增先进入轻量预览，可连续放置后一次编译。
        </p>
      </div>
      <div className="grid grid-cols-2 gap-2">
        {SYSTEM_TERRAIN_PRESETS.map((preset) => (
          <article
            key={preset}
            draggable={!disabled}
            data-system-terrain={preset}
            className={`group relative overflow-hidden rounded-lg border border-border-subtle bg-panel-muted shadow-sm transition-colors ${disabled ? 'opacity-50' : 'cursor-grab hover:border-accent active:cursor-grabbing'}`}
            onDragStart={(event) => {
              if (disabled) {
                event.preventDefault();
                return;
              }
              event.dataTransfer.effectAllowed = 'copy';
              event.dataTransfer.setData(
                MAP_LIBRARY_DRAG_MIME,
                encodeMapLibraryDragPayload({ kind: 'terrain', preset }),
              );
              event.dataTransfer.setData('text/plain', PHYSICAL_MAP_PRESET_LABELS[preset]);
            }}
          >
            <div className="absolute right-2 top-2 z-10 rounded-full bg-panel-bg/90 p-0.5 text-success">
              <CheckCircle2 className="h-3.5 w-3.5" aria-hidden="true" />
            </div>
            <div className="px-1 pt-1">
              <TerrainPreview preset={preset} />
            </div>
            <div className="border-t border-border-subtle px-2 pb-2 pt-1.5">
              <div className="truncate text-[11px] font-semibold text-text-primary">
                {PHYSICAL_MAP_PRESET_LABELS[preset]}
              </div>
              <div className="mt-0.5 text-[9px] text-text-tertiary">
                {terrainSize.toFixed(2)} × {terrainSize.toFixed(2)} m
              </div>
              <button
                type="button"
                className="mt-1 flex w-full justify-end rounded outline-none focus-visible:ring-2 focus-visible:ring-accent/30"
                disabled={disabled}
                aria-label={`添加${PHYSICAL_MAP_PRESET_LABELS[preset]}`}
                onClick={() => onSelectTerrain(preset)}
              >
                <AddAction label="添加" />
              </button>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}