import React, { useEffect, useState, useRef } from "react";
import {
  Monitor,
  Smartphone,
  Globe,
  Download,
  Check,
  LoaderCircle,
  Square,
} from "lucide-react";
import type { Project } from "../engine/schema.ts";
import { gameArchive, download } from "../engine/archive.ts";
import { buildKit } from "../engine/build-kit.ts";
import { normalizeOptions } from "../native/options.mjs";
const labels: Record<string, string> = {
  web: "Веб",
  linux: "Linux",
  windows: "Windows",
  android: "Android",
};
const states: Record<string, string> = {
  queued: "В очереди",
  building: "Собирается",
  succeeded: "Готово",
  failed: "Ошибка",
  cancelled: "Отменено",
};
async function api(url: string, data?: unknown) {
  const r = await fetch(url, {
    method: data ? "POST" : "GET",
    headers: data ? { "content-type": "application/json" } : undefined,
    body: data ? JSON.stringify(data) : undefined,
  });
  const d: any = await r.json();
  if (!r.ok) throw Error(d.error || "Ошибка сборки");
  return d;
}
export function BuildPanel({
  project,
  connected,
}: {
  project: Project;
  connected: boolean;
}) {
  const [target, setTarget] = useState(connected ? "linux" : "web"),
    [options, setOptions] = useState(() => {
      try {
        return normalizeOptions(
          JSON.parse(
            localStorage.getItem("forma-build-" + project.id) || "null",
          ) || { name: project.name },
        );
      } catch {
        return { ...normalizeOptions(), name: project.name };
      }
    });
  const [cap, setCap] = useState<any>(null),
    [jobs, setJobs] = useState<any[]>([]),
    [selected, setSelected] = useState<string | null>(null),
    [error, setError] = useState(""),
    [working, setWorking] = useState(false);
  useEffect(() => {
    try {
      localStorage.setItem(
        "forma-build-" + project.id,
        JSON.stringify({
          ...options,
          target: target === "web" ? "linux" : target,
        }),
      );
    } catch {}
  }, [project.id, options, target]);
  const [notice, setNotice] = useState("");
  const alive = useRef(true);
  useEffect(() => {
    alive.current = true;
    return () => {
      alive.current = false;
    };
  }, []);
  const option = (key: string, value: any) =>
    setOptions((o) => ({ ...o, [key]: value }));
  useEffect(() => {
    if (!connected) return;
    let cancelled = false;
    let timer: ReturnType<typeof setTimeout>;
    const poll = async () => {
      try {
        const d = await api("/api/builds");
        if (!cancelled) setJobs(d.jobs);
      } catch (e) {
        if (!cancelled) setError(String(e));
      }
      if (!cancelled) timer = setTimeout(poll, 1600);
    };
    void api("/api/builds/capabilities")
      .then((d) => {
        if (!cancelled) setCap(d);
      })
      .catch((e) => {
        if (!cancelled) setError(String(e));
      });
    void poll();
    return () => {
      cancelled = true;
      clearTimeout(timer);
    };
  }, [connected]);
  const current = jobs.find((j) => j.id === selected) || jobs[0];
  const ready = target === "web" || Boolean(cap?.targets?.[target]?.ready);
  const start = async (kit = false) => {
    setError("");
    setNotice("");
    setWorking(true);
    try {
      if (target === "web") {
        download(
          await gameArchive(project),
          project.name + "-web.zip",
          "application/zip",
        );
        if (alive.current)
          setNotice(
            "Веб-сборка скачана. Распакуйте ZIP и разместите на HTTP-хостинге.",
          );
      } else {
        const o = normalizeOptions({ ...options, target });
        if (kit) {
          download(
            await buildKit(project, o),
            o.appId + "-" + target + "-build-kit.zip",
            "application/zip",
          );
          if (alive.current)
            setNotice(
              "Комплект скачан. Команды сборки находятся в README.txt.",
            );
        } else {
          const j = await api("/api/builds", {
            options: o,
            expectedRevision: project.revision,
          });
          if (alive.current) {
            setJobs((js) => [j, ...js]);
            setSelected(j.id);
          }
        }
      }
    } catch (e) {
      if (alive.current) setError(String(e));
    } finally {
      if (alive.current) setWorking(false);
    }
  };
  return (
    <div className="build-panel">
      <nav className="build-platforms" aria-label="Платформа сборки">
        {["web", "linux", "windows", "android"].map((t) => (
          <button
            key={t}
            className={target === t ? "selected" : ""}
            aria-pressed={target === t}
            onClick={() => {
              setTarget(t);
              setError("");
            }}
          >
            {t === "android" ? (
              <Smartphone size={20} />
            ) : t === "web" ? (
              <Globe size={20} />
            ) : (
              <Monitor size={20} />
            )}
            <strong>{labels[t]}</strong>
            <small>
              {
                {
                  web: "HTML + ресурсы",
                  linux: "AppImage · x64",
                  windows: "Portable EXE · x64",
                  android: "APK · Android 8+",
                }[t]
              }
            </small>
          </button>
        ))}
      </nav>
      {target !== "web" && (
        <>
          <div className="build-fields">
            <label>
              Название игры
              <input
                value={options.name}
                maxLength={80}
                onChange={(e) => option("name", e.target.value)}
              />
            </label>
            <label>
              ID приложения
              <input
                value={options.appId}
                spellCheck={false}
                placeholder="games.studio.mygame"
                onChange={(e) => option("appId", e.target.value)}
              />
            </label>
            <label>
              Версия
              <input
                value={options.version}
                placeholder="1.0.0"
                onChange={(e) => option("version", e.target.value)}
              />
            </label>
            <label>
              Режим
              <select
                value={options.mode}
                onChange={(e) => option("mode", e.target.value)}
              >
                <option value="debug">Тестовая сборка</option>
                <option value="release">Релизная сборка</option>
              </select>
            </label>
            {target === "android" ? (
              <>
                <label>
                  Номер версии
                  <input
                    type="number"
                    min="1"
                    max="2100000000"
                    value={options.versionCode}
                    onChange={(e) =>
                      option("versionCode", Number(e.target.value))
                    }
                  />
                </label>
                <label>
                  Ориентация
                  <select
                    value={options.orientation}
                    onChange={(e) => option("orientation", e.target.value)}
                  >
                    <option value="landscape">Горизонтальная</option>
                    <option value="portrait">Вертикальная</option>
                    <option value="sensor">По повороту устройства</option>
                  </select>
                </label>
              </>
            ) : (
              <>
                <label>
                  Ширина окна
                  <input
                    type="number"
                    min="320"
                    max="7680"
                    value={options.width}
                    onChange={(e) => option("width", Number(e.target.value))}
                  />
                </label>
                <label>
                  Высота окна
                  <input
                    type="number"
                    min="320"
                    max="7680"
                    value={options.height}
                    onChange={(e) => option("height", Number(e.target.value))}
                  />
                </label>
                <label className="build-check">
                  <input
                    type="checkbox"
                    checked={options.fullscreen}
                    onChange={(e) => option("fullscreen", e.target.checked)}
                  />
                  Полный экран при запуске
                </label>
              </>
            )}
          </div>
          <div className="build-note">
            {!connected
              ? "Для создания приложения запустите локальную Forma на компьютере. Здесь можно скачать комплект с игрой и командами сборки."
              : !cap
                ? "Проверка инструментов сборки…"
                : ready
                  ? "Сборка выполняется на этом компьютере. Первой сборке нужен интернет для загрузки инструментов."
                  : "Инструменты ещё не установлены: " +
                    cap.targets[target].missing.join("; ")}
          </div>
          {target === "android" && (
            <p className="build-note">
              {options.mode === "debug"
                ? "Тестовый APK подписывается автоматически и подходит для установки на телефон."
                : "Релизный APK требует вашего ключа подписи. Задайте FORMA_KEYSTORE, FORMA_KEYSTORE_PASSWORD, FORMA_KEY_ALIAS и FORMA_KEY_PASSWORD в окружении локального сервера."}
            </p>
          )}
          {target === "windows" && (
            <p className="build-note">
              EXE собирается без цифровой подписи издателя.
            </p>
          )}
        </>
      )}
      <div className="build-actions">
        <button
          className="primary"
          disabled={
            working ||
            (target !== "web" && (!connected || !ready)) ||
            (target === "android" &&
              options.mode === "release" &&
              !cap?.targets.android.releaseSigningConfigured)
          }
          onClick={() => void start()}
        >
          {working ? (
            <LoaderCircle size={16} className="spin" />
          ) : (
            <Download size={16} />
          )}{" "}
          {target === "web"
            ? "Скачать веб-сборку"
            : "Собрать " +
              ({ linux: "AppImage", windows: "EXE", android: "APK" } as any)[
                target
              ]}
        </button>
        {target !== "web" && (
          <button disabled={working} onClick={() => void start(true)}>
            Скачать комплект сборки
          </button>
        )}
        <small>Ревизия проекта {project.revision}</small>
      </div>
      {error && (
        <p className="build-error" role="alert">
          {error}
        </p>
      )}
      {notice && (
        <p className="build-note" role="status">
          {notice}
        </p>
      )}
      {connected && jobs.length > 0 && (
        <section className="build-history">
          <div className="build-history-title">
            <strong>Сборки проекта</strong>
            <select
              aria-label="Выбрать сборку"
              value={current?.id || ""}
              onChange={(e) => setSelected(e.target.value)}
            >
              {jobs.map((j) => (
                <option key={j.id} value={j.id}>
                  {labels[j.options.target]} · {j.options.version} ·{" "}
                  {states[j.status]} · r{j.revision}
                </option>
              ))}
            </select>
          </div>
          {current && (
            <>
              <div className="build-status">
                <span>
                  {current.status === "succeeded" ? (
                    <Check size={16} />
                  ) : ["queued", "building"].includes(current.status) ? (
                    <LoaderCircle className="spin" size={16} />
                  ) : null}
                  {states[current.status]} ·{" "}
                  {new Date(current.createdAt).toLocaleTimeString()} · r
                  {current.revision}
                </span>
                {["queued", "building"].includes(current.status) && (
                  <button
                    onClick={() =>
                      void api("/api/builds/cancel", { id: current.id }).catch(
                        (e) => setError(String(e)),
                      )
                    }
                  >
                    <Square size={13} /> Отменить
                  </button>
                )}
              </div>
              <pre className="build-log" aria-label="Журнал сборки">
                {current.logs.join("\n")}
              </pre>
              {current.error && <p className="build-error">{current.error}</p>}
              {current.artifacts?.map((f: any) => (
                <div className="build-artifact" key={f.name}>
                  <a href={f.url} download>
                    {f.name}{" "}
                    <span>{(f.bytes / 1024 / 1024).toFixed(1)} МБ</span>
                  </a>
                  <small>SHA-256: {f.sha256}</small>
                </div>
              ))}
            </>
          )}
        </section>
      )}
    </div>
  );
}