import {
  ConnectError,
  mapConnectErrorToHttpStatus,
} from "@mochabug/adapt-plugin-toolkit/api";
import {
  ExternalExecutorRouter,
  CronExecutorRouter
} from '@mochabug/adapt-plugin-toolkit/router';

export default {
  external: new ExternalExecutorRouter()
    .useRequestLogging()
    .useBearerAuthorization(['/api'])
    .useErrorHandling(async (e) => {
      console.error(e);
      if (e instanceof ConnectError) {
        return new Response(null, { status: mapConnectErrorToHttpStatus(e) });
      }
      return new Response(null, {
        status: 500,
        statusText: 'Internal server error'
      });
    })
    .add('POST', '/api/done', async (req, api, _route, ctx) => {
      const sapi = api.getSessionApi(req.headers.get('Authorization')!);
      ctx.waitUntil(sapi.send('output', {}));
      return new Response();
    })
    .add('GET', '{*any}', async () => {
      return new Response(helloWorld, {
        headers: {
          'Content-Type': 'text/html'
        }
      });
    }),
  internal: new CronExecutorRouter()
      .onStart(async (start, _api) => {
        console.log('Start has been called');
        console.log(start);
      })
      .onStop(async (stop, _api) => {
        console.log('Stop has been called');
        console.log(stop);
      })
      .onExchange(async (res, _api, name) => {
        console.log(`Exchange ${name} has been called`);
        console.log(res);
      })
      .onCron(async (cron, api, ctx) => {
        console.log('Received cron event');
        ctx.waitUntil(api.send('output', {}));
        console.log(cron);
      })
};

const helloWorld = `
      <html>
      <head>
        <style>
          @import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
          @keyframes glow {
            0% { text-shadow: 0 0 5px #0f0, 0 0 10px #0f0, 0 0 15px #0f0, 0 0 20px #0f0; }
            100% { text-shadow: 0 0 10px #0f0, 0 0 20px #0f0, 0 0 30px #0f0, 0 0 40px #0f0; }
          }
          body {
            background-color: #000;
            color: #0f0;
            font-family: 'Orbitron', sans-serif;
            text-align: center;
            overflow: hidden;
            margin: 0;
            padding: 0;
          }
          button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #0f0;
            border: none;
            color: black;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 20px;
            margin: 4px 2px;
            cursor: pointer;
            transition-duration: 0.4s;
            animation: glow 2s infinite alternate;
            font-family: 'Orbitron', sans-serif;
            border-radius: 15px;
            transform: rotate(-10deg) skew(10deg, 10deg);
          }
        </style>
      </head>
      <body>
        <button id="doneButton">Done</button>
        <script>
          document.getElementById('doneButton').addEventListener('click', function() {
            const hash = window.location.hash.substring(1).trim();
            const token = decodeURIComponent(hash); 
            fetch('/api/done', {
              method: 'POST',
              headers: {
                'Authorization': 'Bearer ' + token
              }
            })
            .then(data => {
              this.innerText = 'Done';
            })
            .catch(error => {
              console.error('Error:', error);
            });
          });
        </script>
      </body>
      </html>
    `;
