import React, { useState } from "react";
import type { Asset, Entity, Project } from "../engine/schema.ts";
export function Field2D({
  label,
  value,
  onChange,
  min,
  step = 0.1,
}: {
  label: string;
  value: number;
  onChange: (v: number) => void;
  min?: number;
  step?: number;
}) {
  return (
    <label className="property">
      <span>{label}</span>
      <input
        key={value}
        aria-label={label}
        type="number"
        defaultValue={value}
        min={min}
        step={step}
        onBlur={(e) => {
          const v = Number(e.target.value);
          if (Number.isFinite(v) && v !== value) onChange(v);
        }}
        onKeyDown={(e) => {
          if (e.key === "Enter") e.currentTarget.blur();
        }}
      />
    </label>
  );
}
export function FrameThumb({
  asset,
  index,
  size = 40,
}: {
  asset?: Asset;
  index: number;
  size?: number;
}) {
  const f = asset?.image?.frames[index],
    im = asset?.image;
  if (!im || !f) return <span>{index}</span>;
  const scale = size / Math.max(f.width, f.height);
  return (
    <span
      className="frame-thumb"
      style={{
        width: f.width * scale,
        height: f.height * scale,
        backgroundImage: `url("${asset!.uri}")`,
        backgroundSize: `${im.width * scale}px ${im.height * scale}px`,
        backgroundPosition: `${-f.x * scale}px ${-f.y * scale}px`,
        imageRendering: im.filter === "nearest" ? "pixelated" : "auto",
      }}
    />
  );
}
export function Inspector2D({
  type,
  c,
  node,
  project,
  change,
  editImage,
  preview,
  brush,
}: {
  type: string;
  c: any;
  node: Entity;
  project: Project;
  change: (v: any) => void;
  editImage: (id: string) => void;
  preview: (name: string) => void;
  brush: (frame: number | null, fill?: boolean) => void;
}) {
  const [paintMode, setPaintMode] = useState("brush");
  const set = (key: string, value: any) => change({ ...c, [key]: value });
  const num = (
    key: string,
    label: string,
    fallback = 0,
    min?: number,
    step = 0.1,
  ) => (
    <Field2D
      key={key}
      label={label}
      value={c[key] ?? fallback}
      onChange={(v) => set(key, v)}
      min={min}
      step={step}
    />
  );
  const bool = (key: string, label: string, fallback = false) => (
    <label className="property" key={key}>
      <span>{label}</span>
      <input
        type="checkbox"
        checked={c[key] ?? fallback}
        onChange={(e) => set(key, e.target.checked)}
      />
    </label>
  );
  const select = (
    key: string,
    label: string,
    options: [string, string][],
    fallback = "",
  ) => (
    <label className="property">
      <span>{label}</span>
      <select
        aria-label={label}
        value={c[key] ?? fallback}
        onChange={(e) => set(key, e.target.value)}
      >
        {options.map(([v, l]) => (
          <option key={v} value={v}>
            {l}
          </option>
        ))}
      </select>
    </label>
  );
  const pair = (
    key: string,
    label: string,
    fallback = [0, 0],
    min?: number,
  ) => (
    <div className="pair2d" key={key}>
      {[0, 1].map((i) => (
        <Field2D
          key={i}
          label={label + " " + ["X", "Y"][i]}
          value={(c[key] || fallback)[i]}
          min={min}
          onChange={(v) => {
            const a = [...(c[key] || fallback)];
            a[i] = v;
            set(key, a);
          }}
        />
      ))}
    </div>
  );
  const asset = project.assets.find((a) => a.id === c.assetId),
    frames = asset?.image?.frames || [];
  const imageSelect = (
    <>
      <label className="property">
        <span>Изображение</span>
        <select
          aria-label="Изображение спрайта"
          value={c.assetId || ""}
          onChange={(e) =>
            change({
              ...c,
              assetId: e.target.value,
              ...(type === "sprite" ? { frame: 0 } : { cells: [] }),
            })
          }
        >
          <option value="">Белый квадрат</option>
          {project.assets
            .filter((a) => a.kind === "image")
            .map((a) => (
              <option key={a.id} value={a.id}>
                {a.name}
              </option>
            ))}
        </select>
      </label>
      {asset && (
        <button onClick={() => editImage(asset.id)}>Нарезка и pivot…</button>
      )}
    </>
  );
  const sorting = (
    <>
      {num("layer", "Слой", 0, undefined, 1)}
      {num("order", "Порядок в слое", 0, undefined, 1)}
      {bool("sortY", "Сортировать по Y")}
      <label className="property">
        <span>Цвет</span>
        <input
          type="color"
          value={c.color || "#ffffff"}
          onChange={(e) => set("color", e.target.value)}
        />
      </label>
      {num("alpha", "Непрозрачность", 1, 0)}
      {bool("lit", "Освещение 3D")}
    </>
  );
  if (type === "sprite")
    return (
      <>
        {imageSelect}
        <label className="property">
          <span>Кадр</span>
          <select
            aria-label="Кадр спрайта"
            value={c.frame || 0}
            onChange={(e) => set("frame", +e.target.value)}
          >
            {(frames.length ? frames : [{ name: "Квадрат" }]).map((f, i) => (
              <option key={i} value={i}>
                {i}: {f.name}
              </option>
            ))}
          </select>
        </label>
        {pair(
          "size",
          "Размер",
          frames[c.frame || 0]
            ? [
                frames[c.frame || 0].width / asset!.image!.pixelsPerUnit,
                frames[c.frame || 0].height / asset!.image!.pixelsPerUnit,
              ]
            : [1, 1],
          0.001,
        )}
        {c.size && (
          <button
            onClick={() => {
              const { size, ...rest } = c;
              change(rest);
            }}
          >
            Размер из PPU
          </button>
        )}
        {bool("flipX", "Отразить X")}
        {bool("flipY", "Отразить Y")}
        {sorting}
      </>
    );
  if (type === "tilemap")
    return (
      <>
        {imageSelect}
        {pair("tileSize", "Тайл", [1, 1], 0.001)}
        {num("width", "Столбцы", 32, 1, 1)}
        {num("height", "Строки", 18, 1, 1)}
        {bool("collisions", "Коллизии тайлов")}
        {sorting}
        <p className="small-note">
          Рисование в виде 2D. Один мазок — один шаг Undo. Начало карты: нижний
          левый угол.
        </p>
        <div className="tile-tools">
          {[
            ["brush", "Кисть"],
            ["fill", "Заливка"],
            ["erase", "Ластик"],
          ].map(([v, l]) => (
            <button
              key={v}
              className={paintMode === v ? "active" : ""}
              onClick={() => {
                setPaintMode(v);
                brush(v === "erase" ? null : 0, v === "fill");
              }}
            >
              {l}
            </button>
          ))}
        </div>
        <div className="tile-palette">
          {(frames.length ? frames : [{ name: "Квадрат" }]).map((f, i) => (
            <button
              key={i}
              title={`${i}: ${f.name}`}
              onClick={() =>
                brush(paintMode === "erase" ? null : i, paintMode === "fill")
              }
            >
              <FrameThumb asset={asset} index={i} />
              <small>{i}</small>
            </button>
          ))}
        </div>
        <button onClick={() => set("cells", [])}>Очистить карту</button>
        <p className="small-note">
          {c.cells.length} тайлов. Выберите инструмент Q/W/E/R, чтобы закончить
          рисование.
        </p>
      </>
    );
  if (type === "spriteAnimator") {
    const clips = c.clips || [];
    return (
      <>
        {select("autoplay", "Автозапуск", [
          ["", "Нет"],
          ...clips.map((cl: any) => [cl.name, cl.name] as [string, string]),
        ])}
        {bool("autoStates", "Авто: idle / run / jump")}
        <p className="small-note">
          Автоматические состояния используют скорость и grounded из
          Character2D.
        </p>
        {clips.map((cl: any, i: number) => {
          const update = (v: any) =>
            set(
              "clips",
              clips.map((old: any, j: number) =>
                j === i ? { ...old, ...v } : old,
              ),
            );
          return (
            <div className="clip2d" key={i}>
              <label className="property">
                <span>Название</span>
                <input
                  defaultValue={cl.name}
                  key={cl.name}
                  onBlur={(e) => {
                    const name = e.target.value;
                    change({
                      ...c,
                      autoplay: c.autoplay === cl.name ? name : c.autoplay,
                      clips: clips.map((old: any, j: number) =>
                        j === i ? { ...old, name } : old,
                      ),
                    });
                  }}
                />
              </label>
              <label className="property">
                <span>Кадры через запятую</span>
                <input
                  aria-label={"Кадры " + cl.name}
                  key={cl.frames.join(",")}
                  defaultValue={cl.frames.join(",")}
                  onBlur={(e) =>
                    update({
                      frames: e.target.value
                        .split(",")
                        .map((s) => Number(s.trim())),
                    })
                  }
                />
              </label>
              <Field2D
                label={"FPS " + cl.name}
                value={cl.fps}
                min={0.1}
                onChange={(fps) => update({ fps })}
              />
              <label className="property">
                Цикл
                <input
                  type="checkbox"
                  checked={cl.loop !== false}
                  onChange={(e) => update({ loop: e.target.checked })}
                />
              </label>
              <button onClick={() => preview(cl.name)}>▶ Просмотр</button>
              <button
                onClick={() =>
                  change({
                    ...c,
                    autoplay: c.autoplay === cl.name ? "" : c.autoplay,
                    clips: clips.filter((_: any, j: number) => j !== i),
                  })
                }
              >
                Удалить клип
              </button>
            </div>
          );
        })}
        <button
          onClick={() => {
            let name = "clip";
            for (let i = 1; clips.some((cl: any) => cl.name === name); i++)
              name = "clip" + i;
            set("clips", [...clips, { name, frames: [0], fps: 8, loop: true }]);
          }}
        >
          Добавить клип
        </button>
      </>
    );
  }
  if (type === "rigidbody2d")
    return (
      <>
        {select(
          "type",
          "Тип тела",
          [
            ["fixed", "Неподвижное"],
            ["dynamic", "Динамическое"],
            ["kinematic", "Кинематическое"],
          ],
          "dynamic",
        )}
        {num("mass", "Масса", 1, 0)}
        {num("friction", "Трение", 0.5, 0)}
        {num("restitution", "Упругость", 0, 0)}
        {num("gravityScale", "Множитель гравитации", 1)}
        {num("linearDamping", "Сопротивление", 0, 0)}
        {num("angularDamping", "Угловое сопротивление", 0, 0)}
        {bool("lockRotation", "Фиксировать вращение", true)}
        {bool("ccd", "Непрерывные коллизии", true)}
      </>
    );
  if (type === "collider2d")
    return (
      <>
        <label className="property">
          <span>Форма</span>
          <select
            value={c.shape}
            aria-label="Форма Collider2D"
            onChange={(e) =>
              change({
                ...c,
                shape: e.target.value,
                ...(e.target.value === "polygon" && !c.points
                  ? {
                      points: [
                        [-0.5, -0.5],
                        [0.5, -0.5],
                        [0.5, 0.5],
                        [-0.5, 0.5],
                      ],
                    }
                  : {}),
              })
            }
          >
            {[
              ["box", "Прямоугольник"],
              ["circle", "Круг"],
              ["capsule", "Капсула"],
              ["polygon", "Выпуклый полигон"],
            ].map(([v, l]) => (
              <option key={v} value={v}>
                {l}
              </option>
            ))}
          </select>
        </label>
        {c.shape === "box" && pair("size", "Размер", [1, 1], 0.001)}
        {["circle", "capsule"].includes(c.shape) &&
          num("radius", "Радиус", 0.5, 0.001)}
        {c.shape === "capsule" && num("height", "Высота", 1.8, 0.001)}
        {c.shape === "polygon" && (
          <>
            <p className="small-note">Вершины выпуклого контура по порядку.</p>
            {c.points.map((p: number[], i: number) => (
              <div key={i}>
                {[0, 1].map((j) => (
                  <Field2D
                    key={j}
                    label={`Точка ${i} ${j ? "Y" : "X"}`}
                    value={p[j]}
                    onChange={(v) =>
                      set(
                        "points",
                        c.points.map((old: number[], k: number) =>
                          k === i ? old.map((x, l) => (l === j ? v : x)) : old,
                        ),
                      )
                    }
                  />
                ))}
                {c.points.length > 3 && (
                  <button
                    onClick={() =>
                      set(
                        "points",
                        c.points.filter((_: any, k: number) => k !== i),
                      )
                    }
                  >
                    Удалить точку {i}
                  </button>
                )}
              </div>
            ))}
            <button
              onClick={() => {
                const a = c.points.at(-1),
                  b = c.points[0];
                set("points", [
                  ...c.points,
                  [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2],
                ]);
              }}
            >
              Добавить точку
            </button>
          </>
        )}
        {pair("offset", "Смещение")}
        {bool("sensor", "Триггер")}
        {bool("oneWay", "Односторонняя платформа")}
        {num("membership", "Группа (битовая маска)", 1, 0, 1)}
        {num("mask", "Взаимодействует с", 65535, 0, 1)}
      </>
    );
  if (type === "character2d")
    return (
      <>
        {select(
          "mode",
          "Игра",
          [
            ["platformer", "Платформер"],
            ["topDown", "Вид сверху"],
          ],
          "platformer",
        )}
        {bool("controls", "WASD / стрелки / касание", true)}
        {num("speed", "Скорость", 5, 0)}
        {c.mode !== "topDown" && (
          <>
            {num("jumpSpeed", "Скорость прыжка", 8, 0)}
            {num("gravity", "Гравитация персонажа", 20, 0)}
            {num("autostep", "Высота ступени", 0.2, 0)}
          </>
        )}
        <p className="small-note">
          Прыжок: пробел. При собственном скрипте отключите встроенное
          управление.
        </p>
      </>
    );
  if (type === "joint2d")
    return (
      <>
        {select(
          "type",
          "Соединение",
          [
            ["revolute", "Шарнир"],
            ["fixed", "Жёсткое"],
            ["rope", "Верёвка"],
            ["spring", "Пружина"],
          ],
          "revolute",
        )}
        {select(
          "targetId",
          "Второе тело",
          project.scenes
            .find((s) => s.id === project.activeSceneId)!
            .entities.filter(
              (n) => n.id !== node.id && n.components.rigidbody2d,
            )
            .map((n) => [n.id, n.name]),
        )}
        {pair("anchor", "Крепление")}
        {pair("targetAnchor", "Крепление цели")}
        {["rope", "spring"].includes(c.type) &&
          num("length", "Длина", 1, 0.001)}
        {c.type === "spring" && (
          <>
            {num("stiffness", "Жёсткость", 50, 0)}
            {num("damping", "Затухание", 5, 0)}
          </>
        )}
      </>
    );
  if (type === "camera2d")
    return (
      <>
        {num("orthoWidth", "Ширина кадра", 20, 0.1)}
        {bool("pixelPerfect", "Pixel Perfect")}
        {num("pixelsPerUnit", "Пикселей на единицу", 100, 0.1)}
        {pair("offset", "Смещение", [0, 0])}
      </>
    );
  return null;
}