// import React, { useState } from 'react'
// import { Grid } from '@mui/material'
// import TransactionHeader from './TransactionHeader'
// import TransactionFilters from './TransactionFilters'
// import TransactionTable from './TransactionTable'
// import toast from 'react-hot-toast'

// // Bank Transaction Dummy Data
// const bankTransactionData = [
//   {
//     id: 1,
//     srNo: 1,
//     date: '2024-01-15T10:30:00',
//     transactionId: 'BANK-TXN-001',
//     detailsParticular: 'Payment Received - Invoice #INV-2024-001',
//     description: 'Payment received from John Doe for consulting services',
//     transactionType: 'Bank',
//     debit: null,
//     credit: 2500.00,
//     ongoingBalance: 5000.00,
//     closingBalance: 7500.00,
//     status: 'Completed',
//     productCode: 'INV-001'
//   },
//   {
//     id: 2,
//     srNo: 2,
//     date: '2024-01-16T14:45:00',
//     transactionId: 'BANK-TXN-002',
//     detailsParticular: 'Wire Transfer - Sarah Smith',
//     description: 'Wire transfer to Sarah Smith for project payment',
//     transactionType: 'Bank',
//     debit: 1500.00,
//     credit: null,
//     ongoingBalance: 7500.00,
//     closingBalance: 6000.00,
//     status: 'Completed',
//     productCode: 'WIRE-002'
//   },
//   {
//     id: 3,
//     srNo: 3,
//     date: '2024-01-20T09:15:00',
//     transactionId: 'BANK-TXN-003',
//     detailsParticular: 'Salary Deposit - ABC Corp',
//     description: 'Monthly salary deposit from ABC Corporation',
//     transactionType: 'Cash',
//     debit: null,
//     credit: 5000.00,
//     ongoingBalance: 6000.00,
//     closingBalance: 11000.00,
//     status: 'Completed',
//     productCode: 'SAL-003'
//   },
//   {
//     id: 4,
//     srNo: 4,
//     date: '2024-01-25T16:20:00',
//     transactionId: 'BANK-TXN-004',
//     detailsParticular: 'Utility Bill Payment - Electricity',
//     description: 'Monthly electricity bill payment',
//     transactionType: 'Wallet',
//     debit: 125.50,
//     credit: null,
//     ongoingBalance: 11000.00,
//     closingBalance: 10874.50,
//     status: 'Pending',
//     productCode: 'UTIL-004'
//   },
//   {
//     id: 5,
//     srNo: 5,
//     date: '2024-01-28T11:00:00',
//     transactionId: 'BANK-TXN-005',
//     detailsParticular: 'Online Purchase - Electronics',
//     description: 'Purchase of laptop accessories',
//     transactionType: 'Wallet',
//     debit: 75.25,
//     credit: null,
//     ongoingBalance: 10874.50,
//     closingBalance: 10799.25,
//     status: 'Completed',
//     productCode: 'ELEC-005'
//   },
//   {
//     id: 6,
//     srNo: 6,
//     date: '2024-02-01T08:30:00',
//     transactionId: 'BANK-TXN-006',
//     detailsParticular: 'Cash Deposit - Branch Deposit',
//     description: 'Cash deposit at main branch counter',
//     transactionType: 'Cash',
//     debit: null,
//     credit: 1000.00,
//     ongoingBalance: 10799.25,
//     closingBalance: 11799.25,
//     status: 'Completed',
//     productCode: 'CASH-006'
//   }
// ]

// const BankTransaction = () => {
//   const [transactionData] = useState(bankTransactionData)
//   const [fromDate, setFromDate] = useState<Date | null>(null)
//   const [toDate, setToDate] = useState<Date | null>(null)
//   const [searchValue, setSearchValue] = useState('')
//   const [pageSize, setPageSize] = useState<number>(10)
//   const [visibleColumns, setVisibleColumns] = useState({
//     srNo: true,
//     date: true,
//     detailsParticular: true,
//     transactionId: true,
//     description: true,
//     transactionType: true,
//     debit: true,
//     credit: true,
//     ongoingBalance: true,
//     closingBalance: true,
//     status: true
//   })

//   const filteredData = transactionData.filter(row => {
//     const matchesDate = () => {
//       if (!fromDate && !toDate) return true
//       const rowDate = new Date(row.date)
//       const startDate = fromDate ? new Date(fromDate) : null
//       const endDate = toDate ? new Date(toDate) : null

