import { mdiCheckCircleOutline, mdiLockOutline, mdiLockOpenOutline, mdiPencil, mdiTrashCan, mdiSquareEditOutline } from '@mdi/js'
import React, { useState } from 'react'
import BaseButton from '../BaseButton'
import BaseButtons from '../BaseButtons'
import BaseIcon from '../BaseIcon'
import CardBoxModal from '../CardBoxModal'

const TableChartOfAccounts = () => {
  const accounts = [
    { id: 1, code: '1001', name: 'Cash', type: 'Asset', subType: 'Current Asset', status: 'Active', system: true },
    { id: 2, code: '1002', name: 'Cash I Bank', type: 'Asset', subType: 'Current Asset', status: 'Active', system: false },
    { id: 3, code: '101', name: 'Cash In Hand', type: 'Asset', subType: 'Current Asset', status: 'Active', system: false },
    { id: 4, code: '1200', name: 'Accounts Receivable', type: 'Asset', subType: 'Current Asset', status: 'Active', system: true },
    { id: 5, code: '1300', name: 'Inventory', type: 'Asset', subType: 'Current Asset', status: 'Active', system: true },
    { id: 6, code: '1410', name: 'VAT Input Tax (Recoverable)', type: 'Asset', subType: 'Current Asset', status: 'Active', system: true },
    { id: 7, code: '1420', name: 'Withholding Tax Receivable', type: 'Asset', subType: 'Current Asset', status: 'Active', system: true },
    { id: 8, code: '2001', name: 'Accounts Payable', type: 'Liability', subType: 'Current Liability', status: 'Active', system: true },
  ]

  const perPage = 10
  const [currentPage, setCurrentPage] = useState(0)
  const accountsPaginated = accounts.slice(perPage * currentPage, perPage * (currentPage + 1))
  const numPages = Math.ceil(accounts.length / perPage)
  const pagesList = Array.from({ length: numPages }, (_, i) => i)

  const [isModalInfoActive, setIsModalInfoActive] = useState(false)
  const [isModalTrashActive, setIsModalTrashActive] = useState(false)

  const handleModalAction = () => {
    setIsModalInfoActive(false)
    setIsModalTrashActive(false)
  }

  return (
    <>
      <CardBoxModal
        title="Account Details"
        buttonColor="info"
        buttonLabel="Done"
        isActive={isModalInfoActive}
        onConfirm={handleModalAction}
        onCancel={handleModalAction}
      >
        <p>This is a placeholder for account details.</p>
      </CardBoxModal>

      <CardBoxModal
        title="Confirm Delete"
        buttonColor="danger"
        buttonLabel="Confirm"
        isActive={isModalTrashActive}
        onConfirm={handleModalAction}
        onCancel={handleModalAction}
      >
        <p>Are you sure you want to delete this account?</p>
      </CardBoxModal>

      <div className="overflow-x-auto">
        <table className="w-full text-left border-collapse">
          <thead>
            <tr className="text-gray-500 uppercase text-xs font-semibold bg-gray-50 dark:bg-slate-800/50">
              <th className="p-4 border-b dark:border-slate-800">Code</th>
              <th className="p-4 border-b dark:border-slate-800">Account Name</th>
              <th className="p-4 border-b dark:border-slate-800">Type</th>
              <th className="p-4 border-b dark:border-slate-800">Sub Type</th>
              <th className="p-4 border-b dark:border-slate-800">Status</th>
              <th className="p-4 border-b dark:border-slate-800 text-center">System</th>
              <th className="p-4 border-b dark:border-slate-800 text-right">Actions</th>
            </tr>
          </thead>
          <tbody>
            {accountsPaginated.map((account) => (
              <tr key={account.id} className="hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors">
                <td className="p-4 border-b dark:border-slate-800 font-semibold">{account.code}</td>
                <td className="p-4 border-b dark:border-slate-800">{account.name}</td>
                <td className="p-4 border-b dark:border-slate-800">
                  <span className={`px-3 py-1 rounded-full text-xs font-medium ${
                    account.type === 'Asset' ? 'bg-emerald-100 text-emerald-700' : 'bg-orange-100 text-orange-700'
                  }`}>
                    {account.type}
                  </span>
                </td>
                <td className="p-4 border-b dark:border-slate-800 text-gray-500">{account.subType}</td>
                <td className="p-4 border-b dark:border-slate-800">
                  <div className="flex items-center text-emerald-600">
                    <BaseIcon path={mdiCheckCircleOutline} size="18" className="mr-1.5" />
                    <span className="text-sm font-medium">{account.status}</span>
                  </div>
                </td>
                <td className="p-4 border-b dark:border-slate-800 text-center">
                  <BaseIcon 
                    path={account.system ? mdiLockOutline : mdiLockOpenOutline} 
                    size="18" 
                    className={account.system ? 'text-orange-400' : 'text-gray-300'} 
                  />
                </td>
                <td className="p-4 border-b dark:border-slate-800">
                  <BaseButtons type="justify-end" noWrap>
                    <BaseButton
                      color="info"
                      icon={mdiSquareEditOutline}
                      onClick={() => setIsModalInfoActive(true)}
                      small
                      className="text-blue-600 hover:bg-blue-50 border-none shadow-none"
                    />
                    {!account.system && (
                      <BaseButton
                        color="danger"
                        icon={mdiTrashCan}
                        onClick={() => setIsModalTrashActive(true)}
                        small
                        className="text-red-600 hover:bg-red-50 border-none shadow-none"
                      />
                    )}
                  </BaseButtons>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {numPages > 1 && (
        <div className="p-3 lg:px-6 border-t border-gray-100 dark:border-slate-800">
          <div className="flex flex-col md:flex-row items-center justify-between py-3 md:py-0">
            <BaseButtons>
              {pagesList.map((page) => (
                <BaseButton
                  key={page}
                  active={page === currentPage}
                  label={page + 1}
                  color={page === currentPage ? 'lightDark' : 'whiteDark'}
                  small
                  onClick={() => setCurrentPage(page)}
                />
              ))}
            </BaseButtons>
            <small className="mt-6 md:mt-0">
              Page {currentPage + 1} of {numPages}
            </small>
          </div>
        </div>
      )}
    </>
  )
}

export default TableChartOfAccounts
