import React, { useEffect, useState, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import clsx from 'clsx';
import { useTranslation } from 'react-i18next';
import { List, Button } from 'antd';
import type { Space, SpaceModalRef } from './types';
import SpaceModal from './components/SpaceModal';
import RbCard from '@/components/RbCard/Card'
import { getWorkspaces, switchWorkspace } from '@/api/workspaces'
import BodyWrapper from '@/components/Empty/BodyWrapper'
import Tag from '@/components/Tag'

const SpaceManagement: React.FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<Space[]>([]);
  const spaceModalRef = useRef<SpaceModalRef>(null);

  const loadMoreData = () => {
    setLoading(true);
    getWorkspaces()
      .then((res) => {
        const response = res as Space[];
        const results = Array.isArray(response) ? response : [];
        setData(results);
      })
      .catch(() => {
        console.error('Failed to load data');
      })
      .finally(() => {
        setLoading(false);
      });
  };

  useEffect(() => {
    loadMoreData();
  }, []);
  
  const handleCreate = () => {
    spaceModalRef.current?.handleOpen();
  }

  const handleJump = (id: string) => {
    switchWorkspace(id)
      .then(() => {
        localStorage.removeItem('user')
        navigate('/')
      })
  }
  return (
    <>
      <Button type="primary" className="rb:mb-[16px]" onClick={handleCreate}>
        {t('space.createSpace')}
      </Button>
      <BodyWrapper loading={loading} empty={data.length === 0}>
        <List
          grid={{ gutter: 16, column: 4 }}
          dataSource={data}
          renderItem={(item) => (
            <List.Item key={item.id}>
              <RbCard
                avatar={<div className="rb:w-[48px] rb:h-[48px] rb:rounded-[8px] rb:mr-[12px] rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
                  {item.name[0]}
                </div>}
                title={item.name}
                subTitle={<Tag className="rb:mt-[4px] rb:font-regular!" color={item.storage_type === 'rag' ? 'processing' : 'warning'}>{t(`space.${item.storage_type || 'neo4j'}`)}</Tag>}
              >
                <div className={clsx("rb:absolute rb:top-[-1px] rb:right-[-1px] rb:p-[2px_9px] rb:text-[#FFFFFF] rb:leading-[16px] rb:text-[12px] rb:font-regular rb:rounded-[0px_12px_0px_12px]", {
                  'rb:bg-[#369F21]': item.is_active,
                  'rb:bg-[#A8A9AA]': !item.is_active,
                })}>{item.is_active ? t('space.associated') : t('space.notAssociated')}</div>
                
                <Button type="primary" ghost block className="rb:mt-[40px]" onClick={() => handleJump(item.id)}>
                  {t('space.enterSpace')}
                </Button>
              </RbCard>
            </List.Item>
          )}
          className="rb:h-[calc(100vh-148px)] rb:overflow-y-auto rb:overflow-x-hidden"
        />
      </BodyWrapper>

      <SpaceModal
        ref={spaceModalRef}
        refresh={loadMoreData}
      />
    </>
  );
};

export default SpaceManagement;