import React from 'react';
import type { ReactElement } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import { Field, Form, Formik } from 'formik';
import { ToastContainer, toast } from 'react-toastify';
import { useRouter } from 'next/router';
import axios from 'axios';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';

const ui = {
  page: 'bg-[#fffdf9] text-[#19192d]',
  banner: 'bg-[#19192d] text-white',
  navShell: 'rounded-none bg-white  ring-1 ring-[#19192d]/5',
  ink: 'text-[#19192d]',
  muted: 'text-[#72798a]',
  accent: 'text-[#35b7a5]',
  border: 'border-[#19192d]/10',
  button: 'bg-[#35b7a5] text-white  transition hover:brightness-105',
  card: 'rounded-none border border-[#19192d]/10 bg-white ',
  overline: 'text-sm font-bold uppercase tracking-[0.28em] text-[#35b7a5]',
  heading: 'font-serif font-semibold tracking-tight text-[#19192d]',
};

type RegisterValues = {
  email: string;
  password: string;
  confirm: string;
};

function Nav() {
  return (
    <header className='sticky top-3 z-50 px-5 pt-5'>
      <div
        className={`mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-2.5 backdrop-blur-xl md:px-5 md:py-3 ${ui.navShell}`}
      >
        <Link
          href='/'
          className='flex items-center gap-3 text-lg font-semibold tracking-tight'
        >
          <span className='flex h-9 w-9 items-center justify-center rounded-none bg-[#fffdf9] text-xl font-black text-[#35b7a5]'>
            C
          </span>
          <span className='sr-only'>Coaching SaaS Workspace</span>
        </Link>
        <nav
          className={`hidden items-center gap-6 text-base font-medium ${ui.ink} md:flex`}
        >
          <Link href='/how-it-works/'>How it works</Link>
          <Link href='/client-portal/'>Coachee</Link>
          <Link href='/#pricing'>Pricing</Link>
          <Link href='/#trust'>Trust</Link>
        </nav>
        <Link
          href='/login/'
          className='rounded-none border border-[#19192d]/10 bg-white px-5 py-2.5 text-sm font-semibold'
        >
          Login
        </Link>
      </div>
    </header>
  );
}

