import { useState } from 'react'
import SchemaSelector from './mutation/SchemaSelector'
import MutationEditor from './mutation/MutationEditor'
import ResultViewer from './mutation/ResultViewer'
import TextField from '../form/TextField'
import { mutationClient } from '../../api'
import { MUTATION_TYPE_API_MAP } from '../../constants/ui.js'
// Removed hook dependencies - using Redux state management instead (TASK-003)
// Temporarily bypass constants to break circular dependency
const BUTTON_TEXT = { executeMutation: 'Execute Mutation', confirm: 'Confirm', cancel: 'Cancel' };
const FORM_LABELS = { schema: 'Schema', operationType: 'Operation Type', rangeKeyFilter: 'Range Key Filter', rangeKeyRequired: 'Range key is required', rangeKeyOptional: 'Range key is optional for delete operations' };
const RANGE_SCHEMA_CONFIG = { FIELD_TYPE: 'Range', MUTATION_WRAPPER_KEY: 'value', label: 'Range Key', backgroundColor: 'bg-blue-50' };
const VALIDATION_MESSAGES = { RANGE_KEY_REQUIRED: 'Range key is required for range schema mutations', RANGE_KEY_EMPTY: 'Range key cannot be empty' };
import {
  isRangeSchema,
  formatRangeMutation,
  validateRangeKey,
  getRangeKey
} from '../../utils/rangeSchemaHelpers'
import { useAppSelector } from '../../store/hooks'
import { selectApprovedSchemas } from '../../store/schemaSlice'
import { Buffer } from 'buffer'

function MutationTab({ onResult }) {
  // Redux state - TASK-003: Use approved schemas for SCHEMA-002 compliance
  const schemas = useAppSelector(selectApprovedSchemas)
  const _authState = useAppSelector(state => state.auth)
  const [selectedSchema, setSelectedSchema] = useState('')
  const [mutationData, setMutationData] = useState({})
  const [mutationType, setMutationType] = useState('Insert')
  const [result, setResult] = useState(null)
  const [rangeKeyValue, setRangeKeyValue] = useState('')

  // Local validation state - replaced hook with Redux state management (TASK-003)
  const [errors, setErrors] = useState({})

  const handleSchemaChange = (schemaName) => {
    setSelectedSchema(schemaName)
    setMutationData({})
    setMutationType('Insert')
    setRangeKeyValue('')
  }

  const handleFieldChange = (fieldName, value) => {
    setMutationData(prev => ({ ...prev, [fieldName]: value }))
  }

  const _handleRangeKeyChange = (e) => {
    const value = e.target.value
    setRangeKeyValue(value)
    
    // Simple local validation - replaced hook with Redux state management (TASK-003)
    const selectedSchemaObj = schemas.find(s => s.name === selectedSchema)
    if (selectedSchemaObj && isRangeSchema(selectedSchemaObj)) {
      const error = validateRangeKey(value, mutationType !== 'Delete')
      setErrors(prev => ({ ...prev, rangeKey: error }))
    }
  }

  const handleSubmit = async (e) => {
    e.preventDefault()
    if (!selectedSchema) return
    
    const selectedSchemaObj = schemas.find(s => s.name === selectedSchema)
    const normalizedMutationType = mutationType
      ? (MUTATION_TYPE_API_MAP[mutationType] || mutationType.toLowerCase())
      : ''
    if (!normalizedMutationType) {
      return
    }
    let mutation

    // Backend handles all validation
    if (isRangeSchema(selectedSchemaObj)) {
      mutation = formatRangeMutation(selectedSchemaObj, mutationType, rangeKeyValue, mutationData)
    } else {
      mutation = {
        type: 'mutation',
        schema: selectedSchema,
        mutation_type: normalizedMutationType,
        fields_and_values: mutationType === 'Delete' ? {} : mutationData,
        key_value: { hash: null, range: null }
      }
    }

    try {
      // Send the mutation directly to the API (no signing required)
      const response = await mutationClient.executeMutation(mutation)
      
      if (!response.success) {
        throw new Error(response.error || 'Mutation failed')
      }
      
      const data = response
      
      // Note: Removed response.ok check since response is ApiResponse, not fetch Response
      // The API client already handles HTTP errors and the response.success check above handles failures
      
      setResult(data)
      onResult(data)
      if (data.success) {
        setMutationData({})
        setRangeKeyValue('')
      }
    } catch (error) {
      const errData = { error: `Network error: ${error.message}`, details: error }
      setResult(errData)
      onResult(errData)
    }
  }

  const selectedSchemaObj = selectedSchema ? schemas.find(s => s.name === selectedSchema) : null
  const isCurrentSchemaRangeSchema = selectedSchemaObj ? isRangeSchema(selectedSchemaObj) : false
  const rangeKey = selectedSchemaObj ? getRangeKey(selectedSchemaObj) : null
  
  // Convert declarative schema fields array to object format for MutationEditor
  // For range schemas, filter out the range key (it's shown separately in Range Schema Configuration)
  const getFieldsForMutation = () => {
    if (!selectedSchemaObj || !Array.isArray(selectedSchemaObj.fields)) return {}
    
    const fieldsToShow = isCurrentSchemaRangeSchema 
      ? selectedSchemaObj.fields.filter(field => field !== rangeKey)
      : selectedSchemaObj.fields
    
    return fieldsToShow.reduce((acc, fieldName) => {
      acc[fieldName] = {}
      return acc
    }, {})
  }
  
  const selectedSchemaFields = getFieldsForMutation()

  const isMutationDisabled =
    !selectedSchema ||
    !mutationType ||
    (mutationType !== 'Delete' && Object.keys(mutationData).length === 0) ||
    (isCurrentSchemaRangeSchema && mutationType !== 'Delete' && !rangeKeyValue.trim())

  return (
    <div className="p-6">
      <form onSubmit={handleSubmit} className="space-y-6">
        <SchemaSelector
          selectedSchema={selectedSchema}
          mutationType={mutationType}
          onSchemaChange={handleSchemaChange}
          onTypeChange={setMutationType}
        />

        {selectedSchema && isCurrentSchemaRangeSchema && (
          <div className={`${RANGE_SCHEMA_CONFIG.backgroundColor} rounded-lg p-4`}>
            <h3 className="text-lg font-medium text-gray-900 mb-4">Range Schema Configuration</h3>
            <TextField
              name="rangeKey"
              label={`${rangeKey} (${RANGE_SCHEMA_CONFIG.label})`}
              value={rangeKeyValue}
              onChange={setRangeKeyValue}
              placeholder={`Enter ${rangeKey} value`}
              required={mutationType !== 'Delete'}
              error={errors.rangeKey}
              helpText={
                mutationType !== 'Delete'
                  ? FORM_LABELS.rangeKeyRequired
                  : FORM_LABELS.rangeKeyOptional
              }
              debounced={true}
            />
          </div>
        )}

        {selectedSchema && (
          <MutationEditor
            fields={selectedSchemaFields}
            mutationType={mutationType}
            mutationData={mutationData}
            onFieldChange={handleFieldChange}
            isRangeSchema={isCurrentSchemaRangeSchema}
          />
        )}

        <div className="flex justify-end pt-4">
          <button
            type="submit"
            className={`inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white ${
              isMutationDisabled
                ? 'bg-gray-300 cursor-not-allowed'
                : 'bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary'
            }`}
            disabled={isMutationDisabled}
          >
            {BUTTON_TEXT.executeMutation}
          </button>
        </div>
      </form>

      <ResultViewer result={result} />
    </div>
  )
}

export default MutationTab
