import { useNavigation, useParams } from 'react-router';
import { useAppVersionStore } from '../store';
import { useShallow } from 'zustand/react/shallow';
import { useCallback, useEffect, useMemo, useState } from 'react';
import CloudUploadOutlined from '@ant-design/icons/CloudUploadOutlined';
import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
import FileOutlined from '@ant-design/icons/FileOutlined';
import LeftOutlined from '@ant-design/icons/LeftOutlined';
import LinkOutlined from '@ant-design/icons/LinkOutlined';
import PlusOutlined from '@ant-design/icons/PlusOutlined';
import { Tooltip } from '@mui/material';
import { isObjectNull } from '@/utils/is-null';
import { FileUpload } from '../modules/FileUpload';
import clsx from 'clsx';
import { message } from '@/modules/message';
import { useNewNavigate } from '@/modules';
import { Button } from '@mui/material';
import { Dialog, DialogContent, DialogTitle, ButtonGroup } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { IconButton } from '@kevisual/components/button/index.tsx';
import { useForm, Controller } from 'react-hook-form';
import { TextField } from '@mui/material';
import { pick } from 'lodash-es';
import { useAppDeleteModalStore, AppDeleteModal } from '../modules/AppDeleteModal';
import { toast } from 'react-toastify';
import { AIEditorLink } from './AIEditorLink';

const FormModal = () => {
  const { t } = useTranslation();
  const { control, handleSubmit, reset } = useForm();
  const containerStore = useAppVersionStore(
    useShallow((state) => {
      return {
        showEdit: state.showEdit,
        setShowEdit: state.setShowEdit,
        formData: state.formData,
        updateData: state.updateData,
      };
    }),
  );

  useEffect(() => {
    const open = containerStore.showEdit;
    if (open) {
      const isNull = isObjectNull(containerStore.formData);
      if (isNull) {
        reset({});
      } else {
        reset(containerStore.formData);
      }
    }
  }, [containerStore.showEdit]);

  const onFinish = async (values: any) => {
    const pickValues = pick(values, ['id', 'key', 'version']);
    containerStore.updateData(pickValues);
  };

  const onClose = () => {
    containerStore.setShowEdit(false);
    reset();
  };

  const isEdit = containerStore.formData.id;

  return (
    <Dialog
      open={containerStore.showEdit}
      onClose={() => containerStore.setShowEdit(false)}
      sx={{
        '& .MuiDialog-paper': {
          width: '800px',
        },
      }}>
      <DialogTitle>{isEdit ? 'Edit' : 'Add'}</DialogTitle>
      <DialogContent>
        <form className='flex flex-col gap-6 py-4' onSubmit={handleSubmit(onFinish)}>
          <Controller name='key' control={control} defaultValue='' render={({ field }) => <TextField label='key' {...field} disabled />} />
          <Controller name='version' control={control} defaultValue='' render={({ field }) => <TextField label='version' {...field} />} />
          <div>
            <Button type='submit' variant='contained' color='primary'>
              {t('Submit')}
            </Button>
            <Button className='ml-2' onClick={onClose}>
              {t('Cancel')}
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  );
};

