erp-platform/ui/src/views/warehouse/components/LotForm.tsx

import React from 'react'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { FaSave, FaTimes } from 'react-icons/fa'
import { QualityStatusEnum, MmLotNumber, MmUnit, MmMaterial } from '../../../types/mm'
import { BusinessParty } from '../../../types/common'
import { getQualityStatusText } from '@/utils/erp'

const validationSchema = Yup.object({
  materialId: Yup.string().required('Malzeme seçimi zorunlu'),
  lotNumber: Yup.string().required('Lot numarası zorunlu'),
  quantity: Yup.number().min(0, "Miktar 0'dan büyük olmalıdır"),
})

interface LotFormProps {
  isOpen: boolean
  onClose: () => void
  onSave: (lot: MmLotNumber) => void
  onUpdate?: (lot: MmLotNumber) => void
  materials: MmMaterial[]
  suppliers?: BusinessParty[]
  units?: MmUnit[]
  initial?: MmLotNumber | null
  mode?: 'create' | 'edit' | 'view'
}

const LotForm: React.FC<LotFormProps> = ({
  isOpen,
  onClose,
  onSave,
  onUpdate,
  materials,
  suppliers = [],
  units = [],
  initial = null,
  mode = 'create',
}) => {
  const formik = useFormik({
    initialValues: {
      materialId: '',
      lotNumber: '',
      productionDate: '',
      expiryDate: '',
      quantity: 0,
      unitId: 'KG',
      supplierId: suppliers.length ? suppliers[0].id : '',
      qualityStatus: QualityStatusEnum.Pending,
      isActive: true,
    },
    validationSchema,
    onSubmit: async (values) => {
      const newLot: MmLotNumber = {
        id: (initial && initial.id) || Date.now().toString(),
        materialId: values.materialId,
        lotNumber: values.lotNumber,
        productionDate: values.productionDate ? new Date(values.productionDate) : new Date(),
        expiryDate: values.expiryDate ? new Date(values.expiryDate) : undefined,
        quantity: Number(values.quantity),
        unitId: values.unitId,
        supplierId: values.supplierId || undefined,
        qualityStatus: values.qualityStatus,
        isActive: !!values.isActive,
      }

      // simulate API
      await new Promise((r) => setTimeout(r, 300))
      if (mode === 'edit' && onUpdate) {
        onUpdate(newLot)
      } else {
        onSave(newLot)
      }
      onClose()
    },
  })

  // sync initial values when editing/viewing
  React.useEffect(() => {
    if (initial) {
      const src = initial
      formik.setValues({
        materialId: src.materialId || '',
        lotNumber: src.lotNumber || '',
        productionDate: src.productionDate
          ? new Date(src.productionDate).toISOString().slice(0, 10)
          : '',
        expiryDate: src.expiryDate ? new Date(src.expiryDate).toISOString().slice(0, 10) : '',
        quantity: src.quantity || 0,
        unitId: src.unitId || (units.length ? units[0].id : ''),
        supplierId: src.supplierId || (suppliers.length ? suppliers[0].id : ''),
        qualityStatus: src.qualityStatus || QualityStatusEnum.Pending,
        isActive: !!src.isActive,
      })
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [initial])

  if (!isOpen) return null

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      <div className="absolute inset-0 bg-black opacity-40" onClick={onClose} />
      <div className="relative bg-white rounded-lg shadow-lg w-full max-w-2xl mx-4">
        <form onSubmit={formik.handleSubmit} className="space-y-2 p-3">
          <div className="flex items-center justify-between p-2 border-b">
            <div>
              <h2 className="text-2xl font-bold text-gray-900">
                {mode === 'create'
                  ? 'Yeni Lot Kaydı'
                  : mode === 'edit'
                    ? 'Lot Düzenle'
                    : 'Lot Detayı'}
              </h2>
              <p className="text-gray-600">
                {mode === 'create'
                  ? 'Lot bilgilerini girin'
                  : mode === 'edit'
                    ? 'Mevcut lot bilgilerini güncelleyin'
                    : 'Lot bilgileri (sadece gösterim)'}
              </p>
            </div>
            <div className="flex items-center space-x-2">
              <button
                type="button"
                onClick={onClose}
                className="px-2.5 py-1 text-sm border rounded-md bg-white hover:bg-gray-50"
              >
                <FaTimes className="inline mr-1 h-3 w-3" /> Kapat
              </button>
              {mode !== 'view' && (
                <button
                  type="submit"
                  className="px-2.5 py-1 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center"
                >
                  <FaSave className="inline mr-1 h-3 w-3" /> Kaydet
                </button>
              )}
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 p-2 gap-x-3 gap-y-2">
            <div>
              <label className="block text-sm font-medium text-gray-700">Malzeme *</label>
              <select
                {...formik.getFieldProps('materialId')}
                disabled={mode === 'view'}
                className="w-full border rounded-md px-2 py-1 text-sm"
              >
                <option value="">Seçiniz...</option>
                {materials.map((m) => (
                  <option key={m.id} value={m.id}>
                    {m.code} - {m.name}
                  </option>
                ))}
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700">Lot Numarası *</label>
              <input
                type="text"
                {...formik.getFieldProps('lotNumber')}
                disabled={mode === 'view'}
                className="w-full border rounded-md px-2 py-1 text-sm"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700">Üretim Tarihi</label>
              <input
                type="date"
                {...formik.getFieldProps('productionDate')}
                disabled={mode === 'view'}
                className="w-full border rounded-md px-2 py-1 text-sm"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700">Son Kullanma Tarihi</label>
              <input
                type="date"
                {...formik.getFieldProps('expiryDate')}
                disabled={mode === 'view'}
                className="w-full border rounded-md px-2 py-1 text-sm"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700">Miktar</label>
              <input
                type="number"
                step="0.01"
                {...formik.getFieldProps('quantity')}
                disabled={mode === 'view'}
                className="w-full border rounded-md px-2 py-1 text-sm"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700">Birim</label>
              <select
                {...formik.getFieldProps('unitId')}
                disabled={mode === 'view'}
                className="w-full border rounded-md px-2 py-1 text-sm"
              >
                {units.map((u) => (
                  <option key={u.id} value={u.id}>
                    {u.code}
                  </option>
                ))}
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700">Tedarikçi</label>
              <select
                {...formik.getFieldProps('supplierId')}
                disabled={mode === 'view'}
                className="w-full border rounded-md px-2 py-1 text-sm"
              >
                <option value="">Seçiniz...</option>
                {suppliers.map((s) => (
                  <option key={s.id} value={s.id}>
                    {s.code} - {s.name}
                  </option>
                ))}
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700">Kalite Durumu</label>
              <select
                {...formik.getFieldProps('qualityStatus')}
                className="w-full border rounded-md px-2 py-1 text-sm"
              >
                {Object.values(QualityStatusEnum).map((status) => (
                  <option key={status} value={status}>
                    {getQualityStatusText(status)}
                  </option>
                ))}
              </select>
            </div>
          </div>
        </form>
      </div>
    </div>
  )
}

export default LotForm