<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mecatoncheir - 医療の叡智API 非営利共同プラットフォーム</title>
    <meta name="description" content="非営利運営の医療API共同プラットフォーム。医療従事者と開発者の相互扶助で知識を共有し、教育活動として次世代の医療DXを推進します。
">
    <link rel="stylesheet" href="styles/style.css">
    <link rel="icon" type="image/png" href="images/logo.png">
    
    <!-- Firebase SDK -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/firebase/10.8.0/firebase-app-compat.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/firebase/10.8.0/firebase-auth-compat.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/firebase/10.8.0/firebase-firestore-compat.min.js"></script>
</head>
<body>

    <!-- Header -->
    <header class="header">
        <div class="header-container">
            <div class="header-left">
                <a href="index.html" ><img src="images/logo.png" alt="Mecatoncheir Logo" class="logo-image"></a>
                <a href="#top" class="logo">Mecatoncheir</a>
            </div>
            <nav class="header-nav">
                <a href="api-usage.html" class="nav-link">API利用</a>
                <a href="sandbox-simple.html" class="nav-link" id="sandbox-cafe-link">Sandbox Café</a>
            </nav>
            <div class="auth-controls">
                <div id="logged-out-controls">
                    <button class="btn-secondary" id="register-btn">新規登録</button>
                    <button class="btn-secondary" id="login-btn">ログイン</button>
                </div>
                <div id="logged-in-controls" class="hidden">
                    <span id="user-name">ユーザー</span>
                    <button class="btn-primary" onclick="window.location.href='dashboard.html'">ダッシュボード</button>
                    <button class="btn-secondary" id="logout-btn">ログアウト</button>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main id="main-content">
        <!-- Hero Section -->
        <section class="hero">
            <div class="hero-container">
                <div class="hero-content">
                    <h1>Mecatoncheir</h1>
                    <p class="hero-subtitle">メカトンケイル</p>
                    <p class="hero-subtitle">医療の叡智API 非営利共同プラットフォーム</p>
                    <p class="hero-description">
                        非営利運営の医療API共同プラットフォームです。<br>
                        医療従事者と開発者の相互扶助で知識を共有し、教育活動として医療DXを推進します。
                    </p>
                </div>
                <div class="hero-image">
                    <img src="images/backimage.png" alt="Mecatoncheir Platform" onerror="this.style.display='none'">
                </div>
            </div>
        </section>

        <!-- Mecatoncheir説明セクション -->
        <section class="description-section">
            <div class="container">
                <!--div class="description-block">
                    <h2>News</h2>
                    <p>
                        News<br>
                        News
                    </p>
                    <div class="flow-section">
                        <h3>ウェブアプリケーション作成の流れ</h3>
                        <div class="flow-content">
                            <div class="flow-text">
                                <ol>
                                    <li>現場で開発したいと思ったツールの考えをまとめる</li>
                                    <li>API作成支援ツールを使い機能を実装・登録する</li>
                                    <li>共同負担金を設定して、他のユーザーとコストを分担しながら使ってもらう</li>
                                </ol>
                            </div>
                            <div class="flow-image">
                                <img src="images/news.png" alt="アプリケーション作成の流れ" onerror="this.style.display='none'">
                            </div>
                        </div>
                    </div>
                </div-->
                <!-- 1. Mecatoncheirの使い方 -->
                <div class="description-block">
                    <h2>Mecatoncheirの使い方</h2>
                    <p>
                        Mecatoncheirは医療現場で感じた機能を即座に実装できる非営利API共同サービスです。<br>
                        現場で感じた、効率化タスクや評価ツールアイデアを形にして共有しましょう。
                    </p>
                    <div class="flow-section">
                        <h3>ウェブアプリケーション作成の流れ</h3>
                        <div class="flow-content">
                            <div class="flow-text">
                                <ol>
                                    <li>現場で開発したいと思ったツールの考えをまとめる</li>
                                    <li>API作成支援ツールを使い機能を実装・登録する</li>
                                    <li>共同負担金を設定して、他のユーザーとコストを分担しながら使ってもらう</li>
                                </ol>
                            </div>
                            <div class="flow-image">
                                <img src="images/flow.png" alt="アプリケーション作成の流れ" onerror="this.style.display='none'">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 2. Mecatoncheirの目指す世界 -->
                <div class="description-block">
                    <h2>Mecatoncheirの目指す世界</h2>
                    <div class="vision-content">
                        <div class="vision-text">
                            <p>
                                医療の専門家が現場の問題をテクノロジーで即座に解決し、相互扶助で知識を共有するためにMecatoncheirは非営利で誕生しました。<br>
                                現場で起きた問題を解決する当事者が比較的簡単にアプリケーションを作成できる環境が必要と感じています。
                            </p>
                            <p>
                                医療の現場スタッフがアプリ開発者となれることを目標にしています。<br>
                                また、同じような問題を抱えている人に対して助けとなる様に作ったAPIを非営利で共有し、相互扶助の精神で運営しています。
                            </p>
                        </div>
                        <div class="vision-image">
                            <img src="images/arth.png" alt="Mecatoncheirの目指す世界" onerror="this.style.display='none'">
                        </div>
                    </div>
                </div>

                <!-- 3. 開発者は医療従事者メンバーです -->
                <div class="description-block">
                    <h2>開発者は医療従事経験者です</h2>
                    <div class="developer-content">
                        <div class="developer-text">
                            <p>
                                開発責任者のMekadev（<a href="https://x.com/mecatoncheir" target="_blank" rel="noopener noreferrer">x.com/mecatoncheir</a>）は医療従事者で10年以上の現場経験があります。病院や高齢者施設の現場で起きる問題を日々解決してきました。
                            </p>
                            <p>
                                長い間勤めて感じる事は、現場は常に逼迫している状況は変わっていないという事です。
                            </p>
                            <p>
                                Mecatoncheirを通してより現場の煩雑な業務から解放され、患者さんや利用者に向き合える時間が増えることを願っています。
                            </p>
                        </div>
                        <div class="developer-image">
                            <img src="images/medeical.png" alt="医療従事者チーム" onerror="this.style.display='none'">
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </main>

    <!-- Register Modal -->
    <div id="register-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>新規登録</h3>
                <button class="modal-close" id="close-register-modal">&times;</button>
            </div>
            <form id="register-form" class="auth-form">
                <div class="form-group">
                    <label>メールアドレス</label>
                    <input type="email" id="register-email" class="form-control" required>
                </div>
                <div class="form-group">
                    <label>パスワード（6文字以上）</label>
                    <input type="password" id="register-password" class="form-control" required minlength="6">
                </div>
                <div class="form-group">
                    <label>表示名</label>
                    <input type="text" id="register-name" class="form-control" required>
                </div>
                <button type="submit" class="btn-primary">アカウント作成</button>
                <p class="text-center mt-3">
                    既にアカウントをお持ちの方は <a href="#" id="switch-to-login">ログイン</a>
                </p>
            </form>
        </div>
    </div>

    <!-- Login Modal -->
    <div id="login-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>ログイン</h3>
                <button class="modal-close" id="close-login-modal">&times;</button>
            </div>
            <form id="login-form" class="auth-form">
                <div class="form-group">
                    <label>メールアドレス</label>
                    <input type="email" id="login-email" class="form-control" required>
                </div>
                <div class="form-group">
                    <label>パスワード</label>
                    <input type="password" id="login-password" class="form-control" required>
                </div>
                <div class="form-group">
                    <label style="display: flex; align-items: center; font-size: 0.9rem;">
                        <input type="checkbox" id="remember-login" style="margin-right: 0.5rem;">
                        ログイン情報を保存する
                    </label>
                </div>
                <button type="submit" class="btn-primary">ログイン</button>
                <p class="text-center mt-3">
                    <a href="#" id="forgot-password">パスワードを忘れた方</a> | 
                    <a href="#" id="switch-to-register">新規登録</a>
                </p>
            </form>
        </div>
    </div>

    <!-- Password Reset Modal -->
    <div id="password-reset-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>パスワードリセット</h3>
                <button class="modal-close" id="close-reset-modal">&times;</button>
            </div>
            <form id="reset-form" class="auth-form">
                <p>登録済みのメールアドレスを入力してください。パスワードリセット用のリンクをお送りします。</p>
                <div class="form-group">
                    <label>メールアドレス</label>
                    <input type="email" id="reset-email" class="form-control" required>
                </div>
                <button type="submit" class="btn-primary">リセットメールを送信</button>
                <p class="text-center mt-3">
                    <a href="#" id="back-to-login">← ログイン画面に戻る</a>
                </p>
            </form>
        </div>
    </div>

    <footer class="footer-main">
        <div class="footer-content">
            <div class="footer-links">
                <a href="info.html#terms" class="footer-link">利用規約</a>
                <a href="info.html#privacy" class="footer-link">プライバシーポリシー</a>
                <a href="info.html#support" class="footer-link">サポート</a>
                <a href="info.html#api-docs" class="footer-link">API仕様書</a>
            </div>
            <div class="footer-info">
                <p>&copy; 2025 Mecatoncheir. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <!-- Firebase設定とJavaScript -->
    <script>
        // Firebase Configuration
        const firebaseConfig = {
            apiKey: "AIzaSyAlcraE3-SUVmHsmKxtBF4V5QNPR7DWcqE",
            authDomain: "meca-site-864c5.firebaseapp.com",
            projectId: "meca-site-864c5",
            storageBucket: "meca-site-864c5.firebasestorage.app",
            messagingSenderId: "730412437567",
            appId: "1:730412437567:web:2bbb8d60a0eacbbc6be88a",
            measurementId: "G-X6TF2TEXLX"
        };

        // Firebase初期化
        firebase.initializeApp(firebaseConfig);

        document.addEventListener('DOMContentLoaded', function() {
            // 保存されたログイン情報を復元
            loadSavedLoginCredentials();
            
            // 要素取得
            const registerBtn = document.getElementById('register-btn');
            const loginBtn = document.getElementById('login-btn');
            const registerModal = document.getElementById('register-modal');
            const loginModal = document.getElementById('login-modal');
            const passwordResetModal = document.getElementById('password-reset-modal');
            const closeRegisterModal = document.getElementById('close-register-modal');
            const closeLoginModal = document.getElementById('close-login-modal');
            const closeResetModal = document.getElementById('close-reset-modal');
            const registerForm = document.getElementById('register-form');
            const loginForm = document.getElementById('login-form');
            const resetForm = document.getElementById('reset-form');
            const loggedOutControls = document.getElementById('logged-out-controls');
            const loggedInControls = document.getElementById('logged-in-controls');
            const userNameSpan = document.getElementById('user-name');
            const logoutBtn = document.getElementById('logout-btn');
            const switchToLogin = document.getElementById('switch-to-login');
            const switchToRegister = document.getElementById('switch-to-register');
            const forgotPassword = document.getElementById('forgot-password');
            const backToLogin = document.getElementById('back-to-login');

            // 新規登録ボタンクリック
            registerBtn.addEventListener('click', function() {
                registerModal.classList.add('show');
            });

            // ログインボタンクリック
            loginBtn.addEventListener('click', function() {
                loginModal.classList.add('show');
            });

            // SandboxCafeからのリダイレクト処理
            if (sessionStorage.getItem('sandbox_cafe_redirect') === 'true') {
                const loginAction = sessionStorage.getItem('login_action');
                if (loginAction === 'login') {
                    loginModal.classList.add('show');
                } else if (loginAction === 'register') {
                    registerModal.classList.add('show');
                }
            }

            // SandboxCafeリンクのクリックイベント
            const sandboxCafeLink = document.getElementById('sandbox-cafe-link');
            if (sandboxCafeLink) {
                sandboxCafeLink.addEventListener('click', function(e) {
                    console.log('SandboxCafe link clicked');
                    // デフォルトの動作を許可（通常のリンク動作）
                    // 必要に応じてここで認証チェックなどを行う
                });
            }

            // モーダル閉じる
            closeRegisterModal.addEventListener('click', function() {
                registerModal.classList.remove('show');
            });

            closeLoginModal.addEventListener('click', function() {
                loginModal.classList.remove('show');
            });

            closeResetModal.addEventListener('click', function() {
                passwordResetModal.classList.remove('show');
            });

            // モーダル外クリックで閉じる
            registerModal.addEventListener('click', function(e) {
                if (e.target === registerModal) {
                    registerModal.classList.remove('show');
                }
            });

            loginModal.addEventListener('click', function(e) {
                if (e.target === loginModal) {
                    loginModal.classList.remove('show');
                }
            });

            passwordResetModal.addEventListener('click', function(e) {
                if (e.target === passwordResetModal) {
                    passwordResetModal.classList.remove('show');
                }
            });

            // モーダル切り替え
            switchToLogin.addEventListener('click', function(e) {
                e.preventDefault();
                registerModal.classList.remove('show');
                loginModal.classList.add('show');
            });

            switchToRegister.addEventListener('click', function(e) {
                e.preventDefault();
                loginModal.classList.remove('show');
                registerModal.classList.add('show');
            });

            forgotPassword.addEventListener('click', function(e) {
                e.preventDefault();
                loginModal.classList.remove('show');
                passwordResetModal.classList.add('show');
            });

            backToLogin.addEventListener('click', function(e) {
                e.preventDefault();
                passwordResetModal.classList.remove('show');
                loginModal.classList.add('show');
            });

            // 新規登録フォーム送信
            registerForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const email = document.getElementById('register-email').value;
                const password = document.getElementById('register-password').value;
                const name = document.getElementById('register-name').value;

                firebase.auth().createUserWithEmailAndPassword(email, password)
                    .then((userCredential) => {
                        // 表示名を設定
                        return userCredential.user.updateProfile({
                            displayName: name
                        });
                    })
                    .then(() => {
                        // 自動テナント作成を開始
                        return createAutoTenant(firebase.auth().currentUser);
                    })
                    .then(() => {
                        registerModal.classList.remove('show');
                        alert('アカウントが作成されました！');
                        
                        // SandboxCafeからのリダイレクトかチェック
                        if (sessionStorage.getItem('sandbox_cafe_redirect') === 'true') {
                            sessionStorage.removeItem('sandbox_cafe_redirect');
                            sessionStorage.removeItem('login_action');
                            window.location.href = 'sandbox-simple.html';
                        } else {
                            window.location.href = 'dashboard.html';
                        }
                    })
                    .catch((error) => {
                        let errorMessage = 'アカウント作成に失敗しました: ';
                        switch(error.code) {
                            case 'auth/email-already-in-use':
                                errorMessage += 'このメールアドレスは既に使用されています。';
                                break;
                            case 'auth/weak-password':
                                errorMessage += 'パスワードが弱すぎます。6文字以上で設定してください。';
                                break;
                            case 'auth/invalid-email':
                                errorMessage += '無効なメールアドレスです。';
                                break;
                            default:
                                errorMessage += error.message;
                        }
                        alert(errorMessage);
                    });
            });

            // 自動テナント作成機能
            async function createAutoTenant(user) {
                try {
                    console.log('Creating auto tenant for user:', user.uid);
                    
                    // パーソナルテナントのID生成（user- + userId形式）
                    const tenantId = `user-${user.uid}`;
                    
                    // テナント情報作成
                    const tenantData = {
                        id: tenantId,
                        name: `${user.displayName || user.email}のワークスペース`,
                        adminUserId: user.uid,
                        status: 'active',
                        plan: 'basic',
                        createdAt: new Date(),
                        updatedAt: new Date(),
                        isAutoGenerated: true,
                        type: 'personal'
                    };
                    
                    // テナントドキュメントを作成
                    await firebase.firestore().collection('tenants').doc(tenantId).set(tenantData);
                    
                    // ユーザー情報にテナントIDを追加
                    const userData = {
                        email: user.email,
                        createdAt: new Date(),
                        updatedAt: new Date(),
                        tenantIds: [tenantId],
                        currentTenantId: tenantId,
                        plan: 'basic'
                    };
                    
                    await firebase.firestore().collection('users').doc(user.uid).set(userData);
                    
                    // テナント内ユーザー情報を作成
                    const tenantUserData = {
                        tenantId: tenantId,
                        userId: user.uid,
                        role: 'admin',
                        status: 'active',
                        joinedAt: new Date(),
                        permissions: ['read', 'write', 'admin']
                    };
                    
                    await firebase.firestore().collection('tenant_users').add(tenantUserData);
                    
                    console.log('Auto tenant created successfully:', tenantId);
                    
                } catch (error) {
                    console.error('Auto tenant creation failed:', error);
                    // テナント作成に失敗してもユーザー登録は成功として扱う
                    // 後でダッシュボードから手動で作成可能
                }
            }

            // ログインフォーム送信
            loginForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const email = document.getElementById('login-email').value;
                const password = document.getElementById('login-password').value;
                const rememberLogin = document.getElementById('remember-login').checked;

                firebase.auth().signInWithEmailAndPassword(email, password)
                    .then((userCredential) => {
                        // ログイン情報を保存（チェックボックスがチェックされている場合）
                        if (rememberLogin) {
                            saveLoginCredentials(email, password);
                        } else {
                            clearSavedLoginCredentials();
                        }
                        
                        loginModal.classList.remove('show');
                        
                        // SandboxCafeからのリダイレクトかチェック
                        if (sessionStorage.getItem('sandbox_cafe_redirect') === 'true') {
                            sessionStorage.removeItem('sandbox_cafe_redirect');
                            sessionStorage.removeItem('login_action');
                            window.location.href = 'sandbox-simple.html';
                        } else {
                            window.location.href = 'dashboard.html';
                        }
                    })
                    .catch((error) => {
                        let errorMessage = 'ログインに失敗しました: ';
                        switch(error.code) {
                            case 'auth/user-not-found':
                                errorMessage += 'アカウントが見つかりません。新規登録をしてください。';
                                break;
                            case 'auth/wrong-password':
                                errorMessage += 'パスワードが間違っています。';
                                break;
                            case 'auth/invalid-email':
                                errorMessage += '無効なメールアドレスです。';
                                break;
                            case 'auth/invalid-credential':
                                errorMessage += 'メールアドレスまたはパスワードが間違っています。';
                                break;
                            default:
                                errorMessage += error.message;
                        }
                        alert(errorMessage);
                    });
            });

            // パスワードリセットフォーム送信
            resetForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const email = document.getElementById('reset-email').value;

                firebase.auth().sendPasswordResetEmail(email)
                    .then(() => {
                        passwordResetModal.classList.remove('show');
                        alert('パスワードリセット用のメールを送信しました。メールボックスを確認してください。');
                    })
                    .catch((error) => {
                        let errorMessage = 'メール送信に失敗しました: ';
                        switch(error.code) {
                            case 'auth/user-not-found':
                                errorMessage += 'このメールアドレスで登録されたアカウントが見つかりません。';
                                break;
                            case 'auth/invalid-email':
                                errorMessage += '無効なメールアドレスです。';
                                break;
                            default:
                                errorMessage += error.message;
                        }
                        alert(errorMessage);
                    });
            });

            // ログアウトボタン
            if (logoutBtn) {
                logoutBtn.addEventListener('click', function() {
                    firebase.auth().signOut().then(() => {
                        window.location.reload();
                    });
                });
            }

            // 認証状態の監視
            firebase.auth().onAuthStateChanged(function(user) {
                if (user) {
                    // ログイン済み
                    loggedOutControls.classList.add('hidden');
                    loggedInControls.classList.remove('hidden');
                    userNameSpan.textContent = user.displayName || user.email;
                } else {
                    // ログアウト状態
                    loggedOutControls.classList.remove('hidden');
                    loggedInControls.classList.add('hidden');
                }
            });
            
            // ログイン情報保存関連の関数
            function saveLoginCredentials(email, password) {
                try {
                    // セキュリティ警告（本番環境では適切な暗号化を推奨）
                    const credentials = {
                        email: email,
                        password: btoa(password), // 簡易的なBase64エンコード
                        saved: true
                    };
                    localStorage.setItem('mecatoncheir_login', JSON.stringify(credentials));
                    console.log('ログイン情報を保存しました（セキュリティ上、本番環境では適切な暗号化を使用してください）');
                } catch (error) {
                    console.error('ログイン情報の保存に失敗:', error);
                }
            }
            
            function loadSavedLoginCredentials() {
                try {
                    const savedCredentials = localStorage.getItem('mecatoncheir_login');
                    if (savedCredentials) {
                        const credentials = JSON.parse(savedCredentials);
                        if (credentials.saved) {
                            document.getElementById('login-email').value = credentials.email;
                            document.getElementById('login-password').value = atob(credentials.password); // Base64デコード
                            document.getElementById('remember-login').checked = true;
                        }
                    }
                } catch (error) {
                    console.error('保存されたログイン情報の読み込みに失敗:', error);
                    clearSavedLoginCredentials();
                }
            }
            
            function clearSavedLoginCredentials() {
                try {
                    localStorage.removeItem('mecatoncheir_login');
                    console.log('保存されたログイン情報をクリアしました');
                } catch (error) {
                    console.error('ログイン情報のクリアに失敗:', error);
                }
            }
        });
    </script>
</body>
</html>