<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="DOTO NEWS 관리자 로그인 페이지입니다.">
    <meta name="robots" content="noindex,nofollow">
    <meta name="author" content="DOTO NEWS">
    <title>관리자 로그인 - DOTO NEWS</title>
    <script src="https://unpkg.com/@supabase/supabase-js@2"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            min-height: 100vh;
            background: linear-gradient(135deg, #2c3e50, #3498db);
            font-family: 'Paperlogy', sans-serif;
        }

        .admin-header {
            background: white;
            padding: 1rem 2rem;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            width: 100%;
            top: 0;
            box-sizing: border-box;
            z-index: 1000;
        }

        .admin-header .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            color: #2c3e50;
            font-weight: bold;
            font-size: 1.5rem;
        }

        .admin-header .home-button {
            padding: 8px 16px;
            background: #3498db;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            transition: background 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .admin-header .home-button:hover {
            background: #2980b9;
        }

        .main-content {
            padding-top: 80px;
            min-height: calc(100vh - 80px);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .login-container {
            background: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 400px;
        }

        .login-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .login-header h1 {
            margin: 0;
            color: #2c3e50;
            font-size: 24px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #2c3e50;
        }

        .form-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #dcdde1;
            border-radius: 5px;
            font-size: 16px;
            box-sizing: border-box;
        }

        button {
            width: 100%;
            padding: 12px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        button:hover {
            background: #2980b9;
        }

        .error-message {
            color: #e74c3c;
            margin-top: 10px;
            text-align: center;
            display: none;
        }

        @media (max-width: 768px) {
            .admin-header {
                padding: 1rem;
            }

            .admin-header .logo {
                font-size: 1.3rem;
            }

            .login-container {
                margin: 20px;
            }
        }
    </style>
</head>
<body>
    <header class="admin-header">
        <a href="index.html" class="logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"></path>
                <path d="M12 18V6"></path>
            </svg>
            DOTO NEWS
        </a>
        <a href="index.html" class="home-button">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                <polyline points="9 22 9 12 15 12 15 22"></polyline>
            </svg>
            홈으로 가기
        </a>
    </header>

    <div class="main-content">
        <div class="login-container">
            <div class="login-header">
                <h1>DOTO NEWS 관리자 로그인</h1>
            </div>
            <form id="loginForm">
                <div class="form-group">
                    <label for="email">이메일</label>
                    <input type="email" id="email" required>
                </div>
                <div class="form-group">
                    <label for="password">비밀번호</label>
                    <input type="password" id="password" required>
                </div>
                <button type="submit">로그인</button>
                <div id="errorMessage" class="error-message"></div>
            </form>
        </div>
    </div>

    <script>
        // Supabase 클라이언트 초기화
        const supabaseUrl = 'https://yyazjydfftyzruirhdzl.supabase.co';
        const supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl5YXpqeWRmZnR5enJ1aXJoZHpsIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDQ2MDk1NzYsImV4cCI6MjA2MDE4NTU3Nn0.5QwMPdA3Xnh8Nzhv8_I-PBzfOq4ZIhWAtMtQSz_lQX4';
        const supabase = window.supabase.createClient(supabaseUrl, supabaseKey);

        // 로그인 폼 제출 처리
        document.getElementById('loginForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
            const errorMessage = document.getElementById('errorMessage');

            try {
                const { data, error } = await supabase.auth.signInWithPassword({
                    email: email,
                    password: password
                });

                if (error) throw error;

                // 로그인 성공 시 관리자 페이지로 이동
                window.location.href = 'admin.html';
            } catch (error) {
                errorMessage.textContent = '로그인에 실패했습니다. 이메일과 비밀번호를 확인해주세요.';
                errorMessage.style.display = 'block';
            }
        });

        // 이미 로그인되어 있는지 확인
        async function checkAuth() {
            const { data: { session } } = await supabase.auth.getSession();
            if (session) {
                window.location.href = 'admin.html';
            }
        }

        // 페이지 로드 시 실행
        checkAuth();
    </script>
</body>
</html>