'use client'

import React, { useState } from 'react'
import { Card, CardContent, Typography, Button, Switch, FormControlLabel, Box, Radio } from '@mui/material'
import Grid from '@mui/material/Grid2'
import CustomTextField from '@/@core/components/mui/TextField'
import CustomAutocomplete from '@/@core/components/mui/Autocomplete'

interface FormData {
  namaAset: string
  nomor: string
  tanggalPembelian: string
  hargaBeli: string
  akunAsetTetap: any
  dikreditkanDariAkun: any
  deskripsi: string
  referensi: string
  tanpaPenyusutan: boolean
  akunAkumulasiPenyusutan: any
  akunPenyusutan: any
  nilaiPenyusuanPerTahun: string
  masaManfaatTahun: string
  masaManfaatBulan: string
  depreciationType: 'percentage' | 'useful-life'
  showAdditionalOptions: boolean
  metodePenyusutan: any
  tanggalMulaiPenyusutan: string
  akumulasiPenyusutan: string
  batasBiaya: string
  nilaiResidu: string
  showImageUpload: boolean
  uploadedImage: string | null
}

// Simple ImageUpload component
const ImageUpload = ({ onUpload, maxFileSize, showUrlOption, dragDropText, browseButtonText }: any) => {
  const [dragOver, setDragOver] = useState(false)

  const handleFileSelect = (file: File) => {
    if (file.size > maxFileSize) {
      alert(`File size exceeds ${maxFileSize / (1024 * 1024)}MB limit`)
      return
    }

    const url = URL.createObjectURL(file)
    onUpload(file, url)
  }

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault()
    setDragOver(false)
    const files = Array.from(e.dataTransfer.files)
    if (files[0]) {
      handleFileSelect(files[0])
    }
  }

  const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || [])
    if (files[0]) {
      handleFileSelect(files[0])
    }
  }

  return (
    <Box
      sx={{
        border: dragOver ? '2px dashed #1976d2' : '2px dashed #ccc',
        borderRadius: 2,
        p: 3,
        textAlign: 'center',
        backgroundColor: dragOver ? '#f5f5f5' : 'transparent',
        transition: 'all 0.3s ease'
      }}
      onDrop={handleDrop}
      onDragOver={e => {
        e.preventDefault()
        setDragOver(true)
      }}
      onDragLeave={() => setDragOver(false)}
    >
      <Typography variant='body1' sx={{ mb: 2 }}>
        {dragDropText}
      </Typography>
      <input
        type='file'
        accept='image/*'
        style={{ display: 'none' }}
        id='image-upload-input'
        onChange={handleFileInput}
      />
      <label htmlFor='image-upload-input'>
        <Button variant='outlined' component='span'>
          {browseButtonText}
        </Button>
      </label>
    </Box>
  )
}