//       if (startDate && endDate) {
//         return rowDate >= startDate && rowDate <= endDate
//       } else if (startDate) {
//         return rowDate >= startDate
//       } else if (endDate) {
//         return rowDate <= endDate
//       }
//       return true
//     }

//     const matchesSearch = searchValue
//       ? row.transactionId.toLowerCase().includes(searchValue.toLowerCase()) ||
//         row.description.toLowerCase().includes(searchValue.toLowerCase()) ||
//         row.transactionType.toLowerCase().includes(searchValue.toLowerCase()) ||
//         row.status.toLowerCase().includes(searchValue.toLowerCase()) ||
//         row.detailsParticular.toLowerCase().includes(searchValue.toLowerCase())
//       : true

//     return matchesDate() && matchesSearch
//   })

//   const handleResetFilters = () => {
//     setFromDate(null)
//     setToDate(null)
//     setSearchValue('')
//     toast.success('Filters reset successfully!')
//   }

//   const handleToggleColumn = (columnName: string) => {
//     setVisibleColumns(prev => ({
//       ...prev,
//       [columnName]: !prev[columnName as keyof typeof prev]
//     }))
//   }

//   return (
//     <Grid container spacing={6}>
//       <Grid item xs={12}>
//         <TransactionHeader 
//           data={filteredData} 
//           visibleColumns={visibleColumns} 
//           onToggleColumn={handleToggleColumn} 
//         />
//       </Grid>

//       <Grid item xs={12}>
//         <TransactionFilters
//           fromDate={fromDate}
//           toDate={toDate}
//           searchValue={searchValue}
//           onFromDateChange={setFromDate}
//           onToDateChange={setToDate}
//           onSearchChange={setSearchValue}
//           onReset={handleResetFilters}
//         />
//       </Grid>

//       <Grid item xs={12}>
//         <TransactionTable 
//           data={filteredData} 
//           visibleColumns={visibleColumns}
//           pageSize={pageSize}
//           onPageSizeChange={setPageSize}
//         />
//       </Grid>
//     </Grid>
//   )
// }

// export default BankTransaction


// tyscript issue 
import React, { useState } from 'react'
import { Grid } from '@mui/material'
import TransactionHeader from './TransactionHeader'
import TransactionFilters from './TransactionFilters'
import TransactionTable from './TransactionTable'
import toast from 'react-hot-toast'

// Bank Transaction Dummy Data
const bankTransactionData = [
  {
    id: 1,
    srNo: 1,
    date: '2024-01-15T10:30:00',
    transactionId: 'BANK-TXN-001',
    detailsParticular: 'Payment Received - Invoice #INV-2024-001',
    description: 'Payment received from John Doe for consulting services',
    transactionType: 'Bank',
    debit: null,
    credit: 2500.00,
    ongoingBalance: 5000.00,
    closingBalance: 7500.00,
    status: 'Completed',
    productCode: 'INV-001'
  },
  {
    id: 2,
    srNo: 2,
    date: '2024-01-16T14:45:00',
    transactionId: 'BANK-TXN-002',
    detailsParticular: 'Wire Transfer - Sarah Smith',
    description: 'Wire transfer to Sarah Smith for project payment',
    transactionType: 'Bank',
    debit: 1500.00,
    credit: null,
    ongoingBalance: 7500.00,
    closingBalance: 6000.00,
    status: 'Completed',
    productCode: 'WIRE-002'
  },
  {
    id: 3,
    srNo: 3,
    date: '2024-01-20T09:15:00',
    transactionId: 'BANK-TXN-003',
    detailsParticular: 'Salary Deposit - ABC Corp',
    description: 'Monthly salary deposit from ABC Corporation',
    transactionType: 'Cash',
    debit: null,
    credit: 5000.00,
    ongoingBalance: 6000.00,
    closingBalance: 11000.00,
    status: 'Completed',
    productCode: 'SAL-003'
  },
  {
    id: 4,
    srNo: 4,
    date: '2024-01-25T16:20:00',
    transactionId: 'BANK-TXN-004',
    detailsParticular: 'Utility Bill Payment - Electricity',
    description: 'Monthly electricity bill payment',
    transactionType: 'Wallet',
    debit: 125.50,
    credit: null,
    ongoingBalance: 11000.00,
    closingBalance: 10874.50,
    status: 'Pending',
    productCode: 'UTIL-004'
  },
  {
    id: 5,
    srNo: 5,
    date: '2024-01-28T11:00:00',
    transactionId: 'BANK-TXN-005',
    detailsParticular: 'Online Purchase - Electronics',
    description: 'Purchase of laptop accessories',
    transactionType: 'Wallet',
    debit: 75.25,
    credit: null,
    ongoingBalance: 10874.50,
    closingBalance: 10799.25,
    status: 'Completed',
    productCode: 'ELEC-005'
  },
  {
    id: 6,
    srNo: 6,
    date: '2024-02-01T08:30:00',
    transactionId: 'BANK-TXN-006',
    detailsParticular: 'Cash Deposit - Branch Deposit',
    description: 'Cash deposit at main branch counter',
    transactionType: 'Cash',
    debit: null,
    credit: 1000.00,
    ongoingBalance: 10799.25,
    closingBalance: 11799.25,
    status: 'Completed',
    productCode: 'CASH-006'
  }
]

// ✅ Define the expected visible columns type
interface VisibleColumns {
  srNo: boolean
  date: boolean
  detailsParticular: boolean
  transactionId: boolean
  description: boolean
  transactionType: boolean
  debit: boolean
  credit: boolean
  ongoingBalance: boolean
  closingBalance: boolean
  status: boolean
  action: boolean  // ✅ Add action property
}

const BankTransaction = () => {
  const [transactionData] = useState(bankTransactionData)
  const [fromDate, setFromDate] = useState<Date | null>(null)
  const [toDate, setToDate] = useState<Date | null>(null)
  const [searchValue, setSearchValue] = useState('')
  const [pageSize, setPageSize] = useState<number>(10)
  
  // ✅ Add action: true to visibleColumns
  const [visibleColumns, setVisibleColumns] = useState<VisibleColumns>({
    srNo: true,
    date: true,
    detailsParticular: true,
    transactionId: true,
    description: true,
    transactionType: true,
    debit: true,
    credit: true,
    ongoingBalance: true,
    closingBalance: true,
    status: true,
    action: true  // ✅ Add action column (default visible)
  })

  const filteredData = transactionData.filter(row => {
    const matchesDate = () => {
      if (!fromDate && !toDate) return true
      const rowDate = new Date(row.date)
      const startDate = fromDate ? new Date(fromDate) : null
      const endDate = toDate ? new Date(toDate) : null

      if (startDate && endDate) {
        return rowDate >= startDate && rowDate <= endDate
      } else if (startDate) {
        return rowDate >= startDate
      } else if (endDate) {
        return rowDate <= endDate
      }
      return true
    }

    const matchesSearch = searchValue
      ? row.transactionId.toLowerCase().includes(searchValue.toLowerCase()) ||
        row.description.toLowerCase().includes(searchValue.toLowerCase()) ||
        row.transactionType.toLowerCase().includes(searchValue.toLowerCase()) ||
        row.status.toLowerCase().includes(searchValue.toLowerCase()) ||
        row.detailsParticular.toLowerCase().includes(searchValue.toLowerCase())
      : true

    return matchesDate() && matchesSearch
  })

  const handleResetFilters = () => {
    setFromDate(null)
    setToDate(null)
    setSearchValue('')
    toast.success('Filters reset successfully!')
  }

  // ✅ Update handleToggleColumn to work with the new type
  const handleToggleColumn = (columnName: string) => {
    setVisibleColumns(prev => ({
      ...prev,
      [columnName]: !prev[columnName as keyof VisibleColumns]
    }))
  }

  return (
    <Grid container spacing={6}>
      <Grid item xs={12}>
        <TransactionHeader 
          data={filteredData} 
          visibleColumns={visibleColumns} 
          onToggleColumn={handleToggleColumn} 
        />
      </Grid>

      <Grid item xs={12}>
        <TransactionFilters
          fromDate={fromDate}
          toDate={toDate}
          searchValue={searchValue}
          onFromDateChange={setFromDate}
          onToDateChange={setToDate}
          onSearchChange={setSearchValue}
          onReset={handleResetFilters}
        />
      </Grid>

      <Grid item xs={12}>
        <TransactionTable 
          data={filteredData} 
          visibleColumns={visibleColumns}
          pageSize={pageSize}
          onPageSizeChange={setPageSize}
        />
      </Grid>
    </Grid>
  )
}

export default BankTransaction