sozsoft-platform/ui/src/views/developerKit/ComponentEditor.tsx

import React, { useState, useEffect } from 'react'
import { useParams, useNavigate, Link } from 'react-router-dom'
import { useComponents } from '../../contexts/ComponentContext'
import { FaRegSave, FaArrowLeft, FaSync, FaCode, FaEye, FaCog } from 'react-icons/fa'
import ComponentPreview from '../../components/componentEditor/ComponentPreview'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { Formik, Form, Field } from 'formik'
import * as Yup from 'yup'
import { Button, Checkbox, FormContainer, FormItem, Input } from '@/components/ui'

// Validation schema
const validationSchema = Yup.object({
  name: Yup.string().required(),
  routePath: Yup.string().required().matches(/^\//, 'Route path must start with /'),
  description: Yup.string(),
  dependencies: Yup.array().of(Yup.string()),
  code: Yup.string(),
  isActive: Yup.boolean(),
})

const ComponentEditor: React.FC = () => {
  const { id } = useParams()
  const navigate = useNavigate()
  const { translate } = useLocalization()

  const { getComponent, addComponent, updateComponent } = useComponents()

  const [isLoaded, setIsLoaded] = useState(false)

  const isEditing = !!id

  // Initial values for Formik
  const [initialValues, setInitialValues] = useState({
    name: '',
    routePath: '',
    description: '',
    dependencies: [] as string[],
    code: '',
    isActive: true,
  })

  // Load existing component data - sadece edit modunda
  useEffect(() => {
    if (isEditing && id && !isLoaded) {
      const component = getComponent(id)
      if (component) {
        // Parse dependencies from JSON string
        let deps: string[] = []
        try {
          deps = component.dependencies ? JSON.parse(component.dependencies) : []
          deps = Array.isArray(deps) ? deps : []
        } catch {
          deps = []
        }

        const values = {
          name: component.name,
          routePath: component.routePath,
          description: component.description || '',
          dependencies: deps,
          code: component.code,
          isActive: component.isActive,
        }

        setInitialValues(values)
        setIsLoaded(true)
      }
    } else if (!isEditing && !isLoaded) {
      // Yeni komponent için boş başla - TEMPLATE YOK
      setIsLoaded(true)
    }
  }, [id, isEditing, getComponent, isLoaded])

  // Generate component template based on name
  const generateComponentTemplate = (componentName: string): string => {
    if (!componentName.trim()) return ''

    // Convert component name to PascalCase if not already
    const pascalCaseName = componentName.charAt(0).toUpperCase() + componentName.slice(1)

    return `const ${pascalCaseName}Component = ({
  title = "${pascalCaseName}"
}) => {
  return (
    <span>{title}</span>
  );
};

export default ${pascalCaseName}Component;`
  }

  const handleSubmit = async (values: typeof initialValues, { setSubmitting }: any) => {
    if (!values.name.trim()) {
      alert('Please enter a component name')
      setSubmitting(false)
      return
    }

    try {
      const componentData = {
        name: values.name.trim(),
        routePath: values.routePath.trim(),
        description: values.description.trim(),
        dependencies: JSON.stringify(values.dependencies), // Serialize dependencies to JSON string
        code: values.code.trim(),
        isActive: values.isActive,
      }

      if (isEditing && id) {
        await updateComponent(id, componentData)
      } else {
        await addComponent(componentData)
      }

      navigate(ROUTES_ENUM.protected.saas.developerKit.components)
    } catch (error) {
      console.error('Error saving component:', error)
      alert('Failed to save component. Please try again.')
    } finally {
      setSubmitting(false)
    }
  }

  // Loading state - komponent yüklenene kadar bekle
  if (isEditing && !isLoaded) {
    return (
      <div className="h-screen flex items-center justify-center">
        <div className="text-center">
          <FaSync className="w-8 h-8 text-blue-500 animate-spin mx-auto mb-3" />
          <p className="text-slate-600">{translate('::App.Loading')}</p>
        </div>
      </div>
    )
  }

  return (
    <Formik
      enableReinitialize
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={handleSubmit}
    >
      {({ values, touched, errors, isSubmitting, setFieldValue, submitForm, isValid }) => {
        return (
          <>
            {/* Enhanced Header */}
            <div className="bg-white dark:bg-gray-900 shadow-lg border-b border-slate-200 dark:border-gray-700 sticky top-0 z-10">
              <div className="px-1 py-3">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-4">
                    <div className="flex items-center gap-3 pl-3">
                      <div className="bg-gradient-to-r from-blue-500 to-purple-600 p-2 rounded-lg">
                        <FaCode className="w-5 h-5 text-white" />
                      </div>
                      <div>
                        <h1 className="font-semibold text-slate-800 dark:text-gray-100 text-sm leading-tight">
                          {isEditing
                            ? `${translate('::App.DeveloperKit.ComponentEditor.Title.Edit')} - ${values.name || initialValues.name || 'Component'}`
                            : translate('::App.DeveloperKit.ComponentEditor.Title.Create')}
                        </h1>
                        <p className="text-xs text-slate-500 dark:text-gray-400 leading-tight">
                          {isEditing
                            ? 'Modify your React component'
                            : 'Create a new React component'}
                        </p>
                      </div>
                    </div>
                  </div>

                  {/* Save Button in Header */}
                  <div className="flex items-center gap-3 pr-3">
                    <Link
                      to={ROUTES_ENUM.protected.saas.developerKit.components}
                      className="flex items-center gap-2 text-slate-600 dark:text-gray-300 text-black dark:text-white px-4 py-2 rounded-lg hover:text-slate-700 dark:hover:text-gray-100 transition-colors"
                    >
                      <FaArrowLeft className="w-3.5 h-3.5" />
                      {translate('::App.DeveloperKit.ComponentEditor.Back')}
                    </Link>
                    <div className="h-6 w-px bg-slate-300 dark:bg-gray-700"></div>

                    <Button
                      type="button"
                      variant="solid"
                      size="sm"
                      disabled={isSubmitting || !values.name.trim() || !isValid}
                      className="flex items-center gap-2 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 dark:hover:bg-emerald-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                      onClick={submitForm}
                    >
                      <FaRegSave className="w-4 h-4" />
                      {isSubmitting
                        ? translate('::App.DeveloperKit.ComponentEditor.Saving')
                        : translate('::App.DeveloperKit.ComponentEditor.Save')}
                    </Button>
                  </div>
                </div>
              </div>
            </div>

            <Form className="grid grid-cols-1 lg:grid-cols-3 gap-4 py-3">
              <div className="space-y-3 col-span-1">
                <div className="bg-white dark:bg-gray-900 rounded-lg shadow-sm border border-slate-200 dark:border-gray-700 p-3">
                  <div className="flex items-center gap-2 mb-3">
                    <div className="bg-blue-100 dark:bg-blue-900/20 p-1.5 rounded-lg">
                      <FaCog className="w-4 h-4 text-blue-600 dark:text-blue-400" />
                    </div>
                    <h2 className="text-base font-semibold text-slate-900 dark:text-gray-100">
                      Component Settings
                    </h2>
                  </div>

                  <FormContainer size="sm">
                    <FormItem
                      label={translate('::App.DeveloperKit.ComponentEditor.ComponentName')}
                      invalid={!!(errors.name && touched.name)}
                      errorMessage={errors.name as string}
                    >
                      <Field
                        autoFocus
                        name="name"
                        type="text"
                        component={Input}
                        placeholder="e.g., Button, Card, Modal"
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                          const newName = e.target.value
                          setFieldValue('name', newName)

                          // Auto-generate code template if this is a new component (not editing)
                          // and only if the code field is empty or contains the default template
                          if (!isEditing && newName.trim()) {
                            const currentCode = values.code.trim()
                            const isCodeEmpty = !currentCode
                            const isCodeDefaultTemplate =
                              currentCode.includes('Component = ({') &&
                              currentCode.includes('export default') &&
                              currentCode.includes('<span>{title}</span>')

                            if (isCodeEmpty || isCodeDefaultTemplate) {
                              const template = generateComponentTemplate(newName)
                              setFieldValue('code', template)
                            }
                          }
                        }}
                      />
                    </FormItem>

                    <FormItem
                      label="Route Path"
                      invalid={!!(errors.routePath && touched.routePath)}
                      errorMessage={errors.routePath as string}
                    >
                      <Field
                        name="routePath"
                        type="text"
                        component={Input}
                        placeholder="e.g., /roles or /admin/reports"
                      />
                    </FormItem>

                    <FormItem
                      label={translate('::ListForms.ListFormEdit.DetailsDescription')}
                      invalid={!!(errors.description && touched.description)}
                      errorMessage={errors.description as string}
                    >
                      <Field
                        name="description"
                        type="text"
                        component={Input}
                        placeholder="Brief description of the component"
                      />
                    </FormItem>

                    <FormItem
                      label={translate('::App.Platform.Code')}
                      invalid={!!(errors.code && touched.code)}
                      errorMessage={errors.code as string}
                    >
                      <Field
                        name="code"
                        type="text"
                        component={Input}
                        placeholder="React component code goes here"
                        textArea={true}
                        rows={10}
                        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
                          setFieldValue('code', e.target.value)
                        }}
                      />
                    </FormItem>

                    <FormItem
                      label={translate('::App.DeveloperKit.ComponentEditor.Dependencies')}
                      invalid={!!(errors.dependencies && touched.dependencies)}
                      errorMessage={errors.dependencies as string}
                    >
                      <Field name="dependencies">
                        {() => (
                          <Input
                            type="text"
                            value={(values.dependencies || []).join(', ')}
                            placeholder="MyComponent, AnotherComponent, etc."
                            onChange={(e) =>
                              setFieldValue(
                                'dependencies',
                                e.target.value
                                  .split(',')
                                  .map((s) => s.trim())
                                  .filter(Boolean),
                              )
                            }
                          />
                        )}
                      </Field>
                    </FormItem>

                    <FormItem label={translate('::App.Status.Active')}>
                      <Field name="isActive" component={Checkbox} />
                    </FormItem>
                  </FormContainer>
                </div>
              </div>

              {/* Right Side - Preview */}
              <div className="space-y-4 col-span-2">
                {/* Component Preview */}
                <div className="bg-white dark:bg-gray-900 rounded-lg shadow-sm border border-slate-200 dark:border-gray-700 p-3">
                  <div className="flex items-center gap-2 mb-3">
                    <div className="bg-purple-100 dark:bg-purple-900/20 p-1.5 rounded-lg">
                      <FaEye className="w-4 h-4 text-purple-600 dark:text-purple-400" />
                    </div>
                    <h2 className="text-base font-semibold text-slate-900 dark:text-gray-100">
                      Preview
                    </h2>
                  </div>
                  <ComponentPreview componentName={values.name} />
                </div>
              </div>
            </Form>
          </>
        )
      }}
    </Formik>
  )
}

export default ComponentEditor