'use client'

import React, { useState } from 'react'
import { Card, CardContent } from '@mui/material'
import Grid from '@mui/material/Grid2'
import {
  ExpenseFormData,
  ExpenseItem,
  ExpenseAccount,
  ExpenseTax,
  ExpenseTag,
  ExpenseRecipient
} from '@/types/apps/expenseTypes'
import ExpenseAddBasicInfo from './ExpenseAddBasicInfo'
import ExpenseAddAccount from './ExpenseAddAccount'
import ExpenseAddSummary from './ExpenseAddSummary'

// Mock data
const mockAccounts: ExpenseAccount[] = [
  { id: '1', name: 'Kas', code: '1-10001' },
  { id: '2', name: 'Bank BCA', code: '1-10002' },
  { id: '3', name: 'Bank Mandiri', code: '1-10003' }
]

const mockRecipients: ExpenseRecipient[] = [
  { id: '1', name: 'PT ABC Company' },
  { id: '2', name: 'CV XYZ Trading' },
  { id: '3', name: 'John Doe' },
  { id: '4', name: 'Jane Smith' }
]

const mockTaxes: ExpenseTax[] = [
  { id: '1', name: 'PPN 11%', rate: 11 },
  { id: '2', name: 'PPh 23', rate: 2 },
  { id: '3', name: 'Bebas Pajak', rate: 0 }
]

const mockTags: ExpenseTag[] = [
  { id: '1', name: 'Operasional', color: '#2196F3' },
  { id: '2', name: 'Marketing', color: '#4CAF50' },
  { id: '3', name: 'IT', color: '#FF9800' }
]

const ExpenseAddForm: React.FC = () => {
  const [formData, setFormData] = useState<ExpenseFormData>({
    paidFrom: '1-10001 Kas',
    payLater: false,
    recipient: null,
    transactionDate: '13/09/2025',
    number: 'EXP/00042',
    reference: '',
    tag: null,
    includeTax: false,
    expenseItems: [
      {
        id: 1,
        account: null,
        description: '',
        tax: null,
        total: 0
      }
    ],
    subtotal: 0,
    total: 0,
    showMessage: false,
    showAttachment: false,
    message: ''
  })

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

  const handleExpenseItemChange = (index: number, field: keyof ExpenseItem, value: any): void => {
    setFormData(prev => {
      const newItems = [...prev.expenseItems]
      newItems[index] = { ...newItems[index], [field]: value }

      const subtotal = newItems.reduce((sum, item) => sum + item.total, 0)
      const total = subtotal

      return {
        ...prev,
        expenseItems: newItems,
        subtotal,
        total
      }
    })
  }

  const addExpenseItem = (): void => {
    const newItem: ExpenseItem = {
      id: Date.now(),
      account: null,
      description: '',
      tax: null,
      total: 0
    }
    setFormData(prev => ({
      ...prev,
      expenseItems: [...prev.expenseItems, newItem]
    }))
  }

  const removeExpenseItem = (index: number): void => {
    if (formData.expenseItems.length > 1) {
      setFormData(prev => ({
        ...prev,
        expenseItems: prev.expenseItems.filter((_, i) => i !== index)
      }))
    }
  }

  const formatCurrency = (amount: number): string => {
    return new Intl.NumberFormat('id-ID').format(amount)
  }

  return (
    <Card sx={{ maxWidth: 1200, margin: 'auto', mt: 2 }}>
      <CardContent>
        <Grid container spacing={3}>
          <ExpenseAddBasicInfo
            formData={formData}
            mockAccounts={mockAccounts}
            mockRecipients={mockRecipients}
            mockTags={mockTags}
            onInputChange={handleInputChange}
          />

          <ExpenseAddAccount
            formData={formData}
            mockAccounts={mockAccounts}
            mockTaxes={mockTaxes}
            onExpenseItemChange={handleExpenseItemChange}
            onAddExpenseItem={addExpenseItem}
            onRemoveExpenseItem={removeExpenseItem}
          />

          <ExpenseAddSummary formData={formData} onInputChange={handleInputChange} formatCurrency={formatCurrency} />
        </Grid>
      </CardContent>
    </Card>
  )
}

export default ExpenseAddForm
