import * as icon from '@mdi/js';
import Head from 'next/head';
import React, { ReactElement } from 'react';
import LayoutAuthenticated from '../layouts/Authenticated';
import SectionMain from '../components/SectionMain';
import BaseIcon from '../components/BaseIcon';
import BaseButton from '../components/BaseButton';
import { getPageTitle } from '../config';
import { useAppSelector } from '../stores/hooks';
import Link from 'next/link';

const TransactionEntry = () => {
  const { currentUser } = useAppSelector((state) => state.auth);
  const organizationName = currentUser?.organization?.name || 'SmartHisab';

  const transactionTypes = [
    {
      title: 'Purchase Entry Form',
      titleAm: 'የግዢ መዝገብ',
      description: 'Record purchase transactions with VAT and withholding tax calculations',
      color: 'orange',
      icon: icon.mdiPackageVariantClosed,
      href: '/purchase_invoices/purchase_invoices-new',
      bgColor: 'bg-orange-50',
      borderColor: 'border-orange-100',
      iconBg: 'bg-orange-100',
      iconColor: 'text-orange-600',
      buttonBg: 'bg-orange-600',
      dotColor: 'bg-orange-400',
    },
    {
      title: 'Sales Entry Form',
      titleAm: 'የሽያጭ መዝገብ',
      description: 'Record sales transactions with VAT calculations',
      color: 'green',
      icon: icon.mdiCartOutline,
      href: '/sales_invoices/sales_invoices-new',
      bgColor: 'bg-emerald-50',
      borderColor: 'border-emerald-100',
      iconBg: 'bg-emerald-100',
      iconColor: 'text-emerald-600',
      buttonBg: 'bg-emerald-600',
      dotColor: 'bg-emerald-400',
    },
    {
      title: 'Expense Entry Form',
      titleAm: 'ወጪ መዝገብ',
      description: 'Record business expenses and operating costs',
      color: 'red',
      icon: icon.mdiCurrencyUsd,
      href: '/expenses/expenses-new',
      bgColor: 'bg-red-50',
      borderColor: 'border-red-100',
      iconBg: 'bg-red-100',
      iconColor: 'text-red-600',
      buttonBg: 'bg-red-600',
      dotColor: 'bg-red-400',
    },
    {
      title: 'Inventory Entry Form',
      titleAm: 'እቃ መዝገብ',
      description: 'Track inventory purchases and stock additions',
      color: 'purple',
      icon: icon.mdiCubeOutline,
      href: '/products/products-new',
      bgColor: 'bg-indigo-50',
      borderColor: 'border-indigo-100',
      iconBg: 'bg-indigo-100',
      iconColor: 'text-indigo-600',
      buttonBg: 'bg-indigo-600',
      dotColor: 'bg-indigo-400',
    },
    {
      title: 'All Transactions',
      titleAm: 'ግብይቶች',
      description: 'View and manage all tax transactions',
      color: 'teal',
      icon: icon.mdiViewList,
      href: '/transactions',
      bgColor: 'bg-cyan-50',
      borderColor: 'border-cyan-100',
      iconBg: 'bg-cyan-100',
      iconColor: 'text-cyan-600',
      buttonBg: 'bg-cyan-600',
      dotColor: 'bg-cyan-400',
    },
  ];

  return (
    <>
      <Head>
        <title>{getPageTitle('Transaction Entry')}</title>
      </Head>
      <SectionMain>
        <div className="flex flex-col items-center justify-center mb-12 mt-4">
          <p className="text-gray-500 font-medium mb-2 text-sm">የግብይት አይነት ይምረጡ</p>
          <h1 className="text-3xl font-extrabold text-slate-900 mb-4 text-center">
            Choose the type of transaction you want to record
          </h1>
          <div className="bg-emerald-100 text-emerald-700 px-4 py-1 rounded-full text-sm font-bold shadow-sm">
            {organizationName}
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto px-4">
          {transactionTypes.map((type, index) => (
            <div
              key={index}
              className={`relative flex flex-col p-8 rounded-[2rem] border ${type.borderColor} ${type.bgColor} shadow-sm hover:shadow-md transition-shadow`}
            >
              <div className={`absolute top-6 right-6 w-3 h-3 rounded-full ${type.dotColor}`}></div>
              
              <div className={`w-16 h-16 ${type.iconBg} ${type.iconColor} rounded-2xl flex items-center justify-center mb-6`}>
                <BaseIcon path={type.icon} size={32} />
              </div>

              <div className="mb-8 flex-grow">
                <h3 className="text-lg font-bold text-slate-900 mb-1">{type.titleAm}</h3>
                <h4 className="text-xl font-bold text-slate-800 mb-3">{type.title}</h4>
                <p className="text-slate-500 text-sm leading-relaxed">
                  {type.description}
                </p>
              </div>

              <Link href={type.href}>
                <button
                  className={`w-full py-4 px-6 rounded-2xl text-white font-bold flex items-center justify-center transition-transform active:scale-95 ${type.buttonBg}`}
                >
                  Open Form
                  <BaseIcon path={icon.mdiChevronRight} size={20} className="ml-2" />
                </button>
              </Link>
            </div>
          ))}
        </div>
      </SectionMain>
    </>
  );
};

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

export default TransactionEntry;
