import React from 'react'

// ** MUI Imports
import Box from '@mui/material/Box'
import Card from '@mui/material/Card'
import Button from '@mui/material/Button'
import CardHeader from '@mui/material/CardHeader'
import ButtonGroup from '@mui/material/ButtonGroup'
import Typography from '@mui/material/Typography'
import Menu from '@mui/material/Menu'
import MenuItem from '@mui/material/MenuItem'
import Checkbox from '@mui/material/Checkbox'
import ListItemText from '@mui/material/ListItemText'

// ** Icon Imports
import Icon from 'src/@core/components/icon'

// ** Export Utilities
import { jsPDF } from 'jspdf'
import autoTable from 'jspdf-autotable'
import * as XLSX from 'xlsx'

interface TransactionHeaderProps {
  data: any[]
  visibleColumns: {
    date: boolean
    transactionId: boolean
    description: boolean
    transactionType: boolean
    debit: boolean
    credit: boolean
    ongoingBalance: boolean
    closingBalance: boolean
    status: boolean
    action: boolean
  }
  onToggleColumn: (columnName: string) => void
}

const TransactionHeader = ({ data, visibleColumns, onToggleColumn }: TransactionHeaderProps) => {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
  const open = Boolean(anchorEl)



  const handleClose = () => {
    setAnchorEl(null)
  }

  // Export to CSV
  const exportToCSV = () => {
    const headers = [
      'Date',
      'Transaction ID',
      'Description',
      'Transaction Type',
      'Debit',
      'Credit',
      'Ongoing Balance',
      'Closing Balance',
      'Status'
    ]

    const csvData = data.map(item => [
      item.date,
      item.transactionId,
      item.description,
      item.transactionType,
      item.debit ? item.debit : '',
      item.credit ? item.credit : '',
      item.ongoingBalance,
      item.closingBalance,
      item.status
    ])

    const csvContent = [headers, ...csvData].map(row => row.join(',')).join('\n')
    const blob = new Blob([csvContent], { type: 'text/csv' })
    const url = URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `transactions_${new Date().toISOString().split('T')[0]}.csv`
    link.click()
    URL.revokeObjectURL(url)
  }

  // Export to Excel
  const exportToExcel = () => {
    const excelData = data.map(item => ({
      Date: item.date,
      'Transaction ID': item.transactionId,
      Description: item.description,
      'Transaction Type': item.transactionType,
      Debit: item.debit ? item.debit : '',
      Credit: item.credit ? item.credit : '',
      'Ongoing Balance': item.ongoingBalance,
      'Closing Balance': item.closingBalance,
      Status: item.status
    }))

    const ws = XLSX.utils.json_to_sheet(excelData)
    const wb = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(wb, ws, 'Transactions')
    XLSX.writeFile(wb, `transactions_${new Date().toISOString().split('T')[0]}.xlsx`)
  }

  // Export to PDF
  const exportToPDF = () => {
    const doc = new jsPDF({ format: 'a4', orientation: 'landscape' })

    const tableColumn = [
      'Date',
      'Transaction ID',
      'Description',
      'Type',
      'Debit',
      'Credit',
      'Ongoing Bal',
      'Closing Bal',
      'Status'
    ]

    const tableRows = data.map(item => [
      item.date,
      item.transactionId,
      item.description.length > 30 ? item.description.substring(0, 30) + '...' : item.description,
      item.transactionType,
      item.debit ? `$${item.debit.toFixed(2)}` : '-',
      item.credit ? `$${item.credit.toFixed(2)}` : '-',
      `$${item.ongoingBalance.toFixed(2)}`,
      `$${item.closingBalance.toFixed(2)}`,
      item.status
    ])

    doc.text('Transactions Report', 14, 15)

    autoTable(doc, {
      head: [tableColumn],
      body: tableRows,
      startY: 20,
      styles: { fontSize: 7 },
      headStyles: { fillColor: [41, 128, 185] },
      margin: { top: 20 }
    })

    doc.save(`transactions_${new Date().toISOString().split('T')[0]}.pdf`)
  }

  const columnNames = [
    { key: 'date', label: 'Date' },
    { key: 'transactionId', label: 'Transaction ID' },
    { key: 'description', label: 'Description' },
    { key: 'transactionType', label: 'Transaction Type' },
    { key: 'debit', label: 'Debit' },
    { key: 'credit', label: 'Credit' },
    { key: 'ongoingBalance', label: 'Ongoing Balance' },
    { key: 'closingBalance', label: 'Closing Balance' },
    { key: 'status', label: 'Status' },
    { key: 'action', label: 'Actions' }
  ]

  return (
    <Card>
      <CardHeader
        title='All Transactions'
        subheader='View and manage all transaction history'
      />
      <Box
        sx={{
          p: 5,
          pt: 0,
          display: 'flex',
          gap: 2,
          flexWrap: 'wrap',
          justifyContent: 'space-between',
          alignItems: 'center'
        }}
      >
        <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
          <Icon icon='tabler:info-circle' fontSize={16} color='#666' />
          <Typography variant='caption' color='text.secondary'>
            {data.length} transactions found 
          </Typography>
        </Box>
        
        <Box sx={{ display: 'flex', gap: 2 }}>
          <ButtonGroup variant='outlined' size='medium'>
            <Button onClick={exportToCSV} startIcon={<Icon icon='tabler:file-spreadsheet' />}>
              CSV
            </Button>
            <Button onClick={exportToExcel} startIcon={<Icon icon='tabler:file-excel' />}>
              Excel
            </Button>
            <Button onClick={exportToPDF} startIcon={<Icon icon='tabler:file-pdf' />}>
              PDF
            </Button>
          </ButtonGroup>
        </Box>
      </Box>

      {/* Column Visibility Menu */}
      <Menu
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
      >
        {columnNames.map(column => (
          <MenuItem key={column.key} onClick={() => onToggleColumn(column.key)}>
            <Checkbox checked={visibleColumns[column.key as keyof typeof visibleColumns]} />
            <ListItemText primary={column.label} />
          </MenuItem>
        ))}
      </Menu>
    </Card>
  )
}

export default TransactionHeader