import { Copy, LockKeyhole, Trash2 } from 'lucide-react';
import { Button, ScrubbableNumberInput, Select, Tooltip } from '../components/ui';
import { MAP_OBJECT_PLACEMENT_LABELS, type EditableMapObject } from './editor/types';

const PARAMETER_LABELS: Record<string, string> = {
  sizeX: '尺寸 X（m）',
  sizeY: '尺寸 Y（m）',
  sizeZ: '尺寸 Z（m）',
  radius: '半径（m）',
  height: '高度（m）',
  length: '长度（m）',
  width: '宽度（m）',
  rise: '抬升（m）',
  thickness: '厚度（m）',
  stepDepth: '踏步深度（m）',
  stepHeight: '踏步高度（m）',
  count: '踏步数量',
};

const SURFACE_PRESETS = {
  standard: {
    label: '标准防滑材质',
    rgb: [0.55, 0.6, 0.68] as const,
    friction: [1, 0.005, 0.0001] as const,
  },
  concrete: {
    label: '混凝土',
    rgb: [0.55, 0.58, 0.62] as const,
    friction: [1, 0.005, 0.0001] as const,
  },
  rubber: {
    label: '橡胶',
    rgb: [0.12, 0.14, 0.16] as const,
    friction: [1.5, 0.008, 0.0002] as const,
  },
  metal: {
    label: '金属',
    rgb: [0.42, 0.48, 0.54] as const,
    friction: [0.45, 0.003, 0.0001] as const,
  },
  ice: {
    label: '低摩擦冰面',
    rgb: [0.58, 0.82, 0.94] as const,
    friction: [0.08, 0.001, 0.00001] as const,
  },
} as const;

type SurfacePreset = keyof typeof SURFACE_PRESETS;

function close(a: number, b: number): boolean {
  return Math.abs(a - b) < 0.015;
}

function selectedSurfacePreset(object: EditableMapObject): SurfacePreset | 'custom' {
  for (const [key, preset] of Object.entries(SURFACE_PRESETS) as [
    SurfacePreset,
    (typeof SURFACE_PRESETS)[SurfacePreset],
  ][]) {
    if (
      preset.rgb.every((channel, index) => close(channel, object.rgba[index])) &&
      close(preset.friction[0], object.friction[0])
    )
      return key;
  }
  return 'custom';
}

function yawDegrees(object: EditableMapObject): number {
  const [w, x, y, z] = object.pose.quaternion;
  return (Math.atan2(2 * (w * z + x * y), 1 - 2 * (y * y + z * z)) * 180) / Math.PI;
}

function colorValue(object: EditableMapObject): string {
  return `#${object.rgba
    .slice(0, 3)
    .map((channel) =>
      Math.round(Math.min(1, Math.max(0, channel)) * 255)
        .toString(16)
        .padStart(2, '0'),
    )
    .join('')}`;
}

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <section className="border-b border-border-subtle pb-3">
      <h3 className="mb-2 text-xs font-semibold uppercase tracking-[0.12em] text-text-tertiary">
        {title}
      </h3>
      {children}
    </section>
  );
}

