'use client';

import React, { Suspense, useState } from 'react';
import { encodePassphrase, generateRoomId, randomString } from '@/lib/client-utils';
import styles from '../styles/Home.module.css';

function Tabs(props: React.PropsWithChildren<{}>) {
  return (
    <div className={styles.tabContainer}>
      {props.children}
    </div>
  );
}

function DemoMeetingTab(props: { label: string }) {
  const [e2ee, setE2ee] = useState(false);
  const [sharedPassphrase, setSharedPassphrase] = useState(randomString(64));
  const startMeeting = () => {
    let url = `/rooms/${generateRoomId()}`;
    if (e2ee) {
      url += `#${encodePassphrase(sharedPassphrase)}`;
    }
    window.location.href = url;
  };
  return (
    <div className={styles.tabContent}>
      <h1 style={{ textAlign: 'center', marginTop: 0 }}>Hero Meet</h1>
      <p style={{ margin: 0, textAlign: 'center' }}>
        Let's get started.
      </p>
      <button style={{ marginTop: '1rem' }} className="lk-button" onClick={startMeeting}>
        Start Meeting
      </button>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
        <div style={{ display: 'flex', flexDirection: 'row', gap: '1rem' }}>
          <input
            id="use-e2ee"
            type="checkbox"
            checked={e2ee}
            onChange={(ev) => setE2ee(ev.target.checked)}
          ></input>
          <label htmlFor="use-e2ee">Enable end-to-end encryption</label>
        </div>
        {e2ee && (
          <div style={{ display: 'flex', flexDirection: 'row', gap: '1rem' }}>
            <label htmlFor="passphrase">Passphrase</label>
            <input
              id="passphrase"
              type="password"
              value={sharedPassphrase}
              onChange={(ev) => setSharedPassphrase(ev.target.value)}
            />
          </div>
        )}
      </div>
    </div>
  );
}


export default function Page() {
  return (
    <>
      <main className={styles.main} data-lk-theme="default">
        <Suspense fallback="Loading">
          <Tabs>
            <DemoMeetingTab label="Demo" />
          </Tabs>
        </Suspense>
      </main>
    </>
  );
}