/*
 * Copyright (C) 2025 TomTom Navigation B.V.
 * Licensed under the Apache License, Version 2.0
 */

import "./ui-visibility.css";
import { isRecord } from "./record";

function showUiFlag(value: unknown): boolean | undefined {
  if (!isRecord(value) || typeof value.show_ui !== "boolean") return undefined;
  return value.show_ui;
}

/** The first text block, parsed, for a host that dropped the result `_meta`. */
function textPayload(result: Record<string, unknown>): unknown {
  if (!Array.isArray(result.content)) return undefined;
  const first = result.content[0];
  if (!isRecord(first) || first.type !== "text" || typeof first.text !== "string") return undefined;
  try {
    return JSON.parse(first.text);
  } catch {
    return undefined;
  }
}

/**
 * True unless `show_ui` is false. The result `_meta` wins; the text's `show_ui`
 * is the fallback when a host drops that `_meta`.
 */
export function shouldShowUI(result: unknown): boolean {
  if (!isRecord(result)) return true;
  return showUiFlag(result._meta) ?? showUiFlag(textPayload(result)) ?? true;
}

/**
 * Hides the map container and shows a compact status indicator.
 * Call this when show_ui is false.
 */
export function hideMapUI(): void {
  // Add class to collapse the widget height
  document.documentElement.classList.add("ui-hidden");

  const mapContainer = document.getElementById("sdk-map");
  if (mapContainer) {
    mapContainer.classList.remove("visible");
    mapContainer.style.display = "none";
  }

  let indicator = document.getElementById("ui-hidden-indicator");
  if (!indicator) {
    indicator = document.createElement("div");
    indicator.id = "ui-hidden-indicator";
    indicator.innerHTML = `
      <div class="indicator-pill">
        <div class="indicator-icon">
          <svg viewBox="0 0 380 380" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M236.711 284.542L189.998 364.17L143.261 284.542H236.711ZM189.999 15.833C257.226 15.8331 311.915 69.6382 311.915 135.778C311.915 201.918 257.226 255.724 189.999 255.724C122.772 255.724 68.082 201.919 68.082 135.778C68.082 69.6381 122.772 15.833 189.999 15.833ZM189.999 73.0469C154.852 73.0469 126.261 101.176 126.261 135.754C126.261 170.332 154.852 198.461 189.999 198.461C225.146 198.461 253.736 170.332 253.736 135.754C253.736 101.176 225.146 73.047 189.999 73.0469Z" fill="#DF1B12"/>
          </svg>
        </div>
        <span>Data processed</span>
      </div>
    `;
    document.body.appendChild(indicator);
  }
  indicator.style.display = "block";
}

/**
 * Shows a user-friendly error indicator when the tool call fails.
 * The actual error details are already visible to the agent in the tool response
 * for retry decisions — this is purely for the user's UI.
 */
export function showErrorUI(): void {
  // Collapse the widget like hideMapUI
  document.documentElement.classList.add("ui-hidden");

  const mapContainer = document.getElementById("sdk-map");
  if (mapContainer) {
    mapContainer.classList.remove("visible");
    mapContainer.style.display = "none";
  }

  const hiddenIndicator = document.getElementById("ui-hidden-indicator");
  if (hiddenIndicator) {
    hiddenIndicator.style.display = "none";
  }

  let indicator = document.getElementById("ui-error-indicator");
  if (!indicator) {
    indicator = document.createElement("div");
    indicator.id = "ui-error-indicator";
    indicator.innerHTML = `
      <div class="indicator-pill">
        <div class="indicator-icon">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="10" stroke="#dc2626" stroke-width="2"/>
            <line x1="12" y1="8" x2="12" y2="13" stroke="#dc2626" stroke-width="2" stroke-linecap="round"/>
            <circle cx="12" cy="16.5" r="1" fill="#dc2626"/>
          </svg>
        </div>
        <span class="error-message">Something went wrong</span>
      </div>
    `;
    document.body.appendChild(indicator);
  }
  indicator.style.display = "block";
}

/**
 * Shows the map container and hides the minimal indicator.
 * Call this when show_ui is true (default behavior).
 */
export function showMapUI(): void {
  // Remove compact mode class
  document.documentElement.classList.remove("ui-hidden");

  const mapContainer = document.getElementById("sdk-map");
  if (mapContainer) {
    mapContainer.style.display = "block";
    // Use requestAnimationFrame to ensure display:block is applied before adding visible class
    requestAnimationFrame(() => {
      mapContainer.classList.add("visible");
    });
  }

  const indicator = document.getElementById("ui-hidden-indicator");
  if (indicator) {
    indicator.style.display = "none";
  }
}