import type { LoaderFunctionArgs } from "@remix-run/node";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  // エンドユーザー向けのシンプルなコールバック処理
  return new Response(`
    <!DOCTYPE html>
    <html lang="ja">
      <head>
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>認証完了</title>
        <style>
          body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          }
          .container {
            background: white;
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            text-align: center;
            max-width: 400px;
          }
          .success {
            color: #2e7d32;
            background: #e8f5e8;
            padding: 1rem;
            border-radius: 0.5rem;
            margin: 1rem 0;
          }
        </style>
      </head>
      <body>
        <div class="container">
          <div class="success">
            <h2>認証が完了しました</h2>
            <p>このウィンドウを閉じてください</p>
          </div>
        </div>
        <script>
          // 親ウィンドウに認証完了を通知
          if (window.opener) {
            window.opener.postMessage({ 
              type: 'auth_complete',
              success: true
            }, window.location.origin);
          }
          
          // 少し待ってからウィンドウを閉じる
          setTimeout(() => {
            window.close();
          }, 2000);
        </script>
      </body>
    </html>
  `, {
    headers: {
      'Content-Type': 'text/html',
    },
  });
};