export const AppVersionList = () => {
  const params = useParams();
  const appKey = params.appKey;
  const versionStore = useAppVersionStore(
    useShallow((state) => {
      return {
        list: state.list,
        getList: state.getList,
        key: state.key,
        setKey: state.setKey,
        setShowEdit: state.setShowEdit,
        formData: state.formData,
        setFormData: state.setFormData,
        deleteData: state.deleteData,
        publishVersion: state.publishVersion,
        app: state.app,
      };
    }),
  );
  const appDeleteModalStore = useAppDeleteModalStore(
    useShallow((state) => {
      return {
        onClickDelete: state.onClickDelete,
      };
    }),
  );
  const navigate = useNewNavigate();
  const [isUpload, setIsUpload] = useState(false);
  useEffect(() => {
    // fetch app version list
    if (appKey) {
      versionStore.setKey(appKey);
      versionStore.getList();
    }
  }, [appKey]);
  const appVersion = useMemo(() => {
    return versionStore.app?.version || '';
  }, [versionStore.app?.version]);
  return (
    <div className='w-full h-full flex bg-slate-100'>
      <div className='p-2 bg-white'>
        <IconButton
          onClick={() => {
            versionStore.setFormData({ key: appKey });
            versionStore.setShowEdit(true);
          }}>
          <PlusOutlined />
        </IconButton>
      </div>

      <div className='grow h-full relative'>
        <div className='absolute top-2 left-4'>
          <Tooltip title='返回' placement='bottom'>
            <IconButton
              variant='contained'
              onClick={() => {
                navigate('/app/edit/list');
              }}>
              <LeftOutlined />
            </IconButton>
          </Tooltip>
        </div>

        <div className='w-full h-full p-4 pt-12'>
          <div className='w-full h-full rounded-lg bg-white'>
            <div className='flex gap-2 flex-wrap p-4'>
              {versionStore.list.map((item, index) => {
                const isPublish = item.version === appVersion;
                const color = isPublish ? 'bg-green-500' : '';
                const isRunning = item.status === 'running';
                return (
                  <div className='card w-[300px]' key={index}>
                    <div className={'flex items-center justify-between'}>
                      {item.version}

                      <Tooltip title={isPublish ? 'published' : ''}>
                        <div className={clsx('ml-4 rounded-full w-4 h-4', color)}></div>
                      </Tooltip>
                    </div>
                    <div className='mt-4'>
                      <ButtonGroup
                        variant='contained'
                        color='primary'
                        sx={{ color: 'white', '& .MuiButton-root': { color: 'white', minWidth: '32px', width: '32px', height: '32px', padding: '6px' } }}>
                        {/* <Button
                          onClick={() => {
                            versionStore.setFormData(item);
                            versionStore.setShowEdit(true);
                          }}
                          icon={<EditOutlined />}
                        /> */}
                        <Tooltip title='Delete'>
                          <Button
                            onClick={(e) => {
                              appDeleteModalStore.onClickDelete('app-version', item);
                              e.stopPropagation();
                            }}>
                            <DeleteOutlined />
                          </Button>
                        </Tooltip>
                        <Tooltip title='使用当前版本，发布为此版本'>
                          <Button
                            onClick={() => {
                              versionStore.publishVersion({ id: item.id });
                            }}>
                            <CloudUploadOutlined />
                          </Button>
                        </Tooltip>
                        <Tooltip title={'To Test App'}>
                          <Button
                            onClick={() => {
                              if (isRunning) {
                                const link = new URL(`/test/${item.id}`, location.origin);
                                window.open(link.toString(), '_blank');
                              } else {
                                message.error('The app is not running');
                              }
                            }}>
                            <LinkOutlined />
                          </Button>
                        </Tooltip>
                        <AIEditorLink pathname={item.key + '/' + item.version} />
                        <Tooltip title='文件管理'>
                          <Button
                            onClick={() => {
                              versionStore.setFormData(item);
                              setIsUpload(true);
                            }}>
                            <FileOutlined />
                          </Button>
                        </Tooltip>
                      </ButtonGroup>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
      <div className='shark h-full'>
        {isUpload && (
          <div className='bg-white p-2 w-[600px] h-full flex flex-col'>
            <div className='header flex items-center gap-2'>
              <Tooltip title='返回'>
                <IconButton
                  onClick={() => {
                    setIsUpload(false);
                  }}>
                  <LeftOutlined />
                </IconButton>
              </Tooltip>
              <div className='font-bold'>{versionStore.key}</div>
            </div>
            <AppVersionFile />
          </div>
        )}
      </div>
      <FormModal />
      <AppDeleteModal />
    </div>
  );
};
export const AppVersionFile = () => {
  const versionStore = useAppVersionStore(
    useShallow((state) => {
      return {
        formData: state.formData,
        detectVersionList: state.detectVersionList,
      };
    }),
  );
  const versionFiles = useMemo(() => {
    if (!versionStore.formData?.data) return [];
    const files = versionStore.formData.data.files || [];
    return files;
  }, [versionStore.formData]);
  const onDetect = useCallback(async () => {
    console.log('formData', versionStore.formData);
    if (!versionStore.formData.key || !versionStore.formData.version) {
      toast.error('请先选择应用和版本');
      return;
    }
    const res = await versionStore.detectVersionList({
      appKey: versionStore.formData.key,
      version: versionStore.formData.version,
    });
    console.log('res', res);
    if (res.code === 200) {
      toast.success('检测实际文件成功');
    } else {
      toast.error(res.message || 'Detect failed');
    }
  }, [versionStore.formData]);
  const { t } = useTranslation();
  return (
    <>
      <div>version: {versionStore.formData.version}</div>
      <div className='border border-gray-200 rounded-md my-2 grow overflow-hidden'>
        <div className='flex gap-2 items-center border-b border-b-gray-200 py-2 px-2'>
          Files
          <FileUpload />
          <Tooltip title='从同文件目录下检测已经上传的文件内容'>
            <Button onClick={onDetect}>{t('Detect Files')}</Button>
          </Tooltip>
        </div>
        <div
          className='mt-2 '
          style={{
            height: 'calc(100% - 40px)',
          }}>
          <div className='h-full overflow-auto mb-4 pb-8 scrollbar'>
            {versionFiles.map((file, index) => {
              const prefix = versionStore.formData.key + '/' + versionStore.formData.version + '/';
              const _path = file.path || '';
              const path = _path.replace(prefix, '');
              return (
                <div className='flex gap-2 px-4 py-2 border-b border-b-gray-200' key={index}>
                  {/* <div className='w-[100px] truncate'>{file.name}</div> */}
                  <div>
                    <FileOutlined />
                  </div>
                  <div>{path}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </>
  );
};