<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Raspberry Pi GPIO Pin Status</title>
    <style>
        .pin-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5px;
            max-width: 700px;
            margin: auto;
            background-color: #2d4a2c;
            padding: 20px;
            border-radius: 10px;
        }

        .pin {
            position: relative;
            display: flex;
            padding: 20px;
            border: 1px solid #ddd;
            text-align: center;
            border-radius: 8px;
            background-color: #5e7d5e;
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .pin .pinInfo {
            min-width: 50%;
            flex-grow: 1;

        }
        .pin .memo {
            flex-grow: 1;
        }
        .status {
            margin-top: 5px;
            padding: 5px;
            font-weight: bold;
            color: white;
            border-radius: 5px;
        }
        .high { background-color: rgb(65, 68, 244); }
        .low { background-color: red; }
        .vcc { background-color: rgb(92, 92, 92); }
        .ground { background-color: black; }
        h2 { text-align: center; color: white; }
        .favorite-btn {
            position: absolute;
            top: 0;
            right: 0;
            background-color: transparent;
            border: none;
            cursor: pointer;
            font-size: 18px;
            color: #ccc;
        }
        .favorite-btn.active { color: #ffdf00; }
        .favorite-btn:hover { color: #ffbf00; }
        
        /* 메모 필드 스타일 */
        .memo {
            margin-left: 10px;
            width: 120px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #f5f5f5;
            color: #333;
            font-size: 12px;
            text-align: left;
            resize: none;
            display: none; /* 기본적으로 숨김 */
        }
        .memo:focus {
            border-color: #ffdf00;
            outline: none;
        }
        
        body { background-color: #282d27; }

        /* 메모 표시/숨김 버튼 스타일 */
        .toggle-memo-btn {
            display: block;
            margin: 20px auto;
            background-color: #ffbf00;
            color: black;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }

        .page-link {
            display: inline-block;
            margin: 20px 10px;
            text-align: center;
            background-color: #ffa500;
            padding: 10px;
            color: black;
            border-radius: 5px;
            text-decoration: none;
            width: 20px;
            height: 20px;
        }

        .dn {
            display: none;
        }
    </style>
</head>
<body>

    <header style="display: flex; align-items: center; justify-content: center;">
        <h2>Raspberry Pi GPIO Pin Status</h2>
        <div class="page-links">
            <a href="/favorites" style="color: white;" class="page-link">★</a>
        </div>
    </header>

    <!-- 메모 표시/숨김 버튼 -->
    <button class="toggle-memo-btn">메모 표시</button>

    <div class="pin-grid" id="pinGrid"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.2/socket.io.js"></script>
    <script>
        const socket = io();
        const favoritePins = JSON.parse(localStorage.getItem('favoritePins')) || [];
        const pinMemos = JSON.parse(localStorage.getItem('pinMemos')) || {};
        const pinGrid = document.getElementById("pinGrid");
        const toggleMemoBtn = document.querySelector('.toggle-memo-btn');
        let memosVisible = false;

        const gpioPins = [
            { pinNumber: null, label: "3.3V Power", type: "vcc" },
            { pinNumber: null, label: "5V Power", type: "vcc" },

            { pinNumber: 2, label: "GPIO 2 (I2C1 SDA)", type: "gpio" },
            { pinNumber: null, label: "5V Power", type: "vcc" },

            { pinNumber: 3, label: "GPIO 3 (I2C1 SCL)", type: "gpio" },
            { pinNumber: null, label: "Ground", type: "ground" },

            { pinNumber: 4, label: "GPIO 4 (GPCLK0)", type: "gpio" },
            { pinNumber: 14, label: "GPIO 14 (UART TX)", type: "gpio" },

            { pinNumber: null, label: "Ground", type: "ground" },
            { pinNumber: 15, label: "GPIO 15 (UART RX)", type: "gpio" },

            { pinNumber: 17, label: "GPIO 17", type: "gpio" },
            { pinNumber: 18, label: "GPIO 18 (PCM CLK)", type: "gpio" },

            { pinNumber: 27, label: "GPIO 27", type: "gpio" },
            { pinNumber: null, label: "Ground", type: "ground" },

            { pinNumber: 22, label: "GPIO 22", type: "gpio" },
            { pinNumber: 23, label: "GPIO 23", type: "gpio" },

            { pinNumber: null, label: "3.3V Power", type: "vcc" },
            { pinNumber: 24, label: "GPIO 24", type: "gpio" },

            { pinNumber: 10, label: "GPIO 10 (SPI0 MOSI)", type: "gpio" },
            { pinNumber: null, label: "Ground", type: "ground" },

            { pinNumber: 9, label: "GPIO 9 (SPI0 MISO)", type: "gpio" },
            { pinNumber: 25, label: "GPIO 25", type: "gpio" },

            { pinNumber: 11, label: "GPIO 11 (SPI0 SCLK)", type: "gpio" },
            { pinNumber: 8, label: "GPIO 8 (SPI0 CE0)", type: "gpio" },

            { pinNumber: null, label: "Ground", type: "ground" },
            { pinNumber: 7, label: "GPIO 7 (SPI0 CE1)", type: "gpio" },

            { pinNumber: 0, label: "GPIO 0 (EEPROM SDA)", type: "gpio" },
            { pinNumber: 1, label: "GPIO 1 (EEPROM SCL)", type: "gpio" },

            { pinNumber: 5, label: "GPIO 5", type: "gpio" },
            { pinNumber: null, label: "Ground", type: "ground" },

            { pinNumber: 6, label: "GPIO 6", type: "gpio" },
            { pinNumber: 12, label: "GPIO 12 (PWM0)", type: "gpio" },

            { pinNumber: 13, label: "GPIO 13 (PWM1)", type: "gpio" },
            { pinNumber: null, label: "Ground", type: "ground" },

            { pinNumber: 19, label: "GPIO 19 (PCM FS)", type: "gpio" },
            { pinNumber: 16, label: "GPIO 16", type: "gpio" },

            { pinNumber: 26, label: "GPIO 26", type: "gpio" },
            { pinNumber: 20, label: "GPIO 20 (PCM DIN)", type: "gpio" },

            { pinNumber: null, label: "Ground", type: "ground" },
            { pinNumber: 21, label: "GPIO 21 (PCM DOUT)", type: "gpio" }
        ];
        // GPIO 핀 UI 동적 생성
        gpioPins.forEach(({ pinNumber, label, type }) => {
            const pinDiv = document.createElement("div");
            pinDiv.classList.add("pin");

            pinDiv.innerHTML = `
                <div class="pinInfo" >
                    <strong>${label}</strong>
                    <div class="status ${label.includes("Power") && "vcc"} ${label.includes("Ground") && "ground"}" id="pin${pinNumber}">${label?.split(" ")[0] ? label?.split(" ")[0] : label}</div>
                </div>
                <button class="favorite-btn ${type === "gpio" || "dn"}" data-pin="${pinNumber}">☆</button>
            `;

            const memoInput = document.createElement("textarea");
            memoInput.classList.add("memo");
            memoInput.placeholder = "메모를 입력하세요...";
            memoInput.dataset.pin = pinNumber;

            // 메모 필드에 저장된 메모 불러오기
            if (pinMemos[pinNumber]) memoInput.value = pinMemos[pinNumber];

            // 메모 입력 시 로컬 스토리지에 저장
            memoInput.addEventListener("input", () => {
                pinMemos[pinNumber] = memoInput.value;
                localStorage.setItem("pinMemos", JSON.stringify(pinMemos));
            });

            pinDiv.appendChild(memoInput);

            // 즐겨찾기 버튼 이벤트
            const favoriteBtn = pinDiv.querySelector(".favorite-btn");
            if (favoritePins.includes(pinNumber)) {
                favoriteBtn.classList.add("active");
                favoriteBtn.textContent = "★";
            }
            favoriteBtn.addEventListener("click", () => {
                if (favoritePins.includes(pinNumber)) {
                    favoritePins.splice(favoritePins.indexOf(pinNumber), 1);
                    favoriteBtn.classList.remove("active");
                    favoriteBtn.textContent = "☆";
                } else {
                    favoritePins.push(pinNumber);
                    favoriteBtn.classList.add("active");
                    favoriteBtn.textContent = "★";
                }
                localStorage.setItem("favoritePins", JSON.stringify(favoritePins));
            });

            pinGrid.appendChild(pinDiv);
        });

        // 메모 표시/숨김 버튼 기능
        toggleMemoBtn.addEventListener("click", () => {
            memosVisible = !memosVisible;
            document.querySelectorAll(".memo").forEach(memo => {
                memo.style.display = memosVisible ? "block" : "none";
            });
            toggleMemoBtn.textContent = memosVisible ? "메모 숨기기" : "메모 표시";
        });

        // GPIO 상태 업데이트
        socket.on("gpio_status", function (data) {
            Object.keys(data).forEach(pin => {
                const pinElement = document.getElementById(`pin${pin}`);
                if (pinElement) {
                    const pinState = data[pin] ? "high" : "low";
                    pinElement.textContent = pinState.toUpperCase();
                    pinElement.className = `status ${pinState}`;
                }
            });
        });
    </script>
</body>
</html>