'use client'

import React from 'react'
import { Button, Switch, FormControlLabel } from '@mui/material'
import Grid from '@mui/material/Grid2'
import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
import CustomTextField from '@/@core/components/mui/TextField'
import { DropdownOption, PurchaseOrderFormData } from '@/types/apps/purchaseOrderTypes'

interface PurchaseBasicInfoProps {
  formData: PurchaseOrderFormData
  handleInputChange: (field: keyof PurchaseOrderFormData, value: any) => void
}

const PurchaseBasicInfo: React.FC<PurchaseBasicInfoProps> = ({ formData, handleInputChange }) => {
  // Sample data for dropdowns
  const vendorOptions: DropdownOption[] = [
    { label: 'Vendor A', value: 'vendor_a' },
    { label: 'Vendor B', value: 'vendor_b' },
    { label: 'Vendor C', value: 'vendor_c' }
  ]

  const terminOptions: DropdownOption[] = [
    { label: 'Net 30', value: 'net_30' },
    { label: 'Net 15', value: 'net_15' },
    { label: 'Net 60', value: 'net_60' },
    { label: 'Cash on Delivery', value: 'cod' }
  ]

  const ekspedisiOptions: DropdownOption[] = [
    { label: 'JNE', value: 'jne' },
    { label: 'J&T Express', value: 'jnt' },
    { label: 'SiCepat', value: 'sicepat' },
    { label: 'Pos Indonesia', value: 'pos' },
    { label: 'TIKI', value: 'tiki' }
  ]

  return (
    <>
      {/* Row 1 - Vendor dan Nomor */}
      <Grid size={{ xs: 12, sm: 6, md: 6 }}>
        <CustomAutocomplete
          fullWidth
          options={vendorOptions}
          value={formData.vendor}
          onChange={(event, newValue) => handleInputChange('vendor', newValue)}
          renderInput={params => <CustomTextField {...params} label='Vendor' placeholder='Pilih kontak' fullWidth />}
        />
      </Grid>
      <Grid size={{ xs: 12, sm: 6, md: 6 }}>
        <CustomTextField
          fullWidth
          label='Nomor'
          value={formData.nomor}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('nomor', e.target.value)}
          InputProps={{
            readOnly: true
          }}
        />
      </Grid>

      {/* Row 2 - Tgl. Transaksi, Tgl. Jatuh Tempo, Termin */}
      <Grid size={{ xs: 12, sm: 4, md: 4 }}>
        <CustomTextField
          fullWidth
          label='Tgl. Transaksi'
          type='date'
          value={formData.tglTransaksi}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('tglTransaksi', e.target.value)}
          InputLabelProps={{
            shrink: true
          }}
        />
      </Grid>
      <Grid size={{ xs: 12, sm: 4, md: 4 }}>
        <CustomTextField
          fullWidth
          label='Tgl. Jatuh Tempo'
          type='date'
          value={formData.tglJatuhTempo}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('tglJatuhTempo', e.target.value)}
          InputLabelProps={{
            shrink: true
          }}
        />
      </Grid>
      <Grid size={{ xs: 12, sm: 4, md: 4 }}>
        <CustomAutocomplete
          fullWidth
          options={terminOptions}
          value={formData.termin}
          onChange={(event, newValue) => handleInputChange('termin', newValue)}
          renderInput={params => <CustomTextField {...params} label='Termin' placeholder='Net 30' fullWidth />}
        />
      </Grid>

      {/* Row 3 - Tampilkan Informasi Pengiriman */}
      <Grid size={12}>
        <Button
          variant='text'
          color='primary'
          onClick={() => handleInputChange('showShippingInfo', !formData.showShippingInfo)}
          sx={{
            textTransform: 'none',
            fontSize: '14px',
            fontWeight: 500,
            padding: '8px 0',
            display: 'flex',
            alignItems: 'center',
            gap: 1
          }}
        >
          {formData.showShippingInfo ? '−' : '+'} {formData.showShippingInfo ? 'Sembunyikan' : 'Tampilkan'} Informasi
          Pengiriman
        </Button>
      </Grid>

      {/* Shipping Information - Conditional */}
      {formData.showShippingInfo && (
        <>
          <Grid size={{ xs: 12, sm: 4, md: 4 }}>
            <CustomTextField
              fullWidth
              label='Tanggal Pengiriman'
              type='date'
              placeholder='Pilih tanggal'
              value={formData.tanggalPengiriman}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                handleInputChange('tanggalPengiriman', e.target.value)
              }
              InputLabelProps={{
                shrink: true
              }}
            />
          </Grid>
          <Grid size={{ xs: 12, sm: 4, md: 4 }}>
            <CustomAutocomplete
              fullWidth
              options={ekspedisiOptions}
              value={formData.ekspedisi}
              onChange={(event, newValue) => handleInputChange('ekspedisi', newValue)}
              renderInput={params => (
                <CustomTextField {...params} label='Ekspedisi' placeholder='Pilih ekspedisi' fullWidth />
              )}
            />
          </Grid>
          <Grid size={{ xs: 12, sm: 4, md: 4 }}>
            <CustomTextField
              fullWidth
              label='No. Resi'
              placeholder='No. Resi'
              value={formData.noResi}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('noResi', e.target.value)}
            />
          </Grid>
        </>
      )}

      {/* Row 4 - Referensi, SKU, Switch Pajak */}
      <Grid size={{ xs: 12, sm: 4, md: 4 }}>
        <CustomTextField
          fullWidth
          label='Referensi'
          placeholder='Referensi'
          value={formData.referensi}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('referensi', e.target.value)}
        />
      </Grid>
      <Grid size={{ xs: 12, sm: 4, md: 4 }}>
        <CustomTextField fullWidth label='SKU' placeholder='Scan Barcode/SKU' variant='outlined' />
      </Grid>
      <Grid size={{ xs: 12, sm: 4, md: 4 }} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
        <FormControlLabel
          control={
            <Switch
              checked={formData.hargaTermasukPajak}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                handleInputChange('hargaTermasukPajak', e.target.checked)
              }
              color='primary'
            />
          }
          label='Harga termasuk pajak'
          sx={{
            marginLeft: 0,
            '& .MuiFormControlLabel-label': {
              fontSize: '14px',
              color: 'text.secondary'
            }
          }}
        />
      </Grid>
    </>
  )
}

export default PurchaseBasicInfo