import React, { useEffect, useState } from 'react';
import type { ReactElement } from 'react';
import Head from 'next/head';
import BaseButton from '../components/BaseButton';
import CardBox from '../components/CardBox';
import BaseIcon from "../components/BaseIcon";
import { mdiInformation, mdiEye, mdiEyeOff } from '@mdi/js';
import SectionFullScreen from '../components/SectionFullScreen';
import LayoutGuest from '../layouts/Guest';
import { Field, Form, Formik } from 'formik';
import FormField from '../components/FormField';
import FormCheckRadio from '../components/FormCheckRadio';
import BaseDivider from '../components/BaseDivider';
import BaseButtons from '../components/BaseButtons';
import { useRouter } from 'next/router';
import { getPageTitle } from '../config';
import { findMe, loginUser, resetAction } from '../stores/authSlice';
import { useAppDispatch, useAppSelector } from '../stores/hooks';
import Link from 'next/link';
import {toast, ToastContainer} from "react-toastify";
import { getPexelsImage } from '../helpers/pexels'

export default function Login() {
  const router = useRouter();
  const dispatch = useAppDispatch();
  const textColor = useAppSelector((state) => state.style.linkColor);
  const iconsColor = useAppSelector((state) => state.style.iconsColor);
  const notify = (type, msg) => toast(msg, { type });
  const [ illustrationImage, setIllustrationImage ] = useState({
      src: undefined,
      photographer: undefined,
      photographer_url: undefined,
  })
  const [contentPosition] = useState<'left' | 'right' | 'background'>('left');
    const [showPassword, setShowPassword] = useState(false);
  const { currentUser, isFetching, errorMessage, token, notify:notifyState } = useAppSelector(
    (state) => state.auth,
  );
  const [initialValues, setInitialValues] = React.useState({ email:'admin@flatlogic.com',
    password: 'fc6e39e3',
    remember: true })

  const title = 'Review Flow'

  const appHighlights = [
    'Automated review requests after payments, jobs, or service milestones.',
    'Customer, business, transaction, and delivery follow-up data in one customer workspace.',
    'Dashboards, CRM records, payment events, email logs, and separate internal admin controls already built in.',
  ];

  const competitorAdvantages = [
    {
      title: 'Built around review operations',
      description:
        'Review Flow combines CRM records, payments, follow-up, review requests, and reputation workflows in one focused system.',
    },
    {
      title: 'Designed for logistics teams',
      description:
        'Transportation teams can manage businesses, customers, transactions, payment events, and review requests without jumping tools.',
    },
    {
      title: 'Clear Starter and Pro tiers',
      description:
        'Starter is $49/month for the core review workflow. Pro is $99/month for higher limits, automation, AI, and reputation marketing tools.',
    },
  ];

  const pricingPlans = [
    {
      name: 'Starter',
      price: '$49',
      description:
        'Best for small teams that need the core Review Flow workflow and simple monthly limits.',
      sections: [
        {
          title: 'Core review workflow',
          features: [
            'Review Flow workspace for creating, scheduling, and tracking review requests.',
            'Manual review request creation and hosted public review forms.',
            'Customer, business, transaction, and delivery follow-up records.',
          ],
        },
        {
          title: 'Starter limits',
          features: [
            '250 review requests per month.',
            '1 business profile.',
            '2 team members.',
            'Stripe, Square, PayPal, Shopify, and WooCommerce webhook intake.',
          ],
        },
      ],
    },
    {
      name: 'Pro',
      price: '$99',
      description:
        'Best for growing teams that want higher limits, automation, AI assistance, and reputation marketing tools.',
      sections: [
        {
          title: 'Everything in Starter',
          features: [
            '2,500 review requests per month.',
            '10 business profiles.',
            '10 team members.',
            'Priority support and advanced reporting.',
          ],
        },
        {
          title: 'Growth tools',
          features: [
            'Advanced automation rules.',
            'AI review reply assistant.',
            'Social proof widgets, referral campaigns, repeat booking reminders, NPS surveys, and broadcasts.',
          ],
        },
      ],
    },
  ];

  // Fetch Pexels image
  useEffect( () => {
      async function fetchData() {
          const image = await getPexelsImage()
          setIllustrationImage(image);
      }
      fetchData();
  }, []);
  // Fetch user data
  useEffect(() => {
    if (token) {
      dispatch(findMe());
    }
  }, [token, dispatch]);
  // Redirect to dashboard if user is logged in
  useEffect(() => {
    if (currentUser?.id) {
      router.push('/dashboard');
    }
  }, [currentUser?.id, router]);
  // Show error message if there is one
  useEffect(() => {
    if (errorMessage){
      notify('error', errorMessage)
    }

  }, [errorMessage])
  // Show notification if there is one
  useEffect(() => {
      if (notifyState?.showNotification) {
        notify('success', notifyState?.textNotification)
        dispatch(resetAction());
      }
    }, [notifyState?.showNotification])

  const togglePasswordVisibility = () => {
      setShowPassword(!showPassword);
  };

  const handleSubmit = async (value) => {
    const {remember, ...rest} = value
    await dispatch(loginUser(rest));
  };

  const setLogin = (target: HTMLElement) => {
      setInitialValues(prev => ({
          ...prev,
          email   : target.innerText.trim(),
          password: target.dataset.password ?? '',
      }));
  };

  const imageBlock = (image) => (
      <div className="hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3"
           style={{
               backgroundImage: `${image ? `url(${image.src?.original})` : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'}`,
               backgroundSize: 'cover',
               backgroundPosition: 'left center',
               backgroundRepeat: 'no-repeat',
           }}>
          <div className="flex justify-center w-full bg-blue-300/20">
              <a className="text-[8px]" href={image?.photographer_url} target="_blank" rel="noreferrer">Photo
                  by {image?.photographer} on Pexels</a>
          </div>
      </div>
  )



  return (
      <div style={contentPosition === 'background' ? {
          backgroundImage: `${
              illustrationImage
                  ? `url(${illustrationImage.src?.original})`
                  : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
          }`,
          backgroundSize: 'cover',
          backgroundPosition: 'left center',
          backgroundRepeat: 'no-repeat',
      } : {}}>
        <Head>
          <title>{getPageTitle('Login')}</title>
        </Head>

        <SectionFullScreen bg='violet'>
          <div className={`flex ${contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'} min-h-screen w-full`}>
            {contentPosition !== 'background' ? imageBlock(illustrationImage) : null}
            <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
              
                <CardBox id="loginRoles" className='w-full md:w-3/5 lg:w-2/3'>
                 
                    <h2 className="text-4xl font-semibold my-4">{title}</h2>
                    
                    <div className='flex flex-row text-gray-500 justify-between'>
                        <div>
                          
                            <p className='mb-2'>Use{' '}
                                <code className={`cursor-pointer ${textColor} `}
                                      data-password="fc6e39e3"
                                      onClick={(e) => setLogin(e.target)}>admin@flatlogic.com</code>{' / '}
                                <code className={`${textColor}`}>fc6e39e3</code>{' / '}
                                to login as Internal Admin</p>
                            <p>Use <code
                                className={`cursor-pointer ${textColor} `}
                                data-password="874c3b951385"
                                onClick={(e) => setLogin(e.target)}>john@doe.com</code>{' / '}
                                <code className={`${textColor}`}>874c3b951385</code>{' / '}
                                to login as Customer Owner</p>
                        </div>
                        <div>
                            <BaseIcon
                                className={`${iconsColor}`}
                                w='w-16'
                                h='h-16'
                                size={48}
                                path={mdiInformation}
                            />
                        </div>
                    </div>
                </CardBox>
              
                <CardBox className='w-full md:w-3/5 lg:w-2/3'>
                    <Formik
                        initialValues={initialValues}
                        enableReinitialize
                        onSubmit={(values) => handleSubmit(values)}
                    >
                        <Form>
                            <FormField
                                label='Login'
                                 help='Please enter your login'>
                                <Field name='email' />
                            </FormField>

                            <div className='relative'>
                                <FormField
                                    label='Password'
                                     help='Please enter your password'>
                                    <Field name='password' type={showPassword ? 'text' : 'password'} />
                                </FormField>
                                <div
                                    className='absolute bottom-8 right-0 pr-3 flex items-center cursor-pointer'
                                    onClick={togglePasswordVisibility}
                                >
                                    <BaseIcon
                                        className='text-gray-500 hover:text-gray-700'
                                        size={20}
                                        path={showPassword ? mdiEyeOff : mdiEye}
                                    />
                                </div>
                            </div>

                            <div className={'flex justify-between'}>
                                <FormCheckRadio type='checkbox' label='Remember'>
                                    <Field type='checkbox' name='remember' />
                                </FormCheckRadio>

                                <Link className={`${textColor} text-blue-600`} href={'/forgot'}>
                                    Forgot password?
                                </Link>
                            </div>

                            <BaseDivider />

                            <BaseButtons>
                                <BaseButton
                                    className={'w-full'}
                                    type='submit'
                                    label={isFetching ? 'Loading...' : 'Login'}
                                    color='info'
                                    disabled={isFetching}
                                />
                            </BaseButtons>
                            <br />
                            <p className={'text-center'}>
                                Don’t have an account yet?{' '}
                                <Link className={`${textColor}`} href={'/register'}>
                                    New Account
                                </Link>
                            </p>
                        </Form>
                    </Formik>
                </CardBox>

                <CardBox className='w-full md:w-3/5 lg:w-2/3'>
                    <div className='space-y-8'>
                        <div>
                            <p className='text-sm font-semibold uppercase tracking-[0.2em] text-blue-600'>About Us</p>
                            <h3 className='mt-2 text-3xl font-semibold text-gray-900 dark:text-white'>
                                Review management built for transportation teams.
                            </h3>
                            <p className='mt-4 text-base leading-7 text-gray-600 dark:text-slate-300'>
                                Review Flow helps logistics and transportation businesses turn completed jobs, payments,
                                and customer interactions into organized review requests. Your team can manage customer
                                records, monitor follow-up, and keep reputation-building work moving from one secure
                                workspace.
                            </p>
                        </div>

                        <div className='grid gap-3 md:grid-cols-3'>
                            {appHighlights.map((highlight) => (
                                <div
                                    key={highlight}
                                    className='rounded-2xl border border-blue-100 bg-blue-50/70 p-4 text-sm leading-6 text-blue-900 dark:border-dark-700 dark:bg-dark-800 dark:text-slate-200'
                                >
                                    {highlight}
                                </div>
                            ))}
                        </div>

                        <div>
                            <h4 className='text-xl font-semibold text-gray-900 dark:text-white'>Why we&apos;re better</h4>
                            <div className='mt-4 grid gap-4 md:grid-cols-3'>
                                {competitorAdvantages.map((item) => (
                                    <div key={item.title} className='rounded-2xl border border-gray-200 p-4 dark:border-dark-700'>
                                        <h5 className='font-semibold text-gray-900 dark:text-white'>{item.title}</h5>
                                        <p className='mt-2 text-sm leading-6 text-gray-600 dark:text-slate-300'>
                                            {item.description}
                                        </p>
                                    </div>
                                ))}
                            </div>
                        </div>

                        <div>
                            <div className='flex flex-col justify-between gap-2 md:flex-row md:items-end'>
                                <div>
                                    <p className='text-sm font-semibold uppercase tracking-[0.2em] text-blue-600'>Pricing</p>
                                    <h4 className='mt-2 text-2xl font-semibold text-gray-900 dark:text-white'>Simple monthly plans</h4>
                                </div>
                                <p className='text-sm text-gray-500 dark:text-slate-400'>Upgrade when your review workflow grows.</p>
                            </div>

                            <div className='mt-4 grid gap-4 md:grid-cols-2'>
                                {pricingPlans.map((plan) => (
                                    <div
                                        key={plan.name}
                                        className='rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-dark-700 dark:bg-dark-900'
                                    >
                                        <div className='flex items-start justify-between gap-3'>
                                            <div>
                                                <h5 className='text-lg font-semibold text-gray-900 dark:text-white'>{plan.name}</h5>
                                                <p className='mt-1 text-sm leading-6 text-gray-600 dark:text-slate-300'>{plan.description}</p>
                                            </div>
                                            <div className='text-right'>
                                                <span className='text-3xl font-bold text-blue-600'>{plan.price}</span>
                                                <span className='block text-xs text-gray-500 dark:text-slate-400'>/month</span>
                                            </div>
                                        </div>
                                        <div className='mt-5 space-y-5'>
                                            {plan.sections.map((section) => (
                                                <div key={section.title}>
                                                    <h6 className='text-sm font-semibold uppercase tracking-wide text-gray-900 dark:text-white'>
                                                        {section.title}
                                                    </h6>
                                                    <ul className='mt-2 space-y-2 text-sm text-gray-700 dark:text-slate-300'>
                                                        {section.features.map((feature) => (
                                                            <li key={feature} className='flex gap-2'>
                                                                <span className='font-semibold text-blue-600'>✓</span>
                                                                <span>{feature}</span>
                                                            </li>
                                                        ))}
                                                    </ul>
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </CardBox>
            </div>
          </div>
        </SectionFullScreen>
        <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
          <p className='py-6 text-sm'>© 2026 <span>{title}</span>. © All rights reserved</p>
          <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
              Privacy Policy
          </Link>
        </div>
        <ToastContainer />
      </div>
  );
}

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