import React, { ReactElement, useState } from 'react';
import Head from 'next/head';
import { Formik, Form, Field } from 'formik';
import axios from 'axios';
import { mdiBookOpenPageVariant, mdiCheck } from '@mdi/js';
import CardBox from '../../components/CardBox';
import LayoutAuthenticated from '../../layouts/Authenticated';
import SectionMain from '../../components/SectionMain';
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
import BaseButton from '../../components/BaseButton';
import BaseButtons from '../../components/BaseButtons';
import FormField from '../../components/FormField';
import { getPageTitle } from '../../config';
import { SelectFieldMany } from '../../components/SelectFieldMany';
import SelectField from '../../components/SelectField';

const BulkAdjustPage = () => {
  const initialValues = {
    userIds: [],
    entry_type: 'debit_manual_adjustment',
    leave_bucket: 'regular_pto',
    amount_hours: 0,
    amount_days: 0,
    memo: '',
  };

  const handleSubmit = async (values, { resetForm }) => {
    try {
      await axios.post('/pto_journal_entries/bulk-adjust', { data: values });
      alert('Bulk adjustment applied successfully');
      resetForm();
    } catch (error) {
      console.error('Failed to apply adjustment:', error);
      alert('Failed to apply adjustment');
    }
  };

  return (
    <>
      <Head>
        <title>{getPageTitle('Bulk Balance Adjustment')}</title>
      </Head>
      <SectionMain>
        <SectionTitleLineWithButton icon={mdiBookOpenPageVariant} title="Bulk Balance Adjustment" main>
        </SectionTitleLineWithButton>

        <CardBox>
          <Formik
            initialValues={initialValues}
            onSubmit={handleSubmit}
          >
            {({ values, setFieldValue }) => (
              <Form>
                <FormField label="Employees">
                  <SelectFieldMany
                    field={{ name: 'userIds', value: values.userIds }}
                    form={{ setFieldValue }}
                    itemRef="users"
                    showField="email"
                    options={[]} 
                  />
                </FormField>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <FormField label="Entry Type">
                    <Field name="entry_type" as="select" className="px-2 py-1 w-full border border-gray-300 rounded h-10">
                        <option value="debit_manual_adjustment">Debit (Reduce Balance)</option>
                        <option value="credit_manual_adjustment">Credit (Increase Balance)</option>
                        <option value="credit_accrual">Credit Accrual</option>
                        <option value="debit_time_off">Debit Time Off</option>
                    </Field>
                  </FormField>

                  <FormField label="Leave Bucket">
                    <Field name="leave_bucket" as="select" className="px-2 py-1 w-full border border-gray-300 rounded h-10">
                        <option value="regular_pto">Regular PTO</option>
                        <option value="medical_leave">Medical Leave</option>
                        <option value="bereavement">Bereavement</option>
                        <option value="vacation_pay">Vacation Pay</option>
                    </Field>
                  </FormField>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <FormField label="Amount (Days)">
                    <Field
                      name="amount_days"
                      type="number"
                      step="0.1"
                      className="px-2 py-1 w-full border border-gray-300 rounded h-10"
                    />
                  </FormField>

                  <FormField label="Amount (Hours)">
                    <Field
                      name="amount_hours"
                      type="number"
                      step="0.1"
                      className="px-2 py-1 w-full border border-gray-300 rounded h-10"
                    />
                  </FormField>
                </div>

                <FormField label="Reason / Memo">
                  <Field
                    name="memo"
                    as="textarea"
                    className="px-2 py-1 w-full border border-gray-300 rounded h-24"
                  />
                </FormField>

                <BaseDivider />

                <BaseButtons>
                  <BaseButton type="submit" color="info" label="Apply Adjustment" icon={mdiCheck} />
                </BaseButtons>
              </Form>
            )}
          </Formik>
        </CardBox>
      </SectionMain>
    </>
  );
};

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

const BaseDivider = () => <hr className="my-6 -mx-6 border-gray-100 dark:border-gray-700" />;

export default BulkAdjustPage;
