import { useEffect, useRef, useState } from 'react';
import { Form } from 'antd';
import { useNavigate, useParams } from 'react-router-dom';
import { App as AntApp } from 'antd';
import SkillEditor from '../../components/SkillEditor';
import { useAgentEditor } from './hooks/useAgentEditor';
import Header from './components/Header';
import PromptEditor from './components/PromptEditor';
import CapabilitySettings from './components/CapabilitySettings';
import PreviewPane from './components/PreviewPane';
import InitModal from './components/InitModal';
import AvatarSelector from './components/AvatarSelector';

export default function AgentEditor() {
  const { id } = useParams();
  const isNew = !id;
  const navigate = useNavigate();
  const { message } = AntApp.useApp();
  const [form] = Form.useForm();

  const {
    agent,
    saving,
    teams,
    models,
    autoSaveStatus,
    initModalOpen,
    setInitModalOpen,
    selectedAvatar,
    setSelectedAvatar,
    avatarSelectorOpen,
    setAvatarSelectorOpen,
    avatarUploading,
    agentName,
    setAgentName,
    skillEditorOpen,
    setSkillEditorOpen,
    editingSkillId,
    setEditingSkillId,
    refresh,
    handleInitConfirm,
    handleSave,
    beforeUploadKnowledge,
    beforeUploadInitAvatar,
    beforeUploadEditAvatar,
    handleAvatarSelect,
    handleDeleteKnowledge,
    liveAgent,
    currentName,
    markDirty,
  } = useAgentEditor({ id, isNew, form, message, navigate });

  return (
    <>
      <div className="fixed inset-0 flex flex-col bg-white z-100 agent-editor-shell" style={{ background: 'var(--color-bg)' }}>
        <Header
          isNew={isNew}
          currentName={currentName}
          navigate={navigate}
          autoSaveStatus={autoSaveStatus}
          saving={saving}
          onSave={handleSave}
        />

        <div className="flex-1 overflow-hidden agent-editor-workbench" style={{ background: 'var(--color-bg)' }}>
          <PromptEditor form={form} markDirty={markDirty} />
          <CapabilitySettings
            form={form}
            agent={agent}
            teams={teams}
            models={models}
            currentName={currentName}
            agentName={agentName}
            selectedAvatar={agent?.avatar || selectedAvatar}
            setAvatarSelectorOpen={setAvatarSelectorOpen}
            beforeUploadKnowledge={beforeUploadKnowledge}
            onDeleteKnowledge={handleDeleteKnowledge}
            markDirty={markDirty}
          />
          <PreviewPane liveAgent={liveAgent} agentId={id} />
        </div>

        {!isNew && (
          <SkillEditor
            open={skillEditorOpen}
            agentId={id!}
            skillId={editingSkillId}
            onClose={() => setSkillEditorOpen(false)}
            onSaved={refresh}
          />
        )}
      </div>

      <InitModal
        open={initModalOpen}
        onCancel={() => navigate('/agents')}
        onConfirm={handleInitConfirm}
        avatarUploading={avatarUploading}
        selectedAvatar={selectedAvatar}
        setSelectedAvatar={setSelectedAvatar}
        agentName={agentName}
        setAgentName={setAgentName}
        saving={saving}
        beforeUploadInitAvatar={beforeUploadInitAvatar}
      />

      <AvatarSelector
        open={avatarSelectorOpen}
        onCancel={() => setAvatarSelectorOpen(false)}
        agent={agent}
        avatarUploading={avatarUploading}
        beforeUploadEditAvatar={beforeUploadEditAvatar}
        onAvatarSelect={handleAvatarSelect}
      />
    </>
  );
}
