import * as icon from '@mdi/js';
import Head from 'next/head';
import React, { ReactElement, useState } from 'react';
import SectionMain from '../components/SectionMain';
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
import LayoutAuthenticated from '../layouts/Authenticated';
import CardBox from '../components/CardBox';
import { getPageTitle } from '../config';
import BaseButton from '../components/BaseButton';
import FormField from '../components/FormField';
import BaseIcon from '../components/BaseIcon';
import TableChartOfAccounts from '../components/Finance/TableChartOfAccounts';

const ChartOfAccountsPage = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [accountType, setAccountType] = useState('All Account Types');

  return (
    <>
      <Head>
        <title>{getPageTitle('Chart of Accounts')}</title>
      </Head>
      <SectionMain>
        <div className="flex flex-col md:flex-row md:items-center justify-between mb-6">
          <div className="flex items-center space-x-3 mb-4 md:mb-0">
            <div className="bg-blue-600 p-2 rounded-lg text-white">
              <BaseIcon path={icon.mdiBookOpenVariant} size="24" />
            </div>
            <div>
              <h1 className="text-2xl font-bold text-slate-800 dark:text-white">Chart of Accounts</h1>
              <p className="text-sm text-slate-500 dark:text-slate-400">Maintain your master list of ledger accounts</p>
            </div>
          </div>
          <BaseButton
            color="info"
            label="Add Account"
            icon={icon.mdiPlus}
            className="rounded-lg shadow-md px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white"
          />
        </div>

        <CardBox className="mb-6 border-none shadow-sm overflow-hidden" hasTable={false}>
          <div className="p-4 flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 bg-white dark:bg-slate-900 border-b border-gray-100 dark:border-slate-800">
            <div className="relative flex-grow max-w-lg">
              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400">
                <BaseIcon path={icon.mdiMagnify} size="20" />
              </div>
              <input
                type="text"
                placeholder="Search by account name or code..."
                className="block w-full pl-10 pr-3 py-2.5 border border-gray-200 dark:border-slate-700 rounded-xl leading-5 bg-white dark:bg-slate-900 placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition-all"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>
            
            <div className="relative min-w-[200px]">
              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400">
                <BaseIcon path={icon.mdiFilterOutline} size="20" />
              </div>
              <select
                className="block w-full pl-10 pr-10 py-2.5 border border-gray-200 dark:border-slate-700 rounded-xl leading-5 bg-white dark:bg-slate-900 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition-all appearance-none"
                value={accountType}
                onChange={(e) => setAccountType(e.target.value)}
              >
                <option>All Account Types</option>
                <option>Asset</option>
                <option>Liability</option>
                <option>Equity</option>
                <option>Revenue</option>
                <option>Expense</option>
              </select>
              <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-slate-400">
                <BaseIcon path={icon.mdiChevronDown} size="20" />
              </div>
            </div>
          </div>
          
          <TableChartOfAccounts />
        </CardBox>
      </SectionMain>
    </>
  );
};

ChartOfAccountsPage.getLayout = function getLayout(page: ReactElement) {
  return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
};

export default ChartOfAccountsPage;