import { mdiUpload } from '@mdi/js'
import { Field, useFormikContext } from 'formik'
import BaseButton from '../BaseButton'
import FormField from '../FormField'
import FormFilePicker from '../FormFilePicker'
import FormImagePicker from '../FormImagePicker'
import { SelectField } from '../SelectField'
import { SwitchField } from '../SwitchField'
import { RichTextField } from '../RichTextField'

type ProductFormValues = {
  sku: string
  product_name: string
  brand: string
  category: any
  short_description: string
  long_description: string
  images: any[]
  spec_sheet: any[]
  pack_size: string
  units_per_case: string
  unit_weight_lbs: string
  case_weight_lbs: string
  uom: string
  moq_cases: string
  temperature_zone: string
  product_status: string
  allergens: string
  certifications: string
  is_sample_eligible: boolean
}

type Props = {
  mode: 'create' | 'edit'
  categoryValue?: any
}

const SectionHeading = ({ title, description }: { title: string; description: string }) => (
  <div className='mb-5 border-b border-slate-200 pb-4 dark:border-slate-700'>
    <p className='text-xs font-bold uppercase tracking-[0.22em] text-emerald-600'>
      {title}
    </p>
    <p className='mt-2 max-w-3xl text-sm leading-6 text-slate-600 dark:text-slate-300'>
      {description}
    </p>
  </div>
)

const ProductSkuFormContent = ({ mode, categoryValue }: Props) => {
  const { isSubmitting, resetForm } = useFormikContext<ProductFormValues>()
  const isEdit = mode === 'edit'

  return (
    <div className='space-y-6'>
      <div className='grid gap-6 lg:grid-cols-[1.35fr_0.65fr]'>
        <div className='rounded border border-slate-200 bg-white p-6 dark:border-slate-700 dark:bg-slate-900'>
          <p className='text-xs font-bold uppercase tracking-[0.24em] text-emerald-600'>
            Contract SKU workspace
          </p>
          <h1 className='mt-3 text-3xl font-bold text-slate-950 dark:text-white'>
            {isEdit ? 'Edit contract SKU' : 'New contract SKU'}
          </h1>
          <p className='mt-3 max-w-3xl text-sm leading-6 text-slate-600 dark:text-slate-300'>
            Prepare the buyer-facing catalog record with pack sizes, temperature handling,
            sample eligibility, compliance notes, and documents your restaurant customers
            need before placing a purchase order.
          </p>
        </div>

        <div className='rounded border border-emerald-200 bg-emerald-50 p-6 dark:border-emerald-800 dark:bg-emerald-950/30'>
          <p className='text-xs font-bold uppercase tracking-[0.2em] text-emerald-700 dark:text-emerald-300'>
            Readiness checklist
          </p>
          <div className='mt-4 space-y-3 text-sm text-slate-700 dark:text-slate-200'>
            <div className='flex items-center justify-between gap-4'>
              <span>Contract catalog identity</span>
              <span className='font-bold text-emerald-700 dark:text-emerald-300'>Required</span>
            </div>
            <div className='flex items-center justify-between gap-4'>
              <span>Pack, case, and MOQ rules</span>
              <span className='font-bold text-emerald-700 dark:text-emerald-300'>Required</span>
            </div>
            <div className='flex items-center justify-between gap-4'>
              <span>Spec sheet and sample status</span>
              <span className='font-bold text-slate-500 dark:text-slate-400'>Recommended</span>
            </div>
          </div>
        </div>
      </div>

      <div className='rounded border border-slate-200 bg-white p-6 dark:border-slate-700 dark:bg-slate-900'>
        <SectionHeading
          title='Identity and buyer catalog'
          description='These fields appear in the contract catalog and help chefs, purchasing leads, and hotel buyers find the right item fast.'
        />
        <div className='grid gap-x-6 lg:grid-cols-3'>
          <FormField label='SKU'>
            <Field name='sku' placeholder='NS-SEA-1042' />
          </FormField>

          <FormField label='Product name'>
            <Field name='product_name' placeholder='Wild Gulf Shrimp, peeled' />
          </FormField>

          <FormField label='Brand'>
            <Field name='brand' placeholder='Northstar Select' />
          </FormField>
        </div>

        <FormField label='Category' labelFor='category' help='Used for buyer catalog filters and reorder lists.'>
          <Field
            name='category'
            id='category'
            component={SelectField}
            options={categoryValue}
            itemRef='product_categories'
            showField='category_name'
          />
        </FormField>

        <FormField label='Short buyer description' hasTextareaHeight>
          <Field
            name='short_description'
            as='textarea'
            placeholder='A concise catalog summary with quality, pack, and handling context.'
          />
        </FormField>

        <FormField label='Long description and buyer notes' hasTextareaHeight>
          <Field name='long_description' id='long_description' component={RichTextField} />
        </FormField>
      </div>

      <div className='rounded border border-slate-200 bg-white p-6 dark:border-slate-700 dark:bg-slate-900'>
        <SectionHeading
          title='Packaging and order rules'
          description='Make the purchase order behavior explicit: case sizes, unit weights, order minimums, and temperature handling.'
        />
        <div className='grid gap-x-6 lg:grid-cols-3'>
          <FormField label='Pack size'>
            <Field name='pack_size' placeholder='6 x 2 lb' />
          </FormField>

          <FormField label='Units per case'>
            <Field name='units_per_case' placeholder='6' />
          </FormField>

          <FormField label='Unit of measure'>
            <Field name='uom' placeholder='case' />
          </FormField>
        </div>

        <div className='grid gap-x-6 lg:grid-cols-3'>
          <FormField label='Unit weight (lb)'>
            <Field name='unit_weight_lbs' placeholder='2' />
          </FormField>

          <FormField label='Case weight (lb)'>
            <Field name='case_weight_lbs' placeholder='12' />
          </FormField>

          <FormField label='MOQ (cases)'>
            <Field name='moq_cases' placeholder='4' />
          </FormField>
        </div>

        <div className='grid gap-x-6 lg:grid-cols-2'>
          <FormField label='Temperature zone' labelFor='temperature_zone'>
            <Field name='temperature_zone' id='temperature_zone' component='select'>
              <option value='ambient'>Ambient</option>
              <option value='refrigerated'>Refrigerated</option>
              <option value='frozen'>Frozen</option>
            </Field>
          </FormField>

          <FormField label='Catalog status' labelFor='product_status'>
            <Field name='product_status' id='product_status' component='select'>
              <option value='active'>Active</option>
              <option value='seasonal'>Seasonal</option>
              <option value='out_of_stock'>Out of stock</option>
              <option value='discontinued'>Discontinued</option>
            </Field>
          </FormField>
        </div>
      </div>

      <div className='rounded border border-slate-200 bg-white p-6 dark:border-slate-700 dark:bg-slate-900'>
        <SectionHeading
          title='Compliance and sales enablement'
          description='Attach the proof buyers ask for during quote review: allergens, certifications, product images, and spec sheets.'
        />
        <div className='grid gap-x-6 lg:grid-cols-2'>
          <FormField label='Allergens'>
            <Field name='allergens' placeholder='Shellfish' />
          </FormField>

          <FormField label='Certifications'>
            <Field name='certifications' placeholder='MSC, SQF, Organic' />
          </FormField>
        </div>

        <div className='grid gap-6 lg:grid-cols-3'>
          <div className='rounded border border-slate-200 p-4 dark:border-slate-700'>
            <p className='mb-3 text-sm font-bold text-slate-950 dark:text-white'>Product images</p>
            <Field
              label='Upload images'
              color='info'
              icon={mdiUpload}
              path='products/images'
              name='images'
              id='images'
              schema={{
                size: undefined,
                formats: undefined,
              }}
              component={FormImagePicker}
            />
          </div>

          <div className='rounded border border-slate-200 p-4 dark:border-slate-700'>
            <p className='mb-3 text-sm font-bold text-slate-950 dark:text-white'>Spec sheet</p>
            <Field
              label='Upload spec sheet'
              color='info'
              icon={mdiUpload}
              path='products/spec_sheet'
              name='spec_sheet'
              id='spec_sheet'
              schema={{
                size: undefined,
                formats: undefined,
              }}
              component={FormFilePicker}
            />
          </div>

          <div className='rounded border border-slate-200 p-4 dark:border-slate-700'>
            <p className='text-sm font-bold text-slate-950 dark:text-white'>Sample program</p>
            <p className='mt-2 text-sm leading-6 text-slate-600 dark:text-slate-300'>
              Let sales reps include this SKU in sample requests and quote follow-ups.
            </p>
            <div className='mt-5'>
              <Field name='is_sample_eligible' id='is_sample_eligible' component={SwitchField} />
            </div>
          </div>
        </div>
      </div>

      <div className='flex flex-wrap items-center justify-between gap-3 rounded border border-slate-200 bg-slate-50 p-4 dark:border-slate-700 dark:bg-slate-900'>
        <div>
          <p className='text-sm font-bold text-slate-950 dark:text-white'>
            {isEdit ? 'Save catalog changes' : 'Create catalog SKU'}
          </p>
          <p className='text-xs text-slate-500 dark:text-slate-400'>
            After saving, buyers with the right price list can use this item in orders, quotes, and reorders.
          </p>
        </div>
        <div className='flex flex-wrap gap-2'>
          <BaseButton type='submit' color='info' label={isEdit ? 'Save SKU' : 'Create SKU'} disabled={isSubmitting} />
          <BaseButton type='button' color='white' label='Reset' onClick={() => resetForm()} />
          <BaseButton href='/products/products-list' color='white' outline label='Cancel' />
        </div>
      </div>
    </div>
  )
}

export default ProductSkuFormContent