const FixedAssetAddForm = () => {
  const [formData, setFormData] = useState<FormData>({
    namaAset: '',
    nomor: 'FA/00003',
    tanggalPembelian: '11/09/2025',
    hargaBeli: '0',
    akunAsetTetap: null,
    dikreditkanDariAkun: null,
    deskripsi: '',
    referensi: '',
    tanpaPenyusutan: true,
    akunAkumulasiPenyusutan: null,
    akunPenyusutan: null,
    nilaiPenyusuanPerTahun: '',
    masaManfaatTahun: '',
    masaManfaatBulan: '',
    depreciationType: 'percentage',
    showAdditionalOptions: false,
    metodePenyusutan: null,
    tanggalMulaiPenyusutan: '11/09/2025',
    akumulasiPenyusutan: '0',
    batasBiaya: '0',
    nilaiResidu: '0',
    showImageUpload: false,
    uploadedImage: null
  })

  const handleInputChange = (field: keyof FormData, value: any) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }))
  }

  // Sample options - replace with your actual data
  const akunAsetTetapOptions = [{ label: '1-10705 Aset Tetap - Perlengkapan Kantor', value: '1-10705' }]

  const dikreditkanDariAkunOptions = [{ label: 'Silakan pilih dikreditkan dari akun', value: '' }]

  const akunAkumulasiPenyusutanOptions = [{ label: 'Silakan pilih akun akumulasi penyusutan', value: '' }]

  const akunPenyusutanOptions = [{ label: 'Silakan pilih akbun penyusutan', value: '' }]

  const metodePenyusutanOptions = [
    { label: 'Straight Line', value: 'straight-line' },
    { label: 'Declining Balance', value: 'declining-balance' },
    { label: 'Sum of Years Digits', value: 'sum-of-years' }
  ]

  const handleUpload = (file: File, url: string) => {
    handleInputChange('uploadedImage', url)
    console.log('Image uploaded:', { file, url })
  }

  const handleSubmit = () => {
    console.log('Form Data:', formData)
    // Handle form submission here
  }

  return (
    <Card>
      <CardContent>
        <Typography variant='h6' gutterBottom>
          Detil
        </Typography>

        <Box sx={{ mb: 2 }}>
          <Button
            variant='text'
            color='primary'
            sx={{ textTransform: 'none', p: 0, minWidth: 'auto' }}
            onClick={() => handleInputChange('showImageUpload', !formData.showImageUpload)}
          >
            {formData.showImageUpload ? '- Sembunyikan gambar aset tetap' : '+ Tampilkan gambar aset tetap'}
          </Button>
        </Box>

        {/* Image Upload Section */}
        {formData.showImageUpload && (
          <Box sx={{ mb: 3 }}>
            <ImageUpload
              onUpload={handleUpload}
              maxFileSize={1 * 1024 * 1024} // 1MB
              showUrlOption={false}
              dragDropText='Drop your image here'
              browseButtonText='Choose Image'
            />
            {formData.uploadedImage && (
              <Box sx={{ mt: 2, textAlign: 'center' }}>
                <img
                  src={formData.uploadedImage}
                  alt='Uploaded asset'
                  style={{ maxWidth: '200px', maxHeight: '200px', borderRadius: '8px' }}
                />
              </Box>
            )}
          </Box>
        )}

        <Grid container spacing={3}>
          {/* Left Column */}
          <Grid size={{ xs: 12, md: 6 }}>
            <CustomTextField
              fullWidth
              label='Nama Aset'
              placeholder='Nama Aset'
              value={formData.namaAset}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('namaAset', e.target.value)}
              required
              sx={{ mb: 3 }}
            />

            <CustomTextField
              fullWidth
              label='Tanggal Pembelian'
              type='date'
              value={formData.tanggalPembelian}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                handleInputChange('tanggalPembelian', e.target.value)
              }
              InputLabelProps={{
                shrink: true
              }}
              required
              sx={{ mb: 3 }}
            />

            <CustomAutocomplete
              fullWidth
              options={akunAsetTetapOptions}
              value={formData.akunAsetTetap}
              onChange={(event, newValue) => handleInputChange('akunAsetTetap', newValue)}
              renderInput={params => (
                <CustomTextField
                  {...params}
                  label='Akun Aset Tetap'
                  placeholder='1-10705 Aset Tetap - Perlengkapan Kantor'
                  fullWidth
                  required
                />
              )}
              sx={{ mb: 3 }}
            />

            <CustomTextField
              fullWidth
              label='Deskripsi'
              placeholder='Deskripsi'
              multiline
              rows={4}
              value={formData.deskripsi}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('deskripsi', e.target.value)}
              sx={{ mb: 3 }}
            />

            <CustomTextField
              fullWidth
              label='Referensi'
              placeholder='Referensi'
              value={formData.referensi}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('referensi', e.target.value)}
            />
          </Grid>

          {/* Right Column */}
          <Grid size={{ xs: 12, md: 6 }}>
            <CustomTextField
              fullWidth
              label='Nomor'
              value={formData.nomor}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('nomor', e.target.value)}
              sx={{ mb: 3 }}
            />

            <CustomTextField
              fullWidth
              label='Harga Beli'
              type='number'
              value={formData.hargaBeli}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('hargaBeli', e.target.value)}
              sx={{ mb: 3 }}
            />

            <CustomAutocomplete
              fullWidth
              options={dikreditkanDariAkunOptions}
              value={formData.dikreditkanDariAkun}
              onChange={(event, newValue) => handleInputChange('dikreditkanDariAkun', newValue)}
              renderInput={params => (
                <CustomTextField
                  {...params}
                  label='Dikreditkan Dari Akun'
                  placeholder='Silakan pilih dikreditkan dari akun'
                  fullWidth
                  required
                />
              )}
              sx={{ mb: 3 }}
            />
          </Grid>
        </Grid>

        {/* Penyusutan Section */}
        <Box sx={{ mt: 4 }}>
          <Typography variant='h6' gutterBottom>
            Penyusutan
          </Typography>

          <FormControlLabel
            control={
              <Switch
                checked={formData.tanpaPenyusutan}
                onChange={e => handleInputChange('tanpaPenyusutan', e.target.checked)}
                color='primary'
              />
            }
            label='Tanpa penyusutan'
          />

          {/* Show depreciation fields when switch is OFF (false) */}
          {!formData.tanpaPenyusutan && (
            <Grid container spacing={3} sx={{ mt: 2 }}>
              <Grid size={{ xs: 12, md: 6 }}>
                <CustomAutocomplete
                  fullWidth
                  options={akunAkumulasiPenyusutanOptions}
                  value={formData.akunAkumulasiPenyusutan}
                  onChange={(event, newValue) => handleInputChange('akunAkumulasiPenyusutan', newValue)}
                  renderInput={params => (
                    <CustomTextField
                      {...params}
                      label='Akun Akumulasi Penyusutan'
                      placeholder='Silakan pilih akun akumulasi penyusutan'
                      fullWidth
                      required
                    />
                  )}
                  sx={{ mb: 3 }}
                />
              </Grid>

              <Grid size={{ xs: 12, md: 6 }}>
                <CustomAutocomplete
                  fullWidth
                  options={akunPenyusutanOptions}
                  value={formData.akunPenyusutan}
                  onChange={(event, newValue) => handleInputChange('akunPenyusutan', newValue)}
                  renderInput={params => (
                    <CustomTextField
                      {...params}
                      label='Akun penyusutan'
                      placeholder='Silakan pilih akbun penyusutan'
                      fullWidth
                      required
                    />
                  )}
                  sx={{ mb: 3 }}
                />
              </Grid>

              <Grid size={{ xs: 12, md: 6 }}>
                <Box sx={{ mb: 3 }}>
                  <Typography variant='body2' sx={{ mb: 1, fontWeight: 500 }}>
                    Nilai penyusutan per tahun *
                  </Typography>
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                    <Radio
                      checked={formData.depreciationType === 'percentage'}
                      onChange={() => handleInputChange('depreciationType', 'percentage')}
                      value='percentage'
                      name='depreciation-method'
                      color='primary'
                      size='small'
                    />
                    <Box>
                      <CustomTextField
                        value={formData.nilaiPenyusuanPerTahun}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                          handleInputChange('nilaiPenyusuanPerTahun', e.target.value)
                        }
                        disabled={formData.depreciationType !== 'percentage'}
                        sx={{
                          flex: 1,
                          '& .MuiOutlinedInput-root': {
                            border: 'none',
                            '& fieldset': {
                              border: 'none'
                            }
                          }
                        }}
                      />
                    </Box>
                  </Box>
                </Box>
              </Grid>

              <Grid size={{ xs: 12, md: 6 }}>
                <Box sx={{ mb: 3 }}>
                  <Typography variant='body2' sx={{ mb: 1, fontWeight: 500 }}>
                    Masa Manfaat *
                  </Typography>
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                    <Radio
                      checked={formData.depreciationType === 'useful-life'}
                      onChange={() => handleInputChange('depreciationType', 'useful-life')}
                      value='useful-life'
                      name='depreciation-method'
                      color='primary'
                      size='small'
                    />
                    <Box>
                      <CustomTextField
                        placeholder='Tahun'
                        value={formData.masaManfaatTahun}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                          handleInputChange('masaManfaatTahun', e.target.value)
                        }
                        disabled={formData.depreciationType !== 'useful-life'}
                        sx={{
                          flex: 1,
                          '& .MuiOutlinedInput-root': {
                            borderRadius: 0,
                            borderRight: '1px solid #e0e0e0',
                            '& fieldset': {
                              border: 'none'
                            }
                          }
                        }}
                      />
                      <CustomTextField
                        placeholder='Bulan'
                        value={formData.masaManfaatBulan}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                          handleInputChange('masaManfaatBulan', e.target.value)
                        }
                        disabled={formData.depreciationType !== 'useful-life'}
                        sx={{
                          flex: 1,
                          '& .MuiOutlinedInput-root': {
                            borderRadius: 0,
                            '& fieldset': {
                              border: 'none'
                            }
                          }
                        }}
                      />
                    </Box>
                  </Box>
                </Box>
              </Grid>

              <Grid size={12}>
                <Button
                  variant='text'
                  color='primary'
                  sx={{ textTransform: 'none', p: 0, minWidth: 'auto' }}
                  onClick={() => handleInputChange('showAdditionalOptions', !formData.showAdditionalOptions)}
                >
                  {formData.showAdditionalOptions ? '- Sembunyikan opsi lainnya' : '+ Tampilkan opsi lainnya'}
                </Button>
              </Grid>

              {/* Additional Options */}
              {formData.showAdditionalOptions && (
                <>
                  <Grid size={{ xs: 12, md: 6 }}>
                    <Typography variant='body2' sx={{ mb: 1, fontWeight: 500, color: 'error.main' }}>
                      Metode Penyusutan *
                    </Typography>
                    <CustomAutocomplete
                      fullWidth
                      options={metodePenyusutanOptions}
                      value={formData.metodePenyusutan}
                      onChange={(event, newValue) => handleInputChange('metodePenyusutan', newValue)}
                      renderInput={params => (
                        <CustomTextField {...params} placeholder='Straight Line' fullWidth required />
                      )}
                      sx={{ mb: 3 }}
                    />
                  </Grid>

                  <Grid size={{ xs: 12, md: 6 }}>
                    <Typography variant='body2' sx={{ mb: 1, fontWeight: 500 }}>
                      Tanggal Mulai Penyusutan
                    </Typography>
                    <CustomTextField
                      fullWidth
                      type='date'
                      value={formData.tanggalMulaiPenyusutan}
                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                        handleInputChange('tanggalMulaiPenyusutan', e.target.value)
                      }
                      InputLabelProps={{
                        shrink: true
                      }}
                      sx={{ mb: 3 }}
                    />
                  </Grid>

                  <Grid size={{ xs: 12, md: 4 }}>
                    <Typography variant='body2' sx={{ mb: 1, fontWeight: 500 }}>
                      Akumulasi Penyusutan
                    </Typography>
                    <CustomTextField
                      fullWidth
                      type='number'
                      value={formData.akumulasiPenyusutan}
                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                        handleInputChange('akumulasiPenyusutan', e.target.value)
                      }
                      sx={{ mb: 3 }}
                    />
                  </Grid>

                  <Grid size={{ xs: 12, md: 4 }}>
                    <Typography variant='body2' sx={{ mb: 1, fontWeight: 500 }}>
                      Batas Biaya
                    </Typography>
                    <CustomTextField
                      fullWidth
                      type='number'
                      value={formData.batasBiaya}
                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                        handleInputChange('batasBiaya', e.target.value)
                      }
                      sx={{ mb: 3 }}
                    />
                  </Grid>

                  <Grid size={{ xs: 12, md: 4 }}>
                    <Typography variant='body2' sx={{ mb: 1, fontWeight: 500 }}>
                      Nilai Residu
                    </Typography>
                    <CustomTextField
                      fullWidth
                      type='number'
                      value={formData.nilaiResidu}
                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                        handleInputChange('nilaiResidu', e.target.value)
                      }
                      sx={{ mb: 3 }}
                    />
                  </Grid>
                </>
              )}
            </Grid>
          )}
        </Box>

        {/* Submit Button */}
        <Box sx={{ mt: 4, display: 'flex', justifyContent: 'flex-end' }}>
          <Button variant='contained' color='primary' onClick={handleSubmit} sx={{ minWidth: 120 }}>
            Simpan
          </Button>
        </Box>
      </CardContent>
    </Card>
  )
}

export default FixedAssetAddForm