import { mdiConnection, mdiOpenInNew, mdiWebhook } from '@mdi/js';
import Head from 'next/head';
import React, { ReactElement } from 'react';
import BaseButton from '../components/BaseButton';
import PaymentProviderConnectors from '../components/ReviewFlow/PaymentProviderConnectors';
import SectionMain from '../components/SectionMain';
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
import { getPageTitle } from '../config';
import LayoutAuthenticated from '../layouts/Authenticated';

export default function ConnectPage() {
  return (
    <>
      <Head>
        <title>{getPageTitle('Connect')}</title>
      </Head>
      <SectionMain>
        <SectionTitleLineWithButton icon={mdiConnection} title='Connect' main>
          <BaseButton
            href='/reviewflow'
            icon={mdiOpenInNew}
            label='Review Flow'
            color='whiteDark'
          />
        </SectionTitleLineWithButton>

        <div className='mb-6 overflow-hidden rounded-3xl bg-gradient-to-br from-slate-950 via-blue-950 to-indigo-950 p-6 text-white shadow-2xl'>
          <div className='grid gap-6 lg:grid-cols-[1.15fr_0.85fr] lg:items-center'>
            <div>
              <p className='mb-3 inline-flex rounded-full bg-white/10 px-4 py-1 text-sm font-semibold text-sky-200 ring-1 ring-white/20'>
                Payment provider setup
              </p>
              <h2 className='max-w-3xl text-4xl font-black tracking-tight md:text-5xl'>
                Connect Stripe, PayPal, and Square.
              </h2>
              <p className='mt-4 max-w-2xl text-base text-slate-200 md:text-lg'>
                Use this page to generate secure webhook URLs for each provider.
                Once connected, successful payments can flow into Review Flow and
                automatically create customers, transactions, and review
                requests.
              </p>
            </div>
            <div className='rounded-3xl bg-white/10 p-5 ring-1 ring-white/15 backdrop-blur'>
              <div className='mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-sky-400/20 text-sky-100'>
                <BaseButton icon={mdiWebhook} color='info' roundedFull />
              </div>
              <h3 className='text-xl font-black'>How connection works</h3>
              <p className='mt-2 text-sm leading-6 text-slate-200'>
                Pick a provider, enter the business review settings, then copy
                the generated webhook URL into that provider dashboard. You can
                rotate URLs anytime if a secret is exposed.
              </p>
            </div>
          </div>
        </div>

        <PaymentProviderConnectors
          eyebrow='Provider connections'
          title='Connect your payment accounts'
          description='Choose Stripe, PayPal, or Square below. Each provider gets its own secure webhook URL for the business you configure.'
        />
      </SectionMain>
    </>
  );
}

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