using UnityEngine;
using UnityEngine.UI;

namespace SpecialMoveCards
{
    /// <summary>
    /// Simple UI binder for two pocket slots using two Image components.
    /// </summary>
    public class UIController_Pocket : MonoBehaviour
    {
        [Header("Images")]
        public Image slot1Image;
        public Image slot2Image;
        // We'll draw card sprites on separate child Images so the assigned slot Images
        // can remain as the background visuals.
        private Image slot1Content;
        private Image slot2Content;

        private void Awake()
        {
            EnsureContentImage(ref slot1Content, slot1Image, "CardContent1");
            EnsureContentImage(ref slot2Content, slot2Image, "CardContent2");
        }

        private static void EnsureContentImage(ref Image content, Image baseImage, string name)
        {
            if (content != null || baseImage == null) return;
            var go = new GameObject(name, typeof(RectTransform));
            var rt = go.GetComponent<RectTransform>();
            rt.SetParent(baseImage.transform, worldPositionStays: false);
            rt.anchorMin = Vector2.zero;
            rt.anchorMax = Vector2.one;
            rt.offsetMin = Vector2.zero;
            rt.offsetMax = Vector2.zero;
            content = go.AddComponent<Image>();
            content.raycastTarget = false; // let background handle clicks if needed
            content.preserveAspect = true;
            content.enabled = false; // hidden until a card is present
            // Ensure content renders on top of the background
            go.transform.SetAsLastSibling();
        }

        public void UpdateUI(CardData[] cards)
        {
            // Make sure content images exist (in case references were added at runtime)
            if (slot1Content == null && slot1Image != null) EnsureContentImage(ref slot1Content, slot1Image, "CardContent1");
            if (slot2Content == null && slot2Image != null) EnsureContentImage(ref slot2Content, slot2Image, "CardContent2");

            // Slot 1 content (background image stays untouched)
            if (slot1Content)
            {
                if (cards != null && cards.Length > 0 && cards[0] != null)
                {
                    slot1Content.enabled = true;
                    slot1Content.sprite = cards[0].icon;
                    slot1Content.color = cards[0].color;
                }
                else
                {
                    // No card: hide only the content sprite; keep background visible
                    slot1Content.sprite = null;
                    slot1Content.enabled = false;
                }
            }

            // Slot 2 content (background image stays untouched)
            if (slot2Content)
            {
                if (cards != null && cards.Length > 1 && cards[1] != null)
                {
                    slot2Content.enabled = true;
                    slot2Content.sprite = cards[1].icon;
                    slot2Content.color = cards[1].color;
                }
                else
                {
                    // No card: hide only the content sprite; keep background visible
                    slot2Content.sprite = null;
                    slot2Content.enabled = false;
                }
            }
        }
    }
}