'use client'

import React, { useState, useMemo } from 'react'
import {
  Card,
  CardContent,
  Button,
  Box,
  Typography,
  IconButton,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  CircularProgress
} from '@mui/material'
import Grid from '@mui/material/Grid2'
import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
import CustomTextField from '@/@core/components/mui/TextField'
import ImageUpload from '@/components/ImageUpload'
import { DropdownOption } from '@/types/apps/purchaseOrderTypes'
import { useVendorActive } from '@/services/queries/vendor'
import { useIngredients } from '@/services/queries/ingredients'
import { useUnits } from '@/services/queries/units'
import { useFilesMutation } from '@/services/mutations/files'
import { usePurchaseOrdersMutation } from '@/services/mutations/purchaseOrder'

export interface PurchaseOrderRequest {
  vendor_id: string // uuid.UUID
  po_number: string
  transaction_date: string // ISO date string
  due_date: string // ISO date string
  reference?: string
  status?: 'draft' | 'sent' | 'approved' | 'received' | 'cancelled'
  message?: string
  items: PurchaseOrderItemRequest[]
  attachment_file_ids?: string[] // uuid.UUID[]
}

export interface PurchaseOrderItemRequest {
  ingredient_id: string // uuid.UUID
  description?: string
  quantity: number
  unit_id: string // uuid.UUID
  amount: number
}

export type IngredientItem = {
  id: string
  organization_id: string
  outlet_id: string
  name: string
  unit_id: string
  cost: number
  stock: number
  is_semi_finished: boolean
  is_active: boolean
  metadata: Record<string, unknown>
  created_at: string
  updated_at: string
  unit: Unit
}

export type Unit = {
  id: string
  name: string
  // Add other unit properties as needed
}

// Internal form state interface for UI management
interface PurchaseOrderFormData {
  vendor: { label: string; value: string } | null
  po_number: string
  transaction_date: string
  due_date: string
  reference: string
  status: 'draft' | 'sent' | 'approved' | 'received' | 'cancelled'
  showPesan: boolean
  showAttachment: boolean
  message: string
  items: PurchaseOrderFormItem[]
  attachment_file_ids: string[]
}

interface PurchaseOrderFormItem {
  id: number // for UI tracking
  ingredient: { label: string; value: string; originalData?: IngredientItem } | null
  description: string
  quantity: number
  unit: { label: string; value: string } | null
  amount: number
  total: number // calculated field for UI
}

const PurchaseAddForm: React.FC = () => {
  const [imageUrl, setImageUrl] = useState<string>('')
  const [formData, setFormData] = useState<PurchaseOrderFormData>({
    vendor: null,
    po_number: '',
    transaction_date: '',
    due_date: '',
    reference: '',
    status: 'draft',
    // Bottom section toggles
    showPesan: false,
    showAttachment: false,
    message: '',
    // Items
    items: [
      {
        id: 1,
        ingredient: null,
        description: '',
        quantity: 1,
        unit: null,
        amount: 0,
        total: 0
      }
    ],
    attachment_file_ids: []
  })

  // API Hooks
  const { data: vendors, isLoading: isLoadingVendors } = useVendorActive()
  const { data: ingredients, isLoading: isLoadingIngredients } = useIngredients()
  const { data: units, isLoading: isLoadingUnits } = useUnits({
    page: 1,
    limit: 50
  })

  const { mutate, isPending } = useFilesMutation().uploadFile
  const { createPurchaseOrder } = usePurchaseOrdersMutation()

  // Transform vendors data to dropdown options
  const vendorOptions: DropdownOption[] = useMemo(() => {
    return (
      vendors?.map(vendor => ({
        label: vendor.name,
        value: vendor.id
      })) || []
    )
  }, [vendors])

  // Transform ingredients data to autocomplete options format
  const ingredientOptions = useMemo(() => {
    if (!ingredients || isLoadingIngredients) {
      return []
    }

    return ingredients?.data.map((ingredient: IngredientItem) => ({
      label: ingredient.name,
      value: ingredient.id,
      id: ingredient.id,
      originalData: ingredient // This includes the full IngredientItem with unit, cost, etc.
    }))
  }, [ingredients, isLoadingIngredients])

  // Transform units data to dropdown options
  const unitOptions = useMemo(() => {
    if (!units || isLoadingUnits) {
      return []
    }

    return (
      units?.data?.map((unit: any) => ({
        label: unit.name || unit.nama || unit.unit_name,
        value: unit.id || unit.code || unit.value
      })) || []
    )
  }, [units, isLoadingUnits])

  // Handler Functions
  const handleInputChange = (field: keyof PurchaseOrderFormData, value: any): void => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }))
  }

  const handleItemChange = (index: number, field: keyof PurchaseOrderFormItem, value: any): void => {
    setFormData(prev => {
      const newItems = [...prev.items]
      newItems[index] = { ...newItems[index], [field]: value }

      // Auto-calculate total if amount or quantity changes
      if (field === 'amount' || field === 'quantity') {
        const item = newItems[index]
        item.total = item.amount * item.quantity
      }

      return { ...prev, items: newItems }
    })
  }

  const handleIngredientSelection = (index: number, selectedIngredient: any) => {
    handleItemChange(index, 'ingredient', selectedIngredient)

    // Auto-populate related fields if available in the ingredient data
    if (selectedIngredient) {
      const ingredientData: IngredientItem = selectedIngredient.originalData || selectedIngredient

      // Auto-fill unit based on IngredientItem structure
      if (ingredientData.unit_id || ingredientData.unit) {
        let unitToFind = null

        // If ingredient has unit object (populated relation)
        if (ingredientData.unit && typeof ingredientData.unit === 'object') {
          unitToFind = ingredientData.unit
        }
        // If ingredient has unit_id, find the unit from unitOptions
        else if (ingredientData.unit_id) {
          unitToFind = unitOptions.find(option => option.value === ingredientData.unit_id)
        }

        if (unitToFind) {
          // Create unit option object
          const unitOption = {
            label: (unitToFind as any).label || (unitToFind as any).name || (unitToFind as any).unit_name,
            value: (unitToFind as any).value || ingredientData.unit_id
          }

          handleItemChange(index, 'unit', unitOption)
        }
      }

      // Auto-fill amount with cost from IngredientItem
      if (ingredientData.cost !== undefined && ingredientData.cost !== null) {
        handleItemChange(index, 'amount', ingredientData.cost)
      }

      // Auto-fill description with ingredient name
      if (ingredientData.name) {
        handleItemChange(index, 'description', ingredientData.name)
      }
    }
  }

  const addItem = (): void => {
    const newItem: PurchaseOrderFormItem = {
      id: Date.now(),
      ingredient: null,
      description: '',
      quantity: 1,
      unit: null,
      amount: 0,
      total: 0
    }
    setFormData(prev => ({
      ...prev,
      items: [...prev.items, newItem]
    }))
  }

  const removeItem = (index: number): void => {
    setFormData(prev => ({
      ...prev,
      items: prev.items.filter((_, i) => i !== index)
    }))
  }

  // Function to get selected vendor data
  const getSelectedVendorData = () => {
    if (!formData.vendor?.value || !vendors) return null
    const selectedVendor = vendors.find(vendor => vendor.id === (formData?.vendor?.value ?? ''))
    return selectedVendor
  }

  const upsertAttachment = (attachments: string[], newId: string, index = 0) => {
    if (attachments.length === 0) {
      return [newId]
    }
    return attachments.map((id, i) => (i === index ? newId : id))
  }

  const handleUpload = async (file: File): Promise<string> => {
    return new Promise((resolve, reject) => {
      const formData = new FormData()
      formData.append('file', file)
      formData.append('file_type', 'image')
      formData.append('description', 'Purchase image')

      mutate(formData, {
        onSuccess: data => {
          // pemakaian:
          setFormData(prev => ({
            ...prev,
            attachment_file_ids: upsertAttachment(prev.attachment_file_ids, data.id)
          }))
          setImageUrl(data.file_url)
          resolve(data.id) // <-- balikin id file yang berhasil diupload
        },
        onError: error => {
          reject(error) // biar async/await bisa tangkep error
        }
      })
    })
  }

  // Calculate subtotal from items
  const subtotal = formData.items.reduce((sum, item) => sum + (item.total || 0), 0)

  // Convert form data to API request format
  const convertToApiRequest = (): PurchaseOrderRequest => {
    return {
      vendor_id: formData.vendor?.value || '',
      po_number: formData.po_number,
      transaction_date: formData.transaction_date,
      due_date: formData.due_date,
      reference: formData.reference || undefined,
      status: formData.status,
      message: formData.message || undefined,
      items: formData.items
        .filter(item => item.ingredient && item.unit) // Only include valid items
        .map(item => ({
          ingredient_id: item.ingredient!.value,
          description: item.description || undefined,
          quantity: item.quantity,
          unit_id: item.unit!.value,
          amount: item.amount
        })),
      attachment_file_ids: formData.attachment_file_ids.length > 0 ? formData.attachment_file_ids : undefined
    }
  }

  const handleSave = () => {
    createPurchaseOrder.mutate(convertToApiRequest(), {
      onSuccess: () => {
        window.history.back()
      }
    })
  }

  return (
    <Card>
      <CardContent>
        <Grid container spacing={3}>
          {/* BASIC INFO SECTION */}
          {/* Row 1 - Vendor and PO Number */}
          <Grid size={{ xs: 12, sm: 6, md: 6 }}>
            <CustomAutocomplete
              fullWidth
              options={vendorOptions}
              value={formData.vendor}
              onChange={(event, newValue) => {
                handleInputChange('vendor', newValue)
                if (newValue?.value) {
                  const selectedVendorData = vendors?.find(vendor => vendor.id === newValue.value)
                  console.log('Vendor selected:', selectedVendorData)
                }
              }}
              loading={isLoadingVendors}
              renderInput={params => (
                <CustomTextField
                  {...params}
                  label='Vendor'
                  placeholder={isLoadingVendors ? 'Memuat vendor...' : 'Pilih kontak'}
                  fullWidth
                />
              )}
            />
            {getSelectedVendorData() && (
              <Box className='space-y-1 mt-3'>
                <Box className='flex items-center space-x-2'>
                  <i className='tabler-user text-gray-500 w-3 h-3' />
                  <Typography className='text-gray-700 font-medium text-xs'>
                    {getSelectedVendorData()?.contact_person ?? ''}
                  </Typography>
                </Box>
                <Box className='flex items-start space-x-2'>
                  <i className='tabler-map text-gray-500 w-3 h-3' />
                  <Typography className='text-gray-700 font-medium text-xs'>
                    {getSelectedVendorData()?.address ?? '-'}
                  </Typography>
                </Box>
                <Box className='flex items-center space-x-2'>
                  <i className='tabler-phone text-gray-500 w-3 h-3' />
                  <Typography className='text-gray-700 font-medium text-xs'>
                    {getSelectedVendorData()?.phone_number ?? '-'}
                  </Typography>
                </Box>
              </Box>
            )}
          </Grid>
          <Grid size={{ xs: 12, sm: 6, md: 6 }}>
            <CustomTextField
              fullWidth
              label='PO Number'
              value={formData.po_number}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('po_number', e.target.value)}
            />
          </Grid>

          {/* Row 2 - Transaction Date, Due Date, Status */}
          <Grid size={{ xs: 12, sm: 4, md: 4 }}>
            <CustomTextField
              fullWidth
              label='Transaction Date'
              type='date'
              value={formData.transaction_date}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                handleInputChange('transaction_date', e.target.value)
              }
              InputLabelProps={{
                shrink: true
              }}
            />
          </Grid>
          <Grid size={{ xs: 12, sm: 4, md: 4 }}>
            <CustomTextField
              fullWidth
              label='Due Date'
              type='date'
              value={formData.due_date}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('due_date', e.target.value)}
              InputLabelProps={{
                shrink: true
              }}
            />
          </Grid>
          <Grid size={{ xs: 12, sm: 4, md: 4 }}>
            <CustomTextField
              fullWidth
              label='Reference'
              placeholder='Reference'
              value={formData.reference}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('reference', e.target.value)}
            />
          </Grid>

          {/* ITEMS TABLE SECTION */}
          <Grid size={{ xs: 12 }} sx={{ mt: 4 }}>
            <Typography variant='h6' sx={{ mb: 2, fontWeight: 600 }}>
              Purchase Order Items
            </Typography>

            <TableContainer component={Paper} variant='outlined'>
              <Table>
                <TableHead>
                  <TableRow sx={{ backgroundColor: 'grey.50' }}>
                    <TableCell sx={{ fontWeight: 'bold', minWidth: 180 }}>Ingredient</TableCell>
                    <TableCell sx={{ fontWeight: 'bold', minWidth: 150 }}>Description</TableCell>
                    <TableCell sx={{ fontWeight: 'bold', width: 100 }}>Quantity</TableCell>
                    <TableCell sx={{ fontWeight: 'bold', width: 120 }}>Unit</TableCell>
                    <TableCell sx={{ fontWeight: 'bold', width: 120 }}>Amount</TableCell>
                    <TableCell sx={{ fontWeight: 'bold', width: 100, textAlign: 'right' }}>Total</TableCell>
                    <TableCell sx={{ width: 50 }}></TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {formData.items.map((item: PurchaseOrderFormItem, index: number) => (
                    <TableRow key={item.id}>
                      <TableCell>
                        <CustomAutocomplete
                          size='small'
                          options={ingredientOptions}
                          value={item.ingredient || null}
                          onChange={(event, newValue) => handleIngredientSelection(index, newValue)}
                          loading={isLoadingIngredients}
                          getOptionLabel={(option: any) => {
                            if (!option) return ''
                            return option.label || option.name || option.nama || ''
                          }}
                          isOptionEqualToValue={(option: any, value: any) => {
                            if (!option || !value) return false
                            const optionId = option.value || option.id
                            const valueId = value.value || value.id
                            return optionId === valueId
                          }}
                          renderInput={params => (
                            <CustomTextField
                              {...params}
                              placeholder={isLoadingIngredients ? 'Loading ingredients...' : 'Select Ingredient'}
                              InputProps={{
                                ...params.InputProps,
                                endAdornment: (
                                  <>
                                    {isLoadingIngredients ? <CircularProgress color='inherit' size={20} /> : null}
                                    {params.InputProps.endAdornment}
                                  </>
                                )
                              }}
                            />
                          )}
                          disabled={isLoadingIngredients}
                        />
                      </TableCell>
                      <TableCell>
                        <CustomTextField
                          fullWidth
                          size='small'
                          value={item.description}
                          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                            handleItemChange(index, 'description', e.target.value)
                          }
                          placeholder='Description'
                        />
                      </TableCell>
                      <TableCell>
                        <CustomTextField
                          fullWidth
                          size='small'
                          type='number'
                          value={item.quantity}
                          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                            handleItemChange(index, 'quantity', parseInt(e.target.value) || 1)
                          }
                          inputProps={{ min: 1 }}
                        />
                      </TableCell>
                      <TableCell>
                        <CustomAutocomplete
                          size='small'
                          options={unitOptions}
                          value={item.unit}
                          onChange={(event, newValue) => handleItemChange(index, 'unit', newValue)}
                          loading={isLoadingUnits}
                          getOptionLabel={(option: any) => {
                            if (!option) return ''
                            return option.label || option.name || option.nama || ''
                          }}
                          renderInput={params => (
                            <CustomTextField
                              {...params}
                              placeholder={isLoadingUnits ? 'Loading units...' : 'Select...'}
                              InputProps={{
                                ...params.InputProps,
                                endAdornment: (
                                  <>
                                    {isLoadingUnits ? <CircularProgress color='inherit' size={20} /> : null}
                                    {params.InputProps.endAdornment}
                                  </>
                                )
                              }}
                            />
                          )}
                          disabled={isLoadingUnits}
                        />
                      </TableCell>
                      <TableCell>
                        <CustomTextField
                          fullWidth
                          size='small'
                          type='number'
                          value={item.amount === 0 ? '' : item.amount?.toString() || ''}
                          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                            const value = e.target.value
                            if (value === '') {
                              handleItemChange(index, 'amount', 0)
                              return
                            }
                            const numericValue = parseFloat(value)
                            handleItemChange(index, 'amount', isNaN(numericValue) ? 0 : numericValue)
                          }}
                          inputProps={{ min: 0, step: 'any' }}
                          placeholder='0'
                        />
                      </TableCell>
                      <TableCell>
                        <CustomTextField
                          fullWidth
                          size='small'
                          value={item.total}
                          InputProps={{ readOnly: true }}
                          sx={{
                            '& .MuiInputBase-input': {
                              textAlign: 'right'
                            }
                          }}
                        />
                      </TableCell>
                      <TableCell>
                        <IconButton
                          size='small'
                          color='error'
                          onClick={() => removeItem(index)}
                          disabled={formData.items.length === 1}
                        >
                          <i className='tabler-trash' />
                        </IconButton>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </TableContainer>

            {/* Add New Item Button */}
            <Button
              startIcon={<i className='tabler-plus' />}
              onClick={addItem}
              variant='outlined'
              size='small'
              sx={{ mt: 1 }}
              disabled={isLoadingIngredients || isLoadingUnits}
            >
              Add Item
            </Button>
          </Grid>

          {/* SUMMARY SECTION */}
          <Grid size={12} sx={{ mt: 4 }}>
            <Grid container spacing={3}>
              {/* Left Side - Message and Attachment */}
              <Grid size={{ xs: 12, md: 7 }}>
                {/* Message Section */}
                <Box sx={{ mb: 3 }}>
                  <Button
                    variant='text'
                    color='inherit'
                    onClick={() => handleInputChange('showPesan', !formData.showPesan)}
                    sx={{
                      textTransform: 'none',
                      fontSize: '14px',
                      fontWeight: 500,
                      padding: '12px 16px',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'flex-start',
                      width: '100%',
                      backgroundColor: '#f5f5f5',
                      border: '1px solid #e0e0e0',
                      borderRadius: '4px',
                      color: 'text.primary',
                      '&:hover': {
                        backgroundColor: '#eeeeee'
                      }
                    }}
                  >
                    <Box component='span' sx={{ mr: 1 }}>
                      {formData.showPesan ? (
                        <i className='tabler-chevron-down w-4 h-4' />
                      ) : (
                        <i className='tabler-chevron-right w-4 h-4' />
                      )}
                    </Box>
                    Message
                  </Button>
                  {formData.showPesan && (
                    <Box sx={{ mt: 2 }}>
                      <CustomTextField
                        fullWidth
                        multiline
                        rows={3}
                        placeholder='Add message...'
                        value={formData.message || ''}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                          handleInputChange('message', e.target.value)
                        }
                      />
                    </Box>
                  )}
                </Box>

                {/* Attachment Section */}
                <Box>
                  <Button
                    variant='text'
                    color='inherit'
                    onClick={() => handleInputChange('showAttachment', !formData.showAttachment)}
                    sx={{
                      textTransform: 'none',
                      fontSize: '14px',
                      fontWeight: 500,
                      padding: '12px 16px',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'flex-start',
                      width: '100%',
                      backgroundColor: '#f5f5f5',
                      border: '1px solid #e0e0e0',
                      borderRadius: '4px',
                      color: 'text.primary',
                      '&:hover': {
                        backgroundColor: '#eeeeee'
                      }
                    }}
                  >
                    <Box component='span' sx={{ mr: 1 }}>
                      {formData.showAttachment ? (
                        <i className='tabler-chevron-down w-4 h-4' />
                      ) : (
                        <i className='tabler-chevron-right w-4 h-4' />
                      )}
                    </Box>
                    Attachment
                  </Button>
                  {formData.showAttachment && (
                    <ImageUpload
                      onUpload={handleUpload}
                      maxFileSize={1 * 1024 * 1024}
                      showUrlOption={false}
                      currentImageUrl={imageUrl}
                      dragDropText='Drop your image here'
                      browseButtonText='Choose Image'
                    />
                  )}
                </Box>
              </Grid>

              {/* Right Side - Totals */}
              <Grid size={{ xs: 12, md: 5 }}>
                <Box sx={{ backgroundColor: '#ffffff', p: 3, borderRadius: '8px' }}>
                  {/* Sub Total */}
                  <Box
                    sx={{
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                      py: 2,
                      borderBottom: '1px solid #e0e0e0',
                      '&:hover': {
                        backgroundColor: '#f8f8f8'
                      }
                    }}
                  >
                    <Typography variant='body1' color='text.secondary' sx={{ fontSize: '16px' }}>
                      Sub Total
                    </Typography>
                    <Typography variant='body1' fontWeight={600} sx={{ fontSize: '16px', textAlign: 'right' }}>
                      {new Intl.NumberFormat('id-ID', {
                        style: 'currency',
                        currency: 'IDR',
                        minimumFractionDigits: 0
                      }).format(subtotal)}
                    </Typography>
                  </Box>

                  {/* Total */}
                  <Box
                    sx={{
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                      py: 2,
                      borderBottom: '1px solid #e0e0e0',
                      '&:hover': {
                        backgroundColor: '#f8f8f8'
                      }
                    }}
                  >
                    <Typography variant='h6' fontWeight={600} sx={{ fontSize: '18px' }}>
                      Total
                    </Typography>
                    <Typography variant='h6' fontWeight={600} sx={{ fontSize: '18px', textAlign: 'right' }}>
                      {new Intl.NumberFormat('id-ID', {
                        style: 'currency',
                        currency: 'IDR',
                        minimumFractionDigits: 0
                      }).format(subtotal)}
                    </Typography>
                  </Box>

                  {/* Save Button */}
                  <Button
                    variant='contained'
                    color='primary'
                    fullWidth
                    onClick={handleSave}
                    sx={{
                      textTransform: 'none',
                      fontWeight: 600,
                      py: 1.5,
                      mt: 3,
                      boxShadow: 'none',
                      '&:hover': {
                        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
                      }
                    }}
                  >
                    Save
                  </Button>
                </Box>
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  )
}

export default PurchaseAddForm