import { ModelTreeSelectFormField } from '@/components/model-tree-select';
import { SelectWithSearch } from '@/components/originui/select-with-search';
import { RAGFlowFormItem } from '@/components/ragflow-form';
import { SwitchFormField } from '@/components/switch-fom-field';
import { Input } from '@/components/ui/input';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Textarea } from '@/components/ui/textarea';
import { ICompilationTemplateBuiltin } from '@/interfaces/database/compilation-template';
import { startCase } from 'lodash';
import { ReactNode, useCallback } from 'react';
import { UseFormReturn, useWatch } from 'react-hook-form';
import { useTranslation } from 'react-i18next';

import { CompilationTemplateKind } from '@/constants/compilation';
import { TreeTemplateFields } from './tree-template-fields';
import { useTemplateKindChange } from '../hooks/use-template-kind-change';
import { FormSchemaType } from '../schema';
import { SectionTitleKeyMap } from '../constant';

import { useActiveSectionTab } from '../hooks/use-active-section-tab';
import { useAvailableKindOptions } from '../hooks/use-available-kind-options';
import { useBuiltinTemplate } from '../hooks/use-builtin-template';
import { useFieldArrayHandlers } from '../hooks/use-field-array-handlers';
import { useFieldModal } from '../hooks/use-field-modal';
import { useTemplatePreviewSheets } from '../hooks/use-template-preview-sheets';
import { useTemplateSectionData } from '../hooks/use-template-section-data';

import { AddFieldModal } from './add-field-modal';
import { SectionFieldGrid } from './section-field-grid';
import { TemplatePreviewHeader } from './template-preview-header';

type TemplateConfigurationProps = {
  form: UseFormReturn<FormSchemaType>;
  builtins: ICompilationTemplateBuiltin[];
  kindOptions: { label: string; value: string }[];
  selectedTemplateIndex: number;
  children?: ReactNode;
};

