import { mdiFileUploadOutline, mdiPackageVariantClosed, mdiAccountGroupOutline, mdiTruckOutline, mdiWarehouse } from '@mdi/js';
import Head from 'next/head';
import React, { ReactElement, useEffect, useState } from 'react';
import CardBox from '../../components/CardBox';
import LayoutAuthenticated from '../../layouts/Authenticated';
import SectionMain from '../../components/SectionMain';
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
import { getPageTitle } from '../../config';
import axios from 'axios';
import BaseButton from '../../components/BaseButton';

const ImportWizard = () => {
  const [entities, setEntities] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchEntities = async () => {
      try {
        const response = await axios.get('/data_entities');
        setEntities(response.data.rows || []);
      } catch (error) {
        console.error('Failed to fetch entities', error);
      } finally {
        setLoading(false);
      }
    };
    fetchEntities();
  }, []);

  const getIcon = (code: string) => {
    switch (code) {
      case 'products': return mdiPackageVariantClosed;
      case 'customers': return mdiAccountGroupOutline;
      case 'suppliers': return mdiTruckOutline;
      case 'availability': return mdiWarehouse;
      default: return mdiFileUploadOutline;
    }
  };

  return (
    <>
      <Head>
        <title>{getPageTitle('Import Wizard')}</title>
      </Head>
      <SectionMain>
        <SectionTitleLineWithButton icon={mdiFileUploadOutline} title='Import Wizard' main>
          {''}
        </SectionTitleLineWithButton>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
          {loading ? (
            <p>Loading entities...</p>
          ) : (
            entities.map((entity: any) => (
              <CardBox key={entity.id} className="hover:shadow-lg transition-shadow border-2 border-transparent hover:border-indigo-500">
                <div className="flex flex-col items-center text-center p-4">
                  <div className="bg-indigo-100 p-4 rounded-full mb-4">
                    <svg viewBox="0 0 24 24" className="w-12 h-12 text-indigo-600">
                      <path fill="currentColor" d={getIcon(entity.code)} />
                    </svg>
                  </div>
                  <h3 className="text-xl font-bold mb-2">{entity.name}</h3>
                  <p className="text-gray-500 text-sm mb-4 h-10">{entity.description}</p>
                  <BaseButton
                    color="info"
                    label="Start Import"
                    className="w-full"
                    href={`/imports/upload?entityId=${entity.id}&code=${entity.code}`}
                  />
                </div>
              </CardBox>
            ))
          )}
        </div>

        {!loading && entities.length === 0 && (
          <CardBox>
            <div className="text-center py-12">
              <p className="text-gray-500 italic">No entities available for import. Please contact admin.</p>
            </div>
          </CardBox>
        )}
      </SectionMain>
    </>
  );
};

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

export default ImportWizard;