export default function Register() {
  const [loading, setLoading] = React.useState(false);
  const router = useRouter();

  async function handleSubmit(values: RegisterValues) {
    if (values.password !== values.confirm) {
      toast('Passwords do not match', {
        type: 'error',
        position: 'bottom-center',
      });
      return;
    }

    setLoading(true);

    try {
      await axios.post('/auth/signup', {
        email: values.email,
        password: values.password,
      });
      toast('Please check your email for verification link', {
        type: 'success',
        position: 'bottom-center',
      });
      await router.push('/login');
    } catch (error) {
      console.log('error: ', error);
      toast('Something was wrong. Try again', {
        type: 'error',
        position: 'bottom-center',
      });
    } finally {
      setLoading(false);
    }
  }

  return (
    <>
      <Head>
        <title>{getPageTitle('Register')}</title>
      </Head>

      <main className={`min-h-screen ${ui.page}`}>
        <div className={`${ui.banner} px-5 py-4 text-center text-lg`}>
          <p className='text-xs font-bold uppercase tracking-[0.34em]'>
            Still human
          </p>
          <p className='mt-2 text-xl font-medium md:text-2xl'>
            AI is not a coach. Keep the real relationship at the center.
          </p>
        </div>

        <Nav />

        <section className='mx-auto grid max-w-7xl grid-cols-1 items-center gap-12 px-5 pb-20 pt-14 lg:grid-cols-[1.05fr_0.95fr] lg:px-8'>
          <div>
            <p className={ui.overline}>Start your workspace</p>
            <h1
              className={`${ui.heading} mt-5 text-5xl leading-tight md:text-6xl`}
            >
              Build a coaching practice that keeps working between sessions.
            </h1>
            <p className={`mt-6 max-w-2xl text-lg leading-8 ${ui.muted}`}>
              Create your account, then shape the workspace around your clients,
              packages, session memory, resources, and follow-up rhythm.
            </p>

            <div className='mt-10 grid gap-4 md:grid-cols-2'>
              {[
                [
                  'Coach-approved AI',
                  'Review every generated note before it is shared.',
                ],
                [
                  'Client-ready portal',
                  'Give clients a clean place for approved notes and resources.',
                ],
                [
                  'Built for momentum',
                  'Keep commitments visible between sessions.',
                ],
                [
                  'Practice memory',
                  'Bring past themes into the next conversation.',
                ],
              ].map(([title, copy]) => (
                <div key={title} className={`p-5 ${ui.card}`}>
                  <h2 className='font-semibold'>{title}</h2>
                  <p className={`mt-2 text-sm leading-6 ${ui.muted}`}>{copy}</p>
                </div>
              ))}
            </div>
          </div>

          <div className='mx-auto w-full max-w-md'>
            <div className={`${ui.card} p-6 md:p-8`}>
              <div className='mb-8'>
                <p className={`${ui.overline} text-xs`}>Create account</p>
                <h2 className='mt-3 text-3xl font-semibold'>
                  Open your coaching workspace
                </h2>
                <p className={`mt-2 ${ui.muted}`}>
                  Start with one client and test the full coaching loop.
                </p>
              </div>

              <Formik
                initialValues={{
                  email: '',
                  password: '',
                  confirm: '',
                }}
                onSubmit={(values) => handleSubmit(values)}
              >
                <Form className='space-y-5'>
                  <label className='block'>
                    <span className='mb-2 block text-sm font-semibold'>
                      Email
                    </span>
                    <Field
                      type='email'
                      name='email'
                      className={`w-full rounded-none border px-4 py-3 outline-none transition focus:border-[#35b7a5] focus:ring-4 focus:ring-[#35b7a5]/10 ${ui.border}`}
                    />
                  </label>

                  <label className='block'>
                    <span className='mb-2 block text-sm font-semibold'>
                      Password
                    </span>
                    <Field
                      type='password'
                      name='password'
                      className={`w-full rounded-none border px-4 py-3 outline-none transition focus:border-[#35b7a5] focus:ring-4 focus:ring-[#35b7a5]/10 ${ui.border}`}
                    />
                  </label>

                  <label className='block'>
                    <span className='mb-2 block text-sm font-semibold'>
                      Confirm password
                    </span>
                    <Field
                      type='password'
                      name='confirm'
                      className={`w-full rounded-none border px-4 py-3 outline-none transition focus:border-[#35b7a5] focus:ring-4 focus:ring-[#35b7a5]/10 ${ui.border}`}
                    />
                  </label>

                  <button
                    type='submit'
                    disabled={loading}
                    className={`w-full rounded-none px-6 py-4 font-semibold disabled:cursor-not-allowed disabled:opacity-60 ${ui.button}`}
                  >
                    {loading ? 'Creating...' : 'Create account'}
                  </button>
                </Form>
              </Formik>

              <p className={`mt-6 text-center text-sm ${ui.muted}`}>
                Already have an account?{' '}
                <Link
                  href='/login'
                  className='font-semibold text-[#35b7a5] hover:underline'
                >
                  Login
                </Link>
              </p>
            </div>
          </div>
        </section>

        <footer className={`border-t px-5 py-10 ${ui.border}`}>
          <div
            className={`mx-auto flex max-w-7xl flex-col justify-between gap-5 text-sm md:flex-row ${ui.muted}`}
          >
            <p>© 2026 Coaching SaaS Workspace. Coaching beyond the session.</p>
            <div className='flex gap-5'>
              <Link href='/privacy-policy/'>Privacy Policy</Link>
              <Link href='/terms-of-use/'>Terms of Use</Link>
            </div>
          </div>
        </footer>
      </main>

      <ToastContainer />
    </>
  );
}

Register.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};
