/**
 * Compute Backend Label
 *
 * Displays the active compute backend (CUDA, Metal, or CPU) with color-coding.
 * Fetches the actual runtime backend from the Rust backend.
 */

import { useEffect, useState } from "react";
import { getComputeBackend } from "../lib/simulation";
import type { ComputeBackendInfo, ComputeBackend } from "../lib/types";

const BACKEND_STYLES: Record<
  ComputeBackend,
  { bg: string; border: string; text: string }
> = {
  CUDA: { bg: "rgba(34, 197, 94, 0.2)", border: "#22c55e", text: "#22c55e" },
  METAL: { bg: "rgba(78, 205, 196, 0.2)", border: "#4ECDC4", text: "#4ECDC4" },
  CPU: { bg: "rgba(251, 146, 60, 0.2)", border: "#fb923c", text: "#fb923c" },
};

export function ComputeBackendLabel() {
  const [info, setInfo] = useState<ComputeBackendInfo | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    getComputeBackend()
      .then(setInfo)
      .catch((e) => {
        console.error("Failed to get compute backend:", e);
        setError(e instanceof Error ? e.message : String(e));
      });
  }, []);

  if (error) {
    return (
      <div style={styles.container}>
        <span style={{ ...styles.label, color: "#f44336" }}>ERROR</span>
      </div>
    );
  }

  if (!info) {
    return (
      <div style={styles.container}>
        <span style={{ ...styles.label, color: "#888" }}>...</span>
      </div>
    );
  }

  const colorStyle = BACKEND_STYLES[info.backend] || BACKEND_STYLES.CPU;

  return (
    <div
      style={{
        ...styles.container,
        backgroundColor: colorStyle.bg,
        borderColor: colorStyle.border,
      }}
      title={`Available backends: ${info.available.join(", ")}`}
    >
      <span style={{ ...styles.label, color: colorStyle.text }}>
        {info.backend}
      </span>
    </div>
  );
}

const styles: Record<string, React.CSSProperties> = {
  container: {
    padding: "6px 12px",
    borderRadius: "6px",
    border: "1px solid",
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
  },
  label: {
    fontSize: "12px",
    fontWeight: 600,
    fontFamily: "monospace",
    letterSpacing: "0.5px",
  },
};

export default ComputeBackendLabel;