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'
import { generateDesignerCode } from '@/components/visualDesigner/codeGenerator'
import {
  createDesignerId,
  createEmptyDesignerDocument,
  type DesignerDocument,
} from '@/components/visualDesigner/types'

// 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()),
  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[],
    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,
          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])

  const createDefaultVisualDocument = (componentName: string): DesignerDocument => {
    const document = createEmptyDesignerDocument('visual')
    document.nodes = [
      {
        id: createDesignerId(),
        type: 'span',
        kind: 'html',
        props: { children: componentName.trim() },
        events: {},
        bindings: {},
        children: [],
      },
    ]
    return document
  }

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

    try {
      const existingComponent = isEditing && id ? getComponent(id) : undefined
      const defaultDocument = createDefaultVisualDocument(values.name)
      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: existingComponent
          ? existingComponent.code
          : generateDesignerCode(values.name, defaultDocument),
        props: existingComponent
          ? existingComponent.props
          : JSON.stringify({ visualDesigner: defaultDocument }),
        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('::Saving') : translate('::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>) => {
                          setFieldValue('name', e.target.value)
                        }}
                      />
                    </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.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