import { type FC, useState, useEffect, useMemo } from 'react'
import type { FormikProps } from 'formik'
import Input from '@/components/Input'
import Select from '@/components/Select'
import Textarea from '@/components/Textarea'
import Button from '@/components/Button'
import RadioGroup from '@/components/RadioGroup'
import type { CreateProductType, ProductVariant, Category } from '../types/Types'
import { Add, Trash } from 'iconsax-react'

type BasicInfoSectionProps = {
  formik: FormikProps<CreateProductType>
  categories: Category[]
  /** در صفحه ویرایش، اگر کالا تنوع دارد مقدار true پاس داده شود */
  initialHasVariants?: boolean
}

const newVariant = (): ProductVariant => ({ value: '', price: 0 })

const BasicInfoSection: FC<BasicInfoSectionProps> = ({ formik, categories, initialHasVariants }) => {
  const [hasVariants, setHasVariants] = useState<boolean>(initialHasVariants ?? false)
  /** دسته اصلی انتخاب‌شده برای نمایش زیردسته‌ها */
  const [parentCategoryId, setParentCategoryId] = useState<string>('')

  const mainCategories = useMemo(
    () => categories.filter((c) => !c.parent).map((c) => ({ label: c.title, value: c.id })),
    [categories]
  )

  const selectedParent = useMemo(
    () => categories.find((c) => c.id === parentCategoryId),
    [categories, parentCategoryId]
  )

  const subCategories = useMemo(
    () =>
      (selectedParent?.children || []).map((c) => ({ label: c.title, value: c.id })),
    [selectedParent]
  )

  useEffect(() => {
    if (initialHasVariants !== undefined) {
      setHasVariants(initialHasVariants)
    }
  }, [initialHasVariants])

  /** همگام‌سازی parentCategoryId با categoryId وقتی فرم مقداردهی می‌شود (مثلاً در ویرایش) */
  useEffect(() => {
    const catId = formik.values.categoryId
    if (!catId) return
    const cat = categories.find((c) => c.id === catId)
    const child = categories.flatMap((c) => c.children || []).find((ch) => ch.id === catId)
    if (child) {
      setParentCategoryId(child.parent || '')
    } else if (cat && !cat.parent) {
      setParentCategoryId(catId)
    }
  }, [formik.values.categoryId, categories])

  const handleHasVariantsChange = (value: string | boolean) => {
    const next = value === true
    setHasVariants(next)
    if (!next) {
      formik.setFieldValue('variants', [])
      formik.setFieldValue('attribute', '')
    } else if (formik.values.variants.length === 0) {
      formik.setFieldValue('variants', [newVariant()])
    }
  }

  const addVariant = () => {
    formik.setFieldValue('variants', [...formik.values.variants, newVariant()])
  }

  const updateVariant = (index: number, field: keyof ProductVariant, value: string | number | undefined) => {
    const next = [...formik.values.variants]
    next[index] = { ...next[index], [field]: value }
    formik.setFieldValue('variants', next)
  }

  const removeVariant = (index: number) => {
    formik.setFieldValue(
      'variants',
      formik.values.variants.filter((_, i) => i !== index)
    )
  }

  return (
    <>
      <Input
        label='نام کالا'
        name='title'
        placeholder=''
        value={formik.values.title}
        onChange={formik.handleChange}
        error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
      />

      <div className='mt-5 rowTwoInput flex flex-wrap gap-4'>
        <div className='flex-1 min-w-[200px]'>
          <Select
            items={mainCategories}
            label='دسته اصلی'
            placeholder='انتخاب کنید'
            name='parentCategoryId'
            value={parentCategoryId}
            onChange={(e) => {
              const value = e.target.value
              setParentCategoryId(value)
              formik.setFieldValue('categoryId', value)
            }}
          />
        </div>
        {subCategories.length > 0 && (
          <div className='flex-1 min-w-[200px]'>
            <Select
              items={subCategories}
              label='زیر دسته'
              placeholder='انتخاب کنید (اختیاری)'
              name='subcategoryId'
              value={
                subCategories.some((s) => s.value === formik.values.categoryId)
                  ? formik.values.categoryId
                  : ''
              }
              onChange={(e) => {
                const value = e.target.value
                formik.setFieldValue('categoryId', value || parentCategoryId)
              }}
            />
          </div>
        )}
      </div>
      {formik.touched.categoryId && formik.errors.categoryId && (
        <div className='mt-1 text-xs text-red-500'>{formik.errors.categoryId}</div>
      )}

      <div className='mt-5'>
        <Input
          name='maxPurchaseQuantity'
          label='حداکثر تعداد خرید'
          placeholder='خالی = بی‌نهایت'
          type='number'
          min={0}
          value={formik.values.maxPurchaseQuantity === undefined || formik.values.maxPurchaseQuantity === null ? '' : formik.values.maxPurchaseQuantity}
          onChange={(e) => {
            const v = e.target.value
            formik.setFieldValue('maxPurchaseQuantity', v === '' ? undefined : Number(v))
          }}
          error_text={formik.touched.maxPurchaseQuantity && formik.errors.maxPurchaseQuantity ? formik.errors.maxPurchaseQuantity : ''}
        />
      </div>

      {/* بخش قیمت‌گذاری و تنوع */}
      <div className='mt-6 p-5 sm:p-6 rounded-2xl border border-gray-200/80 bg-gray-50/50'>
        <div className='text-sm font-medium text-gray-800 mb-1'>قیمت‌گذاری و تنوع</div>
        <p className='text-xs text-gray-500 mb-4'>تعیین کنید کالا دارای تنوع (مثلاً رنگ، سایز) است یا یک قیمت ثابت دارد.</p>

        <div className='mb-5'>
          <label className='block text-sm text-gray-700 mb-2'>کالای شما دارای تنوع است؟</label>
          <RadioGroup
            items={[
              { label: 'خیر، فقط یک قیمت دارد', value: false },
              { label: 'بله، دارای تنوع است', value: true }
            ]}
            selected={hasVariants}
            onChange={handleHasVariantsChange}
          />
        </div>

        {!hasVariants ? (
          <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4'>
            <Input
              name='price'
              label='قیمت (تومان)'
              placeholder='۰'
              type='number'
              seprator={true}
              value={formik.values.price}
              onChange={(e) => formik.setFieldValue('price', Number(e.target.value))}
              error_text={formik.touched.price && formik.errors.price ? formik.errors.price : ''}
            />
            <Input
              name='stock'
              label='موجودی'
              placeholder='خالی = بی‌نهایت'
              type='number'
              min={0}
              value={formik.values.stock === undefined || formik.values.stock === null ? '' : formik.values.stock}
              onChange={(e) => {
                const v = e.target.value
                formik.setFieldValue('stock', v === '' ? undefined : Number(v))
              }}
              error_text={formik.touched.stock && formik.errors.stock ? formik.errors.stock : ''}
            />
            <Input
              name='discount'
              label='تخفیف (تومان)'
              placeholder='۰'
              type='number'
              seprator={true}
              value={formik.values.discount}
              onChange={(e) => formik.setFieldValue('discount', Number(e.target.value))}
              error_text={formik.touched.discount && formik.errors.discount ? formik.errors.discount : ''}
            />
            <Input
              name='order'
              label='اولویت'
              placeholder='عدد'
              type='number'
              value={formik.values.order}
              onChange={(e) => formik.setFieldValue('order', Number(e.target.value))}
              error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
            />
          </div>
        ) : (
          <div className='space-y-5'>
            <Input
              name='attribute'
              label='نام ویژگی تنوع (مثلاً رنگ، سایز)'
              placeholder='مثلاً رنگ، سایز'
              value={formik.values.attribute}
              onChange={formik.handleChange}
              error_text={formik.touched.attribute && formik.errors.attribute ? formik.errors.attribute : ''}
            />

            <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
              <Input
                name='discount'
                label='تخفیف (تومان)'
                placeholder='۰'
                type='number'
                seprator={true}
                value={formik.values.discount}
                onChange={(e) => formik.setFieldValue('discount', Number(e.target.value))}
                error_text={formik.touched.discount && formik.errors.discount ? formik.errors.discount : ''}
              />
              <Input
                name='order'
                label='اولویت'
                placeholder='عدد'
                type='number'
                value={formik.values.order}
                onChange={(e) => formik.setFieldValue('order', Number(e.target.value))}
                error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
              />
            </div>

            <div>
              <label className='block text-sm font-medium text-gray-700 mb-2'>تنوع‌ها، قیمت و موجودی هر کدام</label>
              <div className='space-y-3'>
                {formik.values.variants.map((v, index) => (
                  <div
                    key={index}
                    className='flex flex-nowrap gap-3 items-center p-3 rounded-xl border border-gray-200 bg-white shadow-sm'
                  >
                    <Input
                      placeholder='مقدار (مثلاً قرمز، M)'
                      value={v.value}
                      onChange={(e) => updateVariant(index, 'value', e.target.value)}
                      className='flex-1 min-w-0'
                    />
                    <Input
                      placeholder='قیمت'
                      type='number'
                      seprator={true}
                      value={v.price}
                      onChange={(e) => updateVariant(index, 'price', Number(e.target.value))}
                      className='flex-1 min-w-0 shrink-0'
                    />
                    <Input
                      placeholder='موجودی (خالی=بی‌نهایت)'
                      type='number'
                      min={0}
                      value={v.stock === undefined || v.stock === null ? '' : v.stock}
                      onChange={(e) => {
                        const val = e.target.value
                        updateVariant(index, 'stock', val === '' ? undefined : Number(val))
                      }}
                      className='flex-1 min-w-0 shrink-0'
                    />
                    <div className='min-w-5'>
                      <Trash
                        onClick={() => removeVariant(index)}
                        color='red' size={20} />

                    </div>
                  </div>
                ))}
              </div>
              <Button
                type='button'
                className='mt-3 w-fit px-5 !bg-white border border-dashed border-gray-300 text-gray-600 hover:!bg-gray-100 hover:border-gray-400'
                onClick={addVariant}
              >
                <Add color='gray' className='size-5 ml-2 inline' />
                افزودن تنوع
              </Button>
            </div>
          </div>
        )}
      </div>

      <div className='mt-5'>
        <Textarea
          name='desc'
          label='توضیحات کالا'
          placeholder=''
          value={formik.values.desc}
          onChange={formik.handleChange}
          error_text={formik.touched.desc && formik.errors.desc ? formik.errors.desc : ''}
        />
      </div>
    </>
  )
}

export default BasicInfoSection