export function TemplateConfiguration({
  form,
  builtins,
  kindOptions,
  selectedTemplateIndex,
  children,
}: TemplateConfigurationProps) {
  const { t } = useTranslation();

  const {
    addFieldModalOpen,
    editingFieldIndex,
    setEditingFieldIndex,
    handleModalOpenChange,
    handleOpenAddField,
    handleOpenEditField,
  } = useFieldModal();

  const kind = useWatch({
    control: form.control,
    name: `templates.${selectedTemplateIndex}.kind`,
  });
  const rechunk = useWatch({
    control: form.control,
    name: `templates.${selectedTemplateIndex}.config.rechunk`,
  });

  const availableKindOptions = useAvailableKindOptions(
    form,
    kindOptions,
    selectedTemplateIndex,
  );

  const { builtinTemplate, sectionNames } = useBuiltinTemplate(builtins, kind);

  const {
    jsonSheetOpen,
    setJsonSheetOpen,
    workflowSheetOpen,
    setWorkflowSheetOpen,
    allFormValues,
    templateName,
  } = useTemplatePreviewSheets(form, selectedTemplateIndex);

  const { activeSectionTab, setActiveSectionTab } =
    useActiveSectionTab(sectionNames);

  const handleKindChange = useTemplateKindChange({
    form,
    index: selectedTemplateIndex,
    builtins,
  });

  const { activeFieldsPath, builtinSection, editingField } =
    useTemplateSectionData(
      form,
      selectedTemplateIndex,
      activeSectionTab,
      builtinTemplate,
      editingFieldIndex,
    );

  const { handleAddField } = useFieldArrayHandlers(
    form,
    activeFieldsPath,
    editingFieldIndex,
    setEditingFieldIndex,
  );

  const renderSectionTabs = useCallback(
    (sectionName: string) => {
      return (
        sectionName === activeSectionTab && (
          <SectionFieldGrid
            key={`${activeFieldsPath}-${kind}`}
            fieldsPath={activeFieldsPath}
            sectionName={sectionName}
            onOpenAddField={handleOpenAddField}
            onEditField={handleOpenEditField}
          />
        )
      );
    },
    [
      activeFieldsPath,
      activeSectionTab,
      kind,
      handleOpenAddField,
      handleOpenEditField,
    ],
  );

  return (
    <>
      <TemplatePreviewHeader
        templateName={templateName}
        jsonSheetOpen={jsonSheetOpen}
        onJsonSheetOpenChange={setJsonSheetOpen}
        workflowSheetOpen={workflowSheetOpen}
        onWorkflowSheetOpenChange={setWorkflowSheetOpen}
        allFormValues={allFormValues}
      />
      <div className="flex-1 min-h-0 overflow-y-auto p-5">
        <div className="max-w-4xl mx-auto space-y-6">
          <RAGFlowFormItem
            name={`templates.${selectedTemplateIndex}.name`}
            label={t('setting.templateName')}
            required
          >
            <Input placeholder={t('common.namePlaceholder')} />
          </RAGFlowFormItem>

          <RAGFlowFormItem
            name={`templates.${selectedTemplateIndex}.description`}
            label={t('setting.templateDescription')}
          >
            <Textarea
              placeholder={t('common.descriptionPlaceholder')}
              rows={2}
              resize="vertical"
            />
          </RAGFlowFormItem>

          <ModelTreeSelectFormField
            name={`templates.${selectedTemplateIndex}.llm_id`}
            label={t('setting.llmForExtraction')}
            required
          />

          <RAGFlowFormItem
            name={`templates.${selectedTemplateIndex}.kind`}
            label={t('knowledgeCompilation.builtinTemplates')}
            required
          >
            {(field) => (
              <SelectWithSearch
                value={field.value}
                onChange={(value) => handleKindChange(field, value)}
                disabled={field.disabled}
                options={availableKindOptions}
                placeholder={t('common.selectPlaceholder')}
              />
            )}
          </RAGFlowFormItem>

          <RAGFlowFormItem
            name={`templates.${selectedTemplateIndex}.config.global_rules`}
            label={t('setting.globalRules')}
          >
            <Textarea
              placeholder={t('setting.globalRulesPlaceholder')}
              rows={8}
              resize="vertical"
            />
          </RAGFlowFormItem>

          {kind === CompilationTemplateKind.Tree ? (
            <TreeTemplateFields index={selectedTemplateIndex} />
          ) : (
            <>
              {kind !== CompilationTemplateKind.Artifacts && (
                <>
                  <SwitchFormField
                    name={`templates.${selectedTemplateIndex}.config.rechunk`}
                    label={t('setting.rechunkInput')}
                    tooltip={t('setting.rechunkInputTip')}
                    vertical={false}
                  />
                  {rechunk && (
                    <RAGFlowFormItem
                      name={`templates.${selectedTemplateIndex}.config.rechunk_rules`}
                      label={t('setting.rechunkRules')}
                    >
                      <Textarea
                        placeholder={t('setting.rechunkRulesPlaceholder')}
                        rows={6}
                        resize="vertical"
                      />
                    </RAGFlowFormItem>
                  )}
                </>
              )}
              {sectionNames.length > 0 && activeSectionTab && (
                <Tabs
                  value={activeSectionTab}
                  onValueChange={setActiveSectionTab}
                  className="w-full"
                >
                  <TabsList className="w-full justify-start">
                    {sectionNames.map((sectionName) => (
                      <TabsTrigger
                        key={sectionName}
                        value={sectionName}
                        className="flex-1"
                      >
                        {t(
                          SectionTitleKeyMap[sectionName] ??
                            startCase(sectionName),
                        )}
                      </TabsTrigger>
                    ))}
                  </TabsList>

                  {sectionNames.map((sectionName) => (
                    <TabsContent
                      key={sectionName}
                      value={sectionName}
                      className="mt-4"
                    >
                      {renderSectionTabs(sectionName)}
                    </TabsContent>
                  ))}
                </Tabs>
              )}
            </>
          )}

          {children}
        </div>
      </div>

      <AddFieldModal
        open={addFieldModalOpen}
        onOpenChange={handleModalOpenChange}
        sectionName={activeSectionTab}
        builtinSection={builtinSection}
        initialField={editingField}
        onAdd={handleAddField}
      />
    </>
  );
}