export function MapObjectInspector({
  object,
  loading,
  onUpdate,
  onDuplicate,
  onDelete,
}: {
  object: EditableMapObject;
  loading: boolean;
  onUpdate: (patch: Partial<Omit<EditableMapObject, 'id' | 'type'>>) => void;
  onDuplicate: () => void;
  onDelete: () => void;
}) {
  const poseLocked = object.placementMode === 'locked';
  const updatePosition = (index: number, value: number) => {
    if (!Number.isFinite(value)) return;
    const position = [...object.pose.position] as [number, number, number];
    position[index] = value;
    onUpdate({ pose: { ...object.pose, position } });
  };
  const updateParameter = (key: string, value: number) => {
    if (!Number.isFinite(value) || value <= 0) return;
    onUpdate({
      parameters: {
        ...object.parameters,
        [key]: key === 'count' ? Math.round(value) : value,
      },
    });
  };
  const updateFriction = (index: number, value: number) => {
    if (!Number.isFinite(value) || value < 0) return;
    const friction = [...object.friction] as [number, number, number];
    friction[index] = value;
    onUpdate({ friction });
  };

  return (
    <div className="space-y-2" aria-label="地图物体检查器">
      <Section title="对象">
        <div className="space-y-2">
          <label className="block text-xs text-text-secondary">
            名称
            <input
              aria-label="对象名称"
              className="mt-1 h-7 w-full rounded border border-border-strong bg-input px-2"
              value={object.name}
              disabled={loading}
              onChange={(event) => {
                if (event.target.value.trim()) onUpdate({ name: event.target.value });
              }}
            />
          </label>
          <label className="flex items-center justify-between text-xs text-text-secondary">
            <span>启用碰撞与渲染</span>
            <input
              aria-label="启用地图对象"
              type="checkbox"
              checked={object.enabled}
              disabled={loading}
              onChange={(event) => onUpdate({ enabled: event.target.checked })}
            />
          </label>
        </div>
      </Section>

      <Section title="位姿">
        <div className="mb-2 flex items-center justify-between rounded bg-surface/55 px-2 py-1.5 text-xs text-text-secondary">
          <span>{MAP_OBJECT_PLACEMENT_LABELS[object.placementMode]}</span>
          <span className="flex items-center gap-1 text-text-tertiary">
            {poseLocked && <LockKeyhole className="h-3 w-3" aria-hidden="true" />}
            <Tooltip content="在视口底部切换放置方式；Z 随贴地或支撑面计算，锁定时不可移动。">
              <button type="button" className="min-h-7 underline decoration-dotted">
                放置说明
              </button>
            </Tooltip>
          </span>
        </div>
        <div className="grid grid-cols-3 gap-2">
          {object.pose.position.map((value, index) => (
            <ScrubbableNumberInput
              key={index}
              label={`${['X', 'Y', 'Z'][index]}（m）`}
              axis={(['x', 'y', 'z'] as const)[index]}
              aria-label={`对象位置${['X', 'Y', 'Z'][index]}`}
              value={value}
              step={0.1}
              disabled={loading || poseLocked || index === 2}
              onValueChange={(next) => updatePosition(index, next)}
            />
          ))}
        </div>
        <ScrubbableNumberInput
          containerClassName="mt-2"
          label="绕 Z 旋转（°）"
          axis="z"
          aria-label="对象绕Z旋转"
          value={Number(yawDegrees(object).toFixed(4))}
          step={1}
          disabled={loading || poseLocked}
          onValueChange={(next) => {
            const half = (next * Math.PI) / 360;
            onUpdate({
              pose: {
                ...object.pose,
                quaternion: [Math.cos(half), 0, 0, Math.sin(half)],
              },
            });
          }}
        />
      </Section>

      <Section title="尺寸">
        <div className="grid grid-cols-2 gap-2">
          {Object.entries(object.parameters).map(([key, value]) => (
            <ScrubbableNumberInput
              key={key}
              label={PARAMETER_LABELS[key] ?? key}
              labelClassName="whitespace-normal"
              aria-label={`对象参数${key}`}
              value={value}
              min={0.001}
              step={key === 'count' ? 1 : 0.1}
              disabled={loading}
              onValueChange={(next) => updateParameter(key, next)}
            />
          ))}
        </div>
      </Section>

      <details className="domain-details">
        <summary>表面材质</summary>
        <div className="grid grid-cols-2 gap-2">
          <label className="text-xs text-text-secondary">
            材质预设
            <Select
              aria-label="对象表面材质"
              className="mt-1 w-full"
              value={selectedSurfacePreset(object)}
              disabled={loading}
              onChange={(event) => {
                if (event.target.value === 'custom') return;
                const preset = SURFACE_PRESETS[event.target.value as SurfacePreset];
                onUpdate({
                  rgba: [...preset.rgb, object.rgba[3]],
                  friction: [...preset.friction],
                });
              }}
            >
              <option value="custom">自定义</option>
              {(
                Object.entries(SURFACE_PRESETS) as [
                  SurfacePreset,
                  (typeof SURFACE_PRESETS)[SurfacePreset],
                ][]
              ).map(([value, preset]) => (
                <option key={value} value={value}>
                  {preset.label}
                </option>
              ))}
            </Select>
          </label>
          <label className="text-xs text-text-secondary">
            表面颜色
            <input
              aria-label="对象颜色"
              className="mt-1 h-7 w-full rounded border border-border-strong bg-input p-0.5"
              type="color"
              value={colorValue(object)}
              disabled={loading}
              onChange={(event) => {
                const value = event.target.value;
                if (!/^#[0-9a-f]{6}$/i.test(value)) return;
                onUpdate({
                  rgba: [
                    Number.parseInt(value.slice(1, 3), 16) / 255,
                    Number.parseInt(value.slice(3, 5), 16) / 255,
                    Number.parseInt(value.slice(5, 7), 16) / 255,
                    object.rgba[3],
                  ],
                });
              }}
            />
          </label>
        </div>
        <ScrubbableNumberInput
          containerClassName="mt-2"
          label="不透明度"
          aria-label="对象不透明度"
          value={object.rgba[3]}
          min={0}
          max={1}
          step={0.05}
          disabled={loading}
          onValueChange={(alpha) =>
            onUpdate({
              rgba: [object.rgba[0], object.rgba[1], object.rgba[2], alpha],
            })
          }
        />
      </details>

      <details className="domain-details">
        <summary>摩擦力</summary>
        <div className="grid grid-cols-3 gap-2">
          {object.friction.map((value, index) => (
            <ScrubbableNumberInput
              key={index}
              label={['滑动', '扭转', '滚动'][index]}
              aria-label={`对象${['滑动摩擦', '扭转摩擦', '滚动摩擦'][index]}`}
              value={value}
              min={0}
              max={5}
              step={index === 0 ? 0.05 : 0.0001}
              disabled={loading}
              onValueChange={(next) => updateFriction(index, next)}
            />
          ))}
        </div>
      </details>

      <div className="grid grid-cols-2 gap-2">
        <Button disabled={loading} icon={<Copy className="h-3 w-3" />} onClick={onDuplicate}>
          复制对象
        </Button>
        <Button
          variant="danger"
          disabled={loading}
          icon={<Trash2 className="h-3 w-3" />}
          onClick={onDelete}
        >
          删除对象
        </Button>
      </div>
    </div>
  );
}