import React, { useState } from 'react'

// ** MUI Imports
import Box from '@mui/material/Box'
import Card from '@mui/material/Card'
import Tabs from '@mui/material/Tabs'
import Tab from '@mui/material/Tab'

// ** Components
import CommonTable from './CommonTable'
import TimeBasedModal from './TimeBasedModal'
import EventBasedModal from './EventBasedModal'

// ** Types
import { TabPanelProps, CryptoSaving } from '../types'

// ** Toast
import toast from 'react-hot-toast'

function TabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props
  return (
    <div role='tabpanel' hidden={value !== index} {...other}>
      {value === index && <Box sx={{ py: 3 }}>{children}</Box>}
    </div>
  )
}

const SavingViaCrypto = () => {
  const [activeTab, setActiveTab] = useState(0)
  const [timeBasedData, setTimeBasedData] = useState<CryptoSaving[]>([
    {
      id: '1',
      type: 'weekly',
      category: 'time-based',
      sourceOfFund: 'wallet',
      amount: 0.01,
      balance: 0.01
    }
  ])
  const [eventBasedData, setEventBasedData] = useState<CryptoSaving[]>([
    {
      id: '1',
      type: 'currency-conversion',
      category: 'event-based',
      sourceOfFund: 'bank',
      amount: 0.005,
      balance: 0.005
    }
  ])
  const [modalOpen, setModalOpen] = useState(false)
  const [editItem, setEditItem] = useState<CryptoSaving | null>(null)
  const [modalType, setModalType] = useState<'time-based' | 'event-based'>('time-based')

  const timeBasedColumns = [
    { field: 'type', headerName: 'Type', flex: 0.25, renderCell: ({ row }: any) => row.type.split('-').map((word: string) => word.charAt(0).toUpperCase() + word.slice(1)).join(' ') },
    { field: 'sourceOfFund', headerName: 'Source Of Fund', flex: 0.25, renderCell: ({ row }: any) => row.sourceOfFund.charAt(0).toUpperCase() + row.sourceOfFund.slice(1) },
    { field: 'amount', headerName: 'Amount (BTC)', flex: 0.25, renderCell: ({ row }: any) => `${row.amount.toFixed(4)} BTC` },
    { field: 'balance', headerName: 'Balance (BTC)', flex: 0.25, renderCell: ({ row }: any) => `${row.balance.toFixed(4)} BTC` }
  ]

  const eventBasedColumns = [
    { field: 'type', headerName: 'Type', flex: 0.3, renderCell: ({ row }: any) => row.type.split('-').map((word: string) => word.charAt(0).toUpperCase() + word.slice(1)).join(' ') },
    { field: 'sourceOfFund', headerName: 'Source Of Fund', flex: 0.2, renderCell: ({ row }: any) => row.sourceOfFund.charAt(0).toUpperCase() + row.sourceOfFund.slice(1) },
    { field: 'amount', headerName: 'Amount (BTC)', flex: 0.25, renderCell: ({ row }: any) => `${row.amount.toFixed(4)} BTC` },
    { field: 'balance', headerName: 'Balance (BTC)', flex: 0.25, renderCell: ({ row }: any) => `${row.balance.toFixed(4)} BTC` }
  ]

  const handleAdd = (type: 'time-based' | 'event-based') => {
    setModalType(type)
    setEditItem(null)
    setModalOpen(true)
  }

  const handleEdit = (row: CryptoSaving, type: 'time-based' | 'event-based') => {
    setModalType(type)
    setEditItem(row)
    setModalOpen(true)
  }

  const handleDelete = (row: CryptoSaving, type: 'time-based' | 'event-based') => {
    if (type === 'time-based') {
      setTimeBasedData(timeBasedData.filter(item => item.id !== row.id))
    } else {
      setEventBasedData(eventBasedData.filter(item => item.id !== row.id))
    }
    toast.success('Saving deleted successfully!')
  }

  const handleSave = (newData: any) => {
    const dataWithCategory = { ...newData, category: modalType }
    
    if (modalType === 'time-based') {
      if (editItem) {
        setTimeBasedData(timeBasedData.map(item => item.id === editItem.id ? { ...dataWithCategory, id: item.id } : item))
        toast.success('Saving updated successfully!')
      } else {
        setTimeBasedData([...timeBasedData, { ...dataWithCategory, id: Date.now().toString() }])
        toast.success('Saving added successfully!')
      }
    } else {
      if (editItem) {
        setEventBasedData(eventBasedData.map(item => item.id === editItem.id ? { ...dataWithCategory, id: item.id } : item))
        toast.success('Saving updated successfully!')
      } else {
        setEventBasedData([...eventBasedData, { ...dataWithCategory, id: Date.now().toString() }])
        toast.success('Saving added successfully!')
      }
    }
    setModalOpen(false)
  }

  return (
    <Box>
      <Card>
        <Tabs value={activeTab} onChange={(e, v) => setActiveTab(v)} sx={{ borderBottom: 1, borderColor: 'divider', px: 5 }}>
          <Tab label='Time Based' />
          <Tab label='Event Based' />
        </Tabs>

        <TabPanel value={activeTab} index={0}>
          <CommonTable
            title='Crypto Savings (Time Based)'
            data={timeBasedData}
            columns={timeBasedColumns}
            onAdd={() => handleAdd('time-based')}
            onEdit={(row) => handleEdit(row, 'time-based')}
            onDelete={(row) => handleDelete(row, 'time-based')}
          />
        </TabPanel>

        <TabPanel value={activeTab} index={1}>
          <CommonTable
            title='Crypto Savings (Event Based)'
            data={eventBasedData}
            columns={eventBasedColumns}
            onAdd={() => handleAdd('event-based')}
            onEdit={(row) => handleEdit(row, 'event-based')}
            onDelete={(row) => handleDelete(row, 'event-based')}
          />
        </TabPanel>
      </Card>

      {modalType === 'time-based' ? (
        <TimeBasedModal
          open={modalOpen}
          onClose={() => setModalOpen(false)}
          onSave={handleSave}
          editData={editItem as any}
        />
      ) : (
        <EventBasedModal
          open={modalOpen}
          onClose={() => setModalOpen(false)}
          onSave={handleSave}
          editData={editItem as any}
        />
      )}
    </Box>
  )
}

export default SavingViaCrypto