'use client'

import React, { useState } from 'react'
import { Card, CardContent } from '@mui/material'
import Grid from '@mui/material/Grid2'
import { IngredientItem, PurchaseOrderFormData } from '@/types/apps/purchaseOrderTypes'
import PurchaseBasicInfo from './PurchaseBasicInfo'
import PurchaseIngredientsTable from './PurchaseIngredientsTable'
import PurchaseSummary from './PurchaseSummary'

const PurchaseAddForm: React.FC = () => {
  const [formData, setFormData] = useState<PurchaseOrderFormData>({
    vendor: null,
    nomor: 'PO/00043',
    tglTransaksi: '2025-09-09',
    tglJatuhTempo: '2025-09-10',
    referensi: '',
    termin: null,
    hargaTermasukPajak: true,
    // Shipping info
    showShippingInfo: false,
    tanggalPengiriman: '',
    ekspedisi: null,
    noResi: '',
    // Bottom section toggles
    showPesan: false,
    showAttachment: false,
    showTambahDiskon: false,
    showBiayaPengiriman: false,
    showBiayaTransaksi: false,
    showUangMuka: false,
    pesan: '',
    // Ingredient items (updated from productItems)
    ingredientItems: [
      {
        id: 1,
        ingredient: null,
        deskripsi: '',
        kuantitas: 1,
        satuan: null,
        discount: '0',
        harga: 0,
        pajak: null,
        waste: null,
        total: 0
      }
    ]
  })

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

  const handleIngredientChange = (index: number, field: keyof IngredientItem, value: any): void => {
    setFormData(prev => {
      const newItems = [...prev.ingredientItems]
      newItems[index] = { ...newItems[index], [field]: value }

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

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

  const addIngredientItem = (): void => {
    const newItem: IngredientItem = {
      id: Date.now(),
      ingredient: null,
      deskripsi: '',
      kuantitas: 1,
      satuan: null,
      discount: '0%',
      harga: 0,
      pajak: null,
      waste: null,
      total: 0
    }
    setFormData(prev => ({
      ...prev,
      ingredientItems: [...prev.ingredientItems, newItem]
    }))
  }

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

  return (
    <Card>
      <CardContent>
        <Grid container spacing={3}>
          {/* Basic Info Section */}
          <PurchaseBasicInfo formData={formData} handleInputChange={handleInputChange} />

          {/* Ingredients Table Section */}
          <PurchaseIngredientsTable
            formData={formData}
            handleIngredientChange={handleIngredientChange}
            addIngredientItem={addIngredientItem}
            removeIngredientItem={removeIngredientItem}
          />

          {/* Summary Section */}
          <PurchaseSummary formData={formData} handleInputChange={handleInputChange} />
        </Grid>
      </CardContent>
    </Card>
  )
}

export default PurchaseAddForm